Hybrid Mobile Application Development with Ionic Framework
- Canarıl Bozoluk
- Software Developer
- Istanbul, Türkiye
- Main: Ahri
- github.com/xelom
- xelom.github.io/riot-present
Overview
- Native vs Hybrid Apps
- Intro Ionic
- UI Components
- Ionic Platform
- My Showcase
“I want to build an app!”
More Platforms. More Problems.
- Proficiency in each platform required
- Entirely separate code bases
- Timely & expensive development
Hybrid Apps!
HTML5 that acts like native
Direct access to native APIs
Familiar web dev environment
A single code base (web platform!)
“It's not 2007 anymore”
| Year | Device | Processor | RAM |
|---|---|---|---|
| 2007 | iPhone | 400 MHz | 128 MB |
| 2010 | iPhone 4 | 1 GHz | 512 MB |
| 2012 | iPhone 5 | 1.3 GHz dual-core | 1 GB |
| 2015 | iPhone 6S | 1.84 GHz dual-core | 2 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
Don't forget Crosswalk
https://mixpanel.com/trends/#report/ios_9
https://mixpanel.com/trends/#report/android_os_adoption
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
Other Components
- Side Menus
- Actionsheet
- Modal
- Pull To Refresh
- Spinners
- Slidebox
- Infinite Scroll
- Swipeable List Options
- Popup
- Popover
- Loading Overlay
- Inputs
- Buttons
- etc.
Ionicons
700+ MIT licensed font-icons included
My Showcase!
