Jak psát mobilní webové aplikace.

Daniel Steigerwald

Kdo jsem

● software gardener● školím, píšu, přednáším● evangelizuji Google Closure, Coffeescript, Stylus, TDD● podílím se na zajímavých projektech (Proactify)

Obsah

● UX● Architektura● Implementace

UX

● lidé používají mobil všude● post pc éra● omezený výkon, rozlišení, ovládání

UX - konsekvence

● omezené možnosti přirozeně vedou k MVP● MVP - Minimal Viable Product

Oč méně fičur, o to lépe musejí fungovat.

UX

● nativní nebo webové (HTML5) apps?● je dobré znát "zone of awesome" obou

technologií

● rychlé● touch a gesta● offline z principu● eye candy● shop● přístup k HW

UX - Nativní aplikace

A webové aplikace?

Konvergují.

● stále rychlejší● touch a gesta také● offline možný a preferovaný● eye candy #css3● shop (možný)● přístup k HW (otázka času)

UX - Webové aplikace

Navíc...

Zone of awesome webových apps

● web browser je vlastně shop● instalace zadáním URL● odinstalace zavřením tabu● linkování stavu, historie● konzistentní back button● více instancí současně● žádné licenční poplatky třetí straně

Proto webové aplikace nesmí imitovat nativní.

Proto webové aplikace nesmí imitovat nativní*

● vlastní tlačítka zpět, špatně● fancy animace● imitace nativní aplikace je zlo

* pokud tedy neděláte platform specific product, pro poslední release, a máte na to moře času

● Tlustý nebo tenký klient?● Server's dead baby, Server's dead.● Catch all versus elite only strategy

Architektura

Tlustý nebo tenký klient?

Architektura

Tlustý klient● cestuje HTML

Tenký klient● cestuje JSON

Architektura

Co je na tenkém klientu dobré● rychlé na vývoj● indexovatelný web● a tím to končí

Architektura

Co je na tenkém klientu špatné● limitované UX● round tripy● těsná vazba mezi client - server

○ duplikování kódu○ náročnost pro programátory○ nutnost paralelního vývoje

Architektura

Co je na tlustém klientu dobré● future proof● rychlost● nezávyslost na serveru● offline first!

○ local storage○ database storage○ synchronizace

● UI client only

Architektura

Co je na tlustém klientu problematické● nutnost vědět jak na to

○ dev stack ftw● fragmentace● reimplementace browseru

Architektura

Reimplementace browseru?

● historie a back button● práce se scroll position● asynchronní routing● last click win● persistence formulářů (localstorage)

Architektura

Architektura

Server's dead baby, Server's dead.

"If you're thinking about the server when you'are writing a web app, you're doing it wrong. Develop as an offline app, then add server." goo.gl/foO2S

Architektura

Server reincarnation. Server je● kontrakt● storage● model

Architektura

Catch all or elite only strategy● kterou zvolit● jedna app = více UI

Implementace

● HR● JS knihovny● Pasti a pastičky

Implementace

HR

"Je těžké nabrat lidi, co umí. Snažší je nabrat lidi, co chtějí umět."

Implementace

HR - Paradox Javascriptu

Pro firmy: JS umí trochu skoro každý, programátora není nemožné sehnat.

Pro zaměstnance: Dobře JS neumí skoro nikdo, naučte se ho, a firmy vám utrhnou ruce.

Implementace

JS knihovny● jakou JS knihovnu?

○ zepto○ touch and gestures

● proč je Google Closure na mobilní development nejlepší?

AJAX○ timeout○ preload○ no connection

"Pokud neumíte udělat timeout u async operací, tak se do AJAXu vůbec nepouštějte. Čumět 5 minut na spinner nikoho nebaví. A F5 udělá bůhvíco." @spazef0rze

Implementace

Implementace

● mobile html5 boilerplate● animace a HW akcelerace● -webkit-overflow-scrolling: touch;● HTML5 form fields● .focus() does not work*● hide address bar with CSS scrollability

Děkuji za pozornostdaniel@steigerwald.cz

http://javascript-skoleni.cz