Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • samuelmatis

    Aug. 23, 2013

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

Views

Total views

859

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

9

Shares

0

Comments

0

Likes

1

×