Mobile Development with Visual Studio 2015 Bill Ayers MCMMCSM Charter SharePoint MCT MCTS MCITP MCSD MCAD MCSA MCDBA Professional Scrum Master PSM I etc Flow Simulation Ltd wwwSPDoctornet ID: 773573
Download Presentation The PPT/PDF document "Mobile Development with Visual Studio 20..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
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.netBillA@flosim.com@SPDoctorConsultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development (Since Windows CE beta).
Agenda: Mobile Matters Mobile DiversityNative vs. WebDevelopment ModelsHybrid AppsFrameworksVS ToolingDemosConclusions
Mobile clients matter Source: Morgan Stanley 87
Mobile (i.e. phones and tablets) Browsing – normal web site is good solution (channels, responsive design) Specific tasks – mobile app is better modelIn 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 onlyWinJS/HTML5 framework is closely tied to the platformUniversal Apps support for Windows and Windows Phone - in Windows 10 to include XBox and IoTBoth are a great solution if you know you will only need to support Windows Store and want native look-and-feelC#/XAML can also be used to build great Windows Phone AppsUse SharePoint CSOM or REST APIProjects Islandwood and Astoria for iOS and Android developers
There’s an “ape” for that…
Problem – platform diversity Source: IDC, Smartphone Market Share, Q2, 2014
App Ecosystem
More Mobile Platforms Platform Dev. EnvironmentLanguageWindows PhoneVisual StudioC#/XAML orHTML5 AppWindows 8/RT Visual Studio C#/XAML or WinJS /HTML5 Android Eclipse Java iOS XCode Objective-C Swift 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 nativeBuilt on Mono implementation of .NET.NET core is now open sourceStill need to learn the native APIUpcoming: Xamarin FormsCan 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 ChromeWeb 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 embedMultiple 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 skillsLarge JS community and frameworksHTML5 gives limited access to device functions (hence PhoneGap)Great option for LOB appsAccess to mobile marketplace like nativeUsers perceive it as an “App”
Reasons not to use HTML5 Hybrid AppsStorage is limited (25Mb)JavaScript performance cannot match nativeDifficult 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 dependenciesConfigure everything to allow you to build/deploy for the Android, iOS, and Windows platformsDebug apps running on Android and Windows StoreEasily add native device capabilities
Visual Studio Tools for Apache Cordova The template formerly known as Multi-device Hybrid AppsAdd through Tools -> Extensions -> Online search for CordovaCordova/PhoneGapAn alternative for Windows is the Universal App templateNow in Visual Studio 2015 RTM – Update 1 availableCan 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 -> DiagnosticEven if you use Cordova CLI (command line interface) the Tools for Cordova add-in are a quick way of getting environment set upWP8.1 not supported but can use Cordova CLI: cordova add platform windowsWP8.1 uses JS Universal model, not C# so WP plugins may not workArticle – some problems with CTP3 and solutions: http://spdoctor.net/Pages/article.aspx?name=Using-Visual-Studio-Tools-for-Apache-CordovaGenerate 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.jsAngular.js (+ionic)Ember.jsReact.jsVanilla.js
Demo: Frameworkless App
Demo: Using a Framework
Building HTML5 apps for different platforms Web – “native”SharePoint – Visual StudioWindows 8 – Visual Studio (“native” HTML5 apps)Windows Phone 8 – Visual StudioAndroid – Visual Studio(!)iOS – Visual Studio with build serveriPhone, 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 deskUse a cloud Mac rental service (e.g. MacInCloud.com)Use a cloud build serviceArticle: “Build and Simulate iOS in the Cloud”
Demo: iOS Build Using MacInCloud
Demo: Create image assets
Mobile Development Decision Chart N YNY Y N Y N If only targeting Windows/Windows Phone and don’t 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 Let’s re-use our JavaScript and REST API skills HTML5 Hybrid Apps not perfect but allow skills and code re-use across all platformsA good choice for line of business appsWith 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 worldChanging fast – need to be agileSpread 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-studioWindows Phone Dev Center - https://dev.windowsphone.com/https://cordova.apache.org/http://jquerymobile.com/Telerik.com/appbuilderXamarin.comGithub.com/officedev//build/ and Ignite sessions at Channel9.msdn.com
Contact me: Blog: www.spdoctor.net Twitter: @spdoctorSharepoint.stackexchange.com (moderator)Email: BillA@flosim.com