The document discusses the evolving mobile development landscape, emphasizing the shift towards mobile-optimized web content and various approaches to mobile application development, including responsive design, native apps, and hybrid models. It highlights different techniques for handling mobile content, such as user-agent detection and media queries, alongside the importance of performance optimizations like responsive layouts and proper memory management in mobile applications. The document also contrasts development frameworks and tools for both web and native mobile applications, providing insights on when to choose each based on project needs.

1. The Mobile Development
Landscape
Ambert HO
aho@rpxcorp.com
ambertch@gmail.com

2. 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)

3. 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.

4. Mobile website
• Notice any changes in the last couple of years?
• Slow webpages being replaced with mobile optimized ones
Different approaches:
4. Build separate site/use different presentation
• Separate application (m.facebook.com)
• User agent detection in HTTP request
5. 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)

5. Before we jump in…
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

6. Different screen sizes
http://www.slideshare.net/redux/adapt-and-respond-mobilefriendly-layouts-beyond-the

7. 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.

8. 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)

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

10. Example @media screen and (max-
width: 700px) {
#content { #content {
float: left width: auto;
width: 700px float: none;
Base Styles for
} }
regular viewing Smaller
#sidebar { #sidebar { Tablets
float: left width: auto;
width: 250px float: none;
} }
}
@media screen and (max- @media screen and (max-
width: 980px) { width: 480px) {
#content { #sidebar {
width: 65%; Fluid layout for width: <X>px
} devices with
}
#sidebar { reasonable width
#content { Phone/
width: 30%; width: <Y>px Min width
} }
} }

11. Queries work in links
<link rel=“stylesheet” type=“text/css” media=“only screen and
(max-width: 480px)” href=“/assets/phone_stylesheet.css”
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/

12. 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

13. 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
<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>
Would want this for a site that’s supposed to look like an app

14. 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!

15. 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

16. 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-conn
/

17. Native app emulation
http://dev.sencha.com/deploy/touch/examples/
http://jquerymobile.com/demos/1.1.0/

18. 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 Ext.application({
• Company behind ExtJS library name: 'Sencha’,
launch: function() {
Ext.create(“Ext.tab.Panel”, {
tabBarPosition: ‘bottom’,

19. 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)

20. 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)

21. 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)

22. 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
3. Platform control when mobile is your primary business
(Square isn’t going use Phone Gap)
4. Extensive graphics (IE OpenGL)
• Even this may change! (WebGL, O3D)

23. 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)

24. 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-ap

25. 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

26. 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-C

27. 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

28. Phonegap for example…
Phonegap initializes its view controller during the app launching
Phonegap’s View Controller talks to the view
(UIWebview)

29. 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

30. 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…