A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices.
I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms.
I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.
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
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)
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
/
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…
Notes de l'éditeur
There’s a whole gamut of different ways to put your “thing” onto someone’s mobile device. Continuum stretches from a plain website to fully native apps with lots in between With native I’ll focus on iOS since I only know that
A lot of sites have been redesigned to actually just work better on mobile It gets hard to maintain completely separate sites, especially if you’re trying to iterate or rip out and put in new features. This was the initial approach I took, ba big headache very quickly
Important distinction has to be made here – what’s the endgoal product functionality?
When a client is making an HTTP request, it sends metadata in the header, one of which is user-agent, indicating what type of browser it is. Differentiates both vendors and mobile/desktop You might have gone to a site on your phone and saw a popup “hey! Check our app in the appstore!” Well, this is how they do it
Flip a phone or tablet in landscape, lots of horizontal real estate so maybe you have a sidebar with navigation Then vertical, less horizontal real estate, maybe you want to cluster the navigation at the top
The point is that you can not only move things around, but apply all the other CSS properties (images, background, etc.) according to media queries
Fluid vs. Fixed: when you resize your browser you might have noticed that some site expand and collapse, others have this fixed width on a background, cuts off when you get too narrow In this case for > 980px when we’re talking about a desktop, we probably want to have a fixed width container centered (margin-left/right) in the middle of the page
Remember that mobile browsers need to look at pages that were designed for desktop Notice that if you go to some mobile websites you can’t zoom in and you can’t scroll right, or maybe scroll down – that’s because they’ve laid out the site to fit mobile devices and then set the viewport property in their HTML
Weinre is a Node.js application, you include some javascript from the server and point your phone to a website, then open a /client url on your desktop and you get to see what the phone sees. Cool stuff. Optimization around the HTTP request waterfall – all browsers have a cap on connections used to access resources (images, stylesheets, ajax calls) and this matters more on mobile
Your phone connects to the internet through many layers of indirection: cell tower, gateway, carrier internal routing, then out to internet Keeping the connection open (which drains battery) is an optimization I’m pretty sure a lot of realtime native apps (esp chat apps) use
The jQuery example is their “kitchen sink” – some frameworks will have “documentation for hackers” where they just expose a page with all the functionality for you to access
Things change so quickly in this space – Sencha Touch is commercially backed however (though it’s open source). ExtJS took the “ Mysql AB ” approach to open source It’s also different in that jQuery Mobile allows development pretty much the same as with jQuery on the desktop, plus the bindings Sencha is like Backbone.js – ExtJS had a structured all-JS dev framework too (some people like, some people hate, it’s all just a tool in the end) You’ll see Appcelerator Titanium is like this too
Concept of a webview: an instance of a browser spun up within a native app – more on the next slide
I polled game developer friends and this is the most popular way to do things at the moment
Joules for some of you – measure of energy, ability to produce one watt in a second. What’s a watt? The ability to expend a joule per second… So Joules = Amp hours * voltage you’ll see a lot of batteries rated in Amperage-hours *caught up with a friend who’s a battery expert doing due diligence, I know nothing of the emerging battery techs
Bad British joke, “The old boy’s gone native!” We mentioned earlier that web views were slow a couple of years ago. Maybe we’ll have faster browser graphics (Google I/O in 2009 demo’d O3D in browser rendering of a rich 3D landscape)
Obviously this is a big topic, so I’m going to just go through an overview and give confusion points coming from other languages, esp scripting languages
You can imagine all the objects in memory as a tree
Foundation is the non-GUI base libraries that date back to the NEXT computer days (Next Step)– hence a lot of stuff begins with “NS”: NSString, NSDictionary, NSArrat