jQuery Mobile — webové aplikace pro dotykové telefony

Mobilni web už není budoucnost — je to přítomnost. Podle statistik již třetina našich klientu přistupuje k webovým aplikacím z mobilních zařízení. jQuery Mobile slibuje jednoduchý zpusob, jak vytvářet dotykove webove aplikace, které vypadají a fungují jako nativni. Po měsíci experimentování sdílíme naše poznatky.

Co je jQuery Mobile¶

jQuery Mobile je framework postavený nad jQuery a jQuery UI, urceny pro tvorbu mobilních webovych aplikaci. Na rozdíl od media queries, které prizpusobuji existující desktop web mobilnimu zařízení, jQuery Mobile je navržen mobile-first — začínáte s mobilni verzi a obsah je optimalizován pro dotykove ovládání od začátku.

Framework funguje na principu progresivního vylepšení. Základem je semanticky HTML s daty-atributy (data-role, data-theme, data-transition). jQuery Mobile detekuje schopnosti prohlížeče a automaticky vylepsuje HTML na bohatejsi UI — tlačítka dostávají dotykove styly, listy dostávají interakci, stránky dostávají přechody. Na starých telefonech s omezenými prohlížeči stale vidíte funkční (byť méně hezký) obsah.

Stránkování a navigace¶

jQuery Mobile používá unikátní pristup ke stránkování. Vsechny stránky jsou div elementy v jednom HTML souboru (nebo nactené AJAXem) s data-role=”page”. Navigace mezi stránkami je animovany prechod — slide, fade, pop — bez kompletního znovunacteni stránky. URL se aktualizuje pres hash fragmenty, takže funguje historie a tlačítko zpět.

AJAX navigace má svoje výhody — rychle přechody, plynulý uzivatelsky zážitek, možnost prednacitatní stránek. Ale take nevýhody — SEO je problematické (vyhledávače nevidí AJAX obsah), deep linking vyzaduje extra praci a debugování AJAX navigace je složitější nez klasických odkazu. Pro naše interní aplikace, kde SEO není důležité, to není problem. Pro verejne weby doporučujeme opatrnost.

UI komponenty¶

jQuery Mobile nabízí sadu UI komponent prizpusobenych dotykovemu ovládání. Listy (listview) s vestavěným vyhledáváním, tlačítka s ikonami a různým stylem, formuláře s dotykovymi widgety (slider, flip switch, checkbox jako toggle), dialogova okna, panely a toolbary. Vsechny komponenty jsou tematizovatelne pres swatch system — pet predpripravenych barevnych schemat (a-e), které můžete kombinovat.

Kvalita komponent je solidní pro zakladni use case. Listview s vyhledáváním je skvělý pro telefonní seznam nebo katalog produktu. Formuláře s dotykovymi widgety jsou pouzitelnejsi nez standardní HTML formuláře na mobilu. Ale pro složitější interakce — drag and drop, slozite tabulky, grafy — budete potřebovat doplnkove knihovny.

Temovani a design¶

ThemeRoller for jQuery Mobile je webový nástroj pro vytváření vlastních témat. Nastavíte barvy, fonty, zaobleni rohu a stiny, a stáhněte hotový CSS soubor. Je to rychly zpusob, jak přizpůsobit vzhled aplikace firemnimu branding. Ale pozor — vsechny jQuery Mobile aplikace mají preece jen ten „jQuery Mobile look”. Pokud potřebujete unikátní design, budete muset hodně CSS přepsat.

To je jeden z hlavních kriticismů — jQuery Mobile aplikace vypadají jako jQuery Mobile aplikace. Nemají nativni look and feel iOS nebo Androidu. Uživatel pozná, ze není v nativni aplikaci. Pro interní enterprise aplikace to muze byt přijatelné, pro consumer aplikace je to často deal breaker.

Vykon na mobilních zařízeních¶

Tady narazíme na největší problem jQuery Mobile. Framework je velký — jQuery core plus jQuery Mobile CSS a JS je dohromady pres 200KB minifikovaneho kodu. Na rychlem WiFi to není problem, ale na 3G siti muze prvni načtení trvat více sekund. Navíc inicializace frameworku — parsování DOM, vylepsovani elementů — je CPU náročná a na starších telefonech způsobuje viditelné zpoždění.

Animace prechodu mezi stránkami nejsou na všech zařízeních plynule. Na iPhone 4 a novejsich Android telefonech to vypadá dobre. Na starších zařízeních se animace sekaji a působí neprofeisionalne. Doporučujeme testovat na nejslabsim zařízení, které budou vasi uzivatele používat, a pripadne animace zjednodusit nebo vypnout.

Optimalizace vyzaduje úsilí — lazy loading obrázků, minimalizace DOM operaci, prednacitatní kritických stránek, custom build jQuery Mobile s jen potrebnymi moduly. S těmito optimalizacemi je výsledek přijatelný, ale výchozí stav bez optimalizace je pro složitější aplikace pomalý.

Srovnani s nativnim vyvojem¶

Otázka, která nas klienti ptají nejčastěji: máme dělat nativni iOS/Android aplikaci nebo mobilni web s jQuery Mobile? Odpověď záleží na kontextu. Nativni aplikace mají lepsi vykon, pristup k hardwarovym API (kamera, akcelerometr, push notifikace), offline fungování a distribuci pres App Store. Webová aplikace má jednu codebase pro vsechny platformy, okamzite aktualizace bez schválení App Storem a nížší náklady na vyvoj.

Pro interni enterprise aplikace — kde nevadí, ze aplikace nevypada nativně, kde nepotřebujete push notifikace a kde chcete jednu verzi pro vsechny zařízení — je jQuery Mobile dobrá volba. Pro consumer aplikace, kde je uzivatelsky zážitek klíčový a kde soutezite s nativnimi aplikacemi, doporučujeme nativni vyvoj nebo alespoň PhoneGap wrapper.

PhoneGap — hybridní pristup¶

PhoneGap (nyní take Apache Cordova) umožňuje zabalit webovou aplikaci do nativního kontejneru. Výsledek je nativni aplikace distribuovatelna pres App Store, která uvnitř běží ve WebView. jQuery Mobile plus PhoneGap vám dava pristup k nativnim API (kamera, kontakty, filesystem) a možnost offline fungování. Na druhou stranu vykon je stale omezen výkonem WebView.

Tento hybridní pristup muze byt rozumný kompromis. Vyvinete jednu webovou aplikaci, zabalite ji pro iOS i Android a mate nativni distribuci. Ale musíte počítat s tím, ze uzivatelsky zážitek nebude na urovni skutecne nativni aplikace. Pro některé use case — interní nastroje, jednoduché utilitky — to stačí. Pro komplexní aplikace s narocnou grafikou nebo složitou interakci ne.

Alternativy k jQuery Mobile¶

jQuery Mobile není jediný mobilni framework. Sencha Touch nabízí bohatsi sadu komponent a lepsi vykon, ale vyzaduje více zkusenosti a používá vlastní třídu systém misto jQuery. jQTouch je lehčí alternativa zaměřená na iOS look. Zepto.js je odlehcena nahrázka jQuery optimalizovaná pro mobilni prohlížeče. A samozřejmě můžete pouzit responsive design s media queries a vyhnout se mobilnimu frameworku uplne.

Zaver¶

jQuery Mobile je solidní framework pro rychle vytváření mobilních webovych aplikaci. Pro interni enterprise use case — kde je důležitá rychlost vývoje a jediná codebase — je to dobrá volba. Pro consumer aplikace s vysokými nároky na UX doporučujeme zvážit nativni vyvoj. Nezapomeňte testovat na reálných zařízeních a optimalizovat vykon.