hybrid vs. native app - ionic framework with angularjs
TRANSCRIPT
![Page 1: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/1.jpg)
The beautiful, open source framework for developing hybrid
mobile apps with HTML5
@Zvika Epstein
![Page 2: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/2.jpg)
Overview
1. Native vs Hybrid Apps
2. Intro Ionic
3. UI Components
4. Ionic CLI
![Page 3: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/3.jpg)
“I want a native app!”
![Page 4: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/4.jpg)
The Pros of a Native
● Performance - Full use of functionality and Hardware
- GPS, Contacts etc.
● Run on the device’s operating system.
● Fast graphics
![Page 5: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/5.jpg)
The Downsides of a Native
● Proficiency in each platform required
● Entirely separate code bases
● Timely & expensive development
![Page 6: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/6.jpg)
More Platforms. More Problems.
Why are we still coding for multiple platforms?
![Page 7: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/7.jpg)
“Is there an alternative?”
![Page 8: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/8.jpg)
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)
![Page 9: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/9.jpg)
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
![Page 10: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/10.jpg)
Apache Cordova is a platform for building native mobile
applications using HTML, CSS and Javascript
![Page 11: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/11.jpg)
ngCordova Plugins● Battery Status
● Calendar
● Camera
● Clipboard
● Contacts
● More plugins
![Page 12: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/12.jpg)
So, how do we bridge the gap
between web and native?
![Page 13: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/13.jpg)
“Hello.”
![Page 14: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/14.jpg)
● 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?
![Page 15: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/15.jpg)
Web Technologies You
Already Know and Love
![Page 16: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/16.jpg)
Standing on the Shoulders of
AngularJS
● UI Components are AngularJS Directives
● Ready to work with your app
![Page 17: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/17.jpg)
Native Focused
Modeled off of native SDKs
Built to work with Cordova
![Page 18: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/18.jpg)
Performance Obsessed
Hardware accelerated animations
Minimal DOM Manipulation
![Page 19: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/19.jpg)
![Page 20: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/20.jpg)
“Ionic is Bootstrap for Native”
● Responsive - Ionic solves multiple device
resolution issues.
● Icons
● UI Components
![Page 22: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/22.jpg)
UI Component Overview
![Page 23: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/23.jpg)
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>
![Page 24: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/24.jpg)
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>
![Page 25: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/25.jpg)
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>
![Page 26: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/26.jpg)
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>
![Page 27: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/27.jpg)
Pull to Refresh
<ion-content on-refresh="refreshData()"><ion-refresher></ion-refresher><!-- content -->
</ion-content>
![Page 28: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/28.jpg)
Ionic CLI
$ npm install -g ionic cordova
$ ionic start myapp sidemenu
$ cd myapp
$ ionic serve
![Page 29: Hybrid vs. Native app - Ionic Framework with AngularJS](https://reader033.vdocument.in/reader033/viewer/2022051503/5a6585c97f8b9a06748b4bc3/html5/thumbnails/29.jpg)
Thank You!