jQuery Mobile

Nedávno byl představen (i já jsem o této události informoval) nový JavaScriptový framework určený a optimalizovaný pro mobilní zařízení s dotykovou obrazovkou. Jmenuje se jQuery Mobile a přinesl do světa mobilních webových aplikací mnoho zajímavého a já se pokusím představit některé z jeho možností.

Hlavním cílem je optimalizované JavaScriptové jádro pro mobilní zařízení s dotykovou obrazovkou, pro které se jQuery Mobile snaží přivést jednotné uživatelské rozhraní. Právě velký bům způsobilo oznámení celkového počtu testovaných zařízení a operačních systémů, jmenovitě iOS, Android, BlackBerry, Bada, Windows Phone, palm webOS, Symbian nebo MeeGo.

Nebyl to však systém, ale mobilní prohlížeč, na který se jQuery Mobile tým zaměřil a vybrali ty, které mají nějaké možnosti (co se týče funkčnosti) a určité zastoupení na trhu. Sem patří nejen nativní prohlížeče samotných operačních systémů (např. Safari z iOS), ale např. i Opera Mini, Opera Mobile nebo Phonegap. Osobně jsem jej testoval právě v Safari a Opeře Mobile, kde webová aplikace fungovala náramně. Testoval jsem jej také v jednom WebKit J2ME prohlížeči, kde se však objevily některé problémy s přechodem obsahu.

Pokud by byla řeč o JavaScriptových frameworcích nebo JavaScriptových knihovnách, jQuery Mobile není první a jistě ani poslední. Známé jsou například Sencha Touch nebo JQTouch (jQuery plugin pro mobilní vývoj). jQuery tým se však zaměřil především no optimalizaci funkčnosti a možností zařízení s dotekovou obrazovkou a snažil se vybudovat samostatný, rychlý a snadno použitelný framework. Povedlo se jim to?

Vlastnosti

Framework je postavený na jádře jQuery pro desktopové prohlížeče, takže nabízí možnosti stejného zápisu jako dřív bez nutnosti se učit mnoho nových věcí. To z něj do budoucna činí velice perspektivní nástroj, právě díky veliké oblíbenosti samotného jQuery. Vyžaduje však také standardizované zápisy HTML a CSS právě z důvodu zachování vysoké kompatibility a použitelnosti na co nejvíce mobilních zařízení. Je zde možnost využívat HTML5 data pro automatické spouštění všech dostupných součástí webové aplikace, které budou umístěny na stránce. Nejen díky tomu je ovládání webové aplikace poháněné tímto frameworkem opravdu rychlá.

Zajímavou vlastností je zaměření na funkce jako je např. WAI-ARIA, díky čemuž bude možné používat nejrůznější asistenční služby, např. čtení obsahu z obrazovky (např. VoiceOver v iOS). Silnou stránkou je také šablonovací framework a ThemeRoller, které umožňují snadno vytvořit velice dobře vypadající webovou aplikaci. O těchto nástrojích a možnostech se zmiňuji podrobněji níže.

Pokud se podíváme na samotnou tvorbu jednotlivých stránek a podstránek webové aplikace, je zde možné díky konstrukci vytvořit plynulé přechody (např. fade, flip, slideUp) mezi jednotlivými stránkami, případně další obsah nahrávat pomocí AJAXu a to i u odesílání formulářů. Obě tyto metody tak umožňují vysoce interaktivní ovládání aplikace.

Propracovaný šablnonovací systém

Jak jsem se již zmínil, jQuery Mobile má velice propracovaný šablonovací systém jak samotných stránek, tak i ovládacích prvků. Využívá totiž vlastností CSS3 pro možnost kulatých rohů, stínů nebo gradientů. Díky tomu není nutné přidávat do aplikace další data v podobě na velikost náročných obrázků a výsledný efekt je naprosto skvělý a na mobilním zařízení vypadá úžasně.

Aby si vývojáři nemuseli všechny grafické prvky vytvářet sami (pouze v případě své opravdové potřeby), je zde možnost použití předpřipravených grafických ikon či samotných grafických šablon.

Určitě je dobré strávit nějaký čas studováním možností tvorby prvků pro tento mobilní framework. Na zařízeních iPhone nebo na Android telefonech prkvy s touto grafikou vypadají opravdu dobře. A budou tak vypadat samozřejmě i na dalších zařízeních, pokud podporují CSS3 gradienty.

Slovo závěrem

Mně osobně se vývoj tohoto frameworku velice líbí a jistě jej budu sledovat dál. Určitě se stane na trhu mobilních zařízení velkým tahákem a začne tak pro tato zařízení vznikat velké množství webových aplikací. Je to přeci zdarma a běží to na jQuery. Na WebExpo 2010 byl představen již zmíněný JavaScriptový framework Sencha Touch (Ext JS), pro který podle mě bude jQuery Mobile velice silný konkurent.

V dalším článku se také pokusím předvést vlastní aplikaci postavenou na tomto mobilním frameworku. Určitě bych, v případě zájmu o tento framework, doporučil prostudovat hezky zpracovanou dokumentaci, která je vytvořená jako mobilní aplikace. Tedy pokud jste již do studování dávno nezabředli.