The beautiful, open source framework for developing hybrid mobile apps with HTML 5

Justin James

"So you want to build a native app?"

More Platforms.  More Problems.

Why are we still coding for multiple platforms?

The Downsides of Native

  • Proficiency in each platform required

  • Entirely separate code bases

  • Timely & expensive development

  • Diminishing returns

"Is there an alternative?"

Web code 

wrapped in native layer

with direct access

to device APIs

"Hybrid apps are slow!"

"The Times They Are a-Changin"

Mobile devices have rapidly improved!

Year Device Processor RAM
2007 iPhone 620 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2015 iPhone 6 1.4 GHz dual-core 1 GB

There is





Web Technologies You

Already Know and Love

Supported Devices

iOS 6+

Android 4+

Are people using it?

Ionic's Adoption

  • over 13, 000+ stars on GitHub

  • Top 50 most popular open source projects

  • 400,000+ apps have been created

  • Released Alpha: November 2013

  • Released Beta: March 2014

  • Release Candidate: Winter 2014

  • The personal stylist in your pocket
  • Pulls in over 2 million products from 100 big name fashion brands
  • Next generation fashion mall for whatever style you require.


  • Offical app of the ng-europe conference.
  • Used to get the schedule, speakers, venue address, news, chat and more



  • Fitness app that guides anyone thru 5-60 minute circuits 
  • Downloaded over 3 million times
  • Been featured in multiple Health and Fitness lists within both the App Store and Google Play


Ionic Built-In UI Elements


Over 600 MIT licensed font-icons included


<div class="list">

  <div class="item item-divider">
    Candy Bars

  <a class="item" href="#">

  <a class="item" href="#">
    Kit Kat



Complex List

         ng-repeat="item in items" 
    <img ng-src="{{ item.pic }}">
    <h2>{{ }}</h2>
    <p>{{ item.quote }}</p>


<ion-tabs class="tabs-icon-only">
  <ion-tab title="Home" 

  <ion-tab title="Feedback"

  <ion-tab title="Messages" 

Side Menu


  <ion-side-menu side="left">
    <header class="bar bar-header bar-positive">
      <div class="title">Projects</div>
    <ion-content has-header="true">
      <div class="list">
        <a href="#/work" class="item">Work</a>
        <a href="#/home" class="item">Home</a>


Slide Box

    Slide 1
    Slide 2
    Slide 3

Action Sheet

  titleText: 'Modify your album',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;

Pull to Refresh

<ion-content on-refresh="refreshData()">
  <!-- content -->



  <!-- content -->

How to get started?

But Not So Fast

Install NodeJs
Install Git

$npm install -g cordova ionic gulp

Installing Ionic


  • ant
  • Java SDK 7
  • Android Studio
  • Android SDK (API 19)
  • XCode (Mac Required)
  • Google Chrome (for debugging)
  • Genymotion

Ionic on Windows Setup

Ionic on a Mac Setup

Instruction available at

What's building an app like?

Create ionic app

Create new project



Test on web browser



Add mobile platform (Android or iOS)



Run test on device/emulator

ionic start myApp [blank/tabs/sideMenu]
ionic serve
ionic platform add [android/ios]
ionic [run/emulate] [ android/ios]

Additional Tooling from Ionic

Ionic View

  • View/Share/Test Ionic apps across devices

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

Ionic Creator

Ionic and Crosswalk

  • Specify version of Chrome to run your Cordova App.

  • Up to 10x performance increase

  • App will grow ~10-15 mb in size.

$ionic start my_app
$cd my_app
$ionic browser add crosswalk
$ionic run android

Side by Side

Android and iOS Phone


Supports Live Reload 

Ionic Lab

$ ionic serve --lab

Lab Time

Labs - What are we doing?

  • Create Project

  • Master/Detail

  • Pull to Refresh

  • Loading Spinner

  • Get Data from Remote Api

  • Styling 

  • Changing Icons Based on OS

Labs - What are we doing?

  • Creating Icon and Splash Screens

  • Deploy to Ionic View

  • Injecting JS and CSS Files with Gulp

  • How to Handle CORS Errors

Lab Manual






Las Vegas Code Camp

Codepalousa - Ionic Framework Overview

By Justin James

Codepalousa - Ionic Framework Overview

Presentation for the Codepalousa Workshop in the Ionic Framwork. Learn what the Ionic Framework is, what is provides, and how to start using it.

  • 2,884