Presentation used in Mobile Developer Summit 2016 at IISc, Bangalore.

1. Rapid mobile app
development using
Ionic framework
Swaminathan Vetri
Senior Engineer at Target | Microsoft MVP

2. About me
• Senior Engineer @ Target
• Microsoft MVP - Visual Studio & Development
technologies
• Windows/Web/Cross platform mobile developer
• Blogger, Speaker, Amateur Photographer, Gadget Freak
photographer, Gadget freak
swami@wannabeegeek.com
@svswaminathan
wannabeegeek.com

4. Objective
What is Ionic ?
Why Ionic?
What it offers ?
How it speeds up mobile app development ?
Demos, Demos and Demos …

5. IONIC IS THE BEAUTIFUL, OPEN SOURCE
SDK FOR DEVELOPING NATIVE AND
PROGRESSIVE WEB APPS

6. Why Ionic ?

7. Where does Ionic fit in ?
Your App
Ionic
Angular JS
Cordova
Native SDK

8. MORE THAN CODE.
IONIC IS AN ECOSYSTEM

9. Mobile app development with Ionic
Idea
Prototype
BuildDistribute
Monitoranalytics

10. What Ionic offers ?

11. Ionic Creator
Creator is a drag-&-drop prototyping tool for creating great apps
using Ionic, with just a click of the mouse.

12. LETS CREATE

13. Ionic CLI
 Install ionic from npm
npm install –g ionic cordova
 ionic start
 ionic serve
 Ionic build
 ionic emulate/run
 ionic resources
 ionic docs
 ionic upload
 ionic share
 and many more and more …

14. LETS COMMAND

15. Tooling
Ionic playground – can be used as a REPL for
learning Ionic
Ionic Lab – Desktop app to create ionic apps
Any text editor of your choice
Visual Studio 2015
VS Code
Sublime Text
Atom
Vim
Emacs etc.,

16. Ionic framework
JS components
CSS components
Ion icons
ngCordova/Ionic native
Ionic Cloud

17. JS Components
 Action Sheet
 Backdrop
 Popup
 Popover
 Modal
 Loading
 Spinner
 Slide box
 Tabs
 Side Menus
 Navigation
 Header
 Footer
 Form inputs
 ion-checkbox
 ion-radio
 ion-toggle
 Lists
 ion-list
 ion-item
 ion-delete-button
 ion-option-button
 ion-reorder-button
 collection-repeat
 ion-refresher
 ion-pane
 ion-content
and many more and more ….

18. CSS Components
 Header
 Footer
 Buttons
 List
 Cards
 Form inputs
 Toggle
 Range
 Select
 Tabs
 Grid
and many more and more ….

19. ngCordova/Ionic Native
 ngCordova gives simple AngularJS wrapper for most commonly used
cordova plugins to make app development efficient and faster
 Barcode scanner
 Camera
 TouchID
 Oauth
 iBeacon
 Social Sharing
 Push notifications
 Progress indicators
 and many more and more …
 Ionic Native is ngCordova’s ES6 and Typescript equivalent focused more
for ng2 and Ionic v2 apps

20. LETS BUILD

21. Ionic Cloud
Users - User authentication
Push - Push notifications
Deploy - Live app deployment
Package - Native app packaging
Other services in alpha/beta
Analytics - To capture the various telemetry about the app
Deep linking – To easily link to content hidden deep inside the
app
and many more and more ….

22. Ionic View
 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.
 Sign up at apps.ionic.io
 Run the below ionic CLI commands
ionic upload
ionic share <email>

23. LETS VIEW

24. Useful links
 Ionic creator - http://ionic.io/products/creator
 Ionic lab - http://lab.ionic.io/
 Ionic playground – http://play.ionic.io/
 Ionic framework– http://ionicframework.com/docs/
 Ionic cloud– http://docs.ionic.io/
 Ionic view – http://view.ionic.io/
 Ionic market place - https://market.ionic.io/
 Demo code - https://github.com/svswaminathan/ionic-
mods16-demo

25. Questions/Feedback
swami@wannabeegeek.com
@svswaminathan