Tweet
Tweet

Slide 1

Slide 1 text

Mobile Development with HTML5 Hunter Loftis @hunterloftis [email protected] Friday, May 11, 12

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

grain of salt: I’m not a mobile expert. I’m a JavaScript expert. Friday, May 11, 12

Slide 4

Slide 4 text

Status4: Golf gtggolf.com Realtime, distributed team scoring on iPhone, Android, and Blackberry. Friday, May 11, 12

Slide 5

Slide 5 text

Mobile HTML5 Open-Source github.com /madrobby/zepto /hunterloftis/backbone.viewmodel Friday, May 11, 12

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Friday, May 11, 12

Slide 8

Slide 8 text

Friday, May 11, 12

Slide 9

Slide 9 text

Friday, May 11, 12

Slide 10

Slide 10 text

Before you jump in ask yourself three questions: Friday, May 11, 12

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Starting the app The easy parts Friday, May 11, 12

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Install Stuff • iPhone Simulators (xcode) • Android SDK & debugging bridge: • adb logcat browser:V *:S Friday, May 11, 12

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

5 Minutes In You have a container, now you need content and functionality. Friday, May 11, 12

Slide 19

Slide 19 text

Building the app A survival guide Friday, May 11, 12

Slide 20

Slide 20 text

Do touch yourself. ontouchstart, ontouchmove, ontouchend, ontouchcancel (soon in zepto.js) Friday, May 11, 12

Slide 21

Slide 21 text

Ignore standards and accessibility. Friday, May 11, 12

Slide 22

Slide 22 text

Debug on real devices. iOS: settings > safari > developer > debug console:on Android: browser > “about:debug” Friday, May 11, 12

Slide 23

Slide 23 text

Forget jQuery. Friday, May 11, 12

Slide 24

Slide 24 text

Avoid frameworks. Friday, May 11, 12

Slide 25

Slide 25 text

Use alert(). And confirm() and prompt(). Seriously. Friday, May 11, 12

Slide 26

Slide 26 text

Learn microlibs microjs.com, zepto.js, add2home, lawnchair, okay.js Friday, May 11, 12

Slide 27

Slide 27 text

Aim low. Friday, May 11, 12

Slide 28

Slide 28 text

Never use your iPhone. Friday, May 11, 12

Slide 29

Slide 29 text

Ignore feature detection. (usually) Friday, May 11, 12

Slide 30

Slide 30 text

Use specific forms. email, tel, url, date, number, range* placeholder, autofocus, autocorrect, autocapitalize Friday, May 11, 12

Slide 31

Slide 31 text

Limit DOM updates. Friday, May 11, 12

Slide 32

Slide 32 text

Never animate with JavaScript. Friday, May 11, 12

Slide 33

Slide 33 text

Animate with CSS3 (but only on iOS) Friday, May 11, 12

Slide 34

Slide 34 text

Assume you’re offline. Friday, May 11, 12

Slide 35

Slide 35 text

Store data locally session storage, local storage, websql, indexed, lawnchair Friday, May 11, 12

Slide 36

Slide 36 text

Keep it async. A RESTful JSON API over HTTPS is cool and full of acronyms. Friday, May 11, 12

Slide 37

Slide 37 text

Embrace geolocation navigator.geolocation.getCurrentPosition() navigator.geolocation.watchPosition(); Friday, May 11, 12

Slide 38

Slide 38 text

Protect your state. Friday, May 11, 12

Slide 39

Slide 39 text

Turn yourself off. Friday, May 11, 12

Slide 40

Slide 40 text

Link to phones & maps “maps.google.com/*” “tel: (704) 123-4567” “sms: (704) 234-5678” Friday, May 11, 12

Slide 41

Slide 41 text

And have fun! Friday, May 11, 12

Slide 42

Slide 42 text

• Qs? @hunterloftis or [email protected] • 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