SlideShare a Scribd company logo
Mobile Development
      with HTML5



                      Hunter Loftis
                     @hunterloftis
              hunter@skookum.com
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
grain of salt:


I’m not a mobile expert.
 I’m a JavaScript expert.
Status4: Golf
          gtggolf.com
  Realtime, distributed team
scoring on iPhone, Android, and
          Blackberry.
Mobile HTML5
  Open-Source
          github.com

        /madrobby/zepto
/hunterloftis/backbone.viewmodel
So?
Today, we’ll discuss and distill the
   lessons learned from these
    experiences into practical
  guidelines for building mobile
          HTML5 apps.
Mobile html5 v2
Mobile html5 v2
Mobile html5 v2
Before you jump in
   ask yourself three questions:
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.
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.
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.
Starting the app
    The easy parts
Quick Start
    https://github.com/skookum/mobilehtml5

         http://hunterloftis.com/mobile/

(demos are intentionally un-factored and verbose;
   apply proper engineering to real projects)
Install Stuff
• iPhone Simulators (xcode)
• Android SDK & debugging bridge:
• adb logcat browser:V *:S
1. Run offline


 2. Present this page
           as an app.
  3. Show icons and
     startup screens



 4. Prompt to install
to the home screen.
5 Minutes In
You have a container, now you
need content and functionality.
Building the app
    A survival guide
Do touch yourself.
ontouchstart, ontouchmove, ontouchend,
             ontouchcancel

          (soon in zepto.js)
Ignore standards and
    accessibility.
Debug on real devices.
iOS: settings > safari > developer > debug console:on
          Android: browser > “about:debug”
Forget jQuery.
Avoid frameworks.
Use alert().
And confirm() and prompt(). Seriously.
Learn microlibs
microjs.com, zepto.js, add2home, lawnchair, okay.js
Aim low.
Never use your iPhone.
Ignore feature
  detection.
     (usually)
Use specific forms.
       email, tel, url, date, number, range*
placeholder, autofocus, autocorrect, autocapitalize
Limit DOM updates.
Never animate with
    JavaScript.
Animate with CSS3
     (but only on iOS)
Assume you’re offline.
Store data locally
session storage, local storage, websql, indexed, lawnchair
Keep it async.
A RESTful JSON API over HTTPS is cool and full of
                  acronyms.
Embrace geolocation
 navigator.geolocation.getCurrentPosition()
   navigator.geolocation.watchPosition();
Protect your state.
Turn yourself off.
Link to phones & maps
       “maps.google.com/*”
       “tel: (704) 123-4567”
      “sms: (704) 234-5678”
And have fun!
•   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/

More Related Content

What's hot (20)

PPT
How To Create One App For All Platforms using PhoneGap
MobiDev
 
KEY
TxJS 2011
Brian LeRoux
 
PPTX
GlueCon'11 - Native vs Wrapped Mobile apps : What to Build ?
Guilhem Ensuque
 
KEY
Phonegap 2.x
Brian LeRoux
 
PPTX
VDC Conference 2011 - Developing Cross-Platform Apps
Guilhem Ensuque
 
PDF
Cordova and PhoneGap Insights
Monaca
 
PPT
Create Cross-Platform Native Mobile Apps in Flex with ELIPS Studio
Guilhem Ensuque
 
PPTX
Building an app-like experience (without the app)
chaefele
 
KEY
Phonegap for Engineers
Brian LeRoux
 
PPTX
Phoenix Emulator PPT
Vineet Kumar
 
PPTX
Write Better JavaScript
Kevin Whinnery
 
PPTX
Lessons Learned From Applications That Kicked Titanium's Ass
Kevin Whinnery
 
PDF
Front-End Engineering 101
Milan Korsos
 
PPT
Multi-platform Mobile apps with Phonegap
Gautam Chaudhary
 
PDF
1人でも頑張れる!Retty式開発環境
Yoichiro Sakurai
 
PDF
Abilità Informatiche - Lezione 01 introduzione al corso
University of Catania
 
KEY
Js On Mobile Devices
Jens Arps
 
PPTX
Core java tutorials
TIB Academy
 
KEY
PhoneGap at Facebook Mobile Hack
PhoneGap
 
PPTX
Phone gap
caviare
 
How To Create One App For All Platforms using PhoneGap
MobiDev
 
TxJS 2011
Brian LeRoux
 
GlueCon'11 - Native vs Wrapped Mobile apps : What to Build ?
Guilhem Ensuque
 
Phonegap 2.x
Brian LeRoux
 
VDC Conference 2011 - Developing Cross-Platform Apps
Guilhem Ensuque
 
Cordova and PhoneGap Insights
Monaca
 
Create Cross-Platform Native Mobile Apps in Flex with ELIPS Studio
Guilhem Ensuque
 
Building an app-like experience (without the app)
chaefele
 
Phonegap for Engineers
Brian LeRoux
 
Phoenix Emulator PPT
Vineet Kumar
 
Write Better JavaScript
Kevin Whinnery
 
Lessons Learned From Applications That Kicked Titanium's Ass
Kevin Whinnery
 
Front-End Engineering 101
Milan Korsos
 
Multi-platform Mobile apps with Phonegap
Gautam Chaudhary
 
1人でも頑張れる!Retty式開発環境
Yoichiro Sakurai
 
Abilità Informatiche - Lezione 01 introduzione al corso
University of Catania
 
Js On Mobile Devices
Jens Arps
 
Core java tutorials
TIB Academy
 
PhoneGap at Facebook Mobile Hack
PhoneGap
 
Phone gap
caviare
 

Viewers also liked (15)

DOC
N E W S T U D Y O F G I T A N O V 12 D R
shriniwaskashalikar
 
DOC
N E W S T U D Y O F G I T A N O V 4 D R
shriniwaskashalikar
 
DOC
N A M A S M A R A N A N D S T R E S S D R
shriniwaskashalikar
 
DOC
P R A L H A D S A I D D R
shriniwaskashalikar
 
PDF
What Is 2010love
lsuter
 
PDF
Presentation 2010
worklight
 
PDF
SEO, LLC dba Www.Splinternet Marketing.Com Search Engine Rankings 6-28-2011
SEO, LLC dba www.SplinternetMarketing.com
 
PPT
Force
UKM
 
DOC
N I S H K A M A K A R M A D R
shriniwaskashalikar
 
PDF
93 percent-google-for-internet-marketing-services
SEO, LLC dba www.SplinternetMarketing.com
 
DOC
Diabetes Discussion Dr. Shriniwas Kashalikar
shriniwaskashalikar
 
DOC
New Study Of Gita Nov 11 Dr. Shriniwas J. Kashalikar
shriniwaskashalikar
 
PPS
世界奇特建築
Josephine C
 
DOC
Learning, Teaching And Superliving Dr. Shriniwas Kashalikar
shriniwaskashalikar
 
PDF
FlexNet Manager Suite Leverages Microsoft System Center to Deliver Next Gener...
Flexera
 
N E W S T U D Y O F G I T A N O V 12 D R
shriniwaskashalikar
 
N E W S T U D Y O F G I T A N O V 4 D R
shriniwaskashalikar
 
N A M A S M A R A N A N D S T R E S S D R
shriniwaskashalikar
 
P R A L H A D S A I D D R
shriniwaskashalikar
 
What Is 2010love
lsuter
 
Presentation 2010
worklight
 
SEO, LLC dba Www.Splinternet Marketing.Com Search Engine Rankings 6-28-2011
SEO, LLC dba www.SplinternetMarketing.com
 
Force
UKM
 
N I S H K A M A K A R M A D R
shriniwaskashalikar
 
93 percent-google-for-internet-marketing-services
SEO, LLC dba www.SplinternetMarketing.com
 
Diabetes Discussion Dr. Shriniwas Kashalikar
shriniwaskashalikar
 
New Study Of Gita Nov 11 Dr. Shriniwas J. Kashalikar
shriniwaskashalikar
 
世界奇特建築
Josephine C
 
Learning, Teaching And Superliving Dr. Shriniwas Kashalikar
shriniwaskashalikar
 
FlexNet Manager Suite Leverages Microsoft System Center to Deliver Next Gener...
Flexera
 
Ad

Similar to Mobile html5 v2 (20)

PPTX
Developing Windows Phone 8 apps using PhoneGap
Amar Mesic
 
PDF
移动端Web app开发
Zhang Xiaoxue
 
PPT
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
PPTX
Appcelerator Titanium Intro
Nicholas Jansma
 
PPTX
Introduction to jQueryMobile
Jeyakumaran Mayooresan
 
PDF
Building Cross-Platform Mobile Apps
Troy Miles
 
PPTX
Mobile native-hacks
DevelopmentArc LLC
 
PDF
HTML5 Can't Do That
Nathan Smith
 
PPTX
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
PDF
An introduction to Titanium
Graham Weldon
 
PDF
PhoneGap/Cordova
Mihai Corlan
 
PPTX
Getting started with PhoneGap
Patrick van Kouteren
 
KEY
Philly ete-2011
davyjones
 
PPT
Native Mobile Application Using Java Script
Borey Lim
 
KEY
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
PDF
HTML5 or Android for Mobile Development?
Reto Meier
 
PDF
Lesson learned from 3 years with hybrid apps
Patrik Malmquist
 
PDF
Smau milano 2012 arena social media emanuele-bolognesi
SMAU
 
PDF
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Nick Landry
 
PPTX
Html5 mobile develop tools
Ley Liu
 
Developing Windows Phone 8 apps using PhoneGap
Amar Mesic
 
移动端Web app开发
Zhang Xiaoxue
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
Appcelerator Titanium Intro
Nicholas Jansma
 
Introduction to jQueryMobile
Jeyakumaran Mayooresan
 
Building Cross-Platform Mobile Apps
Troy Miles
 
Mobile native-hacks
DevelopmentArc LLC
 
HTML5 Can't Do That
Nathan Smith
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
An introduction to Titanium
Graham Weldon
 
PhoneGap/Cordova
Mihai Corlan
 
Getting started with PhoneGap
Patrick van Kouteren
 
Philly ete-2011
davyjones
 
Native Mobile Application Using Java Script
Borey Lim
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
HTML5 or Android for Mobile Development?
Reto Meier
 
Lesson learned from 3 years with hybrid apps
Patrik Malmquist
 
Smau milano 2012 arena social media emanuele-bolognesi
SMAU
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Nick Landry
 
Html5 mobile develop tools
Ley Liu
 
Ad

Recently uploaded (20)

PDF
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PDF
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
PDF
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
July Patch Tuesday
Ivanti
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
"AI Transformation: Directions and Challenges", Pavlo Shaternik
Fwdays
 
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
July Patch Tuesday
Ivanti
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 

Mobile html5 v2

Editor's Notes

  • #2: \n
  • #3: \n
  • #4: \n
  • #5: \n
  • #6: \n
  • #7: \n
  • #8: \n
  • #9: \n
  • #10: \n
  • #11: \n
  • #12: \n
  • #13: \n
  • #14: \n
  • #15: \n
  • #16: \n
  • #17: \n
  • #18: \n
  • #19: \n
  • #20: \n
  • #21: “tap” events are interpreted by the browser and have an inherent delay of ~300ms .. which makes your app feel slow and unresponsive.\n
  • #22: They don't matter (yet) on phones. It's hard enough to get something working; why design for an audience that doesn't even exist yet? For example:\nUse <div> instead of <a> (try both). You'll notice that on some phones, the <a> will still link after you interrupt it, and you have to prevent all of these defaults happening. Plus, since you'll be listening to the ontouchstart, you won't have a default to interrupt.\n\n
  • #23: Typical web dev + emulators and simulators + test devices\niOs: settings -> safari -> developer -> debug console: on\nAndroid: type about:debug in the URL bar (for most androids)\nset up the android crazy SDK bridge thing\n
  • #24: ...or any other cross-browser library. The vast majority of your audience (iOS, Android, Blackberry, Palm) renders via the webkit engine. Mobile devices are still relatively slow. Mobile browsers are still very slow and light on resources like memory. There's no excuse to drop heavy cross-browser libs like jQuery into the mix. (Android: 18%, iOS: 54%, Blackberry: 3%, total: 75% ... other 25% = Java ME & Symbian / old phones )\n\n
  • #25: They’re big, bloated, difficult to customize, and when you have problems with a control (or several controls) -- functionality, appearance, or compatibility with different devices -- there is very little you can do, and it’s typically a real headache to make significant updates since the frameworks have a high level of complexity.\n\nIf you don’t believe me, try the “kitchen sink” demo of jQuery mobile, Sencha touch, etc on a blackberry, an iPhone, and an old Android... and see what happens.\n\nNote: I haven’t tried the latest frameworks in several months, and I’m hopeful for progress.\n
  • #26: - rendered with native controls so they don’t make an impact on your app’s footprint\n- rendered and interacted with faster\n- feel native, consistent\n
  • #27: \n
  • #28: These days, most developers working with web apps aim high and gracefully degrade. We have turned to the "make it work on real browsers... safari... chrome... firefox... and then shim it for IE... workflow." We've gotten used to aiming for a great experience and providing fallbacks for anything that can't support it. Unfortunately, the mobile browser landscape is closer to 2006 than 2012. The majority of Android users are on the Android versions from 2010. Only 1% are on the latest OS. Hundreds of devices exist with different form factors, operating systems, browsers, CPUs, GPUs ... the way to stay sane is to aim low and progressively enhance for selected platforms (like iOS 5).\n\n
  • #29: If you're constantly testing with your iPhone, you'll be misled into the idea that things are working better than they really are. The iPhone set the golden standard for a mobile web browser, and it's still unchallenged. The latest version of Android with Chrome has edged closer, but it still falls short. Test with an Android on 2.2 to get the real picture. You can pick them up basically for free.\n
  • #30: Design your app offline first, then add network capability\ncache.manifest\nJS on app load to check and refresh cache if required\nMake it easy to disable offline caching (adds an extra layer of testing complexity)\n\n
  • #31: Controls the type of keyboard/interface that is presented\nCan get super annoying to have autocorrecting login for example\nProvides convenient characters (@ for email, / for url, etc)\n
  • #32: Repainting elements, adding, removing elements = super expensive operations on a phone.\n
  • #33: It’s incredibly slow on most phones, while CSS3 animations are GPU-accelerated on iOS.\n
  • #34: GPU accelerated on iOS. Not all Androids have GPUs or browser-based acceleration, so turn it off for everything else.\n
  • #35: Design your app offline first, then add network capability\ncache.manifest\nJS on app load to check and refresh cache if required\nMake it easy to disable offline caching (adds an extra layer of testing complexity)\n\n
  • #36: 5MB limit\n
  • #37: \n
  • #38: \n
  • #39: \n
  • #40: The first time we field-tested GTG, we (developers) were all confident that it worked, because we had been testing it on our iPhones, and doing occasional lab tests on our stock of Androids. 30 minutes into the 4-hour event, half of the phones were dead. All of the dead phones were Androids. Why? Android doesn't disable background processes - even web pages! - when the app is closed - or even when the phone is sleeping in your pocket! - so if you, for example, are polling Ajax (as we were), the phone's battery will just disappear. Later, we discovered that *some* Androids even restore old tabs immediately when the phone is restarted, meaning that until someone specifically turns off their phone, charges it, turns it back on, opens the browser and explicitly closes your tab... their phone will die over and over and over.\n\n
  • #41: \n
  • #42: \n
  • #43: \n