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

Justin James

  • Native vs Hybrid Apps

  • Intro Ionic

  • Example Applications

  • UI Components

  • Getting Started

  • Tooling

  • Demo


"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?"

  • Hybrid Apps: Html 5 that acts like native
  • Phonegap renamed to Cordova
  • Web wrapped in native layer
  • Direct access to native APIs
  • Familiar web dev environment
  • Develop a single code base (web platform)

"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

Native SDKs Are Great

  • Common UI

  • Views

  • Navigation and stack history

  • Transitions

  • Gestures

There's No Web SDK

  • It's the wild-west for hybrid apps

  • We need to bridge the gap between web and native

  • We need rich, native-style UI components and interactions

  • We need UI APIs, not just jQuery widgets


Web Technologies You

Already Know and Love

You'll feel right at home

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

  • Consistently Top 10 Trending JS Github repos

  • Ionic CLI averages 2,300 downloads per day 

  • 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>

Collection Repeat

<div class="list">
  <div collection-repeat="c in contacts" class="item">
    <h2>{{ }}</h2>
    <p>{{ }}</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 -->



<ion-nav-view animation="slide-left-right">
  <!-- content -->

How to get started?

But Not So Fast

$ npm install -g cordova ionic

Installing Ionic


  • git
  • ant
  • Java SDK 7
  • Android Studio
  • Android SDK (API 19)
  • Node / NPM
  • Cordova
  • Gulp
  • Google Chrome (for debugging)
  • Genymotion (optional)
  • Ruby (if using sass)
    • Sass Ruby Gem

Ionic on Windows Setup

Ionic on a Mac Setup

Instruction available at

Is there an easier way?

The Ionic Box

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

  • Currently, iOS only

$ ionic start myApp
$ cd myApp
$ ionic upload

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

Demo Time

May the demo gods be with us


Ionic Home Page:

Ionic Creator:

Twitter: @ionicframework

Ionic Framework Examples:


Nic Raboy's Blog:

Andrew McGivery:


My blog -

Please rate this talk!

Las Vegas Code Camp - Ionic Framework Introduction

By Justin James

Las Vegas Code Camp - Ionic Framework Introduction

Learn what the Ionic Framework is, what is provides, and how to start using it.

  • 3,126