Upload
zvika-epstein
View
418
Download
0
Embed Size (px)
Citation preview
The beautiful, open source framework for developing hybrid
mobile apps with HTML5
@Zvika Epstein
Overview
1. Native vs Hybrid Apps
2. Intro Ionic
3. UI Components
4. Ionic CLI
“I want a native app!”
The Pros of a Native
● Performance - Full use of functionality and Hardware
- GPS, Contacts etc.
● Run on the device’s operating system.
● Fast graphics
The Downsides of a Native
● Proficiency in each platform required
● Entirely separate code bases
● Timely & expensive development
More Platforms. More Problems.
Why are we still coding for multiple platforms?
“Is there an alternative?”
Hybrid Apps!
● HTML5 that acts like native
● Web wrapped in native layer
● Direct access to native APIs
● Phonegap renamed to Cordova
● Familiar web dev environment
● Fast deployment
● Develop a single code base (web platform)
Cons of a Hybrid App
● Performance - extra layer between the source
code and the target mobile platform
● rely on a third party
● UI assets of iOS or Android
Apache Cordova is a platform for building native mobile
applications using HTML, CSS and Javascript
ngCordova Plugins● Battery Status
● Calendar
● Camera
● Clipboard
● Contacts
● More plugins
So, how do we bridge the gap
between web and native?
“Hello.”
● The ionic is an open source framework for developing
hybrid mobile applications using AngularJS, Sass and
Cordova.
● Ionic is the front-end framework.
● Ionic mainly uses Cordova to create, build, run and deploy
the mobile applications.
● Modeled off of native SDKs
● Performance - Hardware accelerated animations
What is Ionic?
Web Technologies You
Already Know and Love
Standing on the Shoulders of
AngularJS
● UI Components are AngularJS Directives
● Ready to work with your app
Native Focused
Modeled off of native SDKs
Built to work with Cordova
Performance Obsessed
Hardware accelerated animations
Minimal DOM Manipulation
“Ionic is Bootstrap for Native”
● Responsive - Ionic solves multiple device
resolution issues.
● Icons
● UI Components
UI Component Overview
Lists
<div class="list">
<div class="item item-divider">Candy Bars
</div>
<a class="item" href="#">Butterfinger
</a>
<a class="item" href="#">Kit Kat
</a>
...
</div>
Tabs
<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>
Complex Lists● AngularJS Directive
● Buttons exposed by swiping
● Reorder
● Delete
<ion-list><ion-item ng-repeat="item in items"
class="item-thumbnail-left"><img ng-src="{{ item.pic }}"><h2>{{ item.name }}</h2><p>{{ item.quote }}</p>
</ion-item></ion-list>
Slide box
<ion-slide-box on-slide-changed="change(index)"><ion-slide>Slide 1
</ion-slide><ion-slide>Slide 2
</ion-slide><ion-slide>Slide 3
</ion-slide></ion-slide-box>
Pull to Refresh
<ion-content on-refresh="refreshData()"><ion-refresher></ion-refresher><!-- content -->
</ion-content>
Ionic CLI
$ npm install -g ionic cordova
$ ionic start myapp sidemenu
$ cd myapp
$ ionic serve
Thank You!