An overview of the new features in Visual Studio 2015 for developing cross platform apps with Cordova.

1. Developing amazing #cross-platform #apps using the new #Cordova
tools available in #Visual-Studio-2015
VISUAL STUDIO TOOLS
FOR CORDOVA
Andrea Tino (Software Development Engineer)

2. Win output
myapp.appx
.NET
Android output
myapp.apk
iOS output
myapp.ipa
index.html
style.css
script.js
Source code
VISUAL
STUDIO 2015
CORDOVA
JAVA
objC
swift
Cordova and its history in a few lines
PhoneGap’s first
appearance during
iPhoneDevCamp in
San Francisco,
developed by Nitobi
20
09
PhoneGap gets acquired
by Adobe and code is
acquired also by the
Apache Foundation
20
11
Visual Studio releases
version 2015 with
tools embedding
Cordova
20
15

3. Why should you use it?
Cordova comes with its own toolset which one can
use. So Visual Studio is not really needed. What are the
benefits of using Visual Studio then?
UPGRADE
Change Cordova version
in project configuration.
PLUGIN MANAGEMENT
Via project configuration, easy
add/remove/upgrade plugins. In plain Cordova
the upgrade story is not 100% smooth.
CUSTOM FIXES
Need to change plugins or other Cordova
classes? No duplication in platforms folder,
platforms are generated upon cleanup.
MSBUILD
Building process fully
driven by Msbuild

4. STORE
STORE
STORE
The big picture
Building and debugging is easier, without using platform
specific environments and tools, thus more “central”
development experience

5. WINDOWS
sdk
ANDROID
sdk
IOS
sdk
WINDOWS
os
MAC OS
os
The build
architecture
Android is the only SDK available for
both Mac and Windows.
Visual Studio builds Windows and
Android on the Windows machine
where it is running, but needs a remote
Mac machine for building iOS!

6. Prepare
Running before
and after prepare
hooks
Configuration
The configuration
file config.xml is
processed
Platforms
Adding each
supported platform
in the project
Plugins
Adding plugins to all
platforms in the
project
Add platform
Hooks before and
after adding
platforms
Add plugins
Hooks before and
after adding
plugins
Build
Each platform, via
its SDK, is built to
generate the appfile
The build process
Visual Studio will generate platforms and plugins everytime a build is issued. Appfiles are then
generated and moved into the bin folder.

7. Config file
Enclose plat-
form-specific set-
tings in platform tag
Might need
to replace
values, can’t
do in config
file
<platform
name="android">
<preference
name="Fullscreen"
value="true" />
</platform>
Config plugin
Use a special custom plugin
to manipulate manifest’s
XML in plugin.xml file
Cannot change single
attribute’s value in
manifest file. Can only
replace nodes and all
descendants
<platform name="ios">
<config-file
target="app.plist" parent="/">
...
</config-file>
</platform>
Hook
Crete a hook to
change the manifest
file at proper time
Must write
actual Javas-
cript code
part of the
build process
module.exports =
function(context)
{
// context: env vars
...
};
Platform specific settings
In order to have a platform specific setting land in the proper manifest file, it is
possible to use a few approaches.

8. The End
THANK YOU
Twitter: @_atino
E-Mail: andrea.tino@microsoft.com
This work is distributed under the Creative
Commons
Attribution-NonCommercial-ShareAlike 4.0
International license.
Cover: Space mess This work includes artworks
designed by Graphic River.
This work includes artworks
designed by Freepik.com.
May 2016
v1.0
Keywords
#visual-studio #cordova
#microsoft #cross-platform
#app #android #ios
#windows-10
#windows-phone #tools
Presentation info
Duration: 30 mins.
Background: Technical
Audience: Developers
This work includes artworks
designed by Freestock.com.
Andrea Tino
Software Development Engineer