Your SlideShare is downloading. ×
Future of Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Future of Mobile

6,162
views

Published on

Published in: Technology

1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,162
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
206
Comments
1
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • Transcript

    • 1. The Future of MobileHTML5 and cross-platform native apps for iOS, Android and Blackberry @brianleroux
    • 2. -mehttp://brian.io
    • 3. HTML5 and mobile• PhoneGap project background• mobile projects in practice• backend design concerns• mobile web client design• progressive enhancement to ‘native’
    • 4. 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
    • 5. 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
    • 6. 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
    • 7. philosophy• simple is better• when in doubt, use brute force• the web solved cross platform
    • 8. goals# the web as a first class platform# => installable web apps# cease to exist# => browsers adopt this model
    • 9. &
    • 10. free, defined• free to use• free to modify• free to distribute• free to change• free to sell
    • 11. “OMG, how does anyone make money?”
    • 12. ever buy bottled water?
    • 13. 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
    • 14. web standards• w3c has many• bondi / jil / wac / webinos• de facto standards?
    • 15. the PhoneGap technique *• colloquially called ‘the bridge’• more correctly a FFI (foreign function interface) * originally we called it ‘the phonegap hack’
    • 16. the hack1. instantiate a webview2. call js from the native code3. call native code from the js
    • 17. primary platforms• Apple iOS >= 3 (supported since 1.x)• Google Android >= 1.5• BlackBerry >= 5.x (supported since 4.2)
    • 18. platform support,• HP webOS• Nokia Symbian• Samsung Bada• Windows Phone 7.5
    • 19. further experiments• various desktop experiments• mozilla firefox mobile (fennec)• Qt (thus Maemo/MeeGo)
    • 20. No mobile dev platformsupports as many deploy targets as PhoneGap. Not even a single web browser...not yet anyhow.
    • 21. primary contributors• Nitobi• IBM• RIM• Microsoft
    • 22. PhoneGap APIhttp://docs.phonegap.com
    • 23. device APIs• sensors• data• outputs
    • 24. sensors• geo / accelerometer / gyroscope• camera
    • 25. data• filesystem• contacts• media
    • 26. outputs• device screen(s)• speakers• speaker jack
    • 27. Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notification Storage
    • 28. plugins• all phonegap APIs are a plugin• any native API is permitted
    • 29. plugins• all phonegap APIs are a plugin• any native API is permitted
    • 30. frameworks• jQuery mobile Wink• jQTouch QooXDoo• Sencha Zepto• XUI JOApp
    • 31. PhoneGap is just a fancy browser... ...so your code runs in less fancy ones, too.
    • 32. A quick interlude about competition...
    • 33. PhoneGap has no competition
    • 34. 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
    • 35. PhoneGap/BuildWe build your apps ‘in the cloud’.Free for Free/Open Source projects.
    • 36. hello world already!
    • 37. mobile in practice• define your project philosophy and goals• value != money• design (...not just the pretty)• shipping
    • 38. the software processProblem definition outlinesa solution valueproposition.In other words: you can’t be ahero without an enemy.
    • 39. have a singular goal.
    • 40. great UX happens iteratively.design continuously; start with research.big upfront designs fail.
    • 41. great UX happens iteratively.design continuously; start with research.big upfront designs fail.don’t fail.
    • 42. 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’
    • 43. the exception,the web,is exceptional.
    • 44. 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
    • 45. shipping• a daily activity• unit tests for health and sanity• single click builds (test/dev/release)• utilize a distributed RCS• automate everything
    • 46. 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
    • 47. mobile web != WebKit• Opera is huge• Firefox making strides• IE happens still• ...which webkit btw?
    • 48. 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
    • 49. looks can kill• aesthetics that can hurt performance: ‣ border-radius ‣ box-shadow ‣ gradients
    • 50. your brand > theirs• your brand is cross platform• a device manufacturer or software vendor is not your brand• design to solve your problem!
    • 51. 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
    • 52. 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
    • 53. testing• qUnit / Jasmine pretty popular• usually just test endpoints and business logic
    • 54. deployment• concat / minify / obfuscate• inline everything into the markup to min http chatter
    • 55. AppCache• used to not invalidate; which sucked• homescreen / installable web apps now seem valid
    • 56. backend design• almost every legacy system needs a proxy• RESTful JSON endpoints are fastest
    • 57. 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
    • 58. deployment• Joyent• Heroku• Nodejitsu• soon: Microsoft Azure
    • 59. 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
    • 60. a photo sharing app
    • 61. our JSON service APIPOST / # save a picGET / # displays pics
    • 62. PROTIP! Checkout all the src here:https://github.com/brianleroux/ghetto-photoshare
    • 63. deployed on Heroku! http://deep- flower-8321.herokuapp.com/
    • 64. native client design• available offline• access to native device capabilities• app store and ad hoc distribution
    • 65. going offline• icons, splash screens and data access techniques• DomStorage, File, IndexedDB, SQLite
    • 66. Device APIs: sensors and dataOur example: Camera / Capture API
    • 67. wiring it to our shitty photo sharing app
    • 68. PROTIP! The entire app is here:https://gist.github.com/1219277
    • 69. let’s try it out!
    • 70. one more thing...
    • 71. PhoneGap/Build• continuous deployment• no SDKs required• Cloud9IDE and GitHub compatible• remote debug your devices
    • 72. recap• learned about PhoneGap• learned about the mobile web• picked up enough NodeJS to be dangerous• wrote a cross platform native app
    • 73. thanks!