source: appbrain, april 2015 native wrapper your javascript app
TRANSCRIPT
Polita PaulusPrincipal PM Manager
Getting Started with Cross-Platform Mobile Development with
Apache Cordova
2-706
• What is Cordova?• How do I build a Cordova app?• Targeting Windows 10 with
Cordova• Demo time!• Is Cordova for me?• Are you guys serious about
Cordova?• Learn more
Agenda
Apps dominate the mobile web
2013 20140%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
80% 86%
20% 14%
Time Spent in Apps vs. Browser
Apps WebSource:
Flurry Analytics
HTML is the most popular language for mobile apps.
Landscape
Source: Developer Economics State of the Developer Nation Q3 2014
HTML/JS/CSS rivals Objective-C as developers’ primary language, behind Java.
Landscape
Source: Developer Economics State of the Developer Nation Q3 2014
Enter Apache Cordova
6% of apps in stores, 14% of business category apps in stores
Source: AppBrain, April 2015
What is Cordova?Native Wrapper
<webview>Your JavaScript
App
• Open source framework• Hosted webview in iOS and
Android platforms, WWAHost in Windows platform
• Single, shared HTML, JavaScript, and CSS codebase deployed to all targets
What is Cordova?Native Wrapper
<webview>Your JavaScript
App
Cordova Plugin JS API
• Open source framework• Hosted webview in iOS and
Android platforms, WWAHost in Windows platform
• Single, shared HTML, JavaScript, and CSS codebase deployed to all targets
• Plugins provide a common JavaScript API to access device capabilities
What is Cordova?Native Wrapper
<webview>Your JavaScript
App
Cordova Plugin JS API
• Open source framework• Hosted webview in iOS and
Android platforms, WWAHost in Windows platform
• Single, shared HTML, JavaScript, and CSS codebase deployed to all targets
• Plugins provide a common JavaScript API to access device capabilities
How does Cordova work?
Cordova Project
• HTML, CSS, JS
• Assets• Platform
code• Plugin code• Configuratio
n
Visual Studio Project• HTML, CSS, JS, assets• Windows-specific runtime• Windows-specific plugin
code• Windows-specific
configurationXCode Project• HTML, CSS, JS, assets• iOS-specific runtime• iOS-specific plugin code• iOS-specific configuration
Android Project• HTML, CSS, JS, assets• Android-specific runtime• Android-specific plugin code• Android-specific
configuration
Create Cordov
a Project
Build Cordova Project
Native Windows App
Native iOS App
Native Android App
Cordova Windows 10 platform now available for prototyping!
Cordova Windows Platform Roadmap
‘windows8’ PlatformTargets Windows 8
WWA in local context
‘wp8’ PlatformSilverlight app with
webview
WP7.5 PlatformDeprecated
Windows 7 PlatformNot Maintained
‘windows’ PlatformTargets Windows 8.1 & Windows
Phone 8.1WWA in local
context
Also continues to allow targeting Windows 8
Desk
top
/ta
ble
tPh
on
eX
box/
Hu
b
Phase 0 Phase 1‘windows’ Platform
Targets Universal Windows PlatformWWA in remote (default) or local
mode (setting in config.xml)
Embedded Cordova also supported
Also continues to allow targeting Windows 8, 8.1, and WP8.1
Phase 2
Win10 RTMSummer 2014
‘wp8’ PlatformExists until Cordova community decides usage
is low
‘wp8’ PlatformSilverlight app with
webview
• Direct access to WinRT makes platform-specific code and plugins easier to write
• Supports hosted content model natively• On a web standards roadmap • Supports embedded Cordova apps• You can use the JavaScript libraries and patterns you
love. SafeHTML is no longer an issue in Windows 10• Working on support for the top 25 plugins• WinJS offers touch and keyboard friendly controls that
work on all mobile platforms. WinJS can be used in concert with Angular, Bootstrap, and other libraries.
Cordova Windows 10 platform
How do I build a Cordova app?
Visual Studio Tools for Apache Cordova
• Extension to Visual Studio 2013 and in-box in Visual Studio 2015• Create, code, build, debug, package, and publish Cordova applications for iOS, Android, and Windows from within Visual Studio
+
:)
• Visual Studio installs and uses the third party tools you need for multi-device development
• As you use Visual Studio, each time it opens, it runs dependency checks and keeps up-to-date a verified stack of open source tools from the community
All the stuff you need
Visual Studio Tools for Apache Cordova
Black Box
CSS | HTMLJavaScript | TypeScript
Microsoft OSS contributions to Cordova:
• Cordova Browser Platform + Browser
Support for Top 30 Plugins
• Ripple, v2
• Cordova Windows Platform
• Cordova Test Infrastructure (MEDIC)
• Cordova CLI (--list, --save, --restore, --
arch)
• Filling out the Plugin support matrix
• Hosted app support for File, Media
Capture, and Camera plugins
Ok, show me!
You need…• Windows 10 TP2• Visual Studio RC
The Windows 10 Cordova platform is on the Apache Cordova repo, along with documentation.
Refer to the Visual Studio blog for step-by-step setup and usage instructions.
How do I try it out?
Use Cordova if you want to…• Use your web skills & assets• Maintain one codebase• Use the JS libraries you love
You might be better off writing native apps if…• Performance is of utmost concern• You want different apps on different devices• You <3 Java, ObjC, or DirectX (If you love XAML/C#, consider Xamarin)• Your apps have deep integration with devices, such as the DirectX
rendering pipeline
Should I build a Cordova app or Native apps?
Yes!• Visual Studio has had support for Cordova for a year• VS2015’s Cordova investments include:
• Improved CLI and project system interop with 3rd party CLIs• Updated Cordova, plugins, emulators, and OSS components• An improved build path for iOS• Additional app services support for mobile services, auth, O365, and analytics
• Windows is committed to building and growing a first class Cordova platform
• Major Windows investment for Cordova included:• Hosted app content support with WinRT access• Embedded webview support with WinRT access• Security model redesign• Contribution of all Cordova code to the Apache Cordova OSS project
Are you guys really serious about Cordova?
Salesforce is building on the Windows 10 Cordova platform today
Online Resources:• Apache Cordova website• Visual Studio Cordova Site: http://aka.ms/vscordova• Visual Studio blog: http://blogs.msdn.com/visualstudio/• Windows 10 dev center: http://dev.windows.com• Learn Cordova YouTube videos: http://aka.ms/learncordova
Sessions at //build:• Wednesday 11:30am: 627 - Strategies for Developing Cross-Platform Applications with
Visual Studio 2015• Friday 12:30am: 756 - Getting Great Performance Out of Cordova Apps on iOS, Android
and Windows
Come find me at the Languages booth!
Learn More
© 2015 Microsoft Corporation. All rights reserved.