ionic-meetup
Ionic: The Next Hybrid Application
- Rizky Ariestiyansyah
- Ionic Organizer Indonesia
- CTO at IndonesiaX
- Tangerang, Jakarta, Bekasi
- @ariestiyansyah
- github.com/ariestiyansyah
Overview
Native vs Hybrid Apps Intro Ionic UI Components Ionic CLI DemosMore Platforms. More Problems.
- Proficiency in each platform required
- Entirely separate code bases
- Timely & expensive development
- Diminishing returns
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!)
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
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
Complex Lists
- AngularJS Directive
- Buttons exposed by swiping
- Reorder
- Delete
List Item {{ item.id }}
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
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
- Spinners
- Slidebox
- Infinite Scroll
- Swipeable List Options
- Popup
- Popover
- Loading Overlay
- Inputs
- Buttons
- etc.
MIT LICENSED
Free to use (even commercially)
Ionicons
700+ MIT licensed font-icons included
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.1+ and above
Same hardware, modern software
Amazing performance improvements
Get Started with Ionic!
Getting started guide ionicframework.com/getting-started
Documentation ionicframework.com/docs
Visit the Community Forum forum.ionicframework.com
Contribute on GitHub github.com/driftyco/ionic