1. Multi-Device Hybrid Apps What, Why, and When to Use Hybrid Development Option
Ervin Loh
ALM Program Manager

2. Presenter Ervin Loh (Visual Studio ALM MVP) Profile
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 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.

3. Reinventing the Web   
1991
2000
2007
2009
2016

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

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

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

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

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

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

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

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

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

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

15. DEMO Building Hybrid Apps with AngularJS and Ionic

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

17. 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
Visual Studio Code
Intellisense
Ionic 1.x code snippets
Execute CLI commands from the editor
Visual Studio Team Services
Continuous Integration & Deployment
Pre-made build definitions for Cordova
Cloud build for Android, Windows and iOS*
Code Push (beta)
Instantly deploy app updates
Partial rollout and A/B testing
Azure-hosted cloud service. Setup in minutes

18. Thank you!

19. Q&A

20. Microsoft Certification & Training Resources Resources for Developers
TechNet
Microsoft
Learning
Microsoft
Resources for IT Professionals
Microsoft Certification & Training Resources
MSDN
Microsoft
Resources for Developers