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.

Avatar for Matt Stauffer

Matt Stauffer

July 17, 2014
Tweet

More Decks by Matt Stauffer

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. $ ionic start frontendAwesome sidemenu $ cd frontendAwesome tabs blank

    other templates ] project name template name Blank Tabs Sidemenu
  5. $ ionic build ios $ ionic emulate ios $ ionic

    serve Build iOS/Xcode files Open iOS app in emulator Serve preview in browser
  6. Angular templating • {{markup}} (like Handlebars) • Directives (custom HTML

    elements) • Angular Directives (ng-repeat, ng-model) • Ionic Directives (ion-view, ion-content) • Filters ( {{ data | filter }} )
  7. 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', ...)
  8. 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>
  9. 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
  10. 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