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í.

Firma Yahoo je u nás známa jako provozovatel „již nemoderního“ vyhledávače. Nicméně jako většina velkých internetových firem je také tvůrcem open source software. O jednom takovém bych vám chtěl něco napsat – o javascriptovém frameworku Yahoo User Interface, zkráceně YUI.

YUI není v českých zemích známé či rozšířené, alespoň podle počtu českých odkazů na Google. Jinak je tomu na západ od našich hranic – YUI používá ve svých aplikací (pochopitelně) firma Yahoo, najdete ho na stránkách PayPalu či LinkedIn.

Komponenty

YUI obsahuje mnoho propracovaných komponent. Jmenujme alespoň některé: autocomplete, datová tabulka, stránkovač, záložky, strom, kalendář, posuvník a několik dalších.

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.

Porovnání podílu prohlížečů se stalo vděčným tématem internetových časopisů v době, kdy není o čem psát. Jde o relikt minulosti, souboj o podíl uživatelů byl zajímavý před čtyřmi lety – v listopadu 2004, kdy vyšla první verze Mozilla Firefoxu a začala soupeřit s Internet Explorerem. Od té doby se prohlížeče z pohledu vývojáře internetový aplikací téměř nevyvíjí. Diskuze o prohlížečích se na internetu již nevede o množství podporovaných standardů, ale o záložkách, zásuvných modulech, implementaci v mobilech atp. (Čestnou vyjímkou je Google Gears.)

Stagnace má svoji pozitivní stránku (není potřeba tak často spravovat design), ale i negativní – všechny nectnosti prohlížečových technologií zůstávají nezměněny. Jde o určitou chaotičnost HTML tagů, malou předvídatelnost následků změn v CSS souborech, některé nectnosti interpretru JavaScriptu, vzájemné nekompatibility prohlížečů… Zkrátka spousta práci znepříjemňujících „drobností“. Naštěstí existuje řešení: použít javascriptový framework. Dokonce máme na výběr z několika frameworků a několika možných přístupů. Pojďme se podívat na několik různých koncepcí.

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.

AJAX je relativně nová technologie. Ale je to jen technologie, závisí na jejím vhodném použití, má své výhody a své nevýhody. Pojďme si projít některé méně známé nevýhody při použití v internetové aplikaci.

1. Neexistují konvence pro vytváření a používání AJAXových komponent a aplikací

   Všichni uživatelé internetu znají pojmy jako odkaz, stránka, formulář, navigátor, fulltextové vyhledávání atp. AJAX zavádí nové komponenty, které jsou velmi často lepší, interaktivnější, promyšlenější, ale mají jednu zásadní nevýhodu: na každém webu jsou jiné. Jste si jisti tím, že uživatel vašeho webu bude chtít několik minut svého života věnovat tomu, aby se naučit váš web ovládat?