Future of Mobile

The Future of MobileHTML5 and cross-platform native apps for iOS, Android and Blackberry @brianleroux

-mehttp://brian.io

HTML5 and mobile• PhoneGap project background• mobile projects in practice• backend design concerns• mobile web client design• progressive enhancement to ‘native’

PhoneGap project• history/goals/philosophy • device apis: sensors• licensing • device apis: data• web standards • device apis: outputs• the phonegap technique • present and future: a little (ffi / bridge) about our roadmap• platform support • phonegap/build• more on the bridge: plugins • perceived competition• the future of mobile is device apis

PhoneGap project• history/goals/philosophy • device apis: sensors• licensing • device apis: data ckin’ a little• web standards • device apis: outputs fu apresent and future: ach y about our roadmap (ffi / bridge) ma te• the phonegap technique • im ai ght? g, phonegap/build ythin perceived competition ever• platform support •• more on the bridge: plugins•• the future of mobile is device apis

history2008 : got its start as a lofty summertime hack; gainedtraction as a concept @nitobi with android andblackberry implementations in the fall2009 : ppl started to pay attention when we got‘rejected’ by apple; we added Symbian and webOSsupport. Sony Ericsson contributes2010 : IBM began tag teaming w/ Nitobi2011 : RIM contributing. Shipped 1.x! Added WindowsPhone 7 support

philosophy• simple is better• when in doubt, use brute force• the web solved cross platform

goals# the web as a ﬁrst class platform# => installable web apps# cease to exist# => browsers adopt this model

free, deﬁned• free to use• free to modify• free to distribute• free to change• free to sell

“OMG, how does anyone make money?”

ever buy bottled water?

Nitobi vs. PhoneGap• we are the creators of and contributors to PhoneGap• we are a software company• we give away as much IP as possible

web standards• w3c has many• bondi / jil / wac / webinos• de facto standards?

the PhoneGap technique *• colloquially called ‘the bridge’• more correctly a FFI (foreign function interface) * originally we called it ‘the phonegap hack’

the hack1. instantiate a webview2. call js from the native code3. call native code from the js

primary platforms• Apple iOS >= 3 (supported since 1.x)• Google Android >= 1.5• BlackBerry >= 5.x (supported since 4.2)

platform support,• HP webOS• Nokia Symbian• Samsung Bada• Windows Phone 7.5

further experiments• various desktop experiments• mozilla ﬁrefox mobile (fennec)• Qt (thus Maemo/MeeGo)

No mobile dev platformsupports as many deploy targets as PhoneGap. Not even a single web browser...not yet anyhow.

primary contributors• Nitobi• IBM• RIM• Microsoft

PhoneGap APIhttp://docs.phonegap.com

device APIs• sensors• data• outputs

sensors• geo / accelerometer / gyroscope• camera

data• ﬁlesystem• contacts• media

outputs• device screen(s)• speakers• speaker jack

Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notiﬁcation Storage

plugins• all phonegap APIs are a plugin• any native API is permitted

frameworks• jQuery mobile Wink• jQTouch QooXDoo• Sencha Zepto• XUI JOApp

PhoneGap is just a fancy browser... ...so your code runs in less fancy ones, too.

A quick interlude about competition...

PhoneGap has no competition

let’s review• philosophy• licensing• number of supported platforms• community adoption• contributors• tooling from 3rd parties• no lock in: your app runs in a browser too

PhoneGap/BuildWe build your apps ‘in the cloud’.Free for Free/Open Source projects.

hello world already!

mobile in practice• deﬁne your project philosophy and goals• value != money• design (...not just the pretty)• shipping

the software processProblem deﬁnition outlinesa solution valueproposition.In other words: you can’t be ahero without an enemy.

have a singular goal.

great UX happens iteratively.design continuously; start with research.big upfront designs fail.

great UX happens iteratively.design continuously; start with research.big upfront designs fail.don’t fail.

bias• technical bias is a normal condition• embrace your bias; it is skills you have• embrace your existing technical debt• be wary of anything preaching a ‘one true way’

the exception,the web,is exceptional.

good news!• you have likely already invested in the web• today you have the knowledge and skills to build end to end systems with HTML, CSS and JavaScript

shipping• a daily activity• unit tests for health and sanity• single click builds (test/dev/release)• utilize a distributed RCS• automate everything

web client design• constraints are your ally in the battle against complexity and clients whom are not chill• phones suck: cpu, ram, bandwidth, size, battery, network...everything!• start with a benchmark and monitor that benchmark

mobile web != WebKit• Opera is huge• Firefox making strides• IE happens still• ...which webkit btw?

layouts• flex-box rules!• css media queries ftw!• meta tag w/ viewporthttp://developer.palm.com/blog/2011/07/css-3-flexible-box-model-and-enyo-flex-layout/http://mediaqueri.eshttp://developer.android.com/guide/webapps/targeting.html

looks can kill• aesthetics that can hurt performance: ‣ border-radius ‣ box-shadow ‣ gradients

your brand > theirs• your brand is cross platform• a device manufacturer or software vendor is not your brand• design to solve your problem!

JS libraries• start with your problem, not a generic solution• Zepto and its older brother XUI are all you need to start• JOapp is fantastic option• Backbone and/or Spine are worth watching and perhaps using on your project• jQueryMobile, Sencha are mature fullstack options• Dojo and YUI are on the way

automation• not just for servers! benching, testing, and deployment require separated compilation• there are tools...and I’m torn on this one.. but I still recommend rolling your own• basic concat, min/obfuscate, embed• yes: this is necessary for perf

testing• qUnit / Jasmine pretty popular• usually just test endpoints and business logic

deployment• concat / minify / obfuscate• inline everything into the markup to min http chatter

AppCache• used to not invalidate; which sucked• homescreen / installable web apps now seem valid

backend design• almost every legacy system needs a proxy• RESTful JSON endpoints are fastest

NodeJS• hit the scene in 2009• plenty fast (async io)• community is mental (npm)• reuse your JS skills• supported by Joyent, Microsoft and many others

deployment• Joyent• Heroku• Nodejitsu• soon: Microsoft Azure

serious business time• deﬁning a problem informs the solution (epic hero needs an epic arch enemy theory)• create a min viable product statement• do not fuck around shaving yaks

a photo sharing app

our JSON service APIPOST / # save a picGET / # displays pics

PROTIP! Checkout all the src here:https://github.com/brianleroux/ghetto-photoshare

deployed on Heroku! http://deep- ﬂower-8321.herokuapp.com/

native client design• available offline• access to native device capabilities• app store and ad hoc distribution

going offline• icons, splash screens and data access techniques• DomStorage, File, IndexedDB, SQLite

Device APIs: sensors and dataOur example: Camera / Capture API

wiring it to our shitty photo sharing app

PROTIP! The entire app is here:https://gist.github.com/1219277

let’s try it out!

one more thing...

PhoneGap/Build• continuous deployment• no SDKs required• Cloud9IDE and GitHub compatible• remote debug your devices

recap• learned about PhoneGap• learned about the mobile web• picked up enough NodeJS to be dangerous• wrote a cross platform native app

thanks!

http://lanyrd.com	114
http://paper.li	39
http://us-w1.rockmelt.com	24
http://twitter.com	15
https://twitter.com	6
http://www.linkedin.com	1

Future of Mobile

by Brian LeRoux

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 199

Statistics

Future of Mobile Presentation Transcript

Future of Mobile

by Brian LeRoux

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 199

Statistics

Future of Mobile Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare