Mobile Development with Visual Studio 2015 - Meetupfiles.meetup.com/18710153/Mobile Development with...
-
Upload
dinhkhuong -
Category
Documents
-
view
223 -
download
1
Transcript of Mobile Development with Visual Studio 2015 - Meetupfiles.meetup.com/18710153/Mobile Development with...
-
Mobile Development with
Visual Studio 2015
-
Bill AyersMCM/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 Stanley87
-
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 dont 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
Theres an ape for that
-
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Problem platform diversity
85%
12%2%0%1%
1 2 3 4 5
Source: IDC, Smartphone Market Share, Q2, 2014
-
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
App Ecosystem
-
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
More Mobile PlatformsPlatform Dev. Environment Language
Windows Phone Visual Studio C#/XAML orHTML5 App
Windows 8/RT Visual Studio C#/XAML orWinJS/HTML5
Android Eclipse Java
iOS XCode Objective-CSwift
Other (Blackberry?)
-
MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015
Native Web
Easy deployment
Native look and feel, performance
Web apps
Codegen
/cross-
compilers
Native vs. Web
-
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 Web
Easy deployment
Native look and feel, performance
Web apps
Codegen
/cross-
compilers
Native vs. Web
HTML5
Hybrid
-
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/cordova-vs.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-Tools-for-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
https://msdn.microsoft.com/en-us/library/dn858446.aspx
-
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
Business?
Game/Graphics
Native
Xamarin
Multiplatform?
Multiplatform? Low budget/fidelity
Mobile Framework e.g. Telerik AppBuilder
HTML5 Hybrid
(Cordova)
N
Y
N
Y
Y
N
Y
N
If only targeting Windows/Windows Phone and dont need plugins you can use JS Universal Apps
Y
N
-
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
Lets 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/training-
courses/learn-html5-with-javascript-css3-jumpstart-training
MVA course on Cross-Platform Dev with VS -http://www.microsoftvirtualacademy.com/training-courses/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]