Your SlideShare is downloading. ×
Daniel Steigerwald: Jak psát mobilní webové aplikace
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

476
views

Published on

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

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
476
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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é aplikacenesmí 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?● Servers dead baby, Servers dead.● Catch all versus elite only strategy
  • 16. ArchitekturaTlustý nebo tenký klient?
  • 17. ArchitekturaTlustý klient● cestuje HTMLTenký klient● cestuje JSON
  • 18. ArchitekturaCo je na tenkém klientu dobré● rychlé na vývoj● indexovatelný web● a tím to končí
  • 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. 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. ArchitekturaCo je na tlustém klientu problematické● nutnost vědět jak na to ○ dev stack ftw● fragmentace● reimplementace browseru
  • 22. ArchitekturaReimplementace browseru?● historie a back button● práce se scroll position● asynchronní routing● last click win● persistence formulářů (localstorage)
  • 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. ArchitekturaServer reincarnation. Server je● kontrakt● storage● model
  • 25. ArchitekturaCatch all or elite only strategy● kterou zvolit● jedna app = více UI
  • 26. Implementace● HR● JS knihovny● Pasti a pastičky
  • 27. ImplementaceHR"Je těžké nabrat lidi, co umí. Snažší je nabratlidi, co chtějí umět."
  • 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. ImplementaceJS knihovny● jakou JS knihovnu? ○ zepto ○ touch and gestures● proč je Google Closure na mobilní development nejlepší?
  • 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. 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