Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Ionic App Framework

Intro to Ionic App Framework

A brief introduction to the Ionic App Framework. NOTE: Video recording of the talk coming soon.

Matt Stauffer

July 17, 2014
Tweet

More Decks by Matt Stauffer

Other Decks in Technology

Transcript

  1. Ionic
    @stauffermatt
    Intro to
    App Framework

    View full-size slide

  2. Matt Stauffer
    @stauffermatt
    Partner, Technical Director
    Tighten Co.
    tighten.co

    View full-size slide

  3. What is Ionic?
    A frontend framework,
    built on Cordova, Angular,
    and Sass.

    View full-size slide

  4. PhoneGap vs. Cordova
    2009: PhoneGap started at Nitobi
    2011: PhoneGap purchased by Adobe
    2012: PhoneGap donated from Adobe to Apache
    Software Foundation, and renamed as Cordova

    Today: PhoneGap is a distribution of Cordova,
    like(ish) Webkit -> Safari and Chrome

    View full-size slide

  5. PROS CONS
    Pros and Cons of Cordova/Ionic-based app dev
    • Faster development
    • Using web-based
    technology, so smaller
    learning curve for web devs
    • Cross-platform out of the
    box
    • Can be less performant than
    native on some less-capable
    devices
    • Limited to the UI capabilities
    of modern web
    • Ionic is opinionated—faster
    dev but sometimes less
    flexibility

    View full-size slide

  6. Prerequisites
    1. Install Node/NPM
    2. Install Ruby/Sass
    3. Learn the basics of Angular and Sass
    4. (optional) Install Gulp
    5. (optional) Install Xcode or Android Eclipse/
    SDK for distribution

    View full-size slide

  7. Steps to your first
    Ionic Project

    View full-size slide

  8. Install Ionic globally
    STEP 1

    View full-size slide

  9. $ npm install -g cordova ionic
    Install Cordova
    and Ionic Globally

    View full-size slide

  10. Clone demo project
    STEP 2

    View full-size slide

  11. $ ionic start frontendAwesome sidemenu
    $ cd frontendAwesome tabs
    blank
    other
    templates
    ]
    project name template name
    Blank Tabs Sidemenu

    View full-size slide

  12. Build & Emulate
    STEP 3

    View full-size slide

  13. $ ionic build ios
    $ ionic emulate ios
    $ ionic serve
    Build iOS/Xcode files
    Open iOS app in emulator
    Serve preview in browser

    View full-size slide

  14. Customize Styles
    STEP 4

    View full-size slide

  15. scss/ionic.app.scss
    // Customize Ionic variables pre-import
    $stable: #e8f8f8;
    @import “www/lib/ionic/scss/ionic”;
    // Add custom styles
    .highlighted { color: #ffff00; }

    View full-size slide

  16. Customize Content
    STEP 5

    View full-size slide

  17. Angular templating
    • {{markup}} (like Handlebars)
    • Directives (custom HTML elements)
    • Angular Directives (ng-repeat, ng-model)
    • Ionic Directives (ion-view, ion-content)
    • Filters ( {{ data | filter }} )

    View full-size slide

  18. www/js/app.js
    angular.module(...)
    .run(...)
    .config(..., $stateProvider
    .state('app', ...)
    .state('app.posts', {
    url: '/posts',
    views: {
    'menuContent': {
    templateUrl: 'templates/posts/index.html',
    controller: 'PostsCtrl'
    }
    }
    })
    .state('app.post', ...)

    View full-size slide

  19. www/js/controllers.js
    angular.module('starter.controllers', [])
    .controller('AppCtrl', ...)
    .controller('PostsCtrl', function($scope) {
    $scope.posts = [
    {
    id: 1,
    title: 'Hello',
    body: 'World'
    },
    {...},
    {...}
    ];
    })
    .controller('PostCtrl', ...)

    View full-size slide

  20. www/templates/posts.html





    {{post.title}}




    View full-size slide

  21. www/templates/post.html


    {{post.title}}





    View full-size slide

  22. Ionic CSS Components
    STEP 6

    View full-size slide

  23. Ionic JS Components
    STEP 7

    View full-size slide

  24. Distribute
    STEP 8

    View full-size slide

  25. iOS & Android demo distribution
    • iOS
    • -> Xcode -> TestFlight -> many devices
    • -> Xcode -> Your device directly
    • Android
    • -> USB -> your device
    • -> Eclipse SDK -> * -> many devices
    *http://www.thoughtworks.com/insights/blog/testflight-alternatives-android

    View full-size slide

  26. Miscellany
    Chrome Dev Tools Emulate is your friend

    View full-size slide

  27. Miscellany
    Use foreman to run gulp & ionic serve at
    once # Procfile
    gulp: gulp watch
    serve: ionic serve
    $ foreman start
    http://mattstauffer.co/blog/using-a-procfile-to-streamline-your-local-development

    View full-size slide

  28. Let’s Build.
    @stauffermatt
    (demo time: build a real app)

    View full-size slide