Multi-Device Hybrid Apps What, Why, and When to Use Hybrid Development Option Ervin Loh ALM Program Manager loh-chuanho@k365labs.com

Presenter Ervin Loh (Visual Studio ALM MVP) Profile https://mvp.microsoft.com/en-us/PublicProfile/4025202 Profile Ervin Loh is currently the Application Lifecycle Management Program Manager at K365Labs Sdn Bhd. He is the user group lead of Application Lifecycle Management User Community, a charter of TechNation. He has also been presented with the Microsoft MVP award in the Visual Studio ALM competency for 8 consecutive years from 2009 through 2016. He owns more than 10 years experience in the IT industry where he obtained professional certifications from IREB, ISTQB, and Microsoft. He works on a variety of Application Lifecycle Management products. He is also active in the IT community space by contributing contents to Microsoft Malaysia's START.NET and Ultimate program workshops and talks in conferences, events and user groups such as TechEd, Softec, Tech Insights, MITPM, ALMUC, and MIND.

Reinventing the Web    1991 2000 2007 2009 2016

More people use JavaScript than use any other programming language Stack Overflow Developer Survey, March 2016

Most widely used technology for cross-platform Vision Mobile Analysis of Cross-Platform Development, July 2015

http://ionicframework.com/

Why Ionic Framework? Performance-Obsessed Apache Cordova Downstream Adapts to iOS, Android and Windows design patterns Built specifically for mobile devices where memory is constrained Apache Cordova Downstream Leverages a mature ecosystem of open source contributions from Microsoft, Adobe, IBM, et al. Enterprise-ready platforms, plugins and quality control Better with Visual Studio and Code Built with TypeScript, so you get the future of JavaScript, today. Templates, code snippets, cross-platform debugging and Intellisense for all-the-things.

How does Cordova work? Cordova Project Create Build HTML, CSS, TS, assets Configuration FX (Ionic, Angular) Platform code Plugin code Visual Studio Project HTML, CSS, JS, assets Windows-specific runtime Windows-specific plugin code Windows-specific configuration XCode Project iOS-specific runtime iOS-specific plugin code iOS-specific configuration Android Project Android-specific runtime Android-specific plugin code Android-specific configuration Universal Windows App Native iOS App Native Android App Create Build

Embedded Web Browser (Edge, Chrome, Webkit) Runtime Architecture Native Plugins and Features Apache Cordova Ionic Camera Bluetooth Video Health Kit Touch ID Streaming Security & Encryption Push Notifications Audio Code Push/ update Embedded Web Browser (Edge, Chrome, Webkit) Angular

So… what does that give us? “Code redundancy, be gone.” Shared business logic across all deployment targets. By abstracting through web components, Ionic adapts UI look-and-feel to your target platforms. Native APIs Cordova plugins deliver a common JS API to native code (e.g. Camera, Accelerometer, Address Book) 1,125 plugins in the public directory and lots more on GitHub. Offline Support All assets packaged with your app, Plugins like SQLCipher provide enterprise-class, encrypted local storage for user data.

Start building with Ionic! Install Ionic First, install Node.js. Then, install the latest Cordova and Ionic command-line tools. Follow the Android and iOS platform guides to install required platform dependencies. Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim. $ npm install -g cordova ionic

Start building with Ionic! (Continued) Start a project Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh. $ ionic start myApp tabs

Start building with Ionic! (Continued) Run it Use the Ionic tool to build, test, and run your apps (or use Cordova directly). Make sure to substitute iOS with Android to build for Android. Then, try Ionic View to share your apps with testers and clients or to easily test on new devices. $ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios

Ionic View Share your apps with the world Ionic View makes it easy to share your Ionic and Cordova apps with clients and testers around the world, all without ever going through the App Store.

DEMO Building Hybrid Apps with AngularJS and Ionic

Reinventing the Web Performance-obsessed Contextual design using the patterns of each platform Portable between development environments The future of JavaScript, today Tooling that unifies your workflow across deployment targets

What can I get today? Visual Studio 2015 Visual Studio Code Ionic 1.x templates Debug Android, Windows and iOS Maintained plugins for native APIs http://aka.ms/cordova-vs Visual Studio Code Intellisense Ionic 1.x code snippets Execute CLI commands from the editor http://aka.ms/cordova-code Visual Studio Team Services Continuous Integration & Deployment Pre-made build definitions for Cordova Cloud build for Android, Windows and iOS* http://aka.ms/cordova-vsts Code Push (beta) Instantly deploy app updates Partial rollout and A/B testing Azure-hosted cloud service. Setup in minutes http://aka.ms/code-push

Thank you!

Q&A

Microsoft Certification & Training Resources Resources for Developers TechNet Microsoft Learning Microsoft Resources for IT Professionals http://microsoft.com/technet Microsoft Certification & Training Resources www.microsoft.com/learning MSDN Microsoft Resources for Developers http://microsoft.com/msdn