Ionic: The Evolution Of A Hybrid Framework

Sani Yusuf

Founder Of Haibrid

Live In London
Writer / Trainer / Coder
Avatar Is the Best Movie Ever

Before We Even Begin

Short History Lesson About Mobile Apps

Timeline Of Mobile Apps!

Apple launches the Iphone

Google follows shortly with Android

Microsoft with Windows Phone

...............

Each Came With Its Own Set Of Native Tools

Apple: IOS SDK with Swift/Objective C

Google: Android SDK with Java

Microsoft: Windows SDK with .NET

...............

Native Is Really Great But....

Proficiency in each platform required

Entirely separate code bases

Expensive

Android: £££
IOS: £££££££ + $$$$ + €€€€€€
Windows: Good luck finding a developer

More Platforms. More Problems.

Why are we still coding for multiple platforms in 2016?

Are There Any Alternatives Out There?

Web wrapped in native layer
Direct access to native APIs
Familiar web dev environment
Develop a single code base (web platform)
Bread & Butter of hybrid mobile apps

“But I hear that Hybrid apps are slow!”

“Most people that say this have never developed Hybrid apps'”

If anything you are building is slow, don't blame the technology. You have either chosen the wrong approach, or are doing something wrong.

Mobile devices have rapidly improved!

Year	Device	Processor	RAM
2007	iPhone	620 MHz	128 MB
2010	iPhone 4	1 GHz	512 MB
2016	iPhone 6s	1.8 GHz dual-core	2 GB

Web-standards have rapidly improved!

caniuse.com is looking' pretty good nowadays
Service Worker & Web Worker are real
IE is now dead. Rest in pieces :)

All Problems Solved Right?

Well no not really

Native SDKs...

Are Really Cool For A Reason

Provide a lot of cool view component APIs

Cool animations & transitions

Solid navigation

Gestures

..................

Introducing Ionic!

SDK for building mobile apps with HTML5

Built on top of Angular JS

Built With Web Technologies You Already

Know & Love

(You'll feel right at home)

Standing on the Shoulders

of Angular

Extends the HTML vocabulary

Proven for large-scale app development

Custom UI Components using Directives & Services

Sass!

CSS generated from the Sass preprocessor

Quickly give your app its own look and feel

CSS designed to be easily overridden

Variables based with default settings

How it all comes together

Your App

Ionic

Angular

WebView (Cordova)

Native App

Lets Talk Stats!!

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

Over 1.5 MILLION apps built with Ionic

Ionic apps have topped app store charts

Fortune 50 co’s to YC/TechStars companies

Amazing community

Ionic v1 Made All This Possible

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! (WKWebview)

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 : Windows

One code base

Same HTML and JS

More than just different CSS

Icons

~1000 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

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