Transcript Mobile Development with Visual Studio 2015 WN

Mobile Development with
Visual Studio 2015
Bill Ayers
MCM/MCSM Charter SharePoint
• MCT, MCTS, MCITP, MCSD,
MCAD, MCSA, MCDBA,
Professional Scrum Master
(PSM I), etc.
–
–
–
–
–
Flow Simulation Ltd.
www.SPDoctor.net
[email protected]
@SPDoctor
Consultant specialising in
SharePoint and Office 365
Development and
Architecture for Collaboration
and Mobile Development
(Since Windows CE beta).
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Agenda:
•
•
•
•
•
•
•
•
•
Mobile Matters
Mobile Diversity
Native vs. Web
Development Models
Hybrid Apps
Frameworks
VS Tooling
Demos
Conclusions
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Mobile clients matter
Source: Morgan Stanley
87
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Mobile (i.e. phones and tablets)
• Browsing – normal
web site is good
solution (channels,
responsive design)
• Specific tasks – mobile
app is better model
• In general, mobile
users want apps – they
don’t want to use a
web browser for
Wikipedia, they want
a Wikipedia “app”
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Windows 10: C#/XAML vs.
WinJS/HTML5
•
•
•
•
•
•
•
C#/XAML WPF solutions are Windows/Windows
Phone only
WinJS/HTML5 framework is closely tied to the
platform
Universal Apps support for Windows and Windows
Phone - in Windows 10 to include XBox and IoT
Both are a great solution if you know you will only
need to support Windows Store and want native
look-and-feel
C#/XAML can also be used to build great Windows
Phone Apps
Use SharePoint CSOM or REST API
Projects Islandwood and Astoria for iOS and Android
developers
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
There’s an “ape” for that…
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Problem – platform diversity
12%
01%
%
2%
1
2
3
4
5
85%
Source: IDC, Smartphone Market Share, Q2, 2014
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
App Ecosystem
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
More Mobile Platforms
Platform
Dev. Environment
Language
Windows Phone
Visual Studio
C#/XAML or
HTML5 App
Windows 8/RT
Visual Studio
C#/XAML or
WinJS/HTML5
Android
Eclipse
Java
iOS
XCode
Objective-C
Swift
Other (Blackberry?)
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Native vs. Web
Native
Native look
and feel,
performance
Codegen
/crosscompilers
Web
apps
Web
Easy
deployment
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Xamarin
•
•
•
•
•
•
•
Re-use C# skills
Benefits of native
Built on Mono implementation of .NET
.NET core is now open source
Still need to learn the native API
Upcoming: Xamarin Forms
Can run in Visual Studio
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Native vs. Web
Native
Native look
and feel,
performance
Codegen
/crosscompilers
HTML5
Hybrid
Web
apps
Web
Easy
deployment
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Hybrid Apps on Mobile Devices
• Embeddable browser control
• Uses browser rendering engine without UI Chrome
• Web pages can call into platform and vice versa:
ControlName.InvokeScript(“fn”,”Args);
window.external.notify(“string to pass”);
• Use local storage API for offline capabilities, load
pages from local folder on device or embed
• Multiple mobile platforms (PhoneGap/Cordova)
• Large number of apps in app stores are actually
hybrid HTML5 apps.
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Reasons to use HTML5 Hybrid Apps
Code re-use across platforms – one code-base, skill-set
Prototype and build quickly (low cost)
Use widely available web development skills
Large JS community and frameworks
HTML5 gives limited access to device functions (hence
PhoneGap)
• Great option for LOB apps
• Access to mobile marketplace like native
• Users perceive it as an “App”
•
•
•
•
•
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Reasons not to use HTML5 Hybrid
Apps
• Storage is limited (25Mb)
• JavaScript performance cannot
match native
• Difficult to get perfect fidelity with
native UI “feel”
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Visual Studio Tools for Apache Cordova
•
•
•
•
•
An extension allows you to use
Visual Studio to:
Acquire all required 3rd party
dependencies
Configure everything to allow you
to build/deploy for the Android,
iOS, and Windows platforms
Debug apps running on Android
and Windows Store
Easily add native device
capabilities
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Visual Studio Tools for Apache Cordova
• The template formerly known as Multi-device Hybrid Apps
• Add through Tools -> Extensions -> Online search for
Cordova
• Cordova/PhoneGap
• An alternative for Windows is the Universal App template
• Now in Visual Studio 2015 RTM – Update 1 available
• Can be used with Shared Project template by using the
Shared Reference Project Manager (in-built for VS2015)
• http://www.visualstudio.com/en-us/explore/cordovavs.aspx
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
VS Cordova Hints and Tips
•
•
•
•
•
•
•
Some platforms need an Internet connection for build (version check)
Build problems? Go to TOOLS -> Options -> Projects and Solutions ->Build
and Run -> MSBuild project build output verbosity -> Diagnostic
Even if you use Cordova CLI (command line interface) the Tools for
Cordova add-in are a quick way of getting environment set up
WP8.1 not supported but can use Cordova CLI: cordova add platform
windows
WP8.1 uses JS Universal model, not C# so WP plugins may not work
Article – some problems with CTP3 and solutions:
http://spdoctor.net/Pages/article.aspx?name=Using-Visual-Studio-Toolsfor-Apache-Cordova
Generate icons and other assets automatically – save hours of work:
http://spdoctor.net/Pages/generator.aspx
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
JavaScript mobile libraries and frameworks*
•
•
•
•
jQuery Mobile (open source)
Kendo UI Mobile (commercial, recently open-sourced)
WinJS (recently open-sourced)
Ionic (+ angular.js)
* Other frameworks are available  - these are specifically designed for mobile
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Other Frameworks…
•
•
•
•
•
•
Knockout.js
Backbone.js
Angular.js (+ionic)
Ember.js
React.js
Vanilla.js 
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Demo: Frameworkless App
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Demo: Using a Framework
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Building HTML5 apps for different platforms
• Web – “native”
• SharePoint – Visual Studio
• Windows 8 – Visual Studio (“native”
HTML5 apps)
• Windows Phone 8 – Visual Studio
• Android – Visual Studio(!)
• iOS – Visual Studio with build server
• iPhone, Blackberry…
– PhoneGap Build (Adobe)
– App Builder (Telerik)
– Others..
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Mac Build Server
• Buy a Mac and configure as build server
• Buy a Mac Mini and hide under desk
• Use a cloud Mac rental service (e.g.
MacInCloud.com)
• Use a cloud build service
Article: “Build and Simulate iOS in the Cloud”
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Demo: iOS Build Using MacInCloud
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Demo: Create image assets
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Mobile Development Decision Chart
N
YGame/Graphics
N
Xamarin
Y
N
Multiplatform?
Native
Business?
Mobile Framework
e.g. Telerik AppBuilder
Y
Y
N
Multiplatform?
Y
Low
budget/fidelity
N
If only targeting Windows/Windows Phone and don’t need plugins you can use JS Universal Apps
HTML5 Hybrid
(Cordova)
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Health Alert: Chasing Unicorns can
seriously damage your wealth
You can waste a huge
amount of time and
resources trying to come
up with a universal
solution to cross-platform
development
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Conclusions
• Let’s re-use our JavaScript and REST API skills
• HTML5 Hybrid Apps not perfect but allow skills
and code re-use across all platforms
• A good choice for line of business apps
• With a little care we can get close to native
app “feel”
• Mobile development is going to be key to
delivering business solutions in an increasingly
mobile world
• Changing fast – need to be agile
• Spread the word – mobile first 
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Resources:
• 70-480 - http://www.microsoftvirtualacademy.com/trainingcourses/learn-html5-with-javascript-css3-jumpstart-training
• MVA course on Cross-Platform Dev with VS http://www.microsoftvirtualacademy.com/trainingcourses/cross-platform-development-with-visual-studio
• Windows Phone Dev Center - https://dev.windowsphone.com/
• https://cordova.apache.org/
• http://jquerymobile.com/
• Telerik.com/appbuilder
• Xamarin.com
• Github.com/officedev
• //build/ and Ignite sessions at Channel9.msdn.com
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Contact me:
• Blog: www.spdoctor.net
• Twitter: @spdoctor
• Sharepoint.stackexchange.com
(moderator)
• Email: [email protected]