ionic vancouver 201606
TRANSCRIPT
![Page 1: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/1.jpg)
IONIC VANCOUVERPrepared by: Alamusi
June 2016
![Page 2: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/2.jpg)
SPONSORS
radesBl ck
![Page 3: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/3.jpg)
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
![Page 4: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/4.jpg)
WHAT IS IONIC2
Build incredible mobile apps with web technologies you
already know and love.
![Page 5: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/5.jpg)
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
![Page 6: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/6.jpg)
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.
![Page 7: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/7.jpg)
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
![Page 8: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/8.jpg)
WHEN SHOULD I?
well… it depends…
Ionic2
Angular2
![Page 9: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/9.jpg)
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)
![Page 10: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/10.jpg)
HOW SHOULD I?
start fresh, migrate, or somewhere in between?
![Page 11: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/11.jpg)
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/
![Page 12: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/12.jpg)
MISC
fun time!
![Page 13: Ionic vancouver 201606](https://reader031.vdocuments.site/reader031/viewer/2022022413/58ed77ba1a28abac738b469d/html5/thumbnails/13.jpg)
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