Building Cross-Platform JavaScript Apps using Cordova


Published on

This is the slide deck used in the "Building Cross-Platform JavaScript Apps using PhoneGap and Cordova" lecture I gave at the WDC.IL User Group in July 2014.

The talk briefly shows how to get started with Cordova, discusses some of the differences between Cordova, Adobe PhoneGap and the Telerik Platform, and demonstrates using the Telerik Platform to build and LiveSync Android, iOS and Windows Phone apps. It also explains the role of plugins in building hybrid mobile apps that can utilize native APIs.

Published in: Software
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Cross-Platform JavaScript Apps using Cordova

  1. 1. Cordova Noam Kfir | Sela Group | 2014
  2. 2. Agenda  Convergence  What’s in a Name?  Diving In  One for All and All for One  Going Native
  3. 3. Mobile Development Strategies Divergent Different platforms Different IDEs Different languages Convergent Unified platforms Any IDE (or just one) One language
  4. 4. Divergent Options Android Android Studio (or Eclipse) Java C++ iOS Xcode Objective- C Swift Windows Phone Visual Studio C# C++ JavaScript
  5. 5. Convergent Options Xamarin Xamarin Studio C# Mobile Web Any IDE JavaScript* Cordova Any IDE JavaScript*
  6. 6. Comparing Our Choices Option Deploy Languages Tools Platform Pricing Divergent Manage stores individually Different Different Native Negligible (mostly) Mobile Web Web JavaScript Any Web Inapplicable Xamarin Multiple stores C# One Native Bindings $299 or $999 per year per dev per platform Telerik Platform Multiple stores JavaScript Any Web + Native Bindings $468 or $948 per year per dev for all platforms Adobe PhoneGap Manage stores individually JavaScript Any Web + Native Bindings $120 or $360 (Creative Cloud) per year Disclaimer: This is a rough comparison that does not take into account all of the advantages and disadvantages of each option.
  7. 7. Built on Apache Cordova  “Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript”  Exposes native device capabilities  The Web as a Platform
  8. 8. Cordova App Structure Native Shell Browser Control Your App
  9. 9. Installing Cordova  Install node and npm  npm install -g cordova
  10. 10. Creating a Cordova Project  cordova create path namespace name  Example: cordova create hello-world com.gettingStarted.helloWorld HelloWorld
  11. 11. Adding Platform Support  Install the iOS SDK  cordova platforms add ios  Install the Android SDK and build tools (e.g., ant)  cordova platforms add android  Install the Windows Phone 8 SDK (on Windows)  cordova platforms add wp8
  12. 12. Folder Structure www the app platforms platform support libraries and tools plugins support for native features config.xml app parameters
  13. 13. Build iOS Platform  cordova build ios  Open Xcode and Run in the Simulator  npm install -g ios-sim  cordova emulate ios
  14. 14. Build Android Platform  cordova build android  Create at least one virtual device with android avd  cordova emulate android
  15. 15. Build Windows Phone 8 Platform  cordova build wp8  Install Windows Phone 8 virtual devices  Based on Hyper-V  cordova emulate wp8
  16. 16. One for All and All for One Cordova Adobe PhoneGap Telerik Platform IBM Worklight Salesforce Mobile SDK ???
  17. 17. Telerik’s Approach to Mobile Dev imagesource:
  18. 18. The Telerik Platform • AppPrototyperDesign • AppBuilder, CordovaBuild • Backend ServicesConnect • Mobile TestingTest • AppManagerDeploy and Manage • AppFeedback, AnalyticsMeasure
  19. 19. Design  AppPrototyper  Online wireframing tool  Collaborative features  Screens can be exported as a starting template  Based on Kendo  Without the UI itself  Not yet mature, but shows promise
  20. 20. Build  AppBuilder  Work in any environment  Telerik’s AppBuilder IDE – online or offline  Choose your own environment  Git integration  Test your app in an online simulator  Or on a real device with LiveSync  Publish your app to any app store
  21. 21. Connect  Backend Services  Unified API for cloud-based services  Management portal  Cloud storage for data and files  Push notifications  iOS, Android, Windows Phone  User management  Facebook, Microsoft, Google, Twitter  Server-code execution
  22. 22. Test  Mobile Testing  Write JavaScript tests  Based on Telerik’s testing framework  Similar to Jasmine but with higher-order capabilities  Run the tests using agents  Browser agents – browse to a provided URL  Device agents – install the Telerik Mobile Testing app from the appropriate app store  View results on the dashboard
  23. 23. Deploy and Manage  AppManager  Automatically publish your app to the Apple, Google or Windows app stores  Also supports private app stores for in-house apps  Integrated with AppBuilder via the Publish button  Edit configurations using the AppBuilder
  24. 24. Measure  AppFeedback  Lets users and testers provide feedback directly from within the app  Can automatically collect usage data  Screenshots  System info  User comments  Feedback shows up in the AppFeedback dashboard where it can be managed centrally  Assign, resolve, etc.  Request additional feedback or send replies
  25. 25. Measure  Analytics  Rich analytics platform, visible in the workspace dashboard  Opt-in using the Analytics plugin  Collects automatic data  Analytics API supports custom events and data
  26. 26. Going Native  Plugins provide support for native features  Don’t have to be native!  Anyone can write a plugin  Plugin registry:
  27. 27. Adding Plugins  cordova plugin add plugin-identifier
  28. 28. Common Plugins org.apache.cordova.console org.apache.cordova.device org.apache.cordova.notification
  29. 29. Summary
  30. 30. Questions?