Jonathan snook - fake-it

Fake It ‘tiYou Makecreating mobile apps thfeel like native apps

@snookca“increíble”

What I won’t betalking about.

Q3 Smartphone Smartphone Featurephone 43% 57% Q3 2011 Source: Nielsen

Q3 OS Market iOS Android BlackBerry Windows Other 7% 4% 28% 18% 43% Source: Nielsen

US Mobile Browser iOS Android Opera BlackBerry Other 5% 26% 39% 2% 28% Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html

Brazil Mobile iOS Opera Nokia Android BlackBerry Other 3% 34% 25% 1% 29% 8% Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html

What are people iPhone iPad Android RIM Other 14% 30% 12% 23% 21% State of the Apps Industry 2010 and 2009 Surveys; DIGIDAY, Stifel Nicolaus, Millenial Media

75% developing for iOS and Android

Mobile Safari

Mobile SafariLocal Storage

Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimations

Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocation

Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail ﬁeld types.

Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail ﬁeld types.Access to some hardware acceleration

Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail ﬁeld types.Access to some hardware accelerationSVG

Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail ﬁeld types.Access to some hardware accelerationSVG older versions of Android don’t support it

http://snk.ms/1o

Why Web over

Why Web overdon’t need access to device APIs

Why Web overdon’t need access to device APIs most apps don’t

Why Web overdon’t need access to device APIs most apps don’tneed quick iteration without app store approvalprocess

Codehttp://www.ﬂickr.com/photos/bike/4299152140/

Detecting withinif(window.navigator.standalone) { // run code in “app” mode} else { // run code in mobile safari mode}

Home Screen Icon<link rel="apple-touch-icon" href="images/icon.png"><link rel="apple-touch-icon" sizes="72x72"href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="114x114"href="touch-icon-iphone4.png">rel="apple-touch-icon-precomposed"

Start-up Image<link rel="apple-touch-startup-image" href="/startup.png">

Start-up ImageNo apparent support for horizontal imageWhen loading in landscape, the status barcreates a gap to one edge of the loading screen.

Going “Full screen”<meta name="apple-mobile-web-app-capable"content="yes">

Status Bar<meta name="apple-mobile-web-app-status-bar-style" content="black">defaultblack-translucent

Viewport<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=590"><meta name="viewport" content="initial-scale=1.0"><meta name="viewport" content="initial-scale=2.3, user-scalable=no">

You don’t need a framework!

HTML PrototypesHTMLElement.prototype.__deﬁneSetter__("ontap",function(func){ });document.getElementById(keypad).ontap =function(){ alert(just the keypad);};

HTML PrototypesHTMLElement.prototype.switchClass =function(fromClass, toClass){ if(this.className == fromClass) { this.className = toClass; } else { this.className = fromClass; } }document.getElementById(spinner-shell).switchClass(collapsed, expanded);

querySelector(All)document.querySelector(.active); // one eldocument.querySelectorAll(.active); // all

BUT I WANTfunction $(selector){ return document.querySelectorAll(selector);}$(#myelement p);

Looping[3,2,1].forEach(function(itm, idx){ console.log(itm, idx); // 3,0 | 2,1 | 1,2})

Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata, JSON.stringify(items));

Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error);} else { error(not supported);}function success(pos) { console.log( pos.coords.longitude, pos.coords.latitude );}

Use CSS for UI#units div:nth-child(2) { -webkit-transform:rotate(45deg); }#units div:nth-child(3) { -webkit-transform:rotate(90deg); }#units div:nth-child(4) { -webkit-transform:rotate(135deg); }#units div:nth-child(5) { -webkit-transform:rotate(180deg); }#units div:nth-child(6) { -webkit-transform:rotate(225deg); }#units div:nth-child(7) { -webkit-transform:rotate(270deg); }#units div:nth-child(8) { -webkit-transform:rotate(315deg); }

Use Transitions-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;el.style.webkitTransform = rotate(+pos+deg);

Webkit Animations@-webkit-keyframes { 0% { background-position-y: 0; } 100% { background-position-y: -100%; }}body { background-image:url("canvas-crumpled.jpeg"); -webkit-animation: bg 3s linear inﬁnite;}

Touch vs ClickUsing touch events can make the app feel fasterthan click events.You can customize tap hightlight colour

Touch vs Click-webkit-tap-highlight-color:rgba(200,0,0,0.4);

Input Features<input autocorrect="on"> <input placeholder="Example Text"><input type="email"><input type="url"><input type="number"><input type="search">

Lockingwindow.addEventListener(orientationchange, function(){ if(window.orientation == -90) { document.getElementById(orient).className = orientright; } if(window.orientation == 90) { document.getElementById(orient).className = orientleft; } if(window.orientation == 0) { document.getElementById(orient).className = ; }}, true);

Locking.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px;}.orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px;}

Locking

PerformanceUse CSS instead of JavaScript for Animations use CSS Transitions use CSS Animations use 2D and 3D transforms to force hardware acceleration

Hardware2D and 3D transforms may be hardwareaccelerateduse translateX/Y instead of top/leftuse rotateX(0) to push items with heavy CSS touse hardware acceleration (it’s like IE’s zoom:1 to force hasLayout)

Testing

TestingiOS Simulator is fast but not entirely accurate

TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurate

TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versions

TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on device

TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on deviceFor multi-touch testing, must do on the device.

TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on deviceFor multi-touch testing, must do on the device. pinch/zoom, rotate possible in iOS simulator

Framewhttp://www.ﬂickr.com/photos/nocallerid_man/3638360458/

Mobile WebjQTouchXUI.jsjQuery MobileDojo MobileSencha Touch

jQTouchTargetted for iOSMakes web app feel like native app with controlsand list viewshttp://jqtouch.com/

XUI.JSx$(#btn).click( function (e) { x$(#msg).html(¡Hola!);})

XUI.JSclean, familiar, chaining syntax.super tiny 10.4kb footprint (4.2kb gzipped).targeted builds for webkit, ie mobile, andblackberry

Dojo MobileDesigned for iPhone, AndroidIncludes touch and gesture supportSupport for native-style widgetsCan create webkit-only buildshttp://dojotoolkit.org/features/mobile

jQuery MobileDesigned for iPhone, Android, webOS plus bada, Meego, Windows Mobile and moreIncludes touch and gesture supporthttp://jquerymobile.com/

Sencha TouchDesigned for iPhone and AndroidIncludes enhanced touch eventsAllows for rapid developmenthttp://www.sencha.com/products/touch/

Examplhttp://www.ﬂickr.com/photos/mollymazilu/5827249387/

Could be a WebCalculators (e.g. CalcBot)TwitterProductivity Apps (e.g. Things.app)Recipe Databases (e.g. Epicurious)Weather AppsUI Sketcher

Could be a WebWords With Friends/ScrabbleAngry Birds http://chrome.angrybirds.com/CanabaltBejeweledRamp Champ

37Signals: Chalk

http://chalk.37signals.com/

Shkrubbel

https://github.com/kitt/shkrubbel

The Two Hour AppFrameworks allow for rapid developmentUsed jQTouchUsed localStorage

http://pushups.snook.ca/

ConvertBot

http://snook.ca/testing/convertbot/

Why Native overAccess to native hardware and other applicationsCamera, Address Book, FilesystemStreamlined Revenue Process

Meet in the middleMany apps take advantage of native WebView toload application components from remote server allows for iteration of some app components without requiring complete approval process from app store

PhoneGap andTitanium Mobile targets iPhone and AndroidPhoneGap targets iPhone, Android, Palm,Symbian and Blackberry.http://www.appcelerator.com/http://www.phonegap.com/

Have fun! /http://www.ﬂickr.com/photos/sbluerock/364123380/

@snookcahttp://snook.ca

Jonathan snook - fake-it

by StarTech Conference

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Jonathan snook - fake-it Presentation Transcript