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í...
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í ...
UX● nativní nebo webové (HTML5) apps?● je dobré znát "zone of awesome" obou  technologií
UX - Nativní aplikace●   rychlé●   touch a gesta●   offline z principu●   eye candy●   shop●   přístup k HW
A webové aplikace?
Konvergují.
UX - Webové aplikace●   stále rychlejší●   touch a gesta také●   offline možný a preferovaný●   eye candy #css3●   shop (m...
Navíc...
Zone of awesome webových apps●   web browser je vlastně shop●   instalace zadáním URL●   odinstalace zavřením tabu●   link...
Proto webové aplikacenesmí imitovat nativní.
Proto webové aplikace nesmíimitovat nativní*● vlastní tlačítka zpět, špatně● fancy animace● imitace nativní aplikace je zl...
Architektura● Tlustý nebo tenký klient?● Servers dead baby, Servers dead.● Catch all versus elite only strategy
ArchitekturaTlustý nebo tenký klient?
ArchitekturaTlustý klient● cestuje HTMLTenký klient● cestuje JSON
ArchitekturaCo je na tenkém klientu dobré● rychlé na vývoj● indexovatelný web● a tím to končí
ArchitekturaCo je na tenkém klientu špatné● limitované UX● round tripy● těsná vazba mezi client - server  ○ duplikování kó...
ArchitekturaCo je na tlustém klientu dobré● future proof● rychlost● nezávyslost na serveru● offline first!   ○ local stora...
ArchitekturaCo je na tlustém klientu problematické● nutnost vědět jak na to  ○ dev stack ftw● fragmentace● reimplementace ...
ArchitekturaReimplementace browseru?●   historie a back button●   práce se scroll position●   asynchronní routing●   last ...
ArchitekturaServers dead baby, Servers dead.  "If youre thinking about the server when  youare writing a web app, youre do...
ArchitekturaServer reincarnation. Server je● kontrakt● storage● model
ArchitekturaCatch all or elite only strategy● kterou zvolit● jedna app = více UI
Implementace● HR● JS knihovny● Pasti a pastičky
ImplementaceHR"Je těžké nabrat lidi, co umí. Snažší je nabratlidi, co chtějí umět."
ImplementaceHR - Paradox JavascriptuPro firmy: JS umí trochu skoro každý,programátora není nemožné sehnat.Pro zaměstnance:...
ImplementaceJS knihovny● jakou JS knihovnu?  ○ zepto  ○ touch and gestures● proč je Google Closure na mobilní  development...
ImplementaceAJAX  ○ timeout  ○ preload  ○ no connection"Pokud neumíte udělat timeout u asyncoperací, tak se do AJAXu vůbec...
Implementace●   mobile html5 boilerplate●   animace a HW akcelerace●   -webkit-overflow-scrolling: touch;●   HTML5 form fi...
Děkuji za pozornost    daniel@steigerwald.cz  http://javascript-skoleni.cz
Upcoming SlideShare
Loading in …5
×

Daniel Steigerwald: Jak psát mobilní webové aplikace

775 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
775
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Daniel Steigerwald: Jak psát mobilní webové aplikace

  1. 1. Jak psát mobilní webové aplikace. Daniel Steigerwald
  2. 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. 3. Obsah● UX● Architektura● Implementace
  4. 4. UX● lidé používají mobil všude● post pc éra● omezený výkon, rozlišení, ovládání
  5. 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. 6. UX● nativní nebo webové (HTML5) apps?● je dobré znát "zone of awesome" obou technologií
  7. 7. UX - Nativní aplikace● rychlé● touch a gesta● offline z principu● eye candy● shop● přístup k HW
  8. 8. A webové aplikace?
  9. 9. Konvergují.
  10. 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. 11. Navíc...
  12. 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. 13. Proto webové aplikacenesmí imitovat nativní.
  14. 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. 15. Architektura● Tlustý nebo tenký klient?● Servers dead baby, Servers dead.● Catch all versus elite only strategy
  16. 16. ArchitekturaTlustý nebo tenký klient?
  17. 17. ArchitekturaTlustý klient● cestuje HTMLTenký klient● cestuje JSON
  18. 18. ArchitekturaCo je na tenkém klientu dobré● rychlé na vývoj● indexovatelný web● a tím to končí
  19. 19. ArchitekturaCo 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. 20. ArchitekturaCo je na tlustém klientu dobré● future proof● rychlost● nezávyslost na serveru● offline first! ○ local storage ○ database storage ○ synchronizace● UI client only
  21. 21. ArchitekturaCo je na tlustém klientu problematické● nutnost vědět jak na to ○ dev stack ftw● fragmentace● reimplementace browseru
  22. 22. ArchitekturaReimplementace browseru?● historie a back button● práce se scroll position● asynchronní routing● last click win● persistence formulářů (localstorage)
  23. 23. ArchitekturaServers dead baby, Servers dead. "If youre thinking about the server when youare writing a web app, youre doing it wrong. Develop as an offline app, then add server." goo.gl/foO2S
  24. 24. ArchitekturaServer reincarnation. Server je● kontrakt● storage● model
  25. 25. ArchitekturaCatch all or elite only strategy● kterou zvolit● jedna app = více UI
  26. 26. Implementace● HR● JS knihovny● Pasti a pastičky
  27. 27. ImplementaceHR"Je těžké nabrat lidi, co umí. Snažší je nabratlidi, co chtějí umět."
  28. 28. ImplementaceHR - Paradox JavascriptuPro firmy: JS umí trochu skoro každý,programátora není nemožné sehnat.Pro zaměstnance: Dobře JS neumí skoronikdo, naučte se ho, a firmy vám utrhnou ruce.
  29. 29. ImplementaceJS knihovny● jakou JS knihovnu? ○ zepto ○ touch and gestures● proč je Google Closure na mobilní development nejlepší?
  30. 30. ImplementaceAJAX ○ timeout ○ preload ○ no connection"Pokud neumíte udělat timeout u asyncoperací, tak se do AJAXu vůbec nepouštějte.Čumět 5 minut na spinner nikoho nebaví. A F5udělá bůhvíco." @spazef0rze
  31. 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. 32. Děkuji za pozornost daniel@steigerwald.cz http://javascript-skoleni.cz

×