Justin James
@digitaldrummerj
Use Your Existing Web Skills to Create Native Mobile Applications
"So you want to build a native app?"
More Platforms. More Problems.
Why are we still coding for multiple platforms?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966118/apple.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/digitaldrummerj/images/966121/firefoxos.png)
"Is there an alternative?"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966158/ionic-logo.png)
"Hello."
"I have heard hybrid apps are slow!"
Mobile devices have rapidly improved!
Year | Device | Processor | RAM |
---|---|---|---|
2007 | iPhone | 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 and Love
![](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)
AngularJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966669/angular-icon.png)
Plain ol' CSS
Or
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1554277/design-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966176/sass-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1739055/cordova_256.png)
Apache Cordova
Native Focused
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966185/native-icon.png)
Performance Obsessed
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966180/performance-icon.png)
Supported Devices
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966118/apple.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966119/android.png)
iOS 6+
Android 4+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966120/windows.png)
Win 10 Phone
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966669/angular-icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1739055/cordova_256.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1772346/ionic.twitter.sample-logo-4203547186-0_avatar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1772348/Android_robot.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966118/apple.png)
Your App
Ionic
Angular
Webview (Cordova)
Native SDK
But wait...
There is
No
Web SDK
Ionic Built-In UI Elements
i.e. Web SDK
Ionicons
Over 600 MIT licensed font-icons included
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966189/ionicons.png)
List Views
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966407/list-example.png)
-
Simple List
-
Data Only
-
-
Complex List
-
Edit / Delete / Reorder
-
-
Long List
-
> 1000 items.
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966435/tabs-example.png)
Menu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966440/sidemenu-example.png)
Slide Box
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966443/slidebox-example.png)
Action Sheet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966446/actionsheet-example.png)
Popover
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1554310/IonicPopover.png)
Modal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1554314/Modal_Screen1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1554315/Modal_Screen2.png)
Pull to Refresh
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/966452/pullrefresh-example.png)
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
- 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)
Ionic Setup Details
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 Market
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1772391/market.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
ngCordova
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1772376/ng-cordova.png)
Ionic View
Share without
the
App Store
$ ionic start myApp tabs
$ cd myApp
$ ionic upload
$ ionic share [email address]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1090701/2015-02-19_22_54_47-Ionic_View_on_the_App_Store_on_iTunes.png)
Ionic Creator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/digitaldrummerj/images/1093576/creator-preview.png)
Ionic IO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1772387/io.png)
Visual Studio Code
Ionic Snippets
html, css, javascript, and ionicons
over 200 snippets and 700 icons
http://bitly.com/ionic-snippets
-
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
Lets See What
Is So Cool
thank you
i'm Justin.
@digitaldrummerj - digitaldrummerj@gmail.com
http://digitaldrummerj.me
Ionic Lab / UI
$ ionic serve --lab
![](https://s3.amazonaws.com/media-p.slid.es/uploads/102613/images/1739045/lab-preview.png)
Ionic Framework Overview
By Justin James
Ionic Framework Overview
Presentation for an Ionic Framwork Overview. Learn what the Ionic Framework is, what is provides, and how to start using it.
- 3,349