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

ionicframework.com

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

Hybrid Apps!

  • HTML 5 that acts like native
     
  • Web wrapper in native layer
     
  • Direct access to native APIs
     
  • Cordova / Phonegap
     
  • Familiar web development environment
     
  • Focus on performance
  • Combines Apache Cordova
     
  • with AngularJS
     
  • along with lots of custom Javascript, Html, and CSS3
     
  • to create mobile apps
     
  • that perform like native ones
     
  • and look beautiful
     
  • MIT Licensed (free even commercially)

Hello Ionic

 AngularJS

  • Awesome MVC Framework

  • Developed  by Google and the community

  • Features:

    • Live data binding

    • Two-way binding

    • Attaching code-behind to DOM element

    • Directives

    • Repeating DOM elements

    • Templates

    • Dependency Injection

CSS Generated by Sass

  • Quickly give your app its own look and feel
  • CSS Designed to be easily overridden
  • Either override ionic.css or use Sass Preprocessor
  • Stand-alone CSS (independent of Ionic's Javascript)

Performance Obsessed

  • Hardware accelerated animations
  • Minimal DOM Manipulation
  • Zero jQuery (you could still include it if you want)

Native Focused

  • Modeled off of native SDKs
  • Built to work with Cordova/Phonegap

Supported Devices

iOS 6+

Android 4+

Windows Phone 
(planned)

FireFox OS 
(planned)

Cordova

  • Uses web technologies to build mobile apps
     
  • The apps have access to device hardware from Javascript
     
  • The web files are hosted in the app
     
  • Apps are portable to other systems with little to no changes
     
  • Apps are packaged using platform SDKs
     
  • Cordova does not include a UI framework
     
  • http://plugins.cordova.io/

ngCordova

  • collection of 63+ AngularJS extensions
     
  • built on top of the Cordova API
     
  • making it easy to build, test, and deploy
     
  • Cordova mobile apps with AngularJS.
     
  • http://ngcordova.com/

ngCordova Plugins

  • Battery Status
     
  • Bar Code Scanner
     
  • Calendar
     
  • Camera
     
  • Clipboard
     
  • Contacts
  • Device Motion
     
  • Flashlight
     
  • Geo Location
     
  • SMS
     
  • Social Sharing
     
  • TouchID

Plus more...ngcordova.com/docs/plugins/

Ionicons

Over 600 MIT licensed font-icons included 

ionicons.com

Are people using it?

http://showcase.ionicframework.com/

2014 By the Numbers

  • Ionic started at the end of 2013
  • top 50 most popular open source projects
  • over 12, 000 stars on GitHub
  • over 320, 000 apps have been created
  • over half a million unique visits to Ionic website
  • over 45, 000 forum post
  • integrated into tools such as WebStorm, JBoss, Heroku
  • templates from Firebase
  • pluralsight course was created by Steve Michelotti
  • #ionic IRC room  has ~100 users at any given time
  • several books being written such Ionic in Action from Manning Publishing
  • 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.
     
  • http://mallzee.com/

Mallzee

Songhop

Keychain

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

ngEurope 

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

Sworkit

What should I know?

Modern Web Skills

  • HTML 5 / CSS 3 / Javascript
     
  • Comfortable with command line tools
     
  • AngularJS
     
  • Sass (optional)

Ionic Built-In UI Elements

List

<div class="list">

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

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

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

  ...

</div>

Complex List

<ion-list>
  <ion-item
         ng-repeat="item in items" 
         class="item-thumbnail-left">
    <img ng-src="{{ item.pic }}">
    <h2>{{ item.name }}</h2>
    <p>{{ item.quote }}</p>
  </ion-item>
</ion-list>
  • AngularJS Directive
  • Buttons exposed by swiping
  • Reorder
  • Delete

Collection Repeat

<div class="list">
  <div collection-repeat="c in contacts" class="item">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>
  • Similar to Angular's ng-repeat
  • Scroll through thousands of items
  • Only renders the viewable items
  • Smooth jank-free scrolling
  • Low memory footprint

Tabs

<ion-tabs class="tabs-icon-only">
  <ion-tab title="Home" 
        icon="ion-star">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Feedback"
         icon="ion-thumbsdown">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Messages" 
        icon="ion-chatbubble-working">
    <ion-nav-view></ion-nav-view>
  </ion-tab>
</ion-tabs>
  • Nested views
  • Each tab has its own nav history

Side Menu

<ion-side-menus>

  <ion-side-menu-content>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

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

</ion-side-menus>

Slide Box

<ion-slide-box 
    on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

Action Sheet

$ionicActionSheet.show({
  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()">
  <ion-refresher></ion-refresher>
  <!-- content -->
</ion-content>

Navigation

<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view animation="slide-left-right">
  <!-- content -->
</ion-nav-view>
  • Shows back button when possible
  • Each tab has its own history stack
  • Works with Android's back button

How to get started?

  • Most demos show this command and move on. 
     
  • However, this assumes that you have lots of other software already installed and configured correctly.
     
  • For a newbie, that has not used Node.js or done Android/iOS development, the setup can be daunting.
     
  • Next couple of slides give you links to blog post I wrote with all of the steps need to get started on both Windows and Mac.

 

$ npm install -g cordova ionic

Installing Ionic

Prerequisites

  • 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 

digitaldrummerj.github.io/ionic-setup-osx/

​

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]

Coding Time

Additional Tooling from Ionic

Ionic View Application

  • View/Share/Test Ionic apps developing across devices
    • even test against OS without a Mac
  • Uses Cordova inAppBrowser plugin to launch your apps in their own separate WebView
    • At the moment, plugin access is restricted to a specific subset of plugins
  • Currently, iOS only but Android version on its way
     
  • Download from Apple Store: 
    https://itunes.apple.com/us/app/ionic-view/id849930087?mt=8 
$ ionic start myApp
$ cd myApp
$ ionic upload

Ionic Creator

  • https://creator.ionic.io/
     
  • Creator makes it easy to rapidly build Ionic mobile apps. With a drag-and-drop interface and real code exporting.
     
  • And it's totally free to use.

Ionic and Crosswalk

$ionic start my_app
$cd my_app
$ionic browser add crosswalk
$ionic run android
  • Simplify testing against multiple 
    platforms
     

  • Side by Side view of Android and iOS Phone
     

  • Supports Live Reload 

Ionic Lab

$ ionic start my_app
$ cd my_app
$ ionic serve --lab

Summary

  • Makes mobile developer way easier but not easy
     
  • Build and run native apps by using existing web skills
     
  • Quickly start a project with starter templates
     
  • Start a local dev server with LiveReload
     
  • Lots of good tooling, features, and documentation
     
  • Not yet 1.0 release, but very close
     
  • Active and growing developer community 

Resources

Videos, tutorials, and formulas: learn.ionicframework.com

Community Forum:   forum.ionicframework.com

Ionic Creator:  creator.ionic.io

Blog:  ionicframework.com/blog/

GitHub:  github.com/driftyco/ionic

Twitter: @ionicframework

Ionic Framework Examples: codepen.io/ionic


Nic Raboy's Blog:  https://www.thepolyglotdeveloper.com

Andrew McGivery:  http://mcgivery.com/


My blog -  http://digitaldrummerj.github.io/

http://spkr8.com/t/42121

 

Please rate this talk!

Ionic Framework

By Justin James

Made with Slides.com

Ionic Framework

  • 7,926

More from Justin James