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.

60187fe0ab07ea5a46572a3ab05f61dd?s=128

Matt Stauffer

July 17, 2014
Tweet

Transcript

  1. Ionic @stauffermatt Intro to App Framework

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

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

    and Sass.
  4. None
  5. 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
  6. None
  7. 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
  8. 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
  9. Steps to your first Ionic Project

  10. Install Ionic globally STEP 1

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

    Globally
  12. Clone demo project STEP 2

  13. $ ionic start frontendAwesome sidemenu $ cd frontendAwesome tabs blank

    other templates ] project name template name Blank Tabs Sidemenu
  14. Build & Emulate STEP 3

  15. $ ionic build ios $ ionic emulate ios $ ionic

    serve Build iOS/Xcode files Open iOS app in emulator Serve preview in browser
  16. Customize Styles STEP 4

  17. scss/ionic.app.scss // Customize Ionic variables pre-import $stable: #e8f8f8; @import “www/lib/ionic/scss/ionic”;

    // Add custom styles .highlighted { color: #ffff00; }
  18. Customize Content STEP 5

  19. Angular templating • {{markup}} (like Handlebars) • Directives (custom HTML

    elements) • Angular Directives (ng-repeat, ng-model) • Ionic Directives (ion-view, ion-content) • Filters ( {{ data | filter }} )
  20. 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', ...)
  21. www/js/controllers.js angular.module('starter.controllers', []) .controller('AppCtrl', ...) .controller('PostsCtrl', function($scope) { $scope.posts =

    [ { id: 1, title: 'Hello', body: 'World' }, {...}, {...} ]; }) .controller('PostCtrl', ...)
  22. www/templates/posts.html <ion-view title="Feed"> <ion-content class="has-header"> <div class="list"> <div class="item" ng-repeat="post

    in posts"> <a href="#/app/posts/{{post.id}}"> {{post.title}}</a> </div> </div> </ion-content> </ion-view>
  23. www/templates/post.html <ion-view title="Post"> <ion-content class="has-header"> <h2>{{post.title}}</h2> <div class="item"> <span ng-bind-html="post.body"></span>

    </div> </ion-content> </ion-view>
  24. Ionic CSS Components STEP 6

  25. None
  26. None
  27. Ionic JS Components STEP 7

  28. None
  29. Distribute STEP 8

  30. 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
  31. Miscellany Chrome Dev Tools Emulate is your friend

  32. 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
  33. Let’s Build. @stauffermatt (demo time: build a real app)