The Mobile Development Landscape

Ambert HO

aho@rpxcorp.com

ambertch@gmail.com

Predominent mode of consumption of web content shifting to mobile

So let’s see what’s going on

(targeted towards those coming from a web development background)

WAYS to skin this cat• Mobile website (one end)

• Regular website optimized for mobile – “responsive design”• Native app emulation

• jQuery Mobile, Sencha Touch – still pure html/css/js• Framework in one language, 100% bridges to native

• Appcelerator Titanium (JS), Adobe Flash Builder (AS)• Hybrid: Native with plugin with a web view + bridge

• Phonegap• Fully native (the other end)

• iOS, Android, WP7, Blackberry, etc.

Mobile website• Notice any changes in the last couple of years?

• Slow webpages being replaced with mobile optimized ones

Different approaches:

1. Build separate site/use different presentation

• Separate application (m.facebook.com)• User agent detection in HTTP request

2. Responsive Design

• Different styling for mobile and desktop• Easier to maintain (same person different clothes)• Separate stylesheets and/or use of @media queries to alter

styling based on screen size• Can augment with viewpoint meta tags to control display

(later)

What’s the goal?• Web app vs. website

• Webapp: Complex UI and/or frontend logic• Facebook

• Twitter

• Extensive, diverse engagement

• Website: mainly content consumption• New York Times

• TechCrunch

• Limited engagement

• Content consumption

• Commenting

Before we jump in…

Different screen sizes

http://www.slideshare.net/redux/adapt-and-respond-mobilefriendly-layouts-beyond-the-desktop-standardsnext-manchester-3-march-2012

Separate site/presenation

• HTTP request header includes User-Agent

• Mobile Safari: Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

• Internet Explorer 9: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)

• Can also detect client side in javascript • navigator.userAgent

• Don’t worry, most frameworks have a library for this• Now what?

• Have a reverse proxy route the request• Decide to serve different view templates to different clients• etc.

Media queries• Allows you to alter style based on screen size and attributes

• Huge variety of screen resolutions• http://stephanierieger.com/the-trouble-with-android

• Sites that aren’t that complex can rearrange, resize the main building blocks

- @media all and (orientation:landscape)

- @media all and (orientation:portrait)

- @media screen and (min-width: 980px)

- @media screen and (max-width: 980px)

- @media screen and (max-width: 700px)

- @media screen and (max-width: 480px)

http://www.slideshare.net/yiibu/pragmatic-responsive-design

Example#content {

float: left

width: 700px

}

#sidebar {

float: left

width: 250px

}

@media screen and (max-width: 980px) {

#content {

width: 65%;

}

#sidebar {

width: 30%;

}

}

@media screen and (max-width: 700px) {

#content {

width: auto;

float: none;

}

#sidebar {

width: auto;

float: none;

}

}

@media screen and (max-width: 480px) {

#sidebar {

width: <X>px

}

#content {

width: <Y>px

}

}

Base Styles for regular viewing

Fluid layout for devices with reasonable width

Smaller Tablets

Phone/Min width

Do you have to worry?Probably not - CSS frameworks support it out of the box:

•Twitter Bootstrap

•Zurb Foundation

Also plenty of boilerpoint setups out there as a base

•http://github.com/malarkey/320andup

•http://www.getskeleton.com/

Queries work in links

<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px)” href=“/assets/phone_stylesheet.css”

Managing the Pixels• Device pixels vs. CSS pixels – pixel density

• iPhone/iPad Retina display is 2x density, so to compensate they paint the page as if they were half the size, and allow metadata to denote higher resolution images…

• Device-pixel-ratio

• Retina display is 960x640 vs. 480x320 for older iPhone• Therefore device-pixel-ratio is 2

• You guessed in, this can be included in media queries

• Client side accessible too• window.devicePixelRatio (as with everything client side, check

compatibility)

• Device-aspect-ratio

• 16/9, 4/3

Viewport• Constrains the width of the <html> element

• But mobile devices have small screens, so two:

• Layout viewport: total width of site• Visual viewport: what you see on the screen

• This sets the visual viewport to have:

• Layout and visual width equal• Disallows zooming

Would want this for a site that’s supposed to look like an app

<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>

Special stuff• In the desktop browser

• mailto:email@address.com will open default email client• In the mobile browser

• tel:987654321• sms:123456789• Maps too:

• Android - geo:<coords>

• iOS – maps:<coords>

• Look at platform specific documentation

• Remember you can render differently based on user agent!

Development Workflow• Simplest: change your user agent, resize your browser window,

code and refresh page. Bam.

• Better: Firebug lite on the phone

• Javascript implementation of Firebug that’s embeddable• Even Better: remote control

• Weinre (inspector)• http://people.apache.org/~pmuellr/weinre/docs/latest

• Android Chrome USB debugging via Andoird Debug Bridge• iOS6 supposed to have this capability as well

• Bottom line: watch the ‘waterfall’ of HTTP requests

• Browsers have a connection limit for concurrently downloading resources

http://www.quicksmode.org/m/ - convenient link for feature detection

On Performance• Services like webwait.com

• (or your own script/browser control)• Hit the site multiple times and see how long it loads

• Blaze.io/mobile

• Web performance startup acquired by Akamai• Ran last night for rpxcorp.com, didn’t work

• Cell towers

• Seconds of latency to establish initial connection• Apps and websites can keep a connection open to

increase responsiveness• http://www.stevesouders.com/blog/2011/09/21/making-a-

mobile-connection/

Native app emulation

http://dev.sencha.com/deploy/touch/examples/production/oreilly/

http://jquerymobile.com/demos/1.1.0/

Frameworks• jQuery Mobile

• Smaller (couple hundred kb minified)• Markup based/declarative bindings (html5 data attributes)

• <div data-role=“page”>• <div data-role=“listview”>

• Scripting down just like desktop jQuery• Can use w/ Zepto.js

• document.querySelectorAll vs. jQuery IE6 support• Sencha Touch

• A bit bigger (few hundred kb minified)• Performent – transitions work nicely• Unlike jQuery Mobile, full fledged Javascript framework• Fanatical iOS UX emulation• Company behind ExtJS library

Ext.application({ name: 'Sencha’, launch: function() { Ext.create(“Ext.tab.Panel”, { tabBarPosition: ‘bottom’,

Bridge to native• “Write once, deploy native code everywhere” approach

• One SDK to rule them all?• Appcelerator Titanium platform

• Write javascript using their structure• Embedded Javascript interpreter (Kroll) as a proxy to making

native calls• Result is that the app is ‘bloated’ in size

• Easiest way to get cross platform – no native SDKs• Also supports Windows Phone, Blackberry

• Tradeoff is restriction to using the API provided• Historical Context: early 2010, pure web solution not really

viable• Embedded Webviews both slow to load, and apps primarily

webapps were not allowed by Apple (I tried)

Hybrid: native SDK w/ web • Phonegap

• In Apache Incubator program as Cordova

• Still use the native Android, iOS SDKs (other platforms too)

• Implements FFI between browser javascript and native

• Since it is embedding a webview, free to write apps as web apps (use jQuery Mobile, even Backbone.js)

• Good option for games: FB + mobile• The FB version is essentially already the game

• Since it’s a plugin to the native SDK, allows access to native code

• push notifications, iOS5/Android notification center• Backgrounding code (to Background, to Foreground)• Background execution (streaming music, prefetching

content, VOIP)

Aside: Why your battery life sucks• Apps are allowed to schedule code to run in the

background in separate thread from the UI event loop

• Push notifications wake up the phone periodically

• This all drains battery if you have tons of misbehaving apps

• My theory: this is why iPhone didn’t ship with multitasking• Can’t get around physics!

• Present battery tech has finite # of joules in it• Li Ion batteries pretty much at the end of the road• Technologies like Li Air not yet commercially viable• Joules = amount of current you can draw * time * voltage

you’ll see a lot of batteries rated in watt-hours (W = VI)

Going Native (iOS)• The Cocoa Touch framework

• Cocoa Touch is mobile version of Apple’s Cocoa framework for building Applications on the desktop

• Virtually identical sans UI naming conventions

• Does this fit the majority of application use cases?

• Titanium can get you into all the app stores after all• Phone Gap lets you make your web app and still write

native code

1. Platform control when mobile is your primary business (Square isn’t going use Phone Gap)

2. Extensive graphics (IE OpenGL)• Even this may change! (WebGL, O3D)

Objective-c points Like C++, is a superset of C, so can link to C/C++ libraries

Xcode treats .m files as obj-c, .mm files as C++

• Obj-c is strongly typed, statically compile, dynamic dispatch

• Square brackets are message dispatch (like in any dynamic languages – Ruby, Python, etc.)

• “.” syntax is a wrapper around this

• Dynamic = method callsites not bound at compile time

• Dynamic = errors like “undefined method blah on yada”

•Named method parameters are expressive:

• (void) takeA: (id)hammer andHitA: (id) nail•Vs. method parameters:

• hammer.hit(nail)• Hit_something(nail, hammer)

Memory management• What allocates memory?

• Whenever you see the keywords new, copy, alloc• Beware of third part library methods that create objects

• Obj-c has garbage collection, but it’s reference counting

• Obj-c 2.0 has ARC, iOS5 brought support to iOS • Static and dynamic analysis tools

• Leaks instrument• Scans through heap and traverses object graph, compares

the two to see what sections of memory don’t have anything pointing to it

www.facebook.com/notes/ambert-ho/how-to-fix-memory-leaks-developing-iphone-applications/10150121618328893

Programming• Obj-c language has the notion of “protocols”

• Essentially mix between Java interface and abstract class• Allows a contract between entities, with optional methods

• Like binding events in Javascript also evented

• A class that implements a protocol registers delegates

• So “application didFinishLaunching is actually a protocol method of the <UIApplicationDelegate> protocol

• Hooks like:• applicationDidBecomeActive (app went into foreground)• applicationDidEnterBackground (you closed the app but

it’s still running)• application:didReceiveRemoteNotification (hooks into

Apple push notification service)

• Foundation Framework has a notion of events that can be subscribed to

• Called “notifications” – handled by a notification center

High Level Schpeel• Event loop with hooks/callbacks

• protocols and delegates – more on that later• Your browser works this way too

http://developer.apple.com/library/ios/#documentation/general/conceptual/Devpedia-CocoaApp/MainEventLoop.html

Working in native• Lower level access to functionality

• HTTP requests manually constructed (have to define boundaries for multipart forms IE file uploads

• This is because HTTP is a text protocol, so binary data has to be base64 encoded

• main() method just initializes the event loop

• In previous page, “application:DidFinishLaunching” becomes your callback for the starting point of your app

• iOS is MVC, with Controllers (ViewControllers) managing Views

Phonegap for example…Phonegap initializes its view controller during the app launching

Phonegap’s View Controller talks to the view (UIWebview)

Conclusion

What’s your needs?

•Content based – just do a mobile website

•Have an application – jQuery Mobile, Sencha Touch

•Need to just deploy everywhere native and have relatively standard functionality - Titanium

•Complex application functionality – Phonegap

•You like pain – all native

• You must REALLY need all native• Remember, Phonegap can co-exist w/ native code

• Phonegap + Sencha Touch/jQuery Mobile/Backbone.js

On the Horizon

Mozilla’s Boot 2 Gecko (B2G)

• Complete OS written with Javascript bindings to systems level calls

• Like Node.js opened a door for JS developers to do server side work, this *could* open floodgates for native development

• Contracts signed with some major carriers• We’ll have to wait and see…