Html5 Mobile Apps: Tips & Tricks

Transcript

1. HTML5 MOBILE APPS
   Tips & Tricks
   Elijah Glover
   elijah@elijah.com.au
   @elijahglover
   

   View Slide

2. What We Are Building
   HTML5 Mobile app used by ~ 3.5m
   iPhone, Android, Blackberry & Windows Phone
   No Mobile Frameworks - ie. jQuery Mobile
   

   View Slide

3. HOW MODERN ARE
   PHONE BROWSERS?
   iOS 4, Android 2.2
   runs the equivalent webkit version of
   Google Chrome 5 (Q2 2010)
   iOS 6, Android 4.2
   runs the equivalent webkit version of
   Google Chrome 26 (Q1 2013 ~ Current)
   Most mobile browsers are based off the webkit project
   

   View Slide

4. FRAMEWORKS
   knockout.js MVVM Framework
   require.js AMD Loader, IoC/DI
   sammy.js Routing Framework
   modernizr Browser Feature Detection
   

   View Slide

5. SINGLE PAGE APPS (SPA)
   

   View Slide

6. UNDER THE HOOD
   define("vm/login",
   ! ["ko", "jQuery"],
   ! function(ko, $) {
   ! ! var self = this;
   ! ! self.userName = ko.observable();
   ! ! self.password = ko.observable();
   ! ! ko.applyBindings(self, $("#login")[0]);
   ! ! return self;
   ! }));
   var app = Sammy('#app', function() {
   ! this.get('#/login', function() {
   ! ! require(["vm/login"], function(viewModel) {
   ! ! ! $("#login").show();
   ! ! });
   ! });
   });
   app.run('#/login');
   

   View Slide

7. //Use Modernizr To Detect Prefixed Event Name
   var animationEndName = (Modernizr.prefixed('animation') + "End")
   .replace(/^ms/, "MS")
   .replace(/^Webkit/, "webkit")
   .replace(/^Moz.*/, "animationend");
   //Bind Once & Wait For AnimationEnd To Be Called
   $("#view1").one(animationEndName, function() {
   ! //Animation Complete
   }).addClass("view-transition");
   ANIMATION &
   TRANSITIONS
   iOS 3.2+ Android 2.1+ Blackberry 6.0+ Windows Phone 8+
   Native CSS3 Support
   

   View Slide

8. ANIMATION &
   TRANSITIONS
   Windows Phone 7
   //Detect Support For CSS3 Animations
   if (!Modernizr.cssanimations) {
   ! $("#view1").animate({ left: 200 }, {
   ! ! complete: function() {
   ! ! ! //Animation Complete
   ! ! }
   ! });
   }
   DOM Animation via jQuery
   

   View Slide

9. VIEWPORT
   
   The viewport you specify is important!
   It tells the browser how to render your page
   Android ignores CSS3 properties when
   user-scalable is set to yes.
   

   View Slide

10. CSS GOTCHA’S
    position: fixed;
    iOS 5+, Android 2.2+, BlackBerry 7+, Windows Phone 8
    overflow: scroll;
    iOS 5+, Android 2.2+, BlackBerry 7+, Windows Phone 8
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; //Adds Smooth Scrolling
    overthrow.js - http://filamentgroup.github.com/Overthrow/
    iOS4, Android 2.1, Blackberry 6
    

    View Slide

11. EMULATORS &
    SIMULATORS TOOLKIT
    Xcode iOS Simulator (OSX)
    Android SDK Emulator (Windows, OSX, Linux)
    Windows Phone Emulator (Windows)
    Blackberry Simulator (Windows)
    

    View Slide

12. WEb INspector REmote
    WEINRE “winery”
    
    

    View Slide

13. HTML5 Feature Matrix
    http://mobilehtml5.org/
    Mobile Emulators & Simulators: The Ultimate Guide
    http://www.mobilexweb.com/emulators
    

    View Slide