Lessons Learned in Mobile Web App Development

Transcript

1. Ordered List Brandon Keepers Grand Rapids Web Development Group May 23, 2011 Lessons Learned in Mobile Web App Development
2. ?
3. ~6 months
4. The App
5. The App Static HTML
6. The App Static HTML CSS
7. The App Static HTML CSS JSON API
8. The App Static HTML CSS JSON API JavaScript
9. The App Static HTML CSS JSON API JavaScript JavaScript
10. The App Static HTML CSS JSON API JavaScript JavaScript JavaScript
11. CSS challenges
12. -webkit-* iOS Android Blackberry Palm Symbian
13. position: fixed;
14. Header Footer Scrollable Content
15. ader oter llable ntent
16. header { position:fixed; top:0; right:0; left:0; height:56px; } .content { margin:56px 0 48px 0; } footer { position:fixed; bottom:0; right:0; left:0; height:56px; } fixed ader oter llable ntent
17. header { position:fixed; top:0; right:0; left:0; height:56px; } .content { margin:56px 0 48px 0; } footer { position:fixed; bottom:0; right:0; left:0; height:56px; } fixed doesn’t w ork ader oter llable ntent
18. header { position: absolute; top:0; right:0; left:0; height:56px; } .content { position: absolute; top:56px; bottom: 48px; right:0; left:0; overflow: auto; } footer { position: absolute; bottom:0; right:0; left:0; height:56px; } absolute ader oter llable ntent
19. header { position: absolute; top:0; right:0; left:0; height:56px; } .content { position: absolute; top:56px; bottom: 48px; right:0; left:0; overflow: auto; } footer { position: absolute; bottom:0; right:0; left:0; height:56px; } absolute doesn’t w ork ader oter llable ntent
21. iScroll
22. START FINISH DEMO
23. START FINISH DEMO
24. CSS3 Effects
25. CSS3 Effects -webkit-box-shadow
26. CSS3 Effects -webkit-box-shadow background: -webkit-gradient(…)
27. CSS3 Effects -webkit-box-shadow background: -webkit-gradient(…) -webkit-transform
29. Acceleration Hardware
30. START FINISH DEMO
31. START FINISH DEMO
32. Solution No CSS3 fanciness No animation on Android
33. JavaScript challenges
34. Debugging is hard
38. Execution Priority iOS prioritizes UI Android prioritizes JavaScript
39. Organization Code
40. Controllers Views Views Models ?
41. $ find public/javascripts/ -type f | wc -l 70 $ du -sh public/javascripts/ 916K public/javascripts/
42. Concated & Minified 161K
43. Lessons Learned
44. Lessons Learned mobile devices are slow-ish
45. Lessons Learned mobile devices are slow-ish the browser can but the device can’t
46. Lessons Learned mobile devices are slow-ish the browser can but the device can’t lack of consistency across Android devices
47. Resources http://www.html5rocks.com/tutorials/speed/html5/ http://bit.ly/grwebdev-mobile
48. Ordered List Thank you! brandon@orderedlist.com @bkeepers Brandon Keepers Grand Rapids Web Development Group May 23, 2011