Hybrid cross-platform apps with Ionic 2

Morten Mathiasen

Project manager and Lecturer

Business Academy Aarhus
https://github.com/mortenmathiasen

Show cases

http://showcase.ionicframework.com/apps/top

Ionic!

Mobile apps with web tech

Focused on mobile first

Easily customized

Angular for code structure *

Stats!!

Top 40 OSS project (~20,000 stars on GitHub)

Over ONE MILLION apps built with Ionic

Ionic apps have topped app store charts

Fortune 50 co’s to YC/TechStars companies

Amazing community

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

Tons of 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}} {{last}}
</ion-content>

            @Page({
  templateUrl: 'profile.html'
})
export class Profile {
  constructor() {
    this.first = 'Biff';
    this.last = 'Tannen';
  }
}

            <ion-nav [root]="home"></ion-nav>

            @App({
  templateUrl: 'app.html'
})
class MyApp {
  constructor() {
    this.home = 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>

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,
)

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(...);
}