HTML5 v enterprise webových aplikacích

HTML5 už není jen buzzword z konferencí. Letos jsme ho poprvé nasadili v produkčním enterprise prostředí — interní aplikace pro správu pojistných událostí. Žádný plugin, žádný Flash, žádný Silverlight. Čistý web. A funguje to překvapivě dobře.

Proč zrovna teď?¶

Ještě před dvěma lety by to nedávalo smysl. Internet Explorer 8 byl v korporátech standard a HTML5 podpora v něm prakticky neexistovala. Jenže v roce 2012 se situace dramaticky změnila. IE9 a IE10 přinášejí solidní podporu HTML5 features, Chrome a Firefox auto-update a mobilní prohlížeče jsou na tom ještě lépe.

Náš klient měl navíc specifický důvod: chtěl, aby aplikace fungovala i na iPadech, které začal management používat. A iPad nemá Flash. Tím pádem buď přepíšete UI, nebo zůstanete v minulosti. Volba byla jasná.

Canvas pro vizualizaci dat¶

Jednou z největších výher HTML5 je element . Předtím jsme pro grafy a vizualizace používali Flash-based knihovny (FusionCharts) nebo generovali obrázky na serveru. Obojí mělo zásadní nevýhody — Flash vyžadoval plugin a serverové renderování bylo pomalé.

Přešli jsme na JavaScript knihovnu Highcharts, která renderuje přímo do Canvas (s SVG fallbackem). Dashboard s 15 grafy se vykreslí za 200 ms místo předchozích 3 sekund. Interaktivita — zoom, tooltip, drill-down — funguje plynule bez jediného requestu na server.

Web Storage místo cookies¶

Enterprise aplikace typicky potřebují ukládat stav na klientovi — rozložení dashboardu, filtry, poslední otevřené záznamy. Dříve se to řešilo cookies (4 KB limit, posílají se s každým requestem) nebo server-side session (zátěž na server, problémy s load balancingem).

HTML5 Web Storage (localStorage) nabízí 5–10 MB úložiště přímo v prohlížeči. Uživatelské preference se načtou okamžitě, bez roundtripu na server. A sessionStorage je ideální pro dočasná data, která nemají přežít zavření tabu.

V naší aplikaci ukládáme do localStorage kompletní konfiguraci dashboardu, historii vyhledávání a draft formulářů. Uživatel může zavřít prohlížeč, přijít druhý den a pokračovat přesně tam, kde skončil.

Offline režim s Application Cache¶

Tohle byl game-changer pro naše terénní likvidátory. Pojistní agenti jezdí na místo pojistné události, často s nespolehlivým připojením. S HTML5 Application Cache (manifest soubor) si aplikace stáhne potřebné assety a data, a pracuje i offline.

Implementace není triviální — musíte pečlivě spravovat manifest, řešit cache invalidaci a synchronizaci dat po obnovení spojení. Ale výsledek stojí za to: agenti vyplní formulář v terénu, data se synchronizují automaticky, jakmile je signál.

Formuláře a validace¶

HTML5 přináší nové typy inputů — date, email, number, tel, url. Na mobilních zařízeních se automaticky zobrazí správná klávesnice (numerická pro telefon, @ klávesnice pro email). Na desktopu prohlížeč validuje formát bez jediného řádku JavaScriptu.

Samozřejmě, pro enterprise aplikaci nestačí nativní validace. Přidali jsme vlastní validační vrstvu v JavaScriptu (jQuery Validation), ale HTML5 atributy required, pattern a min/max slouží jako první obranná linie. A pro uživatele je to přirozenější — chybová hláška se zobrazí přímo u pole, ne jako alert box.

WebSocket pro real-time notifikace¶

Pojistné události mají workflow — hlášení, přiřazení, šetření, likvidace, uzavření. Když se stav změní, ostatní uživatelé o tom potřebují vědět okamžitě, ne po refreshi stránky.

Předtím jsme používali polling (AJAX request každých 30 sekund). S WebSocket máme persistentní spojení a server pushuje notifikace v reálném čase. Latence klesla z 30 sekund na pod 100 ms a zátěž na server se paradoxně snížila, protože odpadly tisíce zbytečných polling requestů.

Co nás překvapilo (negativně)¶

Ne všechno je růžové. Cross-browser kompatibilita zůstává bolestivá. IE9 sice podporuje Canvas a Web Storage, ale WebSocket nikoliv. Museli jsme použít SockJS jako fallback (long-polling pro starší prohlížeče).

Performance na starším hardware je dalším problémem. Klientské počítače v korporátu nejsou herní stroje. JavaScript-heavy aplikace na Core 2 Duo s 2 GB RAM a IE9 není zrovna svižná. Museli jsme hodně optimalizovat — lazy loading, virtualizace dlouhých seznamů, minimalizace DOM manipulací.

Jaký framework?¶

V roce 2012 je výběr JavaScript frameworků… zajímavý. jQuery je samozřejmost. Pro strukturu aplikace jsme zvolili Backbone.js — lehký, názorový tak akorát, s dobrou dokumentací. Knockout.js byl druhý kandidát (MVVM pattern, two-way binding), ale nakonec jsme dali přednost jednoduchosti Backbone.

Na obzoru je Angular od Googlu, ale je příliš čerstvý na enterprise nasazení. Za rok nebo dva se k němu vrátíme.

Shrnutí¶

HTML5 v enterprise funguje — pokud víte, kde jsou limity. Klíčové je testovat na reálném korporátním hardware, mít fallbacky pro starší prohlížeče a nepodcenit offline scénáře. Éra pluginů končí. Web jako platforma pro business aplikace je tady.