IONIC VANCOUVERPrepared by: Alamusi

June 2016

SPONSORS

radesBl ck

AGENDA• Round Table

• What is Ionic2 (under the hood, what remained and what changed)

• Why should I use it (on the surface, the changes and improvements)

• When should I do it (adapt it now or later)

• How should I do it (migration strategy and tactics)

• Misc (the wow and ouch moments)

• Mingle

• Ask us anything

WHAT IS IONIC2

Build incredible mobile apps with web technologies you

already know and love.

UNDER THE HOODIonic 1.x

• Angular 1.x

• Javascript

• Controller / Scope

• Template / Two-way Binding

• Directive / Filters

• DI / Providers / Modules

• Digest Cycles / Promise

• Cordova

• ngCordova

Ionic 2.0

• Angular 2.0

• Typescript (ES6+Type)

• Components

• New Template Syntax / Default One-way Binding

• New Directive Syntax / Pipes

• New DI / Services / ES6 Module

• Zone / Subscribe

• Cordova

• Ionic Native

WHY SHOULD I?

API

THEMING

ICONS

UI ITEMS

The brand new 2.0 overhauled nearly every part,

from navigation, user interface , to native device integration.

CORE IMPROVEMENT• Upgraded Components

• Buttons (FAB & segments)

• Select (multiple)

• Input (datetime)

• Gestures (press, pan, rotate, pinch)

• Modal (input & output)

• Toast (new)

• Icons

• iOS & MD

• Theming

• Granular scss & overridable variables

• windows phone

• API

• Angular 2.0 style

• Navigation (Ionic Push & Pop)

• Misc

• Scaffolding / Packaging

• IDE

WHEN SHOULD I?

well… it depends…

Ionic2

Angular2

ROADMAP

V1.x: Nov 2013 (alpha) -> Mar 2014 (beta) -> Mar 2015 (rc) -> May 2015 (official) -> now (v1.3.1) V2.0: Jan 2016 (alpha) -> Feb 2016 (beta) -> now (beta8) -> ? 2016 (rc) -> ? 2016 (official)

v1.x: Oct 2010 (0.9.0) -> Sep 2011 (0.10.0) -> June 2012 (official) -> now (v1.5.6) v2.x: Apr 2015 (alpha) -> Dec 2015 (beta) -> May 2016 (rc) -> ? 2016 (official)

HOW SHOULD I?

start fresh, migrate, or somewhere in between?

HANDY RESOURCESIonic2

• http://ionicframework.com/docs/v2/

Ionic2 Samples

• https://github.com/driftyco/ionic-preview-app

Other Ionic2 resources

• http://ionicframework.com/docs/v2/resources/books-and-courses/

Typescript

• http://www.typescriptlang.org/

Angular2

• https://angular.io/docs/ts/latest/

Other Angular2 resources

• https://angular.io/resources/

MISC

fun time!

OUR EXPERIENCE

Works Out Great

• Conceptually less complex

• Typescript vs Javascript

• Packaging

• Productivity and TCO

Challenges

• Amount of changes

• Being beta

• Progressive web

• Obvious performance gain