Mobilni web uz neni budoucnost — je to pritomnost. Podle statistik jiz tretina nasich klientu pristupuje k webovym aplikacim z mobilnich zarizeni. jQuery Mobile slibuje jednoduchy zpusob, jak vytvaret dotykove webove aplikace, ktere vypadaji a funguji jako nativni. Po mesici experimentovani sdilime nase poznatky.
Co je jQuery Mobile¶
jQuery Mobile je framework postaveny nad jQuery a jQuery UI, urceny pro tvorbu mobilnich webovych aplikaci. Na rozdil od media queries, ktere prizpusobuji existujici desktop web mobilnimu zarizeni, jQuery Mobile je navrzen mobile-first — zacinate s mobilni verzi a obsah je optimalizovan pro dotykove ovladani od zacatku.
Framework funguje na principu progresivniho vylepseni. Zakladem je semanticky HTML s daty-atributy (data-role, data-theme, data-transition). jQuery Mobile detekuje schopnosti prohlizece a automaticky vylepsuje HTML na bohatejsi UI — tlacitka dostavaji dotykove styly, listy dostavaji interakci, stranky dostavaji prechody. Na starych telefonech s omezenymi prohlizeci stale vidíte funkcni (byť méně hezký) obsah.
Strankovani a navigace¶
jQuery Mobile pouziva unikatni pristup ke strankovani. Vsechny stranky jsou div elementy v jednom HTML souboru (nebo nactené AJAXem) s data-role=”page”. Navigace mezi strankami je animovany prechod — slide, fade, pop — bez kompletniho znovunacteni stranky. URL se aktualizuje pres hash fragmenty, takze funguje historie a tlacitko zpet.
AJAX navigace ma svoje vyhody — rychle prechody, plynuly uzivatelsky zazitek, moznost prednacitatní stranek. Ale take nevyhody — SEO je problematicke (vyhledavace nevidí AJAX obsah), deep linking vyzaduje extra praci a debugovani AJAX navigace je slozitejsi nez klasickych odkazu. Pro nase interní aplikace, kde SEO neni dulezite, to neni problem. Pro verejne weby doporucujeme opatrnost.
UI komponenty¶
jQuery Mobile nabizi sadu UI komponent prizpusobenych dotykovemu ovladani. Listy (listview) s vestavěným vyhledáváním, tlacitka s ikonami a ruznym stylem, formulare 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), ktere muzete kombinovat.
Kvalita komponent je solidni pro zakladni use case. Listview s vyhledáváním je skvely pro telefonni seznam nebo katalog produktu. Formulare s dotykovymi widgety jsou pouzitelnejsi nez standardni HTML formuláre na mobilu. Ale pro slozitejsi interakce — drag and drop, slozite tabulky, grafy — budete potrebovat doplnkove knihovny.
Temovani a design¶
ThemeRoller for jQuery Mobile je webovy nastroj pro vytvareni vlastnich témat. Nastavite barvy, fonty, zaobleni rohu a stiny, a stahnete hotovy CSS soubor. Je to rychly zpusob, jak prizpusobit vzhled aplikace firemnimu branding. Ale pozor — vsechny jQuery Mobile aplikace maji preece jen ten „jQuery Mobile look”. Pokud potrebujete unikatni design, budete muset hodne CSS prepsat.
To je jeden z hlavnich kriticismů — jQuery Mobile aplikace vypadaji jako jQuery Mobile aplikace. Nemaji nativni look and feel iOS nebo Androidu. Uzivatel pozna, ze neni v nativni aplikaci. Pro interní enterprise aplikace to muze byt prijatelne, pro consumer aplikace je to casto deal breaker.
Vykon na mobilnich zarizenich¶
Tady narazíme na nejvetsi problem jQuery Mobile. Framework je velky — jQuery core plus jQuery Mobile CSS a JS je dohromady pres 200KB minifikovaneho kodu. Na rychlem WiFi to neni problem, ale na 3G siti muze prvni nacteni trvat vice sekund. Navic inicializace frameworku — parsovani DOM, vylepsovani elementu — je CPU narocna a na starsich telefonech zpusobuje viditelne zpozdeni.
Animace prechodu mezi strankami nejsou na vsech zarizenich plynule. Na iPhone 4 a novejsich Android telefonech to vypada dobre. Na starsich zarizenich se animace sekaji a pusobi neprofeisionalne. Doporucujeme testovat na nejslabsim zarizeni, ktere budou vasi uzivatele pouzivat, a pripadne animace zjednodusit nebo vypnout.
Optimalizace vyzaduje usili — lazy loading obrazku, minimalizace DOM operaci, prednacitatní kritickych stranek, custom build jQuery Mobile s jen potrebnymi moduly. S temito optimalizacemi je vysledek prijatelny, ale vychozi stav bez optimalizace je pro slozitejsi aplikace pomalý.
Srovnani s nativnim vyvojem¶
Otazka, ktera nas klienti ptaji nejcasteji: mame delat nativni iOS/Android aplikaci nebo mobilni web s jQuery Mobile? Odpoved zaleží na kontextu. Nativni aplikace maji lepsi vykon, pristup k hardwarovym API (kamera, akcelerometr, push notifikace), offline fungování a distribuci pres App Store. Webova aplikace ma jednu codebase pro vsechny platformy, okamzite aktualizace bez schvaleni App Storem a nízsi naklady na vyvoj.
Pro interni enterprise aplikace — kde nevadí, ze aplikace nevypada nativne, kde nepotrebujete push notifikace a kde chcete jednu verzi pro vsechny zarizeni — je jQuery Mobile dobra volba. Pro consumer aplikace, kde je uzivatelsky zazitek klicovy a kde soutezite s nativnimi aplikacemi, doporucujeme nativni vyvoj nebo alespon PhoneGap wrapper.
PhoneGap — hybridni pristup¶
PhoneGap (nyni take Apache Cordova) umoznuje zabalit webovou aplikaci do nativniho kontejneru. Vysledek je nativni aplikace distribuovatelna pres App Store, ktera uvnitr bezi ve WebView. jQuery Mobile plus PhoneGap vam dava pristup k nativnim API (kamera, kontakty, filesystem) a moznost offline fungování. Na druhou stranu vykon je stale omezen vykonem WebView.
Tento hybridni pristup muze byt rozumny kompromis. Vyvinete jednu webovou aplikaci, zabalite ji pro iOS i Android a mate nativni distribuci. Ale musíte pocitat s tim, ze uzivatelsky zazitek nebude na urovni skutecne nativni aplikace. Pro nektere use case — interní nastroje, jednoduche utilitky — to staci. Pro komplexní aplikace s narocnou grafikou nebo složitou interakci ne.
Alternativy k jQuery Mobile¶
jQuery Mobile neni jediny mobilni framework. Sencha Touch nabizi bohatsi sadu komponent a lepsi vykon, ale vyzaduje vice zkusenosti a pouziva vlastni tridu systém misto jQuery. jQTouch je lehci alternativa zamerena na iOS look. Zepto.js je odlehcena nahrázka jQuery optimalizovana pro mobilni prohlizece. A samozrejme muzete pouzit responsive design s media queries a vyhnout se mobilnimu frameworku uplne.
Zaver¶
jQuery Mobile je solidni framework pro rychle vytvareni mobilnich webovych aplikaci. Pro interni enterprise use case — kde je dulezita rychlost vyvoje a jedina codebase — je to dobra volba. Pro consumer aplikace s vysokymi naroky na UX doporucujeme zvazit nativni vyvoj. Nezapomente testovat na reálných zarizenich a optimalizovat vykon.