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.

1. Cordova
Noam Kfir | Sela Group | 2014

2. Agenda
 Convergence
 What’s in a Name?
 Diving In
 One for All and All for One
 Going Native

3. Mobile Development Strategies
Divergent
Different platforms
Different IDEs
Different languages
Convergent
Unified platforms
Any IDE (or just one)
One language

4. Divergent Options
Android
Android Studio
(or Eclipse)
Java C++
iOS
Xcode
Objective-
C
Swift
Windows Phone
Visual Studio
C# C++ JavaScript

5. Convergent Options
Xamarin
Xamarin Studio
C#
Mobile Web
Any IDE
JavaScript*
Cordova
Any IDE
JavaScript*

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. 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. Cordova App Structure
Native Shell
Browser Control
Your App

9. Installing Cordova
 Install node and npm
 npm install -g cordova

10. Creating a Cordova Project
 cordova create path namespace name
 Example: cordova create hello-world com.gettingStarted.helloWorld HelloWorld

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. Folder Structure
www
the app
platforms
platform
support libraries
and tools
plugins
support for
native features
config.xml
app parameters

13. Build iOS Platform
 cordova build ios
 Open Xcode and Run in the Simulator
 npm install -g ios-sim
 cordova emulate ios

14. Build Android Platform
 cordova build android
 Create at least one virtual device with android avd
 cordova emulate android

15. Build Windows Phone 8 Platform
 cordova build wp8
 Install Windows Phone 8 virtual devices
 Based on Hyper-V
 cordova emulate wp8

16. One for All and All for One
Cordova
Adobe
PhoneGap
Telerik
Platform
IBM
Worklight
Salesforce
Mobile SDK
???

17. Telerik’s Approach to Mobile Dev
imagesource:http://platform.telerik.com

18. The Telerik Platform
• AppPrototyperDesign
• AppBuilder, CordovaBuild
• Backend ServicesConnect
• Mobile TestingTest
• AppManagerDeploy and Manage
• AppFeedback, AnalyticsMeasure

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. 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. 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. 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. 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. 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. 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. Going Native
 Plugins provide support for native features
 Don’t have to be native!
 Anyone can write a plugin
 Plugin registry: http://plugins.cordova.io

27. Adding Plugins
 cordova plugin add plugin-identifier

28. Common Plugins
org.apache.cordova.console
org.apache.cordova.device
org.apache.cordova.notification

29. Summary

30. Questions?