HTML5 versus nativní: debata o mobilních aplikacích

Diskuse na téma „webové aplikace, nebo nativní“ se vedou už několik let. Každý přístup má svá pozitiva a negativa, která jsou důvěrně známá a netřeba je vyjmenovávat znovu. Michael Mahemoff opět otevírá tuto otázku, tentokrát ale v souvislosti s aplikacemi pro mobilní zařízení. Nativní, nebo webové?

Překlad článku HTML5 vs Native: The Mobile App Debate, jehož autorem je Michael Mahemoff (Developer Relations, Google). Článek byl publikován pod Creative Commons Attribution 3.0 licencí. Český překlad vyšel na blogu Simply Easy, zveřejňujeme jej po domluvě s překladatelem zde.

Úvod

Mobilní aplikace a HTML5 teď patří mezi ty nejžhavější technologie a v mnohém se navzájem překrývají.  Webové aplikace běží v mobilních prohlížečích a mohou být také zabaleny jako nativní aplikace na různých mobilních platformách. S pestrou paletou platforem, které je potřeba podporovat, a v kombinaci s vysokým výkonem mobilních prohlížečů se vývojáři obrací k HTML5 coby řešení metodou „napiš jednou, využij vícekrát“. Ale je to skutečně životaschopné řešení? Důvody pro nativní řešení jsou tu stále, jsou přesvědčivé a mnoho vývojářů jde raději touto cestou. Následující text je pokus o diskusi na téma nativní versus webový.

Bohatství vlastností

Teze: nativní zvládne více

Mobilní funkcionalitu můžeme rozdělit do dvou dimenzí: uživatelský prožitek s aplikací samotnou a způsob, jakým se aplikace integruje do ekosystému daného zařízení; např. u Androidu by to byly featury jako widgety a notifikace. Nativní kraluje v obou dimenzích.

V rámci uživatelského prožitku s aplikací toho dokáží nativní aplikace víc. Snadno mohou zachytit události jako tažení (drag), na zařízeních, které to podporují, dokonce multitouch. Mohou vykonávat nějakou činnost po stisknutí ovládacích prvků, jako je vyhledávací tlačítko na Androidu nebo ovladač hlasitosti. Mohou také přistupovat k hardware jako je GPS nebo kamera. A s uživatelovým svolením poskytují některé platformy neomezený přístup k operačnímu systému. Jenom si zkuste detekovat pomocí HTML5, jak moc je už vybitá baterie!

Jde o víc než jen o pohodlí v rámci aplikace. Operační systém jako Android poskytuje aplikacím různé způsoby, jak interagovat s uživateli nebo s jinými aplikacemi. Máte aktivní widgety na hlavní stránce. Máte notifikace, které se objevují ve status baru zařízení. A máte tzv. intents, které vaší aplikaci dovolují oznámit ostatním aplikacím, že poskytuje obecnou službu, kterou ostatní aplikace mohou vyžadovat.

Antiteze: nativní vlastnosti mohou být rozšířeny, a web tak jako tak dohání ztrátu

Je pravda, že mnohé vlastnosti nativní aplikace jsou jednoduše mimo dosah HTML5 aplikace. Bez ohledu na to jaké jsou vaše web-fu dovednosti, jestliže vaše aplikace trčí v sandboxu bez možnosti přístupu k API kamery, hned tak schopná fotit nebude! Naštěstí nemusíte v tom sandboxu být. Pokud opravdu potřebujete, aby vaše webová aplikace zvládala fotit, můžete si vytvořit nativní aplikaci s vloženým web view, které bude poskytovat uživatelské rozhraní. Takhle funguje open-source framework PhoneGap: vyplní mezeru mezi webovým a nativním tím, že zpřístupní nativní vlastnosti jako webové služby, které si web view volá pomocí standardního síťového API. Když vytváříte takovéto hybridní aplikace, jste také schopni využít vlastnosti dané mobilní platformy jako jsou widgety, notifikace a intents.

Vytvoření hybridu – web plus nativní – je ideálním řešením jen stěží.  Zvyšuje to komplexitu a použít to lze pouze u webových aplikací zabalených jako nativní aplikace, nikoli u tradičních webových stránek prohlížených v mobilním prohlížeči.  Ale v budoucnosti tomu tak nezbytně být nemusí. Webové standardy se rychle vyvíjejí a moderní mobilní prohlížeče drží tempo. Offline ukládání dat, geolokace, canvas grafika či video/audio playback se těší široké podpoře mezi moderními chytrými telefony. Dokonce i kamera začíná být podporována – Android 3.1 umožňuje fotit a zaznamenat video s použitím webových standardů. A nejnovější iOS prohlížeč podporuje WebSocket pro duplexní komunikaci, streamování a také detekci orientace zařízení.

Mobilní svět se celkově vyvíjí. Web se ale také vyvíjí, a rychle. Jen mezi desktopovými prohlížeči je pět hlavních výrobců, kteří rozvíjejí standardy a přidávají vlastnosti rychlostí blesku. Jakkoliv není triviální portovat všechny tyto vlastnosti pro mobilní zařízení, mnoho z nich už si našlo cestu do mobilních prohlížečů.

Nativní aplikace jsou rychle se pohybující cíl, ale web dotahuje ztrátu.

Výkon

Teze: nativní je rychlejší

Nativní aplikace se nemusejí vyrovnávat s překážkou v podobě běhového prostředí. Běží skoro přímo na železe a mohou využívat pomocníky pro zvýšení výkonu, jako jsou GPU akcelerace a multithreading.

Antiteze: běhová prostředí webu jsou dnes mnohem rychlejší a většina aplikací rychlost stejně nepotřebuje

Říct jen to, že web se stal v nedávných letech rychlejším, by bylo hodně mírné vyjádření. V8, JavaScriptový engine vyvinutý pro Chrome, představoval pro web obrovský výkonový skok už v době, když se objevil, a od té doby se ještě zrychlil:

V8

Grafické renderovací enginy také zrychlily web, a nyní nastupuje hardwarová akcelerace. Podívejte se na rychlostní skok, který  přinesl hardwarově akcelerovaný canvas:

Hardwarově akcelerovaný canvas

Navíc nové Web Workers API umožňuje multithreading a vývojáři moderního webu mohou využívat řadu výkonově optimalizovaných knihoven a dobře prozkoumaných technik pro optimalizaci výkonu. Zatímco většina z těchto technik přichází z desktopového webu, jsou použitelné i v mobilním světě a mobilním zařízením je věnována rostoucí pozornost. Např. výkonový guru Steve Sounders stránku věnovanou mobilním optimalizačním nástrojům.

Ne všechny novinky ze světa desktopů už pronikly na mobilní platformy, ale trend naznačuje, že už jsou na cestě. Také je důležité poznamenat, že většina mobilních aplikací nejsou bleeding-edge 3D hry, ale jsou spíš v zásadě informačně založené: novinky, mail, časové rozvrhy, sociální sítě a podobně. Navštivte pár webů z vašeho mobilu, např. GMail, Amazon, Twitter, a sami budete moci potvrdit, že výkon mobilního webu je víc než dostatečný. Co se týče her, tak ty základní jsou už uskutečnitelné pomocí 2D canvas a WebGL se i na mobilech začíná objevovat – viz Firefox 4. Dokud se nerozšíří, je tady rostoucí rodina frameworků, které kompilují WebGL aplikace do nativních aplikací, které pak mohou využít OpenGL, např. ImpactJS.

Vývojářská zkušenost

Teze: je snadnější vyvinout nativní

Nativní aplikace používají robustní programovací jazyky (např. Java, Objective C, C++), které byly vytvořeny pro komplexní vývoj aplikací a mají za sebou už bohatou historii, která prověřila jejich kvality. Od základů byla vytvořena API podporující danou platformu. Můžete snadno ladit aplikace v desktopových emulátorech, které poskytují dobrou reprezentaci cílového zařízení.

Co činí webový vývoj obtížným je obrovská diverzita prohlížečů a běhových prostředí. Když vaše aplikace běží, není žádná záruka, že určitá vlastnost X bude k dispozici. A i když bude, jak bude implementována v daném prohlížeči? Standardy jsou otevřené interpretaci.

Antiteze: často je snadnější vyvinout web, zvlášť při cílení na více různých zařízení

Pojďme nejprve probrat základní technologie. Je pravda, že webové standardy byly původně koncipovány v době, kdy web byl založen na dokumentech, ne na aplikacích, s JavaScriptem vytvořeným a nasazeným v pouhých deseti dnech! Ale ukázalo, se, že jejich schopnosti jsou mnohem lepší než si kdo představoval – weboví vývojáři se naučili využívat ty dobré části a zkrotit ty špatné. Mimoto ani standardy nejsou dlouhodobě neměnné a poslední kroky v podobě HTML5, CSS3 a EcmaScript Harmony slibují zvýšení přívětivosti pro vývojáře. Zda preferujete C++ nebo Javu nebo JavaScript je předmětem spíš náboženské debaty, a rozhodnutí závisí na kódu, který jste vytvořili v minulosti a ze kterého dnes čerpáte. Ale dnes už můžeme JavaScript zcela jistě zahrnout mezi kandidáty, které je třeba brát vážně.

Druhou stranou fragmentace klientů (prohlížečů a běhových prostředí) je fakt, že všechna tato prostředí vůbec existují. Vyviňte aplikaci pro Android v Javě, a čelíte problému, že pro iOS ji musíte portovat do Objective C. Vyviňte webovou aplikaci, a poběží na Androidu i iOS, a to se ani nezmiňujeme o WebOS, BlackBerry, Windows Mobile a… tedy, taková je alespoň teorie. V praxi budete potřebovat, pokud se staráte o to, jak se uživatelům s vaší aplikací pracuje, věci vyladit pro každou platformu zvlášť. Ale to byste v případě nativních aplikací museli dělat taky, pro většinu operačních systémů existují různé verze a různá zařízení.

Dobrá zpráva je, že „fragmentace“ na webu byla vždycky, a za tu dobu už existují dobře známé techniky, jak se s tím vypořádat. Co je nejdůležitější: princip progressive enhancement vede vývojáře k tomu, aby se nejprve zaměřili na základní funkčnost na jednoduchém zařízení a přidávali vrstvy platformně-specifické úžasnosti tam, kde je dostupná. Mantra detekce vlastností také pomáhá, a dnes máme, díky knihovnám jako je Modernizr, možnost při vývoji použít přístup, kterému se začalo říkat responsive web design, tj. design který se umí přizpůsobit možnostem a schopnostem klienta. Pokud budete tyto přístupy rozumně používat, můžete s minimem nákladů rozšířit portfolio podporovaných zařízení a váš web bude fungovat všude možně – pravděpodobně i na klasických mobilních telefonech ze staré školy, a dokonce i na zařízení jako jsou hodinky a televize, bez ohledu na výrobce a operační systém. Podívejte se na naši multi-UI demonstraci na Google IO 2011, v níž jsme se zaměřili na různé druhy zařízení (klasický mobilní telefon, chytrý telefon, tablet, desktop, TV) se společným základem kódu.

Look-And-Feel

Teze: nativní lépe zapadá do prostředí platformy

Jedním z definujících vlastností každé platformy je její look and feel, jak vypadá a jaký dojem vytváří. Uživatelé očekávají, že kontrolní prvky budou vypadat konzistentně a bude se s nimi manipulovat všude stejně. Existují jisté ustálené zvyklosti, které se liší platformu od platformy, např. co se stane když uživatel provede „dlouhé podržení“ (bude se dotýkat nějakého prvku po dobu několika vteřin)? Platformy mají standardy chování pro takové věci, a nemůžete je všechny uspokojit s jedinou HTML5 aplikací.

Look-and-feel určité platformy je daný nativní softwarovou knihovnou té které platformy. Ta nabízí standardizované widgety, které dávají aplikacím ten vzhled a dojem, který uživatelé očekávají. Můžete mít spoustu očekávaného look-and-feel „zadarmo“, jenom tím, že použijete nativní toolkit.

Antiteze: Web má svůj vlastní look-and-feel, a navíc můžete přizpůsobit webové rozhraní pro platformy, na kterých vám nejvíce záleží

Jak jsme si řekli v předchozí sekci: vývoj webu lze dělat tak, že nejprve napíšeme verzi „jedna velikost se hodí pro všechny“, abychom získali funkční základ, a potom využijeme progressive enhancement. Zatímco rozšiřování je často chápáno jako přidávání vlastností, můžete aplikaci rozšířit i tím, že přidáte vlastnosti specifické pro platformy, na kterých vám nejvíce záleží. To je obdoba „detekce prohlížeče“, což je něco, nad čím se webová komunita mračí, zejména proto, že zde existuje velké množství rozdílných prohlížečů. Ale jestliže dáváte dvěma nebo třem platformám velmi vysokou prioritu a jste ochotni vynaložit extra úsilí, abyste se vyrovnali nativním alternativám, tak právě toto může být způsob, jak toho dosáhnout.

Co se týče výchozí verze, tak lze říct, že i web má svůj vlastní look-and-feel, a můžeme dokonce říct, že každá mobilní platforma má svůj „webový look-and-feel“ daný defaultním prohlížečem a běhovým prostředím. „Webový look-and-feel“ může být pro vaše uživatele přijatelný a fakticky vám umožní dosáhnout většího stupně konzistentnosti s tím, co uživatel zná z prohlížeče na desktopu a na dalších zařízeních, se kterými může pracovat. Navíc existuje mnoho úspěšných aplikací, které nativní look-and-feel moc nepodporují. Tohle platí například pro hry (má vaše oblíbená mobilní hra look-and-feel vašeho mobilního operačního systému?) a ještě víc to platí pro konvenčnější aplikace – např. zkuste několik populárnějších Twitter klientů pro vaši platformu, a uvidíte široký rozptyl uživatelských rozhraní.

Nalezitelnost

Teze: nativní aplikace je snadnější nalézt

Distribuční mechanismy aplikací jako Android Market a Apple AppStore jsou v posledních letech obrovsky populární a představují významnou sílu, která táhne celý mobilní průmysl. Kterýkoliv vývojář může poslat svou nativní aplikaci na tržiště aplikací, kde ji uživatelé mohou nalézt díky kombinaci vyhledávání, procházení kategorií a doporučování. Nejen to – pokud jste udělali svou práci správně, nadšené hodnocení a komentáře přesvědčí i další uživatele ke zmáčknutí toho veledůležitého instalačního tlačítka.

Antiteze: ve skutečnosti jsou webové aplikace snadněji k nalezení

Web je pravděpodobně to nejsnadněji objevitelné médium, které kdy bylo vytvořeno. V pouhé URL máme (alespoň teoreticky) jednoznačný identifikátor pro cokoliv, co bylo kdy publikováno na webu, což zahrnuje i jakékoliv aplikace, publikované na standardních webových stránkách. Vyhledávače usnadňují objevování tohoto obsahu; mohou na něj odkazovat ostatní webové stránky, včetně katalogů webových aplikací, které jsou podobné zmíněným trhům mobilních aplikací. Sdílet webové aplikace se svými přáteli může naprosto kdokoli, jenom tím, že na ně odkáže v e-mailu či vzkazem na sociálních sítích. Odkazy mohou být poslány i v SMS, kde na ně mobilní uživatelé mohou kliknout a spustit aplikaci přímo v prohlížeči svého zařízení.

Zatím nemáme stejná tržiště, kde uživatelé mohou hodnotit a komentovat aplikaci, ale i to se mění. Čtěte dál…

Monetizace

Teze: nativní může být monetizováno

„Šestiletý stvořil aplikaci během přestávky na oběd a prodal zilión kopií po třech dolarech za každou“. Poslední dobou můžete vídat takové titulky často, takže není žádný div, že vývojáři, ať už velcí nebo malí, vzhlížejí k mobilním tržištím s nadějí na výdělek. Mobilní platformy nabízejí několik způsobů, jak mohou vývojáři přímo vybírat peníze za své aplikace. Nejjednodušší je jednorázová platba k odemčení aplikace jednou provždy. Na některých platformách jsou dostupně také platby uvnitř aplikací a mechanismy předplatného, které jsou úzce integrované konzistentním a bezpečným způsobem. Tyto novější formy placení dovolují vývojářům proměnit úspěšnou aplikaci v dlouhodobý zdroj příjmů.

Kromě těchto způsobů plateb je stále možné monetizovat pomocí tradičního webového modelu, např. prostřednictvím reklamy nebo sponzoringu.

Antiteze: web bylo možné monetizovat vždy, a možností přibývá

Web by nebyl tím strojem pohánějícím moderní průmysl, kdyby neexistovaly hojné příležitosti, jak na něm vydělávat. Ačkoliv přímé mechanismy typu „plať za užití“ se zatím moc nerozvinuly, jsou tu různé tržní niky, kde lze vytvořit životaschopná řešení například s modelem předplatného „software jako služba“. Příkladem mohou být Google Apps, produkty 37Signals a prémiové verze různých e-mailových služeb. Navíc přímé platby nejsou jediným způsobem, jak vytvářet zisk z webových aplikací. Je tu online reklama, affiliate odkazy, sponzorství, cross-promotion a další produkty a služby.

Po všem, co tu bylo řečeno, by se nikdo nemohl divit webovému vývojáři, co čte ty titulky a cítí špetku závisti. On nemůže poslat URL do tržiště nativních aplikací, tak co má dělat? Můžete vytvořit nativní „wrapper aplikaci“ – pro každou platformu, na kterou se chcete zaměřit, vytvoříte prázdnou nativní aplikaci, která jednoduše obsahuje komponentu webového prohlížeče (Web View). Do ní vložíte svou webovou aplikaci. Pak stačí už jen tyto nativní aplikace poslat na různá tržiště aplikací (a pak jen pozorujete, jak vám tečou peníze!). Dnes jsou v těch nejznámějších tržištích pravděpodobně stovky, ne-li tisíce podobně webem poháněných aplikací. Některé jsou tak vychytrale asimilované, že v nich vůbec nepoznáme webové aplikace.

Nevýhodou je nutnost kompilování pro každou platformu. Tady mohou pomoci frameworky jako PhoneGap. Nebo ještě lépe, tady můžeme použít webové služby jako PhoneGap Build a vyvíjející se Apparatio. Nasměrujte je na vaše repozitáře kódu, a vypadne aplikace pro Android, aplikace pro iOS a tak dále… připravené k poslání na tržiště aplikací. Žádné instalování nativních SDK na váš počítač; všechno co potřebujete k vytvoření těchto aplikací je editor kódu a webový prohlížeč.

Budou někdy tržiště aplikací podporovat webové aplikace přímo, bez potřeby balit je jako nativní aplikace? To zatím není jasné. Víme, že Google loni představil Chrome Web Store, a ačkoliv se to týká jen desktopu, tento obchod spustil zájem u některých dalších hráčů na poli prohlížečů, a celé je to částí trendu směrem ke katalogům webových aplikací, včetně některých pokusů, specifických pro mobilní zařízení. Jsme v raných fázích konceptu webových obchodů, ale náznaky jsou slibné.

Shrnutí

Bylo by pěkné vyhlásit zde vítěze, ale právě teď žádný jasný vítěz není. Některé aplikace se více hodí do nativního světa, některé se lépe hodí pro web. Web má pravděpodobně rychlejší rozvoj, ale co se týče schopností a kvalit provedení, hýbou se nativní aplikace taky rychle vpřed. A dokud nenastane čas, kdy webové technologie budou „občany první kategorie“ na většině mobilních operačních systémů, vždy bude na místě zvážit nejprve nativní verzi.

Jestli si zvolíte pro vývoj mobilních aplikací webovou cestu, mějte na paměti dodržování standardů a principu progressive enhancement. Web je technologie, která dokáže vaši aplikaci dostat na spoustu různých zařízení a operačních systémů kolem. Ať už tomu budete říkat „fragmentace“ nebo „diverzita“, web s tím počítá a vy, jako vývojáři, můžete těžit z toho, co v tomhle směru udělali jiní před vámi.

Nadšený cyklista, backpacker a freelancer vyrábějící webové stránky… a taky bývalý student sociologie stále víc fascinovaný tím, jak nové technologie mění fungování společnosti.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 56

Přehled komentářů

Ivan Nový HTML je mor,
ejci Re: HTML je mor,
Ivan Nový Re: HTML je mor,
pas Re: HTML je mor,
blizz Re: HTML je mor,
tomexx Re: HTML je mor,
Opravdový odborník :-) Re: HTML je mor,
tomexx Re: HTML je mor,
Pepa Re: HTML je mor,
tomexx Re: HTML je mor,
Ivan Nový Re: HTML je mor,
jay Re: HTML je mor,
Michal Re: HTML je mor,
Ivan Nový Re: HTML je mor,
jay Re: HTML je mor,
Ivan Nový Re: HTML je mor,
jay Re: HTML je mor,
Opravdový odborník :-) Re: HTML je mor,
Ivan Nový Re: HTML je mor,
valnoha Re: HTML je mor,
DeathWalker Re: HTML je mor,
Čelo Re: HTML je mor,
Michal Feltl Hezky sepsané
Naith Webová aplikace offline
PH Re: Webová aplikace offline
Sislik Nativni aplikace
pas Re: Nativni aplikace
lukoko Jak na co
vkalina Multitouch
alfi_ aktualizace
Čelo Re: aktualizace
Pepa Re: aktualizace
alfi_ Re: aktualizace
Martin Malý Komentář k tématu
Opravdový odborník :-) Re: Komentář k tématu
pas Re: Komentář k tématu
jezovec Re: Komentář k tématu
LS_999 Re: Komentář k tématu
jezovec Re: Komentář k tématu
LS_999 Re: Komentář k tématu
jezovec Re: Komentář k tématu
LS_999 Re: Komentář k tématu
jezovec Re: Komentář k tématu
pas Re: Komentář k tématu
Čelo Re: Komentář k tématu
jezovec Re: Komentář k tématu
Tomik HTA aplikace
pravdokop Re: HTA aplikace
Tomik Re: HTA aplikace
Čelo Re: HTA aplikace
Tomik Re: HTA aplikace
Anonymous Thin client vs. thick client
pas Re: Thin client vs. thick client
jezovec Nativní aplikace pro Windows 8 (desktop) v HTML5?
PH Re: Nativní aplikace pro Windows 8 (desktop) v HTML5?
Bob Haha - nativní app? A co na to Facebook?
Zdroj: https://www.zdrojak.cz/?p=3506