"So you want to build a native app?"

More Platforms.  More Problems.

"Is there an alternative?"

"Hello."

ionicframework.com

"I have heard hybrid apps are slow!"

Mobile devices have rapidly improved!

Web Technologies You

Already Know and Love

AngularJS

Plain ol' CSS

Or

Apache Cordova

Native Focused

Performance Obsessed

Supported Devices

iOS 6+

Android 4+

Win 10 Phone

Your App

But wait...

There is

No

Web SDK

Ionic Built-In UI Elements

i.e. Web SDK

Ionicons

Over 600 MIT licensed font-icons included 

ionicons.com

List Views

• Simple List

  • Data Only
     

• Complex List

  • Edit / Delete / Reorder
     

• Long List 

  • > 1000 items. 

Menu

Slide Box

Action Sheet

Popover

Modal

Pull to Refresh

Are people using it?

http://showcase.ionicframework.com/

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
   
• http://sworkit.com/

Sworkit

How to get started?

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

digitaldrummerj.me/Ionic-Setup-Windows/

digitaldrummerj.me/ionic-setup-osx/

​

What's building an app like?

Create ionic app

Create new project

ionic start myApp [blank/tabs/sideMenu]

Ionic Market

http://market.ionic.io

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

http://ngcordova.com

Ionic View

Share without

the

App Store

$ ionic start myApp tabs
$ cd myApp
$ ionic upload
$ ionic share [email address]

Ionic Creator

https://creator.ionic.io

Ionic IO

http://ionic.io

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

• digitaldrummerj.me
   

• thepolyglotdeveloper.com/
   

• mcgivery.com/100-ionic-framework-resources/
   

• joshmorony.com/category/ionic-tutorials/
   

• raymondcamden.com/

Blogs

http://lab.ionic.io/

Ionic Lab / UI

$ ionic serve --lab