Introduction to Ionic 2

Stilian Kanchevbig boss @ snapp.cc

TOPICS

❏ Ionic Platform

❏ Evolution

❏ JavaScript on Steroids

❏ Hassle Free

❏ Navigation Simplicity

❏ Adaptive Design

❏ Ionic Native

❏ Coming Next

Ionic Platform

Evolution

Angular v1 learning in a Nutshell

ngMagic

Angular v2 Syntax

ngRepeatngFor

angular.factory

class

angular.service

*.controller

*.filter

*.directive

Angular v2 Architecture

❏ Observables

❏ Zone.js

❏ Web Workers - Boosts performance

❏ Web Services - Adds offline support

❏ Web Components ready - HTML Next ready

$scope

JavaScript on Steroids

ES6/7 Syntax

@Page - Decorator

export / export default - Modules syntax

classes - ES6 syntax

- Bright new future

ES6/7 Syntax

@Page - Decorator

export / export default - Modules syntax

classes - ES6 syntax

- Bright new future

ES6/7 Syntax

@Page - Decorator

export / export default - Modules syntax

classes - ES6 syntax

- Bright new future

ES6/7 Syntax

@Page - Decorator

export / export default - Modules syntax

classes - ES6 syntax

- Bright new future

TypeScript support

❏ Ready to use Webpack loader

❏ Components compatible with TypeScript(written in TS)What TypeScript brings?

❏ Transpiles to ES5/ES6

❏ Error checking during “compilation” based on types

❏ No 'undefined' is not a function

TypeScript support

❏ Ready to use Webpack loader

❏ Components compatible with TypeScript(written in TS)What TypeScript brings?

❏ Transpiles to ES5/ES6

❏ Error checking during “compilation” based on types

❏ No 'undefined' is not a function Parameter of type “string”

Return string

“t” is of type string

Hassle Free

Build process

❏ Templates will be compiled not on fly

❏ Dependency Injection during compilation

❏ Target of 10KB payload in Hello World

Navigation Simplicity

Navigation simplicity

❏ Push on to the nav stack

❏ Pop from the nav stack

❏ Insert/Remove/Update

Adaptive Design

OS Adaptive design

❏ Design modes

❏ iOS

❏ Android

❏ Windows Phone - uses Android styles

❏ Other platforms - uses iOS styles

OS Adaptive design

❏ SASS styles splitted based on the platform

❏ app.core.scss - Global styles

❏ app.ios.scss - iOS specific styles

❏ app.md.scss - Android specific styles

❏ app.variable.scss - Full list

OS Adaptive design

❏ Ionicons based on the platform

❏ Android icons following the Material

Design Guide

❏ iOS styled icons

Ionic Native

Coming Next

Coming Next

❏ Windows 10 support

❏ Windows 10 theme is in progress

❏ Ionic Web Edition

❏ Ionic Desktop (Electron)

❏ Smoother hybrid apps - iOS 9.3 no delay

❏ React’s virtual DOM coming to Angular?

❏ Isomorphic Ionic(Angular Universal)

Thank you!

Hybrid Mobile Development Bulgaria