Ionic 2.0

Create Hybrid Cross Platform Apps

Using Angular

by Zak Burki

17th Feb 2016

What is the Ionic Framework?

2013 - Hybrid Mobile App Framework that uses Angular.js + Phonegap (Cordova)
It also is a SASS Framework (Like Bootstrap/UiKit)
Growing to be the most Popular Modern Hybrid Framework
Ionic Services make life easier for developing managing your Mobile App - Ionic Creator. Ionic Push. Ionic Lab.

Ionic 1.x

Good Starter Template Examples
Simple Navigation Router
Short Dev Cycle Times
LiveReload in the Browser

Short Demo Time

Ionic 2.0 Pros

Angular2 performance improvements

Over 24 pre-built components

Simpler to mix and match

Highly Configurable

Web Animations

~900 Ionicons

TypeScript vs. ES5

TypeScript: ES6 + Decorators + Types
Angular 2 built using TS by Default
Ionic - not so - but TypeScript can be used
Code Completion in some Editors/IDEs
(WebStorm & VS)

TypeScript vs. ES5

ANGULAR2 TYPESCRIPT:


import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

TypeScript vs. ES5

ANGULAR2 ES5:



(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

Ionic CLI

ES6/Typescript transpile to ES5
Sass compiling
Webpack building
Crosswalk
App Starter Packs

Components. vs Directive

Creates it's own view (hierarchy of DOM elements) with attached behaviour	Directives add behaviour to an existing DOM element
Only one component can be present per DOM element.	Multiple decorators can be placed on a single element.
Shadow view context is the component instance	Directives do not introduce new evaluation context
When: create a reusable set of DOM elements of UI with custom behaviour	When: write reusable behaviour to supplement existing DOM elements.

Component Lifecycle

// Annotation section
@Component({
  selector: 'street-map',
  template: '<map-window></map-window><map-controls></map-controls>',
})
// Component controller
class StreetMap {
  ngOnInit() {
    // Properties are resolved and things like this.mapWindow and this.mapControls
    // had a chance to resolve from the two child components <map-window> and <map-controls>
  }
  ngOnDestroy() {
    // Do something quick before it's too late.
  }
  ngDoCheck() {
    // Custom change detection
  }
  ngOnChanges(changes) {
    // Called right after our bindings have been checked but only if one of our bindings has changed.
    // changes is an object of the format:
    // { 'prop': PropertyUpdate }
  }
  ngAfterContentInit() {
    // Component content has been initialized
  }
  ngAfterContentChecked() {
    // Component content has been Checked
  }
  ngAfterViewInit() {
    // Component views are initialized
  }
  ngAfterViewChecked() {
    // Component views have been checked
  }
}

Navigation

Similarities to React Native Navigator

Push on to the nav stack
Pop from the nav stack
Component Instructions

pushSettings() {
  this.nav.push(Settings);
}

goBack() {
  this.nav.pop();
}

resetHome() {
  this.nav.setRoot(Home);
}

How to Get Started

http://ionicframework.com/docs/v2/getting-started/

Demo Time

if we have time?

Any Questions?

twitter:

@zakburki