May 18, 2018 / #js #nodejs #stack #vuejs #webapp

Rapid webapp fejlesztés II.

Elöljáróban

Gyakorlatilag az egyetemi éveim óta Java vonalon mozgok. Munkám során is ebben írtam mindent, ami szerveroldali és nem mini szkript, ami Bash-al megoldható. Az elmúlt 1-1.5 évben léptem tovább Kotlin-ra, ami szintén JVM vonal ugye, de felgyorsítja és kényelmesebbé teszi a fejlesztést.

Leginkább crawlereket fejlesztek, de emellett gyakran webalkalmazásokat is készítenem kell. Ezeket eddig Spring Boot-ra építettem, és különféle template engine-ekkel dolgoztam: kezdetben Freemarker-rel, majd utána még 3-4-et kipróbáltam a projektek során.

A webapp fejlesztéshez persze párosult frontend tákolás is. Sok tapasztalatot gyűjtöttem CSS-ben és JS-ben, előbbinél a Bootstrap valamint a LESS/SASS, utóbbinál a KnockoutJS megismerése és használatba vétele volt mérföldkő.

Mindezekről egyszer már írtam pár éve.

Viszont miközben jól elvoltam Spring Boot-tal, Kotlin-nal és Knockout-tal, elrohantak mellettem a frontend technológiák, ES6, TypeScript, Node JS, React, Angular, Grunt, Gulp és társaik… ezekkel sajnos le vagyok maradva.

De már nem is annyira! 😀

Vue

A minap kaptam egy olyan feladatot, hogy tákoljak össze egy kísérleti admin felületet egy kis adatbázishoz. Nem kell jól kinéznie, az a cél, hogy interaktívan elő tudják szűrni a sorokat és azok bizonyos kombinációit. Kéne bele CRUD, meg minimális értékelési lehetőség is (+/-).

Azt elég hamar eldöntöttem, hogy nem akarok template engine-ekkel időt vesztegetni, egy egyszerű REST API-t csinálok, és a kliensoldal sima HTML+JS lesz, AJAX hívásokkal.

A frontend megvalósításához a Vue-t hívtam segítségül, amit pár hónapja ismertem meg. Egyből beleszerettem, sokkal kényelmesebb a Knockout-nál, nem kell observable izékkel szórakozni, a view model is szépen strukturált, a HTML attribútumok barátságosak. Egy baja van szegénynek, hogy régebbi böngészőkön nem megy, ellentétben a Knockout-tal.

Node

Már nem is tudom hogyan, de a backend kapcsán bevillant egy gondolat: “Mi lenne, ha megpróbálnám Node-dal?”. Ami meglepő, mert sosem használtam még ezelőtt. Legutóbb pár hónapja merült fel egy adatvizualizációs klubban, hogy majd összepattintanak egy API-t Node-ban egy adatbázis elé - ez ragadhatott meg bennem.

Felkerekedtem és elég hamar ráakadtam erre a tutorial-ra: Building REST API in the blink of an eye. Végigolvastam, elképedtem, majd újra átnéztem. Gyakorlatilag 30 sorból épít egy mini webappot, ami lekérdez egy adatbázisból.

Elkezdtem reprodukálni a dolgot, hogy lássam működés közben, és így megismertem a technológiákat. A webapp keretét az ExpressJS adja, és gyakorlatilag a request-eket feldolgozó láncba tudunk betoldani saját dolgokat. Van hozzá parancssoros projekt generátor is, de nekem nem kellettek view engine-ek, egyszerűbb appot kreáltam e válasz alapján.

Az adatbázissal való kommunikációért a mysqljs csomag felel, a lekérdezések eredményeit gyönyörű JS objektumokban adja vissza.

Mielőtt nekiültem ennek a dolognak, elindítottam a Toggl stoppert, és amikor eljutottam odáig, hogy van egy kis API-m, ami visszaad egy szimpla lekérdezést, elkerekedett a szemem: kb. 1 óránál járt a számláló. Annyi idő volt összerakni a cuccot nulla Node tapasztalattal, guglizással, mint több év tapasztalattal bekonfigolni egy Maven + Kotlin + Spring Boot + MySQL projektet IDE-ben.

Szóval úgy érzem, új dimenziók nyílnak :) és komolyan elfilózom most, hogy ebbe az irányba haladok tovább, elfordulva a JVM világtól. Legalábbis a webappok területén… de talán akkor már a crawlerekkel is. 😎

Kiegészítők

A projekt lényegi részét azóta összekalapáltam, a fentebb vázolt stack-hez (MySQL + Node + Vue) kellett még pár lib, hogy megfelelően működjön a dolog és elegáns is legyen a megvalósítás.

Az első ilyen a dotenv, ami annyit csinál, hogy a program könyvtárából beolvassa a .env fájl tartalmát és betölti a process.env objektumba, a környezeti változókhoz. A konfigfájlt érdemes kihagyni verziókövetésből, és minden egyes környezetben külön definiálni az értékeket. (Analógia: application.yml a Spring Boot háza táján.)

Keresgéltem megoldásokat a Node JS appom biztonságosabbá tételére, az egyik csomag a helmet volt, ami szembe jött. Fontos HTTP header-öket injektál a válaszokba, pl. frameguard, nosniff, vagy opcionálisan kikapcsolja a kliensoldali cache-elést is.

Aztán rátaláltam a Passport-ra, és igazából ezt kerestem. Mindenféle authentikációt be lehet kötni az Express alkalmazásba, a fentiekben megszokott módon, pár sorban. Tud pl. HTTP Basic-et is, amit sokkal gyorsabb itt beállítani, mint .htaccess-el és .htpasswd-vel szórakozva Apache-ban.

Nagyon hasznos még a db-migrate, melynek segítségével az adatbázis séma felépítésének lépéseit egy kötött formában rögzíthetjük, hogy aztán később konzisztensen reprodukálni tudjuk egy másik környezetben. (Ld. Liquibase a Java világban.)

Utolsóként a PM2 nevű zseniális toolt említeném meg. Ez egy process manager, leginkább a systemd féle service parancshoz hasonlítanám, de sokkal barátságosabb annál és (laikus szemmel nézve) többet is tud. Tud processzeket nyilvántartani, indítani, leállítani, újraindítani, státuszt és logot listázni. Szkriptek (nem csak Node) futtatására van kitalálva, képes arra is, hogy újraindítson egy appot, ha annak fájljai frissülnek (--watch).

TL;DR

Ez a poszt elég hosszúra sikeredett, összefoglalom:

  • Eddig Java/Kotlin + Spring + Knockout vonalon mozogtam webalkalmazás fejlesztés terén.
  • Az utóbbi időben a Knockout-ot Vue-ra cseréltem, sokkal barátságosabb.
  • A minap kaptam egy mini webalkalmazás megrendelést és úgy döntöttem, megpróbálom Node-dal megvalósítani.
  • Keresgéltem tutorialokat és technológiákat, és elképedve tapasztaltam, hogy nagyon gyorsan tudok vele haladni.
  • Megismertem az ExpressJS-t, a Passport-ot, a db-migrate-et és a PM2-t.
  • Komolyan fontolgatom az irányváltást a JVM világtól a Node felé.
Zsolt vagyok, full-stack fejlesztő.
Crawlereket, webalkalmazásokat, statikus honlapokat és interaktív vizualizációkat készítek.
Copyright © 2019 Zsolt Jurányi | All rights reserved.