Před několika měsíci jsem hledal úzká místa v jedné naší aplikaci, postavené na principech RIA. Šlo tedy o heterogenní systém: část aplikace na serveru, část aplikace v JavaScriptu a AJAXová komunikace mezi tím. Nechme protentokrát stranou optimalizaci serverové části v Javě a podívejme se na ten zbytek: JavaScript a AJAX. Ačkoliv pojem RIA je nyní na vrcholu svého hype, tak dozvědět se rozumné informace o optimalizaci není snadné. Snad vám tedy můj článek napoví.

Ponejprv chci upozornit čtenáře na článek na serveru Zdroják o použití komponenty DataGrid v Silverlightu. Datovou mřížku pokládám za jednu z nejdůležitejších komponent, dokonce jsem toho názoru, že schopnosti této komponenty určují praktickou použitelnost celé technologie. Rád bych vám ukázal, že i v „čistém“ prohlížeči za pomocí JavaScriptu, DHTML a AJAXu je možné používat velmi povedené mřížky…

Základní vlastnosti

Grid původně pochází z GUI aplikací, přebírá tedy zvyklosti obvyklé v tomto prostředí. Na následujícím obrázku některé vidíte uživatelsky nastavitelné řazení sloupců, ořezávání příliš širokého obsahu, barevně označený výběr několika řádků a stránkovač:

Tento příklad naleznete také živě na webu (jde o komponentu do Apache Wicketu).

RIA, neboli Rich Internet Application je pojem velmi neučitý, svoji nejasností se blíží k novinářskému pojmu Web 2.0. Původním významem této zkratky je internetová napodoba aplikací, běžících nativně v prostředí operačního systému. Na rozdíl od ostatních třípísmenných zkratek je RIA reálný pojem, který již má několik implementací – frameworků, viz třeba ExtJS. Pojďme místo planého „filozofování nad trendy“, jehož najdete na jiných serverech přehršle, rovnou k věci – jak na RIA z pohledu návrhu aplikace.

Při pohledu na ukázky na stránkách výrobce dojdeme k poznání, že jde o vyspělý framework. Propracovaná grafika, v ukázkách základní případy užití používané i v běžných klient-server aplikacích, k tomu duální licencování i komerční podpora od výrobce… Zkrátka ideální framework pro vytvoření RIA – Rich Internet Application

Na stránkách výrobce bohužel referenční aplikace nenajdete, byť seznam zákazníků je úctyhodný. Protože nejde o technologii, která se hodí na klasické internetové aplikace, její reference se přes net hledají špatně. Až jsem nakonec jednu našel – a to ve webové konfiguraci síťového disku Synology.

Ukázka

Jako ukázku jsem zvolil oblíbený příklad validace formuláře. Červené „žížaly“ jsou asi jedno z nejlepších řešení tohoto problému.

Na obrázku vidíte grafiku frameworku – je velmi pěkná, ale zároveň i dost složitá – obsahuje kulaté rohy, dvojité rámečky, barevné přechody… Tuto grafiku za vás framework samozřejmě udělá, ale může být velmi pracné vytvořit vlastní, graficky podobnou, nestandardní komponentu.

Vytvořit AJAXovou či přímo RIA aplikaci se zdá být snadné – stačí umět JavaScript a HTML a vhodně použít XMLHttpRequest… Jenže tak jednoduché to není. Nedávno jsem nalezl článek, který přirovává problémy AJAXového vývoje k vývoji rezidentních programů v DOSu. (Nevím, jestli ty doby pamatujete: šlo o programy čekající na pozadí na systémové volání OS.) Zde je můj zkrácený překlad:

• JavaScriptový engine v prohlížeči neumí multithreading (stejně jako DOS).
• Velikost kódu je limitovaná (v DOS bylo limitem 640kB RAM).
• JavaScript nepodporuje složitější kolekce, které známe např. z Javy.
• Na serveru i ve Win32/Linuxové aplikaci si můžete vybrat programovací jazyk.
• Horší možnosti debuggingu.

Co s tím? Odpověď je jednoduchá a tradiční: využít práce jiných programátorů a použít framework. Chtěl bych v následujícím textu projít několik frameworků. Nejprve ale jednoduchý případ užití, který najdete v každém internetovém autobazaru – a to spřažená komba pro výběr značky a modelu auta:

Jde o to, aby se po výběru značky nabízely jen odpovídající modely aut. Jsou tři možnosti řešení:

• serverové – po výběru značky překreslí celou stránku
• javascriptové – po výběru značky JavaScriptový kód prohodí obsah komba s modely
• AJAXové – po výběru značky odešle požadavek na data na server a stáhne z něj modely aut.