Building cross-platform apps with Ionic 2

View Github Repository Open presentation in a new window

adamdbradley

See all presentation from adamdbradley

Building cross-platform apps with Ionic 2

17 14

building-with-ionic2

Ionic 2: Angular Connect 2015 Presentation

On Github adamdbradley / building-with-ionic2

Building cross-platform apps with Ionic 2

Adam Bradley

Lead Ionic Developer

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>
iOS Android

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.

Ionic CLI

ES6/Typescript transpilation

Sass compiling

Cordova builds

Webpack bundling

Scaffolding/Architecture

Recommended best practices

Crosswalk

Huge Community!

2M+ forum page views/mo.

105 Meetups worldwide

3,000+ active Slack members

4,000+ Ionic apps created every day

Want to try it out now?

We want your feedback

ionic.io/2

What's Next!

Alpha released today!

Web Worker Support

Staying 'Nsync with Angular2

Add even more to ionic.io services

</html>

@adamdbradley

Building cross-platform apps with Ionic 2