Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Cross Platform Development Strategies with vendor review and PhoneGap case study

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 33 Publicité
Publicité

Plus De Contenu Connexe

Similaire à Cross Platform Development Strategies with vendor review and PhoneGap case study (20)

Publicité

Plus récents (20)

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>

×