Getting started with cross platform mobile apps using cordova
-
Upload
mostafa-elzoghbi -
Category
Technology
-
view
179 -
download
1
Transcript of Getting started with cross platform mobile apps using cordova
Getting Started with Cross-Platform Mobile Development using Cordova Mostafa Elzoghbi Sr. Technical Evangelist - MicrosoftFollow me on Twitter @MostafaElzoghbiwww.MostafaElzoghbi.com
Agenda• Apps dominates the mobile
web• Languages to build Mobile Apps• What is Cordova ?• How does Cordova work ?• Visual Studio Tools for Cordova• Cordova App vs Native Apps• Using CL Tools for Cordova• Cordova Apps Best Practices
Native Wrapper
<webview> or WWAhost
Your JavaScript App
Cordova Plugin JS API
Please interrupt me.Feel free to ask me questions
Way back machine: 2010
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
43%
64%
Time Spent in Apps vs. Browser
Apps Web Source: Flurry Analytics
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 Web Source: Flurry Analytics
HTML is the most popular language among mobile developers.
Source: Developer Economics State of the Developer Nation Q3 2014
HTML/Ja
vaSc
ript
Java
C/C++
Objec
tive-
C C#
Visual D
evelop
men
t Too
l
Java
/Coff
ee/T
ype
Scrip
tPH
P
Pyth
on
ActionS
cript
Ruby
Lua
42%
38%
26%24%
23%
17%15%
11%
7%
3% 3% 3%
The Languages Developers Know Best% of developers who consider them-
selves proficient by language
HTML trails closely behind Java and Objective-C as developers’ primary language.Source: Developer Economics State of the Developer Nation Q3 2014
Java
Objective-C
HTML/JavaScript
C#
C/C++
Visual Development Tool
Java/Coffee/Type Script
PHP
Python
ActionScript
Lua
Ruby
26%
17%
17%
14%
10%
8%
3%
1%
1%
1%
1%
1%
24%
20%
17%
13%
9%
7%
3%
1%
1%
1%
1%
1%
Primary Language Share% of developers using each as their
primary language
Full-time Professionals All Developer Segments
What is Cordova?• Open source framework• A web app in a native wrapper• Android + iOS use a webview• Windows uses WWAhost• Single, shared JavaScript
codebase deployed to all targets
• Plugins provide a common JavaScript API to access device capabilities
Native Wrapper
<webview>Your JavaScript App
Cordova Plugin JS API
Enter Apache Cordova
6% of apps in stores14% of apps in the business category
Source:App Brain, April 2015
How does Cordova work?
Cordova Project
• HTML, CSS, JS, assets
• Configuration• Platform code• Plugin code
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 Build
Native Windows App
Native iOS App
Native Android App
How do I get it? Extension to Visual Studio 2013 In-box with Visual Studio 2015
Community Edition (Recommended)
All the stuff you need 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 Ripple –
Phone Emulator
Easy to deploy & Debug
Integration with needed mobile toolset
DEMOVisual Studio Client Tools - Cordova
Use Cordova if you want to… Use your web skills & assets Maintain one codebase Use the JS libraries you love ( Jquery, AngularJS, Knockout, Ionic, …
etc)
You might be better off writing native apps if…
You’re want to build a consumer app in the top 3% You want different apps on different devices You ♥ Swift, Java, Objective-C or DirectX. If you love C#, consider Xamarin – ( Mobile Cross Platform
Development )
Should I build a Cordova app or Native apps?
Are you guys totally for serial about Cordova?
Yup.
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
• Cordova Browser Platform + Browser Support for Top 30 Plugins
• Ripple Emulator• 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• Performance tests
Contributions to Open Source
• Use Command Window or Terminal to create projects• Install Cordova is a single command line:
npm install –g cordova OR sudo npm install –g cordova• Create a project: directory workshop, project:
Workshop
cordova create workshop com.yourname.workshop Workshop Add or remove platforms:
cordova platforms add ios
Using CL for Cordova Apps
• Single Page Application (SPA) is a best practice to build fast, efficient mobile apps.
• Single HTML Page.• The “views” are injected & removed from the DOM.• UI is entirely created at the client-side with no
dependency on server.• All assets should be under www folder.
Cordova Apps Best Practices
DEMO AngularJS, Backbone, & WinJS
Download the tools (free) http://aka.ms/cordova
Documentation http://aka.ms/cordova-docs Videos http://aka.ms/cordova-videos Tutorials http://aka.ms/cordova-tutorials Samples http://aka.ms/cordova-samples Support forums
http://www.stackoverflow.com
Resources
© 2015 Microsoft Corporation. All rights reserved.
Thank You