This document provides an overview of using the Ionic framework for rapid mobile app development. Ionic is an open source SDK that allows developers to use web technologies like HTML, CSS, and JavaScript to develop hybrid mobile apps. It provides UI components, tools, and services that simplify development and enable building native-looking apps that can be deployed to iOS and Android. The document demonstrates how Ionic speeds up development by abstracting away native mobile complexities and providing pre-built mobile optimized UI elements and plugins for device capabilities.

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