2015. január 10., szombat

Rapid webapp fejlesztés

Kissé elhanyagoltam az oldalt az utóbbi időben, de igyekszem pótolni. 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. :) De nézzük csak szép sorban:

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.

Spring Boot

Mi is ez tulajdonképp? Egy olyan library + Maven plugin, ami másodpercek 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.

Igazából, mivel én csak ezzel a Spring Boot-tal tákoltam, nem 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.

Van hozzá pár tök jó tutorial cikk is.

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.

Persze jQuery-vel támogattam meg magam a kliensoldalon. Kezdetben egy jQuery UI-os felületet dobtam össze, a rekordtáblázat sorait meg ciklussal és .append()-el generáltam. 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.

KnockoutJS

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 cucc, 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. :)

Az alábbi CSS-t használom, mint dark theme: Bootswatch Cyborg theme

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

Nincsenek megjegyzések: