Html5 Mobile Apps: Tips & Tricks

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