Mobile Development with Visual Studio 2015 - Meetupfiles.meetup.com/18710153/Mobile Development with Visual Studio... · MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015 Reasons to use

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 clients matter

Source: Morgan Stanley87


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


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


Theres an ape for that


Problem platform diversity

85%

12%2%0%1%

1 2 3 4 5

Source: IDC, Smartphone Market Share, Q2, 2014


App Ecosystem


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?)


Native Web

Easy deployment

Native look and feel, performance

Web apps

Codegen

/cross-

compilers

Native vs. Web


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


Native Web

Easy deployment

Native look and feel, performance

Web apps

Codegen

/cross-

compilers

Native vs. Web

HTML5

Hybrid


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.


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


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


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


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


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


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


Other Frameworks

Knockout.js

Backbone.js

Angular.js (+ionic)

Ember.js

React.js

Vanilla.js


Demo: Frameworkless App


Demo: Using a Framework


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..


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


Demo: iOS Build Using MacInCloud


Demo: Create image assets


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


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


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


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


Contact me:

Blog: www.spdoctor.net

Twitter: @spdoctor

Sharepoint.stackexchange.com

(moderator)

Email: [email protected]

Documents

Mobile Development with Visual Studio 2015 - Meetupfiles.meetup.com/18710153/Mobile Development with Visual Studio... · MOBILE DEVELOPMENT WITH VISUAL STUDIO 2015 Reasons to use