Cross Platform Mobile Apps with Ionic

Justin James

@digitaldrummerj

"So you want to build a native app?"

2014

ionicframework.com

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?

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

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

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)

digitaldrummerj.me/Ionic-Setup-Windows/

 

digitaldrummerj.me/ionic-setup-osx/

​

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

ionicframework.com/docs/cli/icon-splashscreen.html

http://market.ionic.io/

http://ngcordova.com

https://creator.ionic.io

http://bitly.com/ionic-snippets

VS Code Snippets

200+ Snippets 

700 icons

Resources

Blogs

Time to Go

Create Your

Mobile App

thank you

http://bitly.com/ionic-overview-2016

 

@digitaldrummerj 

http://digitaldrummerj.me

Ionic Framework Overview 2016

By Justin James

Made with Slides.com

Ionic Framework Overview 2016

Overview for Ionic Framework - 2016 Version

  • 5,055

More from Justin James