Tweet
Tweet

Slide 1

Slide 1 text

Ionic @stauffermatt Intro to App Framework

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Steps to your first Ionic Project

Slide 10

Slide 10 text

Install Ionic globally STEP 1

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Clone demo project STEP 2

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Build & Emulate STEP 3

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Customize Styles STEP 4

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Customize Content STEP 5

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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', ...)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

www/templates/posts.html
{{post.title}}

Slide 23

Slide 23 text

www/templates/post.html

{{post.title}}

Slide 24

Slide 24 text

Ionic CSS Components STEP 6

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Ionic JS Components STEP 7

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Distribute STEP 8

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Miscellany Chrome Dev Tools Emulate is your friend

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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