SlideShare une entreprise Scribd logo
1  sur  75
Télécharger pour lire hors ligne
The Future of
                 Mobile


HTML5 and cross-platform native apps for iOS, Android and Blackberry

                         @brianleroux
-me




http://brian.io
HTML5 and mobile
•   PhoneGap project background
•   mobile projects in practice
•   backend design concerns
•   mobile web client design
•   progressive enhancement to ‘native’
Future of Mobile
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
history
2008 : got its start as a lofty summertime hack; gained
traction as a concept @nitobi with android and
blackberry implementations in the fall
2009 : ppl started to pay attention when we got
‘rejected’ by apple; we added Symbian and webOS
support. Sony Ericsson contributes
2010 : IBM began tag teaming w/ Nitobi
2011 : RIM contributing. Shipped 1.x! Added Windows
Phone 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 hack
1. instantiate a webview
2. call js from the native code
3. 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 platform
supports as many deploy
  targets as PhoneGap.

   Not even a single web
 browser...not yet anyhow.
primary contributors
• Nitobi

• IBM

• RIM

• Microsoft
PhoneGap API
http://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/Build
We 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 process

Problem definition outlines
a solution value
proposition.

In other words: you can’t be a
hero 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/ viewport



http://developer.palm.com/blog/2011/07/css-3-flexible-box-model-and-enyo-flex-
layout/
http://mediaqueri.es
http://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 API
POST / # save a pic
GET / # 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 data

Our example: Camera / Capture API
Future of Mobile
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!

Contenu connexe

Tendances

PhoneGap: a brief history and apologia
PhoneGap: a brief history and apologiaPhoneGap: a brief history and apologia
PhoneGap: a brief history and apologialorinbeer
 
Hardware Prototyping for Software Developers
Hardware Prototyping for Software DevelopersHardware Prototyping for Software Developers
Hardware Prototyping for Software DevelopersKinoma
 
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesBLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesRené Winkelmeyer
 
UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!René Winkelmeyer
 
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Jad Salhani
 
Building frameworks: from concept to completion
Building frameworks: from concept to completionBuilding frameworks: from concept to completion
Building frameworks: from concept to completionRuben Goncalves
 
Bone.io for HTML5 Apps
Bone.io for HTML5 AppsBone.io for HTML5 Apps
Bone.io for HTML5 AppsBrad Carleton
 
PhoneGap - Now and the Future
PhoneGap - Now and the FuturePhoneGap - Now and the Future
PhoneGap - Now and the FutureTim Kim
 
Make Cross Platform Apps that Suck Less
Make Cross Platform Apps that Suck LessMake Cross Platform Apps that Suck Less
Make Cross Platform Apps that Suck Lessjhugman
 
Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...
Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...
Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...VMware Tanzu
 
Designing an App: From Idea to Market
Designing an App: From Idea to MarketDesigning an App: From Idea to Market
Designing an App: From Idea to MarketEffectiveUI
 
Building an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedBuilding an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedWojciech Koszek
 
Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to MarketTack Mobile
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationMuhammad Hakim A
 
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)Jonathan Engelsma
 
No more excuses! Let's build beautiful things. #codemotion Rome
No  more excuses! Let's build beautiful things. #codemotion Rome No  more excuses! Let's build beautiful things. #codemotion Rome
No more excuses! Let's build beautiful things. #codemotion Rome Christian Heilmann
 
React, London JS Meetup, 11 Aug 2015
React, London JS Meetup, 11 Aug 2015React, London JS Meetup, 11 Aug 2015
React, London JS Meetup, 11 Aug 2015Stuart Harris
 

Tendances (20)

PhoneGap: a brief history and apologia
PhoneGap: a brief history and apologiaPhoneGap: a brief history and apologia
PhoneGap: a brief history and apologia
 
Hardware Prototyping for Software Developers
Hardware Prototyping for Software DevelopersHardware Prototyping for Software Developers
Hardware Prototyping for Software Developers
 
engage 2014 - JavaBlast
engage 2014 - JavaBlastengage 2014 - JavaBlast
engage 2014 - JavaBlast
 
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesBLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
 
UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!UKLUG 2012 - XPages Extensibility API - going deep!
UKLUG 2012 - XPages Extensibility API - going deep!
 
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
 
Building frameworks: from concept to completion
Building frameworks: from concept to completionBuilding frameworks: from concept to completion
Building frameworks: from concept to completion
 
Bone.io for HTML5 Apps
Bone.io for HTML5 AppsBone.io for HTML5 Apps
Bone.io for HTML5 Apps
 
PhoneGap - Now and the Future
PhoneGap - Now and the FuturePhoneGap - Now and the Future
PhoneGap - Now and the Future
 
Titanium @ Minnebar
Titanium @ MinnebarTitanium @ Minnebar
Titanium @ Minnebar
 
Make Cross Platform Apps that Suck Less
Make Cross Platform Apps that Suck LessMake Cross Platform Apps that Suck Less
Make Cross Platform Apps that Suck Less
 
Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...
Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...
Iterating For Success: A Case Study in Remote Paired Programming, The Evoluti...
 
Designing an App: From Idea to Market
Designing an App: From Idea to MarketDesigning an App: From Idea to Market
Designing an App: From Idea to Market
 
Building an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedBuilding an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learned
 
Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to Market
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)
iOS Bootcamp: learning to create awesome apps on iOS using Swift (Lecture 09)
 
No more excuses! Let's build beautiful things. #codemotion Rome
No  more excuses! Let's build beautiful things. #codemotion Rome No  more excuses! Let's build beautiful things. #codemotion Rome
No more excuses! Let's build beautiful things. #codemotion Rome
 
Jsday
JsdayJsday
Jsday
 
React, London JS Meetup, 11 Aug 2015
React, London JS Meetup, 11 Aug 2015React, London JS Meetup, 11 Aug 2015
React, London JS Meetup, 11 Aug 2015
 

En vedette

Developing AIR for Android using Flash CS5
Developing AIR for Android using Flash CS5	Developing AIR for Android using Flash CS5
Developing AIR for Android using Flash CS5 Chris Griffith
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practicesmarkparolisi
 
iPhone forensics, without the iPhone
iPhone forensics, without the iPhoneiPhone forensics, without the iPhone
iPhone forensics, without the iPhonehrgeeks
 
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009Daryl Koopersmith
 
Mining Big Data in Real Time
Mining Big Data in Real TimeMining Big Data in Real Time
Mining Big Data in Real TimeAlbert Bifet
 

En vedette (6)

Developing AIR for Android using Flash CS5
Developing AIR for Android using Flash CS5	Developing AIR for Android using Flash CS5
Developing AIR for Android using Flash CS5
 
Mobile JavaScript
Mobile JavaScriptMobile JavaScript
Mobile JavaScript
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practices
 
iPhone forensics, without the iPhone
iPhone forensics, without the iPhoneiPhone forensics, without the iPhone
iPhone forensics, without the iPhone
 
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
Elastic: Why WYSIWYG is the future of WordPress themes — WordCamp NYC 2009
 
Mining Big Data in Real Time
Mining Big Data in Real TimeMining Big Data in Real Time
Mining Big Data in Real Time
 

Similaire à Future of Mobile

HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Nuxeo
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Indiginox
 
Cross platform mobile application development
Cross platform mobile application developmentCross platform mobile application development
Cross platform mobile application developmentwebprogr.com
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​FDConf
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsAlius Petraška
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile DevelopmentManesh Lad
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
Top 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App DevelopmentTop 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App Developmenttechugo
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth elementFernando Cejas
 
2011 code camp
2011 code camp2011 code camp
2011 code campimranq2
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejaswebcat
 
Developing Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapDeveloping Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapAmar Mesic
 
Intro to tech stacks bonny
Intro to tech stacks bonnyIntro to tech stacks bonny
Intro to tech stacks bonnyLama K Banna
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application developmentKunjan Thakkar
 

Similaire à Future of Mobile (20)

HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?
 
Cross platform mobile application development
Cross platform mobile application developmentCross platform mobile application development
Cross platform mobile application development
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile apps
 
Txjs
TxjsTxjs
Txjs
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Top 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App DevelopmentTop 4 Cross Platform tools for Mobile App Development
Top 4 Cross Platform tools for Mobile App Development
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth element
 
Phone gap
Phone gapPhone gap
Phone gap
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
2011 code camp
2011 code camp2011 code camp
2011 code camp
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas
 
Developing Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapDeveloping Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGap
 
Intro to tech stacks bonny
Intro to tech stacks bonnyIntro to tech stacks bonny
Intro to tech stacks bonny
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 

Plus de Brian LeRoux

After HTML5 Mobilism 2011
After HTML5 Mobilism 2011After HTML5 Mobilism 2011
After HTML5 Mobilism 2011Brian LeRoux
 
Mobile Knife Fighting at JSConf US
Mobile Knife Fighting at JSConf US Mobile Knife Fighting at JSConf US
Mobile Knife Fighting at JSConf US Brian LeRoux
 
Palm Developer Day PhoneGap
Palm Developer Day PhoneGap Palm Developer Day PhoneGap
Palm Developer Day PhoneGap Brian LeRoux
 
Mobile Web App Development
Mobile Web App DevelopmentMobile Web App Development
Mobile Web App DevelopmentBrian LeRoux
 

Plus de Brian LeRoux (7)

After HTML5 Mobilism 2011
After HTML5 Mobilism 2011After HTML5 Mobilism 2011
After HTML5 Mobilism 2011
 
Mobile Knife Fighting at JSConf US
Mobile Knife Fighting at JSConf US Mobile Knife Fighting at JSConf US
Mobile Knife Fighting at JSConf US
 
Fullfrontal 2010
Fullfrontal 2010Fullfrontal 2010
Fullfrontal 2010
 
Palm Developer Day PhoneGap
Palm Developer Day PhoneGap Palm Developer Day PhoneGap
Palm Developer Day PhoneGap
 
Scurvyconf
ScurvyconfScurvyconf
Scurvyconf
 
Mobile Web App Development
Mobile Web App DevelopmentMobile Web App Development
Mobile Web App Development
 
Phonegap 1.0
Phonegap 1.0Phonegap 1.0
Phonegap 1.0
 

Dernier

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 

Dernier (20)

Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 

Future of Mobile

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

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n