Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
3 likes2,126 views
The document discusses cross-platform mobile development using PhoneGap, comparing it with other tools like Xamarin and Appcelerator. It outlines the pros and cons of cross-platform development, including cost savings and access to multiple platforms, but notes potential performance issues and varying support for device features. The document also provides practical insights on when to use different frameworks based on project needs and team capabilities.
![PhoneGap APIs
● navigator.*
○ accelerometer
○ compass
○ contacts
○ device.capture.capture[Audio|Image|Video]
○ geolocation
○ network
● window.requestFileSystem
● alert - native!
● Almost always asynchronous](https://image.slidesharecdn.com/cross-platformmobiledevelopment-phonegapoverview-140325160205-phpapp01/85/Cross-Platform-Mobile-Development-with-PhoneGap-Vince-Bullinger-32-320.jpg)
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
- 1. Cross-Platform Mobile Development with PhoneGap by: Vince Bullinger Mobile March 3/20/2014
- 2. About Me ● Vince Bullinger (“vbullinger” everywhere) ● Married (5/08), live in St. Paul, WPI grad (‘04) ● Daughter Zina born 7/4/2011 ● Been a consultant/developer since 2005 ● Always looking to improve skills
- 3. or 11:45AM-12:45PM - Robert Half, US Bancorp Center, Mpls
- 4. Agenda ● Compare native, X-platform development ● Why should I care about X-platform? ● PhoneGap vs Xamarin, Appcelerator ● Getting started with PhoneGap ● PhoneGap protips, tools
- 5. X-Platform Pros ● Write once, run on multiple major platforms ● One team/IDE/Skillset ● Can save a LOT of money ● Usually in more well-known languages ○ Easy to find talent ○ More support (varying) ○ Reuse code from other projects
- 6. X-Platform Cons ● Doesn’t always perform as well (varying) ○ Not specialized for particular device (duh) ○ Doesn’t always provide native experience ● Varying device feature support ○ Some device features may not be supported ○ Can vary by device ○ Can vary by framework ● May take a while to catch up to native updates ● Different appearances/capabilities/OSes
- 8. Different Capabilities ● Devices have different: ○ Hardware ○ Features ○ Screen ratios ○ Sizes ○ Screen resolutions ● Use feature detection ● Have fallback functionality
- 9. OS-Specific Considerations ● Multi-tasking ● Security ● Database
- 10. Test Psychotically ● Have a real, defined testing strategy ● Iterative, frequent ● QA knowledgeable on each device ● Test on actual device, not just emulator
- 11. Why Should I Care? ● Want to pick best mobile strategies ● Developers don’t want to code native* ○ 36% want HTML5 ○ 32% want cross-platform ○ 15% want native only * Survey by KendoUI
- 12. Cross-Platform Relevance “The market for cross-platform mobile development tools exceeds $1.6 billion right now, and is expected to reach $8.2 billion by 2016.” - Smiths Points Analytics
- 13. Native or X-Platform? ● Choose native when: ○ Need 100% native experience all the time ○ Accessing all device features ○ Only targeting one platform ○ Money is no issue ● Choose cross-platform when: ○ Don’t need to access obscure device features ○ You’re ready for some serious testing strategies ○ Have a restricted budget
- 14. PhoneGap • Free, open-source framework • Build “native” apps for multiple platforms • Built using HTML, CSS, JavaScript – Large communities :) • API allows access to device features – Accelerometer – Camera – Microphone – File system – A few more
- 16. PhoneGap Cons • API support varies • HTML, CSS, JavaScript only • Not really native apps… • Serious apps obviously not native • Big apps can have slow startup • Shouldn’t be used for complicated apps – Shell that connects to web server for real work – Won’t be consistent if using all native functionality
- 17. When To Use? ● Your web developers can PhoneGap now ● Small budget ● Uncomplicated app ● First foray into mobile development ● It is not best for large/complicated apps ○ Your app probably doesn’t fall under those categories ● Won’t have native look and feel ○ Not native apps ○ Localized mobile website with basic device API
- 18. • C# code – Lambdas – Generics – LINQ – All your other stuff... • Compiles to native binary – IL + JIT (Android) – ARM binary + AOT (iOS) Xamarin
- 19. How Xamarin Works Quasi stolen from http://xamarin.com/how-it-works
- 20. Xamarin Cons ● Still need separate UIs ○ Good thing? ○ Needs to be a factor in architecture decisions ● Separate device APIs ○ Xamarin.Mobile ■ Contacts ■ Camera ■ Geolocation ● Basic Xamarin Studio is free, useless
- 21. When to Use? ● Want as close to native as possible ● .Net shop ● Got some money to spend
- 22. Titanium • Build apps using JavaScript – Like PhoneGap • Compiles to 100% real app – Like Xamarin – Unlike PhoneGap • Cross-platform UIs – Unlike Xamarin • Robust JavaScript access to native APIs • Titanium Studio is free
- 24. Titanium Cons
- 25. Making UIs Identical • Don’t do it • It’s dumb • Rely on native look and feel
- 26. When to Use? ● Your team is/can be strong w/web development ● Familiar with Eclipse ● PhoneGap won’t do ○ Too complicated ○ Not enough device support ○ Need high-quality app with native look and feel ● Enough money to open pocket book ● Ready to sacrifice a bit of UI control ○ Rely on native look and feel ○ Lowest common denominator
- 27. PhoneGap History ● Started at 2008 iPhoneDevCamp by Nitobi ○ quickly added Android, Blackberry support ● ‘09 Web 2.0 Expo Launchpad Peoples' Choice ● Adobe acquires Nitobi in 2011 ● PhoneGap now part of Cordova ○ PhoneGap: open source ○ Cordova: proprietary ● PhoneGap’s aim: ○ Fulfill W3C specifications ○ Until browsers do
- 28. Getting Started ● IDEs ● APIs ● Emulating ● Building
- 29. IDEs ● Whatever you want! ● IDEs usually have plugins ● Have a Mac? Use XCode ● IBM Worklight - Eclipse plugin ○ Mobile websites, hybrid or native apps ○ Very PhoneGap-friendly ● AppBuilder (formerly Icenium) ○ Most PhoneGap-centric IDE ○ Part of Telerik Platform ○ Visual Studio plugin
- 31. DEMO
- 32. PhoneGap APIs ● navigator.* ○ accelerometer ○ compass ○ contacts ○ device.capture.capture[Audio|Image|Video] ○ geolocation ○ network ● window.requestFileSystem ● alert - native! ● Almost always asynchronous
- 34. Emulation
- 35. DEMO
- 36. Building PhoneGap Native Apps
- 37. Building PhoneGap Native Apps
- 38. Building PhoneGap Native Apps
- 39. Building PhoneGap Native Apps ● Download SDK for every device ● I’ll check back in next week … or...
- 40. ● Let PhoneGap build service compile it Building PhoneGap Native Apps
- 41. DEMO
- 42. ● Create web apps optimized for mobile ○ Touch optimized (buttons) ○ Uses responsive layout (inputs/labels) ○ Elements automatically adapt to device sizes ○ Supports range of platforms, devices ● Progressive enhancement ○ Always display basic content ○ Show richer display to powerful browsers ● Themeable - themeroller.jquerymobile.com jQuery Mobile
- 43. ● Ajaxified navigation ○ Hijacks links ○ Get linked url behind scenes ○ Append to DOM ○ Then smoothly transition ○ Supports back button, prefetching, caching ● jQuery Mobile alternatives ○ Sencha Touch ○ Dojo Mobile ○ Kendo UI jQuery Mobile
- 44. Demo
- 45. References ● This presentation: bit.ly/PhoneGapMM ● Speaker rate: http://bit.ly/1j71KDY ● http://phonegap.com ● http://xamarin.com ● http://appcelerator.com ● http://jquerymobile.com/ ● http://www.phonegapessentials.com/ ● http://build.phonegap.com ● http://techmasters-tc.com/