Future of Mobile
Upcoming SlideShare
Loading in...5
×
 

Future of Mobile

on

  • 6,510 views

 

Statistics

Views

Total Views
6,510
Views on SlideShare
6,307
Embed Views
203

Actions

Likes
14
Downloads
202
Comments
1

7 Embeds 203

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Future of Mobile Future of Mobile Presentation Transcript

  • 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 first class platform# => installable web apps# cease to exist# => browsers adopt this model
  • &
  • free, defined• 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 firefox 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• filesystem• contacts• media
  • outputs• device screen(s)• speakers• speaker jack
  • Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notification Storage
  • plugins• all phonegap APIs are a plugin• any native API is permitted
  • 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• define your project philosophy and goals• value != money• design (...not just the pretty)• shipping
  • the software processProblem definition 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• defining 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- flower-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!