Building awesome hybrid mobile apps with HTML/CSS/JS
ionicframework.com phonegap.com
Presented by Ryan Hanna @heryandotus
Web Technologies You Already Know and Love
(You'll feel right at home)
Hybrid Apps!
- HTML5 that acts like native
- Web wrapped in native layer
- Direct access to native APIs
- Cordova/Phonegap
- Familiar web dev environment
Hybrid Models
PhoneGap + UI + MVC (BBC Olympics, Untappd, Sworkit)
Native navigation + web content (Basecamp)
“Free and open source library of mobile-optimized web components, gestures, and tools for building highly interactive apps with HTML5/CSS/AngularJS.”
Complex Lists
- AngularJS Directive
- Buttons exposed by swiping
- Reorder
- Delete
![]()
{{ item.name }}
{{ item.quote }}
Tabs
Slide Box
Slide 1
Slide 2
Slide 3
Action Sheet
$ionicActionSheet.show({
titleText: 'Modify your album',
buttons: [
{ text: 'Share' },
{ text: 'Move' },
],
destructiveText: 'Delete',
cancelText: 'Cancel',
buttonClicked: function(index) {
console.log('BUTTON CLICKED', index);
return true;
}
});
Pull to Refresh
SWORKIT
Stats
5 Million Downloads
Featured in Apple App Store & Google Play
Challenges
Android Drawer
HTML5 Inline Video
13 Languages
Plugins
Healthkit, HTML5Video, SessionM, Kiip, LowLatencyAudio, SocialShare, Datepicker, ScreenOrientation, AppAvailability, Keyboard, File, File-Transfer, Splashscreen, InAppBrowser
More Examples
“YOU can create and distribute apps for iOS and Android with HTML, CSS, & JS.”