Prototypování mobilních aplikací s jQuery Mobile

Proč právě jQuery Mobile

Prototypování webových mobilních aplikací je trochu obtížnější disciplína, než u klasického webu. Dnešní mobilní prohlížeče sice podporují HTML5, CSS3 a další moderních technologie, ale některé standardní věci v nich nefungují, např. fixní pozice.

Osobně si také myslím, že vytvoření webového prototypu mobilní aplikace je, díky dnešním nástrojům, velice rychlá a poměrně levná cesta, jak se vyhnout případným problémům.

Podpora mobilních prohlížečů

Největší výhodou jQuery Mobile je optimalizace pro široké spektrum mobilních telefonů a mobilních prohlížečů. Vývoj byl samozřejmě v průběhu testován, takže je možné počítat se solidně odladěným chováním, například pro:

• Android 2.1 – 2.3
• Apple iOS 3.2 – 5.0
• Android Honeycomb
• Windows Phone 7 – 7.5
• Opera Mobile 11.0
• Opera Mini (5 – 6)
• Kindle 3 a Kindle Fire
• Nokia Symbian^3

Testovaných zařízení a prohlížečů je samozřejmě více, podívejte se na úplný seznam testovaných zařízení nebo na fotografie testovacích přístrojů na Flickr.

Osobně jsem zkoušel jQuery Mobile na zařízení s Android 2.2 a s Android 2.3 a vše fungovalo poměrně dobře – až na pár drobností (je popsáno níže). Webová aplikace postavená na tomto frameworku bude dobře fungovat i na některých low-end telefonech (telefony bez operačního systému, zkoušel jsem to například na telefonu Samsung Monte). Samozřejmě je nutné počítat s tím, že některé věci nepůjdou jako na chytrých telefonech nebo tabletech.

Unifikovaný vzhled a ovládání

Při prototypování aplikace je potřeba dbát především na funkčnost a rozložení jednotlivých elementů, vzhled je při prototypování naprosto minoritní věc.

Díky unifikovanému (jednotnému) vzhledu a vlastnímu stylovacímu nástroji ThemeRoller je velice jednoduché vytvořit aplikaci, která bude vypadat stejně ve všech prohlížečích a na všech zařízeních.

• S využitím HTML5 datových atributů a patřičných hodnot se o stylování postará sám framework.
• K dispozici je unifikovaný design všech ovládacích prvků.
• jQuery Mobile nabízí 5 různých barevných motivů.
• Díky ThemeRoller je možné vytvořit nespočet vlastních barevných motivů.

Funkčnost aplikace a možnosti ovládání jsou založena na využívání DOM a načítání potřebných stránek pomocí AJAXu (více informací o možnostech jQuery Mobile). K dispozici je několik možností, jak zefektivnit chování aplikace:

• Vícestránkový layout – jQuery Mobile podporuje více jednotlivých mobilních stránek na jedné kompletní stránce, například dvě stránky v index.html.
• Přednačítání stránek do DOM – AJAXové načítání může být v některých případech zbytečně dlouhavé, jQuery Mobile se o to umí jednoduše postarat.
• Animované přechody mezi jednotlivými stránkami, díky kterým je možné vytvořit dynamické chování jako u klasické mobilní aplikace.

Zmíněné možnosti mají samozřejmě i své nedostatky (popsáno níže), kterým je možné předejít správným postupem.

Responsivní design

Jak jsem se již zmínil, jQuery Mobile je optimalizováno pro velké množství zařízení a prohlížečů. Například zařízení iPhone mají stejné rozlišení displeje, protože jsou od jednoho výrobce. U zařízení s Android s něčím není možné počítat.

Framework jQuery Mobile přidává automaticky podporu pro techniku responsive design. Aplikaci tak bude nezávislá na rozlišení a bude se automaticky přizpůsobovat i při otáčení zařízení.

Více informací o této technice najdete v článku Responsive Web Design od A List Apart.

Snadná tvorba aplikace

Jak jsem se již zmínil v úvodu, jQuery Mobile je založené na HTML5 a využívání datových atributů. Díky tomu je velice jednoduché vytvořit rozložení stránek, použití témat a další. Je také, právě díky jQuery, velice snadné si přizpůsobit nastavení frameworku díky namespace $.mobile.

Při vytváření prototypu je možné pro rozložení stránky počítat i s možností hlavičky, patičky nebo ovládacích panelů (více informací o jQuery Mobile Toolbars). Protože možnost fixního pozicování je ve většíně mobilních prohlížečů téměř nemožná, díky jQuery Mobile je tento problém poměrně dobře vyřešen – samozřejmě s využítím JavaScriptu.

Samozřejmě je možné používat kterékoliv HTML elementy, CSS prvky, vlastní JavaScript nebo standardní možností jQuery.

Vše není úplně dokonalé

Výše popsané možnosti sebou nesou určité problémy. Nástroj je zatím ve své první oficiální verzi, ale je možné počítat s postupným vyhlazováním a další optimalizací. Některým zmíněným problémům je možné se vyhnout správným postupem, doporučeným v rámci oficiální dokumentace nebo „programátorským” přístupem. Osobně jsem zatím narazil na následující problémy.

Efekty a prvky

• Některé přechody mezi stránkami nejsou plynulé, např.
  • Flip není plynulé,
  • Pop je téměř nerozpoznatelné,
  • Fade je pomalé a není plynulé.
• Vlastní dialogová okna frameworku (stránky označené pomocí data-rel="dialog") způsobují chyby po zavření a následném scrollování. Pokud je zavřete, budou problikávat na obrazovce.

Jde především o grafické efekty, které jsou závislé na samotném prohlížeči a předpokládám, že jak bude prováděna optimalizace kódu a vylepšování prohlížečů, postupně tyto problémy odpadnou (na desktopu nejsou).

Přednačítání a cachování

Nepatří to úplně do problémů, ale může je to způsobit. Řeč je o využívání přednačítání a cachování stránek v rámci DOM.

Jak jsem zmínil, princip fungování jQuery Mobile je založen na AJAXovém načítání nebo na vícestránkovém layoutu. Pokud v rámci aplikace použijete přednačítání stránek nebo cachování do DOM, nešetrným přístupem by mohlo dojít k přehlcení prohlížeče a jeho zpomalení nebo pád. To by jistě v rámci prototypu nebylo nejšťastnější.

Framework se o čištění DOM umí naštěstí postarat sám. Je samozřejmě toto chování možné ovlivnit a tím si případně způsobit i zmíněné problemy.

Jaké jsou další možnosti?

JavaScriptových frameworků pro vývoj mobilních webových aplikací je poměrně hodně, ze svých zkušeností mohu zmínit například:

• Sencha Touch
• jQ Touch
• Wink
• DHTMLX Touch

Je jich samozřejmě o dost více, ale často nejsou tak univerzální, aby se daly využívat tak jako jQuery Mobile. Podívejte se srovnávací tabulku, kde jsou další javascriptové mobilní frameworky.

Můžete se těšit

V dalším díle vytvoříme jednoduchou webovou mobilní aplikaci. Na té si ukážeme, jak díky prototypování ušetřit čas před samotným vývojem mobilní aplikace a i samotné možnosti frameworku jQuery Mobile.