Intro to Ionic

Ionic@Budapest Meetup

2016 May

Peter ADAM

IoT developer at Hybile Labs, specialised in hybrid mobile apps with serverless backends

Budapest, Hungary
@pvadam
pvadam
hybile.io

Overview

Native vs Hybrid Apps
Intro Ionic
Ionic Platform
Ionic v2
Demos

“I want to build an app!”

More Platforms. More Problems.

Why are we still coding for multiple platforms in 2016?

Hybrid Apps!

HTML5 that acts like native

Web wrapped in native layer

Direct access to native APIs

Familiar web dev environment

A single code base (web platform!)

“It's not 2007 anymore”

Year	Device	Processor	RAM
2007	iPhone	400 MHz	128 MB
2010	iPhone 4	1 GHz	512 MB
2015	iPhone 6s	1.84 GHz dual-core	2 GB

Web-standards

Have improved!

caniuse.com is lookin' pretty good nowadays

Android is now Chromium-based

iOS users keep their devices up-to-date

https://mixpanel.com/trends/#report/ios_9

https://mixpanel.com/trends/#report/android_os_adoption

Native SDKs...

Are Great!

Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.

Web Technologies You Already

Know & Love

(You'll feel right at home)

Superpowered by

Angular

Extends the HTML vocabulary

Proven for large-scale app development

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

Ionic!

Mobile apps with web tech

Focused on mobile first

Easily customized

Angular for code structure *

Stats!!

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

Over 2.3 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>

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

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

[optional]

Native Power

Batteries included

Brought straight into Ionic

Easier to get native access

GPS, Bluetooth, Camera, etc.

            import {Camera, Vibration} from 'ionic-native';

Camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64:
 let base64Image = "data:image/jpeg;base64," + imageData;
}, (err) => {
});


// Vibrate the device for a second
Vibration.vibrate(1000);