Jak psát mobilní webové aplikace. UX, architektura, implementační detaily.

1. Jak psát mobilní webové
aplikace.
Daniel Steigerwald

2. 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)

3. Obsah
● UX
● Architektura
● Implementace

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

5. 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.

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

7. UX - Nativní aplikace
● rychlé
● touch a gesta
● offline z principu
● eye candy
● shop
● přístup k HW

8. A webové aplikace?

9. Konvergují.

10. UX - Webové aplikace
● 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)

11. Navíc...

12. 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ě

13. Proto webové aplikace
nesmí imitovat nativní.

14. 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

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

16. Architektura
Tlustý nebo tenký klient?

17. Architektura
Tlustý klient
● cestuje HTML
Tenký klient
● cestuje JSON

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

19. 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

20. 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

21. Architektura
Co je na tlustém klientu problematické
● nutnost vědět jak na to
○ dev stack ftw
● fragmentace
● reimplementace browseru

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

23. 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

24. Architektura
Server reincarnation. Server je
● kontrakt
● storage
● model

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

26. Implementace
● HR
● JS knihovny
● Pasti a pastičky

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

28. 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.

29. Implementace
JS knihovny
● jakou JS knihovnu?
○ zepto
○ touch and gestures
● proč je Google Closure na mobilní
development nejlepší?

30. Implementace
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

31. 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

32. Děkuji za pozornost
daniel@steigerwald.cz
http://javascript-skoleni.cz