Cross Platform Mobile Apps with Ionic
Justin James
@digitaldrummerj
"So you want to build a native app?"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2280037/metoocloud.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1066062/Woman-Pulling-Hair-out.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966119/android.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966120/windows.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2280106/crazy_road.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2280075/fast_forward.png)
2014
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1056628/photo-1416862291207-4ca732144d83.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966158/ionic-logo.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1093324/html.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1093326/css.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1093327/js.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966180/performance-icon.png)
Native Focused
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966185/native-icon.png)
Supported Devices
iOS 6+
Android 4+
Win Phone 10
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2294476/Apple-iPhone-6.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2294477/android-phone-color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2294481/windows-phone.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1739055/cordova_256.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966711/Keychain.png)
- Like Uber for commercial trucking
- https://www.keychainlogistics.com/
Keychain
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/967192/sworkit.png)
- 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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2286112/Feat_icon.png)
! 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
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2286112/Feat_icon.png)
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
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2286112/Feat_icon.png)
iOS Prerequisites
-
Mac only
-
XCode
-
iOS Simulator
-
Safari
-
Apple Developers Account ($99 per year)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2286112/Feat_icon.png)
Platform Setup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2286112/Feat_icon.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1065263/toolbox.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2296838/scissors-coloring-pages-scissors_half_open_icon_black_white_line_art_coloring_book_colouring-2555px.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1080073/Arabic_question_Mark.png)
Blogs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2310552/blog.png)
Time to Go
Create Your
Mobile App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/2286153/figure_with_megaphone_800_clr_2276.png)
thank you
Ionic Framework Overview 2016
By Justin James
Ionic Framework Overview 2016
Overview for Ionic Framework - 2016 Version
- 5,055