Ionic + Angular:
Superpowers
for Mobile App Development
Terence Carroll
Software Engineer
- I'm a real developer with real developer problems.
- Making clients happy.
- Getting paid by clients.
- Let's talk practical skills.
- I'm not here to sell you something.
- I'm here to tell you what I ♥ love.
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!)
Year |
Device |
Processor |
RAM |
2007 |
iPhone |
620 MHz |
128 MB |
2010 |
iPhone 4 |
1 GHz |
512 MB |
2015 |
iPhone 6 |
1.4 GHz dual-core |
1 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_8/from_date:-141,report_unit:day,to_date:0
→ iOS Statistics ←
Mobile Development Problems
- Getting Started
- Native look & feel - iOS / Android
- Common UI Kit
- Application Navigation
- Performance
- Accessing Native SDKs
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
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
Collection Repeat
- Replacement for Angular's ng-repeat
- Inspired by iOS’s UICollectionView
- Scroll through thousands of items
- Only renders the viewable items
- Smooth scrolling!
{{ c.name }}
{{ c.email }}
Navigation
- Uses AngularUI Router
- Shows back button when possible
- Transitions follow direction of nav
- Updates the app's URL
- Multi-history stack
Cached Views
- View elements left in the DOM
- $scope disconnected when cached
- State maintained
- Scroll positions maintained
- Life Cycle events
- Highly configurable
Swipe To Go Back
- Swipe back to previous view
- Interactive transition
- Benefit of cached views
- Still updates the app's URL
- WebView (Cordova) only
Other Components
- Side Menus
- Actionsheet
- Modal
- Pull To Refresh
- Slidebox
- Infinite Scroll
- Swipeable List Options
- Popup
- Popover
- Loading Overlay
- Inputs
- Buttons
- etc.
Spinners
- Animated SVGs
- More than just rotating icons
- Defaults to platform's spinner
- Style with CSS
...but there's more to Ionic
npm install -g ionic cordova
Boilerplate app structure ready for customization
LiveReload both local and native builds
Build and run native apps
Modern
Chromium!
Chromium for Android WebViews
Upgrade Android 4.0+ and above
Same hardware, modern software
Amazing performance improvements
Ionic's Adoption
- 16,000+ Github Stars
- Top 50 most starred Github repos
- Consistently Top 10 trending JS Github repos
- Ionic CLI 90,000 downloads/month
- 400,000+ Ionic apps have been started from our CLI
- Released Alpha: November 2013
- Released Beta: March 2014
- Releasing 1.0: May 2015
You're probably wondering...
Angular 2?
Yes, working with the Angular team.
Angular CLI - Ionic will be supported!
What's Next!
- Ionic 2 with Angular 2!
- Component Modularity
- App Scaffolding
- Customized Animations
- Webworkers and Multi-Threading
- Ionic Labs: GUI for App Tasks
- More Ionic.IO services