HTML5 Mobile Web App Development

v3 of the presentation from Charlotte UX, ConvergeSE, and Skookum Tech Talks.

Transcript

1. Mobile Development with HTML5 Hunter Loftis @hunterloftis hunter@skookum.com Friday, May 11, 12
2. Hunter Loftis • Director of Technology at Skookum DW • JavaScript nerd • (2001) Print illustration • (2003) Flash animation • (2004) Web design & development • (2006) Web apps • (2012) Mobile apps Friday, May 11, 12
3. grain of salt: I’m not a mobile expert. I’m a JavaScript expert. Friday, May 11, 12
4. Status4: Golf gtggolf.com Realtime, distributed team scoring on iPhone, Android, and Blackberry. Friday, May 11, 12
5. Mobile HTML5 Open-Source github.com /madrobby/zepto /hunterloftis/backbone.viewmodel Friday, May 11, 12
6. Today, we’ll discuss and distill the lessons learned from these experiences into practical guidelines for building mobile HTML5 apps. So? Friday, May 11, 12
7. Friday, May 11, 12
8. Friday, May 11, 12
9. Friday, May 11, 12
10. Before you jump in ask yourself three questions: Friday, May 11, 12
11. Can I build this natively? • You know (or have time to learn) the language and APIs. • You can target a single platform. • You have the resources to support and maintain per-platform code bases. • Your audience will commit to your app. Friday, May 11, 12
12. Why mobile HTML5? • You are a front-end web expert (or team). • Support for many current & future devices. • Faster, cheaper dev cycles. • Daily platform improvements for free. • You accept the 50% performance penalty. Friday, May 11, 12
13. Mobile web, or hybrid? • web: URLs, browser security model, and immediate deploys/updates • hybrid: app stores, device security model, and gated deploys/updates • you can do both, but it’s harder than you think. Friday, May 11, 12
14. Starting the app The easy parts Friday, May 11, 12
15. Quick Start https://github.com/skookum/mobilehtml5 http://hunterloftis.com/mobile/ (demos are intentionally un-factored and verbose; apply proper engineering to real projects) Friday, May 11, 12
16. Install Stuff • iPhone Simulators (xcode) • Android SDK & debugging bridge: • adb logcat browser:V *:S Friday, May 11, 12
17. 1. Run offline 2. Present this page as an app. 3. Show icons and startup screens 4. Prompt to install to the home screen. Friday, May 11, 12
18. 5 Minutes In You have a container, now you need content and functionality. Friday, May 11, 12
19. Building the app A survival guide Friday, May 11, 12
20. Do touch yourself. ontouchstart, ontouchmove, ontouchend, ontouchcancel (soon in zepto.js) Friday, May 11, 12
21. Ignore standards and accessibility. Friday, May 11, 12
22. Debug on real devices. iOS: settings > safari > developer > debug console:on Android: browser > “about:debug” Friday, May 11, 12
23. Forget jQuery. Friday, May 11, 12
24. Avoid frameworks. Friday, May 11, 12
25. Use alert(). And confirm() and prompt(). Seriously. Friday, May 11, 12
26. Learn microlibs microjs.com, zepto.js, add2home, lawnchair, okay.js Friday, May 11, 12
27. Aim low. Friday, May 11, 12
28. Never use your iPhone. Friday, May 11, 12
29. Ignore feature detection. (usually) Friday, May 11, 12
30. Use specific forms. email, tel, url, date, number, range* placeholder, autofocus, autocorrect, autocapitalize Friday, May 11, 12
31. Limit DOM updates. Friday, May 11, 12
32. Never animate with JavaScript. Friday, May 11, 12
33. Animate with CSS3 (but only on iOS) Friday, May 11, 12
34. Assume you’re offline. Friday, May 11, 12
35. Store data locally session storage, local storage, websql, indexed, lawnchair Friday, May 11, 12
36. Keep it async. A RESTful JSON API over HTTPS is cool and full of acronyms. Friday, May 11, 12
37. Embrace geolocation navigator.geolocation.getCurrentPosition() navigator.geolocation.watchPosition(); Friday, May 11, 12
38. Protect your state. Friday, May 11, 12
39. Turn yourself off. Friday, May 11, 12
40. Link to phones & maps “maps.google.com/*” “tel: (704) 123-4567” “sms: (704) 234-5678” Friday, May 11, 12
41. And have fun! Friday, May 11, 12
42. • Qs? @hunterloftis or hunter@skookum.com • slideshare.net/HunterLoftis/mobile-html5-v2 • github.com/Skookum/mobilehtml5 • github.com/hunterloftis/backbone.viewmodel • http://hunterloftis.com/mobile/ • “Safari Web Content Guide” • http://microjs.com/ • http://zeptojs.com/ Friday, May 11, 12