29
Building Mobile Apps with Angular2 & Ionic 2
Building Mobile Apps with Angular2 & Ionic 2
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
