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 BillA@flosim.com @SPDoctor Consultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development (Since Windows CE beta).
Agenda: Mobile Matters Mobile Diversity Native vs. Web Development Models Hybrid Apps Frameworks VS Tooling Demos Conclusions
Mobile clients matter 87 Source: Morgan Stanley
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
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
There s an ape for that
Problem platform diversity 12% 2%0% 1 2 3 4 5 85% Source: IDC, Smartphone Market Share, Q2, 2014
App Ecosystem
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?)
Native vs. Web Native Codegen /crosscompilers Web apps Web Native look and feel, performance Easy deployment
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 vs. Web Native Codegen /crosscompilers HTML5 Hybrid Web apps Web Native look and feel, performance Easy deployment
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 3 rd 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/cordovavs.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-toolsfor-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
Demo: ios Build Using MacInCloud
Demo: Create image assets
Mobile Development Decision Chart Y Game/Graphics N Y Xamarin N Multiplatform? N Native Business? Mobile Framework e.g. Telerik AppBuilder Y Multiplatform? N Y Low budget/fidelity Y N HTML5 Hybrid (Cordova) If only targeting Windows/Windows Phone and don t need plugins you can use JS Universal Apps
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 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
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
Contact me: Blog: www.spdoctor.net Twitter: @spdoctor Sharepoint.stackexchange.com (moderator) Email: BillA@flosim.com