Ionic2 Introduction

Keith D. Moore

Mobile Consultant/Architect

KD Moore Consulting

What is Ionic?

Mobile apps with web tech (HTML5, CSS3, JS)

Focused on mobile first

Easily customized

Built using Angular

Uses Cordova/Phonegap

How popular is Ionic?

Top 40 Open Source projects (~23,000 stars on GitHub)

Amazing community

Ionic apps have topped app store charts

Fortune 50 co’s to Y Combinator/TechStars companies

App Showcase (showcase.ionicframework.com)

  • Sworkit (on Shark Tank)
  • Rio 2016 Olympic Games
  • New York MTA Bus Time
  • Adobe Social
  • Meerkat Movies
  • Card.com

Ionic v1 is great

Hybrid SDK that didn't exist

Validated the hybrid approach

Garnered massive adoption

Built during iOS 6

Android 2.3 - 4.3

A lot's changed

Better/faster devices!

Fewer slow/bad devices!

Widely available web APIs!

Improved browser engines!

Ionic 2

Same powerful framework

With lessons learned from v1

Amazing performance from Angular2

New features

v2 Goals

Simplicity

Platform Continuity

Performance

Creative Freedom

Code once

Simplicity

Component Model

Elements and attributes

Ready for customization

Clean JavaScript

            <button>...</button>

<button danger>...</button>

<ion-checkbox>...</ion-checkbox>

<ion-list>
  <ion-item>...</ion-item>
  <ion-item>...</ion-item>
</ion-list>
          
            <ion-navbar>
  <ion-title>Profile</ion-title>
</ion-navbar>


<ion-content>
  {{first}} {{middle}} {{last}}
</ion-content>
          
            @Page({
  templateUrl: 'profile.html'
})
export class Profile {
  constructor() {
    this.first = 'Keith';
    this.middle = 'D.';
    this.last = 'Moore';
  }
}
          

            <ion-app></ion-app>
          
            @App({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
  constructor() {
    this.rootPage = HomePage;
  }
}

Platform Continuity

iOS : Android

One code base

Same HTML and JS

More than just different CSS

Icons

~900 Ionicons

Now SVGs

iOS versions

MD versions

            <icon home></icon>

<icon mail></icon>

<icon share></icon>

<icon map></icon>

V1 Navigation

Navigation tightly-coupled to address bar

UI-Router: challenge to have full control

Developers NEED complete control

Push/Pop Navigation

Rethought navigation for v2

Similar to iOS/Android

Full control of nav experience

URL and deep-linking support

Full Control

Push on to the nav stack

Pop from the nav stack

Insert/Remove/Update

URL reflects app's state

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

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

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

Theming and Customization

Apps must fit their brand first

Numerous Ionic themes

Build tools already included

Sass is enabled by default

Colors and Variables

Quickly create entire theme

Design for your brand

Add, Remove, Rename

~Everything is a variable


$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222222,
  favorite:   #69BB7B
)

v1 Animations

Mix of CSS and JS

CSS animations limited

Difficult to interact with


.entering-view {
  transform: translate3d(...);
  transition-property: transform;
  transition-duration: 300ms;
}

.entering-view.active {
  transform: translate3d(...);
}

Web Animations API

Browser's animation engine

Flexibility of JavaScript

W3C Spec: Editors Draft

Native on Chrome/Android

Great iOS polyfill

v2 Animations

Extend and add animations

Interactive control

Thin wrapper to WAPI

Highly Configurable

~ Everything has a config

Global config

Platform config

Attribute config

Component instance config

JavaScript

v1 was built with ES5

v2 built with the latest standards

ES6 brings many new features

TypeScript

ES6 + Decorators + Types

Ionic 2 / NG2 built using TS

Editor Code completion

Less Code to write

[optional]

Native Power

Batteries included

Brought straight into Ionic

Easier to get native access

GPS, Bluetooth, Camera, etc.

Ionic CLI

ES6/Typescript transpilation

Sass compiling

Cordova builds

Scaffolding

Resource Generator

Crosswalk

Ionic.io Platform Services(Beta)

Package (iOS and Android)

Deploy to Ionic View

Deploy to App

Push Notifications

Authentication

OAuth2 (FB, Twitter, etc)

Ionic Lab

Ionic Creator

Analytics

Huge Community!

2M+ forum page views/mo.

105 Meetups worldwide

3,000+ active Slack members

4,000+ Ionic apps created every day

Is Ionic2 ready?

Angular2 Beta released December 15, 2015

Ionic2 Beta released in February 10, 2016

Angular2 Release Candidate rumored to be May 2016

What's your risk tolerance?

What does your app do?

What's Next?

Release Candidate soon after Angular2 RC

Web Worker Support

Server Side Rendering

Build time template compilation

Staying 'Nsync with Angular2

Full support for ionic.io services

More tooling (testing, constants, etc)

Links