Ajax: Jak se zrodil moderní web

Tento článek si můžete přečíst také v Computeru 11/10.

Podoba webu se za posledních dvacet let dramaticky proměnila. Zatímco po celá devadesátá léta byl World Wide Web symbolem jednoduchých statických stránek s primitivní grafikou, s příchodem nového milénia jsme pomalu začali objevovat kouzelný svět webových aplikací. Statická nástěnka se proměnila ve skutečnou interaktivní aplikaci, která dnes v mnoha ohledech nabízí stejný luxus jako robustní „tlustý“ nebo „těžký“ program. Ostatně i proto se internertovým aplikacím říká „thin“ – tenké.

Rozbíháme CGI

Vše začalo v roce 1993. Web měl za sebou už několik let divokého vývoje, stále ale neexistovala spolehlivá technologie na straně serveru. Ten tehdy prohlížeči vlastně pouze vracel vyžádané soubory, HTML stránky s nějakou tou obrazovou přílohou. V roce 1993 se ale začala psát historie CGI – Common Gateway Interface. Nové rozhraní umožnilo vytvářet webové stránky nikoliv webovým serverem, ale cizím programem doslova z příkazové řádky – terminálu. Webový server tak prohlížeči nevracel statické soubory z pevného disku, ale generovaný HTML kód, který mohl reagovat na vaše požadavky. CGI nabídlo dynamické zpracovávání na straně serveru, komunikaci s databázemi a stálo u zrodu tolik populárního PHP. PHP byl vcelku běžný program, kterému server předal požadavek, on jej zpracoval, vrátil serveru vytvořený HTML kód a server jej nakonec odeslal zpět webovému klientu – internetovému prohlížeči.

V devadesátých letech bylo CGI prakticky všudypřítomné, díky své univerzalitě totiž umožňovalo komunikaci téměř v libovolném jazyku. Mělo ale i své bezpečnostní slabiny. I z těchto důvodů nakonec zvítězila modulární architektura. PHP na serveru Apache se tedy pak už nespouštělo samostatně jako CGI program, ale jako zabezpečená a ošetřená knihovna, kterou nešlo jednoduše zneužít. Podobná pravidla posléze zavedli i ostatní hráči na trhu. CGI se samozřejmě používá i dnes, díky minimální režii je totiž komunikace zpravidla mnohem rychlejší, hodí se ale spíše na specifické úkoly – ne pro běžný web.

Netscape scriptuje

Jak vlastně takový běžný web vypadal v polovině 90. let? Už to nemuselo být prosté předávání HTML souborů prohlížeči – zpracovávání na serveru bylo dynamické, nicméně zobrazená stránka v prohlížeči byla přece jen stále poměrně mrtvá, bez života. O jedinou interaktivou se staraly snad jen ošklivé GIF animace s několika málo barevnými odstíny.

To se však mělo brzy změnit. V roce 1995 začal Netscape koketovat s Javou ve svém prohlížeči. Zároveň už nějaký pátek vyvíjel nový webový jazyk, který se měl postarat o dodatečné zpracovávání podoby stránky v prohlížeči. Projekt se jmenoval Mocha, brzy ale získal docela výstižné jméno LiveScript. V oné divoké době první internetové bubliny se nicméně velmi dobře vedlo Sunu a jeho nezávislému jazyku Java. Mnozí tehdy skutečně věřili, že do několika let Sun ovládne svět internetu a Java se stane přesně tím, co se později podařilo Flash Playeru. Na vlně obrovské popularity se svezl i Netscape, LiveScript přejmenoval na JavaScript a s velkou slávou jej představil v novém Navigatoru 2. Stalo se tak v prosinci 1995. JavaScript tedy rozhodně není derivátem Javy nebo snad jeho zjednodušenou verzí. Jejich vzájemná podoba vychází spíše z toho, že oba jazyky tehdy byly nové a splňovaly standardy moderního objektově orientovaného programování.

Začátek revoluce

Nový jazyk byl úspěšný, část logiky totiž přenesl ze serveru na klienta. To je velmi důležité, protože stránka najednou mohla reagovat na vstupy uživatele a to bez potřeby odeslání nového dotazu na server, který by skrze CGI vygeneroval novou podobu kódu. Úspěchu si záhy všiml Microsoft a s příchodem Internet Exploreru 3 v roce 1996 představil svou trochu vylepšenou verzi s názvem JScript. V podstatě se jednalo o ten samý jazyk, Microsoft ale změnou názvu předešel případným patentovým a autorským sporům.

Problematiku autorství nakonec vyřešil samotný Netscape, který základ svého jazyka předal ke standardizaci organizaci Ecma, která jej vydala pod novým názvem ECMAScript.Javascriptový standard je dnes základem hromady odvozených jazyků. Vedle všudypřítomného JavaScriptu tak stojí za zmínku zejména ActionScript – jazyk, který se používá k tvorbě aplikací pro Flash Player. Objektový a relativně jednoduchý „JS“ se těšil takové popularitě, že se dokonce dostal i na servery. Dnes jej můžete použít pro tvorbu ASP.NET aplikací, cestičku si ale našel i na Opera Unite server.

Asynchronní web

V polovině devadesátých let tedy uměl webový server dynamicky vytvořit HTML kód, který pak mohl prohlížeč pomocí JavaScriptu ještě omezeně zpracovat přímo na počítači surfaře.Komunikace se serverem ale byla synchronní. Jinými slovy, pokud jste chtěli získat novou podobu stránky, museli jste ji prostě celou obnovit – a tím zadat požadavek serveru. Zbytečné a opakované načítání stejných neměnných dat (třeba obrázků) sice částečně vyřešilo cachování dat v prohlížeči, synchronní komunikace ale zároveň omezovala programátory v tom, aby vyvíjeli webové aplikace, které by už mohly svým chováním připomínat desktopové programy.

Uvedu jednoduchý příklad. Představte si třeba kancelářský Word jako webovou aplikaci z tehdejší doby.JavaScript by sice zajistil, aby se při najeti na tlačítko zobrazilo menu s nabídkou, pokud byste ale chtěli otevřít nový dokument, webový prohlížeč by musel poslat nový požadavek na server, vygenerovat novou podobu Wordu s otevřeným dokumentem a celý kód odeslat přes síť zpět do vašeho prohlížeče. Představte si, že by se tak chovaly skutečné desktopové programy a při každém novém požadavku se znovu přeložily ze zdrojového kódu.

<IFRAME>

V roce 1995 začal Netscape koketovat s technologií Java, což vedlo k přejmenování LiveScriptu na JavaScript. To už dobře víte, co ale ono koketování znamenalo v praxi? Applety! Jednalo se o jednoduché programy, které se stahovaly z webu a spouštěly uvnitř stránky. Jejich hlavní výhodou ale byla skutečnost, že komunikovaly asynchronně.Při klepnutí na tlačítko se tak applet mohl zvesela připojit třeba na vzdálený server, zpracovat nějaká data, zobrazit výsledek a to aniž byste museli obnovovat celou stránku.

Applety způsobily menší revoluci, dlouhou dobu se ale na výsluní mediálního zájmu nakonec neohřály.Technologie Java totiž byla na tehdejším průměrném počítači žalostně pomalá a projevovalo se to i u appletů. Menší renesanci zažívají až v poslední době, spíše ale přežívají a doplňují možnosti Flash Playeru. Jisté šance slibuje nástupnická technologie appletů JavaFX, než se ale prosadí, pravděpodobně definitivně zvítězí HTML5.

Zpět ale do poloviny devadesátých let. Microsoft totiž tehdy představil svůj vlastní systém ActiveX, který umožňoval z webu stahovat a spouštět dokonce nativní x86 programy, zatímco Java pracovala pouze s bytekódem, který nezpracovává procesor počítače, ale běhové prostředí. Slabinou ActiveX ale byla na druhou stranu zase bezpečnostní rizika, Internet Exploreru totiž tehdy chyběla rozumná bezpečnostní politika, a tak se skrze ActiveX programy mohly snadno šířit viry, první náznaky nevyžádané reklamy a další binární nepořádek.

Asynchronní komunikace si nakonec našla cestu i do běžného HTML kódu bez potřeby používat ActiveX nebo Javu. Tentokrát se o to zasloužil Microsoft, který HTML standard obohatil o značku <IFRAME>. Vložený rámec mohl uvnitř jedné stránky zobrazit další stránku, čehož brzy využili první průkopníci Ajaxu. Pokud měl totiž rám nulovou velikost, návštěvník stránky ho neviděl, rám ale mohl ve druhém pracovním vlákně – v druhé stránce – zpracovávat nejrůznější úlohy. Už tehdy jste tedy mohli provést elegantní asynchronní operaci: uživatel klepnul na tlačítko, akci zachytil JavaScript a ve vloženém neviditelném rámu poslal dotaz na webový server. Ten vygeneroval výsledek, který se zobrazil opět v neviditelném rámu a nový kód si už pak zase zapracoval JavaScript. Hlavní stránka se tedy nemusela obnovit, JavaScript ale do ní mohl napsat nějakou novou informaci.

Konečně standardně

Máme za sebou základy asynchronního webu, který umí komunikovat se serverem, aniž by se musela obnovit celá webová stránka. Na programátory ale tím pádem padla další, mnohem komplikovanější, výzva. JavaScript toho totiž tehdy zrovna moc neuměl a nebyl na asynchronní web dobře připravený. Jeho největší slabinou byla dynamická práce s dokumentem, úprava již vypsaných částí kódu, paragrafů a bloků.

Toto „rozpohybování“ HTML stránky se dnes obecně nazývá DHTML – dynamické HTML, nejedná se ale o žádnou konkrétní normu nebo standard, autoři webových prohlížečů totiž tehdy svou implementaci ECMAScriptu (JavaScriptu) obohacovali o nejrůznější proprietární speciality. V nestandardizovaném vylepšování si asi nejlépe vedl Microsoft, za což jej ostatní hráči na trhu neměli příliš v lásce, nová dynamika a efekty webové stránky mu ale zase dopomohly k porážce letitého soka Netscape Navigatoru.

Jakési sjednocování a seskupování technologií začalo až s koncem milénia, kdy se o své místo pod sluncem začal hlásit CSS, speciální definiční jazyk, který popisoval grafický styl webové stránky. CSS ulehčil tehdejšímu HTML, který se doposud staral jak o rozložení prvků na stránce, tak o jejich grafickou podobu. Skutečným vrcholem a branou do světa nových webových stránek a aplikací ale bylo až aplikační rozhraní DOM – Document Object Model.

Jazyk HTML je ve své podstatě upravený XML, na který lze pohlížet jako na soubor objektů.Webová stránka se tak skládá z těla, které zase tvoří hromada bloků a ty se pak skládají z obrázků, tabulek a paragrafů a takhle dál a dál až k tomu nejmenšímu prvku. Nejpodstatnější je ale to, že všechny tyto dílčí objekty stránky můžete identifikovat, můžete je kopírovat, zpracovávat, mazat nebo plnit daty. Díky DOM a JavaScriptu tak můžete dynamicky rozšířit tabulku o dva nové řádky a do každé z těchto buněk přidat další objekty, třeba textové řetězce. DOM dramaticky zefektivnil a zrychlil dynamickou a interaktivní konstrukci stránky v prohlížeči. Bez DOM modelu by dnes nemohla existovat ani jedna webová mapová služba, kde se mapové dlaždice při posouvání asynchronně nahrávají z webu a jako nové objekty přidávají do webové stránky. Bez DOMu by dnes nemohla fungovat prakticky ani jedna tenká webová aplikace.

Přichází Ajax

Magické slovíčko Ajax (či AJAX) poprvé vyřkl specialista na uživatelská rozhraní na internetu Jesse James Garrett. Stalo se tak relativně pozdě – až v roce 2005. Ajax je akronym pro Asynchronous JavaScript and XML a v jednom jediném slově elegantně popisuje kompletní proměnu chování webových stránek v posledních deseti letech. Dnes se vlastně jedná o natolik zobecnělý termín, že se používá prakticky pro všechny případy asynchronní komunikace na webu – tedy pro staré applety, Flash Player, Silverlight a také IFRAME.

Co ale Ajax znamená ve skutečnosti? Přesuňme se nyní zpět do roku 1999. Jestli někomu patří skutečné autorství Ajaxu, tak je to kupodivu zatracovaný Microsoft, který vybavil Internet Explorer 5 ActiveX doplňkem XMLHTTP. Drobné rozšíření mělo jediný úkol, zajistit stažení XML souboru uloženého kdesi na internetu, na webovém serveru. Kouzlo spočívá v tom, že doplněk XMLHTTP používal vlastní asynchronní pracovní vlákno a ve skutečnosti to byl jednoduchý HTTP klient, stahovat tedy nemusel pouze XML ale i prostý text. Suma sumárum, Internet Explorer 5 nabízel funkcionalitu, která umožnila načtení libovolného obsahu z webového serveru na pozadí běhu prohlížeče, tedy bez potřeby obnovení stránky, bez appletů, bez IFRAME prvku. První skutečnou aplikací, která XMLHTTP používala, byla zkušební verze ryze webového poštovního klientu Outlook Web Access z roku 2000.

Takhle funguje ajax

Potenciálu XMLHTTP si záhy všimli autoři ostatních prohlížečů, a tak v příštích letech získaly stejnou funkcionalitu také Mozilla (a později Firefox), Opera a mladičké Safari. Oproti Internet Exploreru a jeho ActiveX se ale jednalo o javascriptový objekt XMLHttpRequest. Tato zdvojenost Ajaxu trvala až do roku 2006, kdy Microsoft představil Internet Explorer 7. Ten se nadobro zbavil ActiveX doplňku a stejně jako ostatní začal používat javascriptový objekt. Dokud ale z trhu definitivně nezmizí staré verze Exploreru v čele s jeho šestou generací, budou mít vývojáři o to větší kus práce, z důvodu kompatibility totiž budou muset brát v potaz i zastaralý XMLHTTP.

Z hlediska technologií byly na asynchronní weby prohlížeče připravené už na přelomu tisíciletí, chybělo ale to nejpodstatnější – vyšší rychlost komunikace a menší latence. Pokud má totiž JavaScript ve vašem prohlížeči konstruovat webovou stránku z dat, která se postupně načítají kdesi na pozadí, je třeba, aby je získal co nejrychleji. Nicméně s vytáčeným připojením a přechodnými ISDN linkami to bylo prakticky nemyslitelné. Skutečnému rozvoji Ajaxu na webu dopomohl až širokopásmový instantní internet v čele s ADSL, kabelovými operátory a metropolitním sítěmi.

Dnes se těmto vyšším rychlostem a odezvám ostatně přizpůsobila i samotná technologie, Ajax vám tedy na klasickém „dial-upu“ nebo mobilním GPRS srovnatelné rychlosti ve většině případů nepojede. Než se totiž na pozadí stáhnou všechna potřebná data, zpravidla vyprší bezpečnostní časový limit a HTTP komunikace na pozadí se zastaví. Druhou překážkou pak bude skutečně hodně velký JavaScript, který se v posledních deseti letech nafoukl do nepředstavitelných rozměrů.

Obrovský JavaScript

Práce s Ajaxem není zrovna nejjednodušší a také mnohaletá zdvojenost technologií vyžadovala mnohem více řádků kódu, aby Ajax vůbec mohl začít komunikovat. Z těchto důvodů začali ti zkušenější brzy psát první javascriptové knihovny, které veškerou rutinní práci udělaly za vád. Jak se zrychlovalo průměrné připojení k internetu, byli jejich autoři stále benevolentnější, přidávali nové a nové funkce a napojili své knihovny na DOM. Taková knihovna se tedy rázem mohla starat o celý životní cyklus stránky od komunikace se serverem na pozadí až po nejrůznější kreativní efekty včetně načítání a zobrazování obrázků ve vyšší vrstvě nad pozadím (takzvaný lightbox).

V současné době tedy ty nejpopulárnější JS knihovny bez problému zaberou i stovky kilobajtů dat kódu, který musíte stáhnout z webu a který musí prohlížeč pokaždé zpracovat. Pokud vám občas připadne pomalý, uvědomte si, že se dnes jedná o jeden z nejkomplikovanějších a nejvýkonnějších programů v počítači, který musí perfektně vykreslit webovou stránku, v reálném čase zpracovat až tisíce řádků JS kódu a v nové normě HTML5 po něm ke všemu chceme, aby dokázal přehrávat třeba video ve vysokém rozlišení. Internetový prohlížeč je dnes nejuniverzálnější počítačový program – běhové prostředí pro tisíce webových aplikací od jednoduché statické stránky až po robustní kancelářský balík nebo internetové rádio. Je to malý technologický zázrak.

Co přijde po Webu 2.0

Za autora termínu „Web 2.0“ je často považován Tim O’Reilly ze stejnojmenného nakladatelství, které v roce 2004 uspořádalo první ročník slavné konference Web 2.0 (Web 2.0 Expo). O’Reilly definoval druhou generaci webů jako internetový obsah, který vytváří sami návštěvníci, kteří spolu komunikují a sdílí informace. V této větě je velmi jednoduše popsaná současná popularita RSS, blogování a tvorby obsahu na sociálních sítích. Zatímco dříve vytvářeli obsah webů jejich autoři, dnes ho vytváříme my. Revoluční a docela efektivní byznys model, nemyslíte?

Nicméně termín je ve skutečnosti staršího data, ve své knize Fragmented Future ho totiž už v roce 1999 použila designérka Darcy DiNucci. Zatímco O’Reilly se věnoval spíše sociologickým proměnnám webové komunity, DiNucci už tehdy předpovídala jeho technologickou proměnu a přechod od webu jako „statické nástěnky“ k interaktivnímu a dynamickému webu, který bude fragmentovaný mezi různá zobrazovací zařízení – monitor počítače, displej mobilu nebo třeba tablet.

Současný moderní web, ať už mu budete říkat jakkoliv, se začal rodit před dlouhými patnácti lety. Příchod jednoduché jazyka JavaScript způsobil skutečnou technologickou revoluci. Webové stránky se dramaticky proměnily a také narostly do obřích rozměrů. Svět poznal nová slovíčka a programátoři se začali učit vyslovovat novou zkratku RIA – Rich Internet Application, která definuje prakticky jakýkoliv moderní webový program počínaje oním stařičkým Java appletem a konče Flash aplikací, Silverlightem a moderním HTML5.

HTML5 by měl do světa asynchronního webu opět výrazně promluvit, komunikaci na pozadí totiž rozšíří o takzvaný „HTTP streaming“, tedy HTTP push a Web Sockets API. Díky těmto technologiím může na pozadí začít komunikovat nejen klient ale také server. To bylo doposud v klasickém javascriptovém Ajaxu nemožné. Technologie v praxi umožní okamžitou komunikaci ze strany serveru.Doposud se přitom používal pouze falešný a datově mnohem náročnější HTTP push, v rámci kterého se klient periodicky dotazoval serveru, jestli pro něho nemá nějaké nové informace. V případě HTML5 se ale v případě potřeby ozve samotný server. Nefalšovaný HTTP push umožní mnohem rychlejší komunikaci a instant messaging – ostatně už dnes ho používá třeba experimentální webová aplikace Google Wave a Web Socketům rozumí třeba prohlížeč Chrome.

Web se definitivně mění. Zapomeňte na staré poučky z let devadesátých, zapomeňte na jednoduché skriptování v Poznámkovém bloku. Web 2.0 je totiž především symbolem postupného smazávání rozdílů mezi tím, čemu jsme kdysi říkali webová stránka a robustním a komplikovaným programem na vašem pevném disku.