Rapid webapp fejlesztés

A tavalyi év utolsó hónapjában több új dolgot is megismertem, ezek közül az első csokor a technológiák, mégpedig olyanok, amelyek webalkalmazások gyors előállítását hivatottak nagyban segíteni.

Melóhelyen felmerült, hogy kéne egy kis webes tool egy pici adatbázis manage-eléséhez, amit én először PHP-vel gondoltam megoldani, mert abban van (egy kevés) tapasztalatom. A Java eszembe sem jutott, mert noha próbálkoztam már webappokat összerakni, valahogy döcögve ment, meg hamar feladtam, aztán időm sem volt rá. Főnökkel megdumáltuk, hogy azért megpróbálok összerakni Spring-el egy pilotot, hogy lássuk, megy-e ez nekem Java-val.

Hát megy. 🙂

Spring Boot

Mkyong mester tutorial cikkeivel indítottam, de már az alapoknál valami nem akart összejönni. Addig kérdezgettem Google bácsit, míg végül rátaláltam erre a fantasztikus cuccra: Spring Boot.

Ez egy olyan library + Maven plugin, ami percek alatt eljuttat arra a pontra, hogy mindenféle konfigolás nélkül van egy működő webappod. Betölti a legfrissebb, kompatibilis Maven dependency-ket, beállít mindent, és még egy embedded Tomcat-et is beüzemel, tehát egy standalone JAR fájlt generálhatsz, amit elindítva máris használható a webalkalmazásod. Van hozzá pár tök jó tutorial is a hivatalos oldalon.

Mivel én csak ezzel a Spring Boot-tal tákoltam, nem igazán látom még át, mi pontosan az, amit ez ad hozzá a Spring-hez, és mi az, ami már eleve megvan Spring-ben.

Egy biztos: ennek segítségével tényleg néhány tucat kódsorral és néhány óra alatt összeraktam a tool teljes szerveroldali részét.

A kliensoldalt én nem ezekkel a template-es módszerekkel (JSP, Thymeleaf, Velocity, etc.) raktam össze a tool-hoz, hanem független HTML lapokat csináltam, melyek AJAX-al beszélgetnek a szerverrel és persze jQuery-vel támogattam meg magam. Kezdetben egy jQuery UI-os felületet dobtam össze, a rekordtáblázat sorait meg ciklussal és .append()-el generáltam.

KnockoutJS

Ez tök szépen működött, viszont elég hosszúra nyúlt a JS fájlom és nem is volt szép. Ezt igazán csak akkor láttam, miután megismerkedtem a KnockoutJS-el és azzal újraírtam az egész kliensoldalt.

A KnockoutJS egy újabb nagyon hasznos eszköz egy webfejlesztő svájci bicskájában. Nekem ebben a projektben segített szétválasztani a JS és HTML kódot azáltal, hogy ő megcsinálja a HTML elemek és JS objektumok/változók összekötését. Ilyen formán a táblázat kódja egyetlen sor definiálásával bekerülhetett a HTML fájlomba, mintegy template-ként, a KnockoutJS pedig futáskor szépen feltölti a tömböm alapján. Amibe ugye AJAX-on át jönnek a rekordok a szerverről. Mi több, az összes control-t is (lapozás, szűrő, stb.) ezzel kötöttem be, így végül a szkriptem sokkal rövidebb és átláthatóbb lett, és a jQuery-t is csak itt-ott használom.

A HTML kódban az összekötendő tag-nek egy data-bind attribútumot kell adni, abban pedig egy JSON-t gyakorlatilag, ez lesz a Knockout “konfig” arra az elemre. Érdemes végignézni a hivatalos oldalon a tutorialokat, varázslatos cucc. Amire figyelni kell: azokat a JS változókat, amiket KnockoutJS-en keresztül kötözni szeretnél, ko.observable()-ként kell megadni, ezzel lesz teljes értékű a mágia.

A jQuery kódjaim jelentős csökkentésében nagy szerepet játszott még egy nagyon híres framework, a Bootstrap.

Bootstrap

Valamilyen Knockout-os fiddle-ben találtam rá, amikor egy jQuery UI-s bind-olást próbáltam összehozni. A példában a checkbox/toggle button-t 2 sima Bootstrap button-nel oldották meg.

Ihletet kaptam, mert megtetszett az egyszerű dizájn is, így utánanéztem és kipróbáltam. Egyből beleszerettem :D, ez a jós(z)ág mindent megformáz ízlésesen, így gyakorlatilag a teljes CSS kódomat kikukáztam. Ezen felül a grid rendszerével reszponzívvá is tudtam alakítani az oldal felépítését. A CSS kódon kívül JS része is van, amely plusz funkciókat ad: reszponzív navbar, dialog, tooltip, button, és még egy csomó mindent. Ezen a ponton a jQueryUI-t is lecseréltem.

A Bootswatch oldalon különböző theme-ek is elérhetőek hozzá.

Szóval tudom ajánlani mindenkinek a fenti cuccokat, nagyon hasznosak. 🙂

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.