Cross Platform Mobile Apps with Ionic
Justin James
@digitaldrummerj
"So you want to build a native app?"






2014


Hybrid Apps!
-
HTML5 that acts like native
-
Direct access to native APIs
-
Familiar web dev environment
-
A single code base
"I have heard hybrid apps are slow!"
“It's not 2007 anymore”
Mobile devices have rapidly improved!
Year | Device | Processor | Ram |
2007 | iPhone 1 | 620 MHz | 128 MB |
Mobile devices have rapidly improved!
Year | Device | Processor | Ram |
2007 | iPhone 1 | 620 MHz | 128 MB |
2010 | iPhone 4 | 1 GHz |
512 MB |
Mobile devices have rapidly improved!
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 |
Mobile devices have rapidly improved!
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.8 GHz dual-core | 2 GB |
WEB TECHNOLOGIES YOU ALREADY
KNOW & LOVE
(You'll feel right at home)



SUPERPOWERED BY
ANGULAR
Extends the HTML vocabulary
Proven for large-scale app development
UI Components using Directives & Services
Theming
CSS generated from the Sass preprocessor
Quickly give your app its own look and feel
CSS designed to be easily overridden
Performance Obsessed

Native Focused

Supported Devices
iOS 6+
Android 4+
Win Phone 10




Apache Cordova
How it all comes together
- Your App
- Ionic
- Angular
- WebView (Cordova)
- Native App
Are people using it?
Ionic's Adoption
-
20,000+ Github Stars
-
1,500,000+ Ionic apps started from the CLI
- All this in less than 3 years

- Like Uber for commercial trucking
- https://www.keychainlogistics.com/
Keychain

- Fitness app
- Downloaded over 3 million times
- Featured in multiple times both the Apple and Google Stores
- 1.5 million in funding on Shark Tank
- http://sworkit.com/
Sworkit
How to get started?

! But Not So Fast
$ npm install -g gulp bower cordova ionic
Installing Ionic
-
Install NodeJs - http://nodejs.org
-
Install Git - https://msysgit.github.io/
-
Globally install npm packages:
-
cordova
-
ionic
-
gulp
-
bower
-

Android Prerequisites
-
Windows / Linux / OSx
-
Java SDK 7
-
Android Studio
-
Android SDK
-
Google Chrome
-
Google Developers Account ($25 lifetime)
-
Optional:
-
Genymotion
-
Visual Studio 2015 Cordova Tools
-

iOS Prerequisites
-
Mac only
-
XCode
-
iOS Simulator
-
Safari
-
Apple Developers Account ($99 per year)

Platform Setup

What's building an app like?
Create ionic app
Create new project
ionic start myApp [blank/tabs/sideMenu]
ionic serve --lab
ionic platform add [android/ios]
ionic [run/emulate] [android/ios]
Test on web browser
Run test on device/emulator
Add mobile platform (Android or iOS)
Ionic Tooling

Automatically generate icons and splash screens
Creates size needed for each platform
Icons and Splash Screens
$ ionic resources
$ ionic resources --icon
$ ionic resources --splash
VS Code Snippets

200+ Snippets
700 icons
-
Web Site - ionicframework.com
-
Docs - ionicframework.com/docs/
-
Ionic Meetups - blog.ionic.io/ionic-worldwide
-
Ionic Slack - ionicworldwide.herokuapp.com
-
Ionic Forums - blog.ionic.io/ionic-worldwide
Resources

Blogs

Time to Go
Create Your
Mobile App

thank you
Ionic Framework Overview 2016
By Justin James
Ionic Framework Overview 2016
Overview for Ionic Framework - 2016 Version
- 5,053