0
Beyond the BlackBerry Smartphone: Using PhoneGap and Other Strategies to Deploy Applications Across Multiple Devices <ul><...
Agenda <ul><li>Cross Platform Problem Space </li></ul><ul><li>Vendors, Options, Strategies </li></ul><ul><li>Case Study - ...
Intro <ul><li>About Me </li></ul><ul><ul><li>MBA + MS/CS = Trouble </li></ul></ul><ul><li>Experimenting  </li></ul><ul><ul...
Cross Platform Problem Space
Cross Platform Problem Space <ul><li>Cross Platform Desktop Development as Bad Model </li></ul><ul><li>Cross Browser Web 2...
Cross Platform Problem Space Cross Platform Desktop Development as Bad Model <ul><li>Usually... </li></ul><ul><ul><li>Big ...
Cross Platform Problem Space Cross Browser Web 2.0 Development as Bad Model <ul><li>Big framework </li></ul><ul><ul><li>JQ...
Cross Platform Problem Space Cross Platform for Mobile is New(ish) Beast <ul><li>Small is beautiful </li></ul><ul><ul><li>...
Vendors, Options, Strategies
Vendors, Options, Strategies Cross Platform for Mobile is New(ish) Beast <ul><li>Titanium (Appcelerator) </li></ul><ul><li...
Vendors, Options, Strategies Capabilities Matrix Cost BB iPhone Palm WebOS S60 Android Win  Mobile Safari Chrome Firefox I...
Case Study - Web, PhoneGap, & Widgets
<ul><li>Write Once - Run Many </li></ul><ul><li>Keep it simple </li></ul><ul><li>Real-World use </li></ul><ul><li>Start wi...
Case Study - Web, PhoneGap, & Widgets  What is PhoneGap? <ul><li>Open Source </li></ul><ul><li>Wraps a web view with nativ...
<ul><li>PhoneGap has its own JavaScript API </li></ul><ul><li>Each platform shares some common JavaScript, plus some custo...
Case Study - Web, PhoneGap, & Widgets  App - Quadratic Equation Solver <ul><li>Quadratic Equation: ax^2 + bx + c = 0 </li>...
Case Study - Web, PhoneGap, & Widgets  Safari
Case Study - Web, PhoneGap, & Widgets  Safari to Devices
Case Study - Web, PhoneGap, & Widgets  Android PhoneGap
Case Study - Web, PhoneGap, & Widgets  Nokia S60 Widget
Case Study - Web, PhoneGap, & Widgets  Palm Pre (Web OS) ~Widget
Case Study - Web, PhoneGap, & Widgets  iPhone PhoneGap
Case Study - Web, PhoneGap, & Widgets  BlackBerry Widget
<ul><li>Approach works for lots of the platforms </li></ul><ul><li>This app is currently on iPhone, Android, Ovi app store...
Case Study - Web, PhoneGap, & Widgets  What Went Badly <ul><li>Not 100% cross platform yet - but close. </li></ul><ul><li>...
Case Study - Web, PhoneGap, & Widgets  What Was Unexpected <ul><li>Accessing Device Features (GPS, Contacts, etc) is almos...
Recommendations
Recommendations What to Know... <ul><li>Know your final platforms / devices </li></ul><ul><ul><li>Desktop Browser, BlackBe...
Recommendations What to Do... It depends... Budget Platform Access  Native  Technology Responds to Money Responds to Hacki...
Conclusion
Conclusion <ul><li>Know what you are getting yourself into </li></ul><ul><li>Be ready to make trade-offs </li></ul><ul><li...
Thank You <ul><li>10 November, 2009 </li></ul><ul><li>JJ Rohrer </li></ul><ul><li>Elegant Technologies, LLC </li></ul><ul>...
Extra: Widget vs. PhoneGap <ul><li>Widgets are web wrappers written by the device maker </li></ul><ul><ul><li>This is like...
Upcoming SlideShare
Loading in...5
×

Cross Platform Development Strategies with vendor review and PhoneGap case study

7,153

Published on

State of the technology overview regarding options and strategies, followed by a case study using PhoneGap

Published in: Technology
7 Comments
7 Likes
Statistics
Notes
  • Application Craft employee

    One to add to this discussion is Application Craft + Phonegap. AC is a cloud based development environment for building HTML5/ Javascript apps for mobile, tablet and desktop. AC uses a drag and drop / WYSIWYG visual UI editor and is widget based (like Visual Basic was). It operates a GPL Open Source licence and has a free platform offering.

    Phonegap case study here: goo.gl/QOCXY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for a nice summary, JJ

    We have just completed a deeper review of these, and other tools for cross platform mobile development - see http://bit.ly/mobiledevreport for a free report.

    comments welcomed
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • FYI Rhomobile's Rhodes is MIT free and open source.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • BlackBerry is producing video and/or audio of the presentations, but its a paid-dvd.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Jeff - Thanks for the update on Appcelerator. Appcelerator seems like a good offering to me. I apparently didn't appreciate some nuances there - hurray for comments!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,153
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
271
Comments
7
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Cross Platform Development Strategies with vendor review and PhoneGap case study"

  1. 1. Beyond the BlackBerry Smartphone: Using PhoneGap and Other Strategies to Deploy Applications Across Multiple Devices <ul><li>November 10th, 2009 </li></ul><ul><li>JJ Rohrer </li></ul><ul><li>President </li></ul><ul><li>Elegant Technologies, LLC </li></ul><ul><li>eleganttechnologies.com/blog/etr </li></ul>
  2. 2. Agenda <ul><li>Cross Platform Problem Space </li></ul><ul><li>Vendors, Options, Strategies </li></ul><ul><li>Case Study - Web, PhoneGap, & Widgets </li></ul><ul><li>Recommendations </li></ul>
  3. 3. Intro <ul><li>About Me </li></ul><ul><ul><li>MBA + MS/CS = Trouble </li></ul></ul><ul><li>Experimenting </li></ul><ul><ul><li>iPhone WebApp + Staff Pick = Big Head </li></ul></ul><ul><ul><li>iPhone Native </li></ul></ul><ul><ul><li>Android </li></ul></ul><ul><ul><li>BlackBerry Storm </li></ul></ul><ul><ul><li>N60 </li></ul></ul><ul><ul><li>Palm Pre </li></ul></ul><ul><li>Need Better Way </li></ul><ul><ul><li>So - Let’s look at cross-platform strategies </li></ul></ul>
  4. 4. Cross Platform Problem Space
  5. 5. Cross Platform Problem Space <ul><li>Cross Platform Desktop Development as Bad Model </li></ul><ul><li>Cross Browser Web 2.0 Development as Bad Model </li></ul><ul><li>Cross Platform for Mobile is New(ish) Beast </li></ul>
  6. 6. Cross Platform Problem Space Cross Platform Desktop Development as Bad Model <ul><li>Usually... </li></ul><ul><ul><li>Big framework </li></ul></ul><ul><ul><ul><li>J2ME, Adobe Air, GTK </li></ul></ul></ul><ul><ul><li>Non-native UI </li></ul></ul><ul><ul><ul><li>Swing, TCL/TK </li></ul></ul></ul><ul><ul><li>Common Language Output </li></ul></ul><ul><ul><ul><li>C/C++, Java, Ruby as executable </li></ul></ul></ul><ul><ul><li>Trades efficiency in execution for code commonality </li></ul></ul><ul><li>Bad Paradigm for Mobile because... </li></ul><ul><ul><li>Not efficient </li></ul></ul><ul><ul><li>Can’t reach all platforms </li></ul></ul>
  7. 7. Cross Platform Problem Space Cross Browser Web 2.0 Development as Bad Model <ul><li>Big framework </li></ul><ul><ul><li>JQuery, Yahoo toolkit, Adobe Air </li></ul></ul><ul><ul><li>Minimal compatibility with mobile web browsers </li></ul></ul><ul><li>Non-native UI </li></ul><ul><ul><li>A common web UI will look out of place on all devices </li></ul></ul><ul><li>WebApps are bad for mobile because... </li></ul><ul><ul><li>Breaks “App” paradigm </li></ul></ul><ul><ul><li>Loses device specific functionality </li></ul></ul><ul><ul><ul><li>Push, contacts, accelerometers, etc. </li></ul></ul></ul>
  8. 8. Cross Platform Problem Space Cross Platform for Mobile is New(ish) Beast <ul><li>Small is beautiful </li></ul><ul><ul><li>Limited memory, screen, cpu </li></ul></ul><ul><li>Real UI Differences between platforms </li></ul><ul><ul><li>Different Look & Feel (Mac vs. PC) </li></ul></ul><ul><ul><li>Whole Different Metaphors! (Tabs vs. Cards) </li></ul></ul><ul><ul><li>Different icon sizes, orientations, buttons, etc. </li></ul></ul><ul><li>Real Language Differences </li></ul><ul><ul><li>Java is fairly common, but not ubiquitous </li></ul></ul><ul><ul><li>Android’s OS is way different than iPhone & BlackBerry </li></ul></ul><ul><ul><li>iPhone only has ObjectiveC, C/C++, & JS in Webview </li></ul></ul>
  9. 9. Vendors, Options, Strategies
  10. 10. Vendors, Options, Strategies Cross Platform for Mobile is New(ish) Beast <ul><li>Titanium (Appcelerator) </li></ul><ul><li>Rhomobile </li></ul><ul><li>J2ME Polish </li></ul><ul><li>Pure WebApp </li></ul><ul><li>Web, PhoneGap, Widgets </li></ul><ul><li>Flash 10.1 </li></ul>
  11. 11. Vendors, Options, Strategies Capabilities Matrix Cost BB iPhone Palm WebOS S60 Android Win Mobile Safari Chrome Firefox IE 7 Comments <ul><li>Titanium ( Appcelerator) </li></ul>$$ X X <ul><li>Rhomobile </li></ul>$$ X X X X X +Ruby <ul><li>J2ME Polish </li></ul>$$ X X X J2ME w/ macros <ul><li>Pure WebApp </li></ul>- x X x x X x X X X X - Limited access to native <ul><li>Web, PhoneGap, Widget </li></ul>- x X X X X X X X X X - Immature + Unlimited customization <ul><li>Flash 10.1 (pre-beta) </li></ul>$$ X X X X X X X X X X + Adaptive strategies
  12. 12. Case Study - Web, PhoneGap, & Widgets
  13. 13. <ul><li>Write Once - Run Many </li></ul><ul><li>Keep it simple </li></ul><ul><li>Real-World use </li></ul><ul><li>Start with PhoneGap, or derivative </li></ul>Case Study - Web, PhoneGap, & Widgets Objectives
  14. 14. Case Study - Web, PhoneGap, & Widgets What is PhoneGap? <ul><li>Open Source </li></ul><ul><li>Wraps a web view with native code </li></ul><ul><ul><li>You write your app in HTML + JavaScript </li></ul></ul><ul><li>Provides conduits to device features </li></ul>
  15. 15. <ul><li>PhoneGap has its own JavaScript API </li></ul><ul><li>Each platform shares some common JavaScript, plus some custom JavaScript </li></ul><ul><li>Native code creates a web view and creates conduits between that web view and the device’s features. </li></ul><ul><ul><li>Contacts </li></ul></ul><ul><ul><li>GPS, etc. </li></ul></ul><ul><li>Developer writes a single web page </li></ul><ul><ul><li>Initial testing in desktop browser </li></ul></ul><ul><ul><li>Final testing on the device </li></ul></ul>Case Study - Web, PhoneGap, & Widgets How Does it Work
  16. 16. Case Study - Web, PhoneGap, & Widgets App - Quadratic Equation Solver <ul><li>Quadratic Equation: ax^2 + bx + c = 0 </li></ul><ul><li>Easy JavaScript </li></ul><ul><li>No persistence </li></ul><ul><li>No native device dependencies (GPS, contacts, etc.). </li></ul><ul><li>Meaningful on the web, and on mobile devices </li></ul><ul><li>Nice control point - </li></ul><ul><ul><li>Is there a market for something this simple? </li></ul></ul><ul><ul><li>It shouldn’t get any easier than this </li></ul></ul>
  17. 17. Case Study - Web, PhoneGap, & Widgets Safari
  18. 18. Case Study - Web, PhoneGap, & Widgets Safari to Devices
  19. 19. Case Study - Web, PhoneGap, & Widgets Android PhoneGap
  20. 20. Case Study - Web, PhoneGap, & Widgets Nokia S60 Widget
  21. 21. Case Study - Web, PhoneGap, & Widgets Palm Pre (Web OS) ~Widget
  22. 22. Case Study - Web, PhoneGap, & Widgets iPhone PhoneGap
  23. 23. Case Study - Web, PhoneGap, & Widgets BlackBerry Widget
  24. 24. <ul><li>Approach works for lots of the platforms </li></ul><ul><li>This app is currently on iPhone, Android, Ovi app stores </li></ul><ul><li>Unexpected Benefit </li></ul><ul><ul><li>Created a little web-based app emulator as sales tool </li></ul></ul><ul><li>Used Dashcode as WYSIWYG editor </li></ul><ul><li>Writing ‘Fixer’ code to change Dashcode implementation with cross-platform implementation </li></ul>Case Study - Web, PhoneGap, & Widgets What Went Well
  25. 25. Case Study - Web, PhoneGap, & Widgets What Went Badly <ul><li>Not 100% cross platform yet - but close. </li></ul><ul><li>Learning the common ground of HTML between browsers </li></ul><ul><ul><li>Very difficult to work with older browsers. </li></ul></ul><ul><li>Common Storage Model (cookies vs. SQL vs. other) </li></ul><ul><li>Asynchronous disconnect </li></ul><ul><ul><li>Difficult to program when one device handles something, like storage, synchronously, but another handles it asynchronously </li></ul></ul><ul><li>Lack of means to call soft numeric keypad, numlock, etc. </li></ul><ul><li>Track ball vs. keypad vs. tapping = impedance mismatch </li></ul>
  26. 26. Case Study - Web, PhoneGap, & Widgets What Was Unexpected <ul><li>Accessing Device Features (GPS, Contacts, etc) is almost a solved issue </li></ul><ul><li>JavaScript compatibility is a huge challenge </li></ul><ul><li>Layout compatibility is also a huge challenge </li></ul><ul><ul><li>Different HTML capability </li></ul></ul><ul><ul><li>Different Screen sizes </li></ul></ul><ul><li>Build scripts made it tolerable </li></ul><ul><ul><li>Nearly every device has a variations on themes </li></ul></ul><ul><ul><ul><li>Icon image (various sizes) </li></ul></ul></ul><ul><ul><ul><li>Title </li></ul></ul></ul><ul><ul><ul><li>Version </li></ul></ul></ul>
  27. 27. Recommendations
  28. 28. Recommendations What to Know... <ul><li>Know your final platforms / devices </li></ul><ul><ul><li>Desktop Browser, BlackBerry, Android, Etc. </li></ul></ul><ul><li>Know which technologies you need </li></ul><ul><ul><li>Contacts, GPS, High Speed Graphics, etc. </li></ul></ul><ul><li>Know input modes </li></ul><ul><ul><li>Numeric Keypad, QWERTY, Trackball, Rockers, etc. </li></ul></ul><ul><li>Know your aptitude towards making custom extensions </li></ul><ul><ul><li>Do you need support, or can you hack your own extensions? </li></ul></ul><ul><li>Know your budget </li></ul><ul><ul><li>Can you buy your way out of difficulty? </li></ul></ul>
  29. 29. Recommendations What to Do... It depends... Budget Platform Access Native Technology Responds to Money Responds to Hacking Titanium ( Appcelerator) $$ x X X Rhomobile $$ x X X J2ME Polish $$ x X x Pure WebApp X Web, PhoneGap, Widget X x X Flash 10.1 (pre-beta) $$ X X
  30. 30. Conclusion
  31. 31. Conclusion <ul><li>Know what you are getting yourself into </li></ul><ul><li>Be ready to make trade-offs </li></ul><ul><li>Keep watching the technologies for new developments </li></ul>
  32. 32. Thank You <ul><li>10 November, 2009 </li></ul><ul><li>JJ Rohrer </li></ul><ul><li>Elegant Technologies, LLC </li></ul><ul><li>eleganttechnologies.com/blog/etr </li></ul><ul><li>[email_address] </li></ul>
  33. 33. Extra: Widget vs. PhoneGap <ul><li>Widgets are web wrappers written by the device maker </li></ul><ul><ul><li>This is like PhoneGap, except that device specific </li></ul></ul><ul><ul><li>Not common API </li></ul></ul><ul><ul><li>Usually very complete, robust, documented </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×