Introduction to Visual Studio Tools for Apache Cordova (TACO) and the Ionic Framework for creating mobile applications for iOS and Android using HTML, CSS, and Javascript.

1. http://digitaldrummerj.me
Justin James
Developer / Speaker / Blogger / Instructor

2. http://digitaldrummerj.me
Faster than the PC boom10X
Faster than the Internet boom2X
Faster than the social networking explosion3X

3. http://digitaldrummerj.me
I wanted to build a mobile app
too!

5. http://digitaldrummerj.me
Traditional Development Strategy
Native platform technologies
XCODE Android Studio

6. http://digitaldrummerj.me

7. http://digitaldrummerj.me

8. http://digitaldrummerj.me

10. http://digitaldrummerj.me
Hybrid Development Strategy
Web platform technologies
HTML 5 CSS 3 JavaScript

11. http://digitaldrummerj.me
Middleware to Bundle Web Code into Mobile Application
with Access to Native Device
Apache Cordova

12. http://digitaldrummerj.me
Camera Bluetooth Video Health KitTouch ID Streaming
Security &
Encryption
Push
Notifications
Audio
Code Push/
update
Cordova Runtime Architecture

13. http://digitaldrummerj.me
The biggest mistake we’ve made as a
company is betting on HTML 5 over
native
Mark Zuckerberg - September, 2012
via venturebeat.com

14. http://digitaldrummerj.me
It’s not 2012 anymore

15. http://digitaldrummerj.me
Year Device Processor Ram
2007 iPhone 1 620 MHz 128 MB
2010 iPhone 4 1 GHZ 512 MB
2014 iPhone 6 1.4 GHZ dual-core 1 GB
2015 iPhone 6s 1.85 GHz dual-core 2 GB
2016 iPhone 7 2.3 GHz quad-core 2GB

16. http://digitaldrummerj.me
Windows/Linux/OSx
Java SDK 8
Android SDK
Gradle
Google Chrome
Google Android Emulator
Google Developers Account
Android
Setup

17. http://digitaldrummerj.me
Requires a MAC
Xcode
Xcode Command Line Tools
iOS Simulator
Safari
Apple Developers Accounts
iOS
Setup

18. http://digitaldrummerj.me
Visual Studio Tools for Apache Cordova (TACO)
Installs Platform Dependencies
iOS and Android development entirely in Visual Studio
Easily add native device capabilities
Powerful features such as templates, debugger, emulators, device deployment

19. http://digitaldrummerj.me

20. http://digitaldrummerj.me
Demo

21. http://digitaldrummerj.me

22. http://digitaldrummerj.me
Missing Cordova UI Framework
Built On Top of Angular
Performance Obsessed
Zero Code Redundancy
Why Ionic?

23. http://digitaldrummerj.me
Ionic
Components
Tabs Menus
Cards List
Headers Footers
Forms Buttons
Popups Spinners
Modals Slidebox
Gestures Keyboard
Customizations

24. http://digitaldrummerj.me
TypeScript wrapper for Cordova Plugins
Wraps callbacks in a Promise or an Observable
Provides a common interface for all plugins
Ensures native events trigger change detection
Ionic Native

25. http://digitaldrummerj.me
Camera Bluetooth Video Health KitTouch ID Streaming
Security &
Encryption
Push
Notifications
Audio
Code Push/
update
Ionic Runtime Architecture

26. http://digitaldrummerj.me
NPM Task Runner Extension
Visual Studio Marketplace Ionic 2 Templates
Ionic
App
Creation

27. http://digitaldrummerj.me
NPM Task Runner Extension
Create Project from Existing Code
Add Before Build Runner for Ionic Build
Ionic
App
Import

28. http://digitaldrummerj.me
Icon and Splash Screen Sizing
Ionic View
Creator
Marketplace
Ionic Platform
Ionic
Tooling

29. http://digitaldrummerj.me
Demo

30. http://digitaldrummerj.me
Ionic Resources
Web Site – ionicframework.com
Docs - ionicframework.com/docs
Meetups – blog.ionic.io/ionic-worldwide
Slack - ionicworldwide.herokuapp.com
Forums - forum.ionicframework.com
Ionic Native - ionicframework.com/docs/native/

31. http://digitaldrummerj.me
Ionic Blogs
mcgivery.com/15-ionic-framework-2-resources/
joshmorony.com/category/ionic-tutorials

32. http://digitaldrummerj.me
If you can make a great web
page you can make a great
app!

33. http://digitaldrummerj.me
Time to Go
Create Your
Mobile App

34. http://digitaldrummerj.me
Follow me @digitaldrummerj
http://digitaldrummerj.me/speaking/#ionic