Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Html5 Mobile Apps: Tips & Tricks

Html5 Mobile Apps: Tips & Tricks

Cc47f1279226d9343642057f45c1e9b6?s=128

Elijah Glover

March 28, 2013
Tweet

Transcript

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

  2. What We Are Building HTML5 Mobile app used by ~

    3.5m iPhone, Android, Blackberry & Windows Phone No Mobile Frameworks - ie. jQuery Mobile
  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
  4. FRAMEWORKS knockout.js MVVM Framework require.js AMD Loader, IoC/DI sammy.js Routing

    Framework modernizr Browser Feature Detection
  5. SINGLE PAGE APPS (SPA)

  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');
  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
  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
  9. VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> 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.
  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
  11. EMULATORS & SIMULATORS TOOLKIT Xcode iOS Simulator (OSX) Android SDK

    Emulator (Windows, OSX, Linux) Windows Phone Emulator (Windows) Blackberry Simulator (Windows)
  12. WEb INspector REmote WEINRE “winery” <script src="http://localhost:8080/target/target-script-min.js"></script>

  13. HTML5 Feature Matrix http://mobilehtml5.org/ Mobile Emulators & Simulators: The Ultimate

    Guide http://www.mobilexweb.com/emulators