Building Mobile Apps with Angular2 & Ionic 2

Who Am I?

Alex MuramotoDev Advocate @ Ionic

@alexmuramoto alex.m@ionic.io github.com/amuramoto

Hybrid. It's Awesome.

• Use Existing Web Skills

• Single Codebase

• Java is Terrible

• Hot-fixes - No Review

• Mostly Platform-Agnostic

• Objective-C is Gross

Devices Have Evolved!

Year Device Processor RAM2008 iPhone 3 620 MHz 128 MB 2010 iPhone 4 1 GHz 512 MB 2012 iPhone 5 1.3 GHz dual-core 1GB 2014 iPhone 6 1.4 GHz dual-core 1 GB 2016 iPhone 7 2.3 GHz quad-core 2 GB

WebViews Have Evolved, Too!

WKWebView Chromium

Nitro V8

So Awesome

• JIT Machine Code

• Native Scrolling

• Faster Rendering

• Faster Compute

• Latest Device APIsArt by Christopher Hastings

JS for Mobile is Hard =(

• No Touch Events

• No Native UI Components

• No Performance Optimization

• No SDK

No Style.

Not This Hard… But Hard

What is Ionic?

• Hybrid mobile framework

• Built with AngularJS

• Written in Typescript

• Open Source - MIT License

• Built on Web/Browser Standards

ionicframework.com

Try It Out

$ npm install -g ionic cordova

$ ionic start myApp --v2

UI Components

UI Components

Theming

• Plain ol’ CSS + Sass

• Easy to override

• Variables based

• 80+ mixins

ionicons

ionicons.com

• Cross-platform • MIT license• 900+ Icons

Ionic Native

• Access Native Device APIs

• Wraps Cordova Plugins

• Written in Typescript

• Adds Promises/Observables

• Framework Agnostic

github.com/driftyco/ionic-native

Ionic Native

Performance Obsessed

• Minimal DOM Manipulation

• Native Scrolling

• 60FPS Page Transitions

• Hardware Accelerated Animations

• Optimized for Touch Events

• AoT Compiling

Developers Love Ionic!

• 25K+ Stars

• #1 Typescript Project

• Top 50 Project

• Hundreds of Contributors

• 200K+ NPM Installs per Month

github.com/driftyco/ionic

Companies Love Ionic, Too!

Code Once. Run Everywhere.

One Team. One Codebase. Every Platform.

Code Once. Run Everywhere.

Ionic ViewTest. Share. Repeat.

view.ionic.io

$ ionic upload

App ID: 95FFA4ED

Deploying to a Device

• Enable Developer Options

• Enable USB Debugging

• Create Provisioning Profile

• Code Sign .IPA in Xcode

• npm install -g ios-deploy

• bit.ly/deploy-without-dev-account

Want More?

Docs ionicframework.com/docs/v2

Blog blog.ionic.io

Twitter@ionicframework

Even More Twitter!@ionitron

Please Contribute!

Ionic Framework github.com/driftyco/ionic

Ionic Native github.com/driftyco/ionic-native

Ionic CLIgithub.com/driftyco/ionic-cli

alex.m@ionic.io

Thank You, Humans.

@alexmuramoto

*beep*