HTML5 — budoucnost webu je tady

HTML5 není jen další verze znackovaciho jazyka — je to kolekce technologii, které meni web z platformy pro dokumenty na platformu pro aplikace. Semanticke elementy, Canvas, Video, WebStorage, geolokace, WebWorkers a desítky dalších API otviraji moznosti, které drive vyžadovaly Flash nebo nativni pluginy. Po letech vývoje a diskuzi je HTML5 konecne pripraveno pro produkcni nasazeni.

Semanticke elementy¶

Jedna z největších zmen v HTML5 je zavedeni sémantických elementů. Misto generického div pro vsechno máme nyní header, nav, main, article, section, aside a footer. Tyto elementy nemají žádný vizuální efekt — stale je musíte stylovat pomoci CSS — ale dávají obsahu význam. Vyhledávače lépe chápou strukturu stránky, screen readery mohou uzivatele navigovat mezi sekcemi a kod je čitelnější pro vyvojare.

Pro naše enterprise projekty to znamená lepsi přístupnost bez extra úsilí. Dříve jsme museli přidávat ARIA role a landmarks ručně. S HTML5 semantickymi elementy je zakladni přístupnost zabudovaná primo do HTML. Element article jasne říká, ze toto je samostatný kus obsahu. Element nav označuje navigaci. Element aside je doplnkovy obsah. Pro SEO je to take vyhoda — Google lépe rozumí, co je hlavní obsah a co je boční panel.

Canvas — kresleni v prohlížeči¶

Canvas je možná nejzajímavější nova technologie v HTML5. Je to bitmapovy kreslici povrch, na který můžete kreslit pomoci JavaScriptoveho API. Cary, obdélníky, kruhy, obrázky, text, gradienty — vsechno programaticky. To otevírá dveře pro datove vizualizace, hry a interaktivní grafiku primo v prohlížeči bez jakýchkoliv pluginů.

Pro naše projekty je Canvas zajímavý hlavně pro vizualizace dat. Misto generovani grafu na serveru jako PNG obrázky můžeme nyní kreslit interaktivní grafy primo v prohlížeči. Uživatel muze najizdet na datove body, zoomovat, filtrovat — vsechno bez komunikace se serverem. Knihovny jako Raphael.js a Processing.js usnadnuji praci s Canvas a přidávají vyšší úroveň abstrakce.

Je tu i alternativa — SVG. Zatímco Canvas je bitmapovy (kreslite pixely), SVG je vektorový (kreslite objekty). SVG objekty jsou součástí DOM, takže na ne můžete navesit event listenery a stylovat je pomoci CSS. Pro grafy a diagramy je SVG často lepsi volba. Canvas vyhrává u her a situaci, kde kreslite tisíce elementů — manipulace s DOM je pri velkém počtu elementů pomalá.

Video a Audio bez pluginů¶

Konecne můžeme prehravat video a audio primo v prohlížeči bez Flash playeru. Element video a audio jsou jednoduché jako element img — vložíte zdroj a prohlížeč se postará o zbytek. Navíc mate plnou kontrolu pres JavaScript API — play, pause, seek, volume, playback rate. Můžete vytvořit vlastní player s vlastním designem.

Problem je s kodeky. Firefox a Chrome podporují WebM a Ogg, Safari podporuje H.264/MP4. Internet Explorer 9 podporuje pouze H.264. V praxi to znamená, ze musíte připravit video ve dvou formátech. Ale budoucnost je jasna — nativni video v prohlížeči je lepsi nez Flash z hlediska vykonu, pristupnosti, mobilních zařízení i bezpecnosti. Apple odmítl Flash na iPhone a iPad, což vyrazne urychlilo adopci HTML5 videa.

Web Storage — localStorage a sessionStorage¶

Cookies byly vždy omezením pro ukládání dat na klientské straně — 4KB limit, posílání s každým HTTP požadavkem, složitá manipulace. HTML5 Web Storage prinasi dva nove mechanismy. localStorage ukládá data trvale (přežijí zavření prohlížeče) s limitem typicky 5-10MB. sessionStorage ukládá data jen po dobu jedné session (zavření záložky data smaže).

API je triviální — setItem, getItem, removeItem. Data jsou ulozena jako key-value páry stringu. Pro složitější data serializujete JSON. Pro naše aplikace pouzivame localStorage pro cache uživatelských preferencí, rozdelanych formulářů a offline dat. Už se nemusíme bat, ze uživatel ztratí rozpracovaný formulář, kdyz omylem zavre prohlížeč.

Geolocation API¶

HTML5 Geolocation API umožňuje získat zemepisnou polohu uzivatele (samozřejmě s jeho souhlasem). Na mobilních zařízeních používá GPS, na desktopu WiFi triangulaci nebo IP geolokaci. API je jednoduché — zavoláte navigator.geolocation.getCurrentPosition a dostanete souřadnice. Můžete take sledovat pohyb uzivatele pres watchPosition.

Pro naše klienty z logistického sektoru je to klíčová technologie. Ridici dodávek mohou hlásit svou polohu primo z webove aplikace bez nutnosti instalovat nativni aplikaci. Dispatcher vidí vsechny vozidla na mape v reálném case. Drive to vyžadovalo drahou nativní aplikaci — nyní stačí webový prohlížeč.

Web Workers — paralelní JavaScript¶

JavaScript v prohlížeči vždy běžel v jednom vlakne. Pokud jste spustili složitý výpočet, UI zamrzlo. Web Workers řeší tento problem — umožňují spustit JavaScript kod v pozadovem vlakne. Worker nemá pristup k DOM (nemůže manipulovat s HTML), ale muze provádět výpočty a komunikovat s hlavním vláknem pres message passing.

Toto je obrovské pro webove aplikace, které zpracovávají data na klientské straně. Parsování velkých CSV souboru, šifrování, komprese, slozite filtrování — vsechno muze běžet na pozadí bez blokování UI. Pro naše dashboardy to znamená, ze můžeme agregovat tisíce datových bodu na klientské straně, zatímco uživatel muze stale interagovat s aplikaci.

Offline webove aplikace¶

Application Cache (AppCache) umožňuje definovat manifest soubor, který určuje, které soubory má prohlížeč uložit pro offline použití. Kdyz je uživatel offline, prohlížeč servíruje soubory z cache. V kombinaci s localStorage můžete vytvořit webovou aplikaci, která funguje i bez internetového pripojeni.

V praxi má AppCache svoje problemy — invalidace cache je složitá, debugování je obtizne a chování pri update je neintuitivni. Ale koncept je správný a pro některé use case (field workers, mobilni inspektori) je to game changer. V budoucnu očekáváme lepsi API — Service Workers už se rýsují na horizontu.

Podpora v prohlížečích¶

Hlavní otázka pro enterprise vyvoj je podpora v prohlížečích. Internet Explorer 8, který stale dominuje v korporátním prostredi, nepodporuje zadne HTML5 funkce. IE9 přidává podporu Canvasu, SVG a některých sémantických elementů. Chrome a Firefox mají nejlepší podporu a automaticky se aktualizují. Safari podporuje vetsinu HTML5 na desktopu i mobilech.

Pro zpětnou kompatibilitu pouzivame Modernizr — JavaScriptovou knihovnu, která detekuje podporu jednotlivých HTML5 funkci a umožňuje podmíněné načítat polyfilly. HTML5 Shiv (neboli HTML5 Shim) zajišťuje, ze semanticke elementy fungují i v IE8. Respond.js přidává podporu CSS3 media queries pro IE8. S těmito nastroji můžeme používat HTML5 již dnes a degradovat elegantně pro starší prohlížeče.

Formuláře v HTML5¶

HTML5 prinasi nove typy vstupních poli — email, url, tel, number, date, range, color a další. Prohlížeč muze zobrazit specializovaný vstupní widget (datepicker pro date, numerickou klavesnici pro tel na mobilu) a automaticky validovat format. Atribut required označuje povinne pole, pattern umožňuje regulární výraz pro validaci, placeholder zobrazuje napovedu v prazdnem poli.

Pro nas to znamená méně JavaScriptu pro validaci formulářů. Drive jsme používali jQuery Validate plugin pro kazdý formulář. Nyní muze prohlížeč zakladni validaci provést nativně. Samozřejmě serverová validace zůstává nutná — klientská validace je jen pro uzivatelsky komfort, nikdy pro bezpecnost.

Zaver¶

HTML5 je obrovský krok vpřed pro webovou platformu. Semanticke elementy, Canvas, Video, Web Storage, Geolocation a Web Workers otviraji moznosti, které drive vyžadovaly pluginy nebo nativni aplikace. S polyfilly a feature detection můžeme HTML5 používat již dnes. Budoucnost webu je svetla a HTML5 je základem této budoucnosti.