Vaadin je léty ověřeným frameworkem pro vývoj webových aplikací typu Rich Internet Applications. Umožňuje vám za použití jediného programovacího jazyka (Javy) implementovat interaktivní a na prvky uživatelského rozhraní bohaté webové aplikace. Vaadin poskytuje díky některým svým vlastnostem zásadní urychlení vývoje software, ale zároveň přináší i některá úskalí, která se mohou stát nepříjemným problémem, pokud zvolíte Vaadin jako frontendovou technologii pro nevhodný typ webové aplikace.

Specifické vlastnosti Vaadinu

Aplikace vytvořené ve Vaadinu běží typicky na jedné stránce, řádí se proto mezi Single-page Applications (SPA). Spíše než dopodrobna rozebírat všechny vlastnosti Vaadinu, které lze dohledat v oficiálních tutoriálech a dokumentaci, chtěl bych raději vypíchnout ty vlastnosti frameworku, které ho odlišují od dnes již konvenčních technologií, které se využívají pro vývoj SPA. Těmito technologiemi myslím například JS framework Angular nebo ReactJS, JS knihovnu pro vytváření DOM, a k něm přidruženou technologii Redux.

Server-side prezentační logika

V případě použití Vaadinu pro implememntaci webové aplikace, se veškerá prezentační logika přesouvá na server. Prezentační logikou je myšlena definice výsledného webové stránky, s kterou pracuje uživatel, ale i interakce uživatele s uživatelským rozhraním. V praxi to znamená, že stavbu výsledné webové stránky definujete kompozitně pomocí objektů v Javě (nepoužíváte HTML ani JavaScript) na serveru a interakce uživatele s webovým rozhraním se zachytává pomocí observerů (listenerů), které si mapujete na tytéž objekty. Jakákoliv uživatelská manipulace s UI proto okamžitě přichází na server v podobě nějaké události.


Label label = new Label("Vaadin rocks!");

Button button = new Button("Do not press this button");
button.addClickListener(click -> Notification.show("Do not press this button again!"));

CssLayout layout = new CssLayout();
layout.addComponent(label);
layout.addComponent(button);

setCompositionRoot(layout);

Tohoto chování je docíleno použitím GWT komponent, které běží v prohlížeči a komunikují pomocí AJAX se svým serverovými protějšky. Tato komunikace je programátorovi standardně skryta.

Komponenty, komponenty

Vaadin má k dispozici základní sadu komponent, které se dají použít pro kompozitní tvorbu uživatelského rozhraní. Mimo to je k dispozici velké množství komunitou vytvořených komponent, které jsou volně dostupné. Momentálně sčítá Vaadin Directory okolo 500 rozšíření typu UI Components.

Vývoj webu připomínající vývoj desktopové aplikace

Ze dvou výše uvedených důvodů připomíná vývoj aplikace ve Vaadinu vývoj nativní desktopové aplikace, a proto  bývá tento framework blízký vývojářům, kteří mají zkušenosti převážně s vývojem desktopových aplikací.

Výhody Vaadinu oproti JS frontendu

Pokud srovnáte vývoj SPA za použití Vaadinu s vývojem pomocí konvenčních technologií jako je React nebo Angular, dojdete k zajímavým zjištěním.

Sdílený codebase backendu a frontendu

Pokud vyvíjíte SPA za pomoci některé z JavaScriptových tecnologií, máte typicky zcela oddělený backend a frontend. Data mezi frontendovou aplikací, která běží v prohlížeči, a beckendem, který běží na serveru, běhají pomocí množství REST služeb, které poskytuje backend. Takové oddělení je obecně fajn věc, jenomže když začnete vyvíjet nějakou složitější aplikaci, zjistíte, že spousta věcí, která je součástí logiky na serveru, je potřeba i na frontendu a takovéto věci musíte tudíž duplikovat nebo si je RESTovkama zasílat v deklarativní formě a nějakým způsobem interpretovat.

Zde jsou některé příklady problémové logiky:

  • Seznamy statických dat (typicky hodnoty enumů (pohlaví apod.))
  • Práva aktuálně přihlášeného uživatele
  • Validace uživatelských vstupů
  • Uživatelská a aplikační nastavení
  • Prakticky cokoliv co má vliv na UI a zároveň i na zpracování dat

Dříve nebo později začnete toto řešit v každé SPA, jejíž frontend je napsán v JS a backend v jiném jazyce. V případě Vaadinu se takovým problémům zcela vyhnete, jelikož se prezentační logika odehrává na serveru a vy tak můžete zavolat jakoukoli logiku napřímo potažmo přes rozhraní z nižší vrstvy.

vaadin_stack
Vaadin stack

Vývoj webu bez JavaScriptu

Existují minimálně dva objektivní důvody, proč se vyhnout JavaScriptu:

  • JavaScript nemá statickou typovou kontrolu. Na větších projektech s větším množstvím vývojářů to pak znamená dlouhé hodiny strávené lovením chyb typu[undefined...] nebo [...is not a function] a to nejlépe uvnitř nějaké 3rd party knihovny. Podpora IDE u dynamicky typovaných jazyků také není a nikdy ani nebude na úrovni staticky typovaných jazyků.
  • JS SPA je obtížné ladit. Program ladíte zároveň na dvou místech, jednak v prohlížeči a pak na serveru. Chybové zprávy v JS konzoli mají navíc velice kryptickou formu, zvláště pokud využíváte React nebo framework typu Angular.

Díky Vaadinu se těmto problémům vyhnete a ušetřit si tak spoustu času a nervů.

Frontend poháněný kouzly JavaEE

Další z důsledků běhu prezentační logiky na serveru je možnost využívat všechny kouzla JavaEE platformy na frontendu, v případě, že nasadíte webovou aplikaci na aplikační server (TomEE, Wildfly, apod.).

Jako nejzajímavější příklad lze uvést využití CDI API (Contexts and Dependency Injection), který kromě dependency injection nabízí i jednoduché zasílání událostí mezi různými komponentami v rámci aplikace (CDI Events).

CDI Events vám ve spojení se Server Push funkcionalitou umožňují okamžitě notifikovat uživatele, pokud došlo ke změně v systému, která se ho v aktuálně otevřeném UI kontextu zrovna týká. (Server Push je funkcionalita Vaadin frameworku, která využívá websockets standard a umožňuje měnit UI připojeného uživatele na straně serveru.)

Pokud například dojde ke změně nějaké entity uživatelem A, kterou si právě prohlíží uživatel B, můžete mu pomocí pouhých několika řádků kódu dát vědět, že došlo ke změně. Například zobrazením notifikace nebo přímo načtením aktuálních dat.


// User A
@Inject
private Event carUpdatedEvent;
...
carUpdatedEvent.fire(new CarUpdated(oldCar, car));

// User B
public void observe(@Observes CarUpdated event) {
// do something (show notification, reload data, etc...)
}

Kde jsou ty háčky

Kromě svých výhod má Vaadin také řadu potenciálně problémových vlastností, které je nutno znát, dříve než se rozhodnete pro použití frameworku pro vývoj nového projektu. Tyto vlastnosti navíc nemusejí být na první pohled zřejmé.

Offline si ani neškrtneš

Aplikace napsaná ve Vaadinu (na rozdíl od frontendové aplikace napsané čistě v JS) nedokáže běžet offline. To vám ovšem uzamkne cestu v případě, že byste chtěli vytvořit z vaší webové aplikace nativní mobilní nebo desktopovou aplikaci. Pokud frontend webové aplikace naimplementujete v JavaScriptu, je ho možné s menšími úpravam a za použití specializovaných nástrojů zabalit do nativní aplikace, která je schopna běžet na cílovém zařízení offline. Takovou možnost vám Vaadin nenabízí.

logo1000

Vyšší nároky na zdroje serveru

Proto, aby byl Vaadin schopen správně zabezpečit a reagovat na interakci uživatele s uživatelským rozhraním, musí si v paměti držet aktuální stav UI připojeného uživatele. Tento stav je v konečném důsledku mapován na standadní Java HttpSession. V případě aplikace napsané v JS je typicky na HttpSession mapován pouze přihlášený uživatel. To je ovšem zásadní rozdíl v nárocích na operační paměť serveru. Navíc v případě čistě JS frontendu se velké množství uživatelské interakce obejde bez dotazování na server a samotná tvorba stavby UI webové stránky je zcela vyřešena pouze v prohlížeči, tudíž je zde i rozdíl v nárocích na výpočetní kapacitu serveru.

Je třeba si uvědomit, že to neznamená, že je aplikace ve Vaadinu pomalá. Ve skutečnosti to znamená, že provoz aplikace napsané ve Vaadinu je dražší vzhledem k ceně za jednoho připojeného uživatele.

Komponentové uzamčení

Přestože je počet standardních a komunitních UI komponent Vaadinu obstojný, fantazie zákazníka, UX designéra nebo jiného stakeholdera, jehož názor na uživatelské rozhraní je třeba brát v potaz, nezná mezí. U jednoduchých aplikací si typicky vystačíte s konfigurací, kompozicí a přestylováním dostupných komponent, avšak mnohdy si musíte naprogramovat vlastní. Naprogramování nové komponenty uživatelského rozhraní je ve Vaadinu časově náročnější než v případě JS aplikace a jeho popis by vystačil na samostatný článek.

Vaadin je super, ale pouze pro některé typy projektů

V případě, že váháte, zda použít Vaadin pro vývoj nového produktu, existuje jednoduchá sada doporučení, která vám pomůže ke správnému rozhodnutí.

Z důvodu vyšší ceny za provoz aplikace na jednoho připojeného uživatele se Vaadin nehodí pro veřejně přístupné aplikace, jež se snaží vydělávat na reklamě nebo zpeněžují přístupy u velmi mizivého procenta návštěvníků. Do této kategorie spadají obsahové weby, elektronické obchody nebo jakékoliv portály a jiné aplikace vydělávající pouze na reklamě. Vaadin také určitě nemohu doporučit, pokud se chystaný projekt soustředí hlavně na originální a vyladěné UI spíše než na funkcionalitunebo pokud zadavatel chodí s velice konkrétními a nestandardními požadavky na UI, místo toho, aby správně definoval, co by měl produkt umožňovat. V takovém případě se totiž může tvorba UI aplikace prodražit. Jestli je cílem vašeho produktu naprogramovat webovou aplikaci a pak z ní snadno vytvořit nativní desktopovou nebo nativní mobilní aplikaci, která by byla schopna běžet offline, Vaadinu se určitě vyhněte.

Pokud se chystáte naprogramovat intraportál na zakázku nebo do vlastní firmy, Vaadin je určitě skvělou volbou. Vaadin se výborně hodí i pro administrační aplikace s přístupem pouze pro vaše zákazníky, například pro správu elektronického bankovnictví, webhostingu, apod. Vaadin bych doporučil i v případě, že vyvíjíte vlastní produkt, který chcete nabízet jako placenou službu (SaaS) a k aplikaci tedy budou přistupovat pouze platící zákazníci.

Jestli vaše chystaná aplikace patří do některého z doporučených typů, určitě Vaadin vyzkoušejte a nebudete toho litovat.

 Tomáš Bambas

Tomáš je Java developer, jeho specializací je backend a databáze. Má rád i tvorbu desktopových a mobilních aplikací. Oceňuje software s dobře navrženou architekturou a drží se hesla „za málo kódu hodně muziky“.

Tomáš toto téma prezentoval na nekonferenci jOpenSpace 2016.

Máš rád technologie Javu a programování stejně jako Tomáš?

Hledáme do naší party skvělé vývojáře – třeba na projekt eBay.

Mrkni taky na všechny pozice, co nabízíme a dej nám o sobě vědět, bez ohledu na to, zda máš rád front-end nebo back-end, jestli nějakou technologii umíš nebo ne. Pokud budeš ty sám chtít, dostaneš u nás příležitost naučit se, co tě zajímá nebo udělat něco výjimečného.