about.me/carlos_morales
infinitemonkeys.mobi
2h 41m
on apps per day
checks the mobile
150 times a day
time spent on mobile ...
apps ? %
web ? %
Let's analyze them
- Quality and responsiveness
- Native user interface
- Multi touch, 3D
- Learning curve
- Code duplicity
- Maintenance
- Write once, run everywhere
- Instant rollout
- Software as Service
- No access to phone resources
- Download
- No App Store/ Google Play
- Reusable
- Easier to start and maintain
- Access to phone resources
- Performance, but anymore?
- Users expectations
By 2016, 50% of mobile apps will be hybrid.
time spent on mobile ...
apps 86%
web 14%
infinitemonkeys.mobi
Gartner
"The biggest mistake we’ve made as a company is betting on HTML5 over native."
Mark Zuckerberg
Stop confusion!
On iOS
Objective-C UIWebView class
On Android
android.webkit.WebView
+880 plugins at plugins.cordova.io
Mar 2015
15,000
Your app
Ionic
Angular JS
WebView (Cordova)
Native SDK
mikehartington.com/ionic-presents/
Focused on performance
Effortless native look & feel
Platform continuity
Sass preprocessed
Built on AngularJS
Similar to Angular's ng-repeat
Inspired by iOS’s UICollectionView
Scroll through thousands of items
Only renders the viewable items
Smooth scrolling
mikehartington.com/ionic-presents/
<div class="list">
<div collection-repeat="c in contacts">
<h3>{{ c.name }}</h3>
<p>{{ c.email }}</p>
</div>
</div>
Nested views
Each tab has its own nav history
Abstract states in AngularUI Router
mikehartington.com/ionic-presents/
<ion-tabs>
<ion-tab title="Home" icon="ion-home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-information">
<ion-nav-view name="about"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios7-world">
<ion-nav-view name="contact"></ion-nav-view>
</ion-tab>
</ion-tabs>
mikehartington.com/ionic-presents/
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
...
</ion-content>
</ion-side-menu>
</ion-side-menus>
mikehartington.com/ionic-presents/
<ion-content>
<ion-refresher on-refresh="doRefresh()"
pulling-text="Pull to refresh..."
refreshing-text="Refreshing!"
refreshing-icon="ion-loading-c">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items">
{{item}}
</ion-item>
</ion-list>
</ion-content>
“If debugging is the process
of removing software bugs,
then programming must be the
process of putting them in.”
Edsger Dijsktra
IONIC START GUIDE
http://ionicframework.com/getting-started/
NG-CORDOVA INSTALL
http://ngcordova.com/docs/install/
NG-CORDOVA GEOLOCATION
http://ngcordova.com/docs/plugins/geolocation/