![Page 1: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/1.jpg)
Ionic Mobile ApplicationsHybrid Mobile Applications Without Compromises
![Page 2: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/2.jpg)
The Presenter - Jacob Friesen● Senior Front End Developer At Verias● Doing JavaScript for over 6 years now● Run Obscure JavaScript, Tumblr’s most popular JS
blog
![Page 3: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/3.jpg)
Outline (1hr 25m)1. Ionic and Hybrid Mobile Architectures2. Writing Code In Ionic3. The Ionic Ecosystem
![Page 4: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/4.jpg)
Architecture1. Web View2. Cordova3. Ionic
Web View
Ionic (extends)
Cordova
Abstraction For
![Page 5: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/5.jpg)
Architecture - Web ViewUI componentThere can be any number of themAny size including full screen● Displays a single web page
○ Which can be loaded remotely or locally
![Page 6: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/6.jpg)
Architecture - Web View - A Non Hybrid Example
Twitter’s Web View
![Page 7: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/7.jpg)
Architecture - Web View - Implications● Two Implications:
○ Modern Hybrid Apps are not hacks○ Hybrid Apps are not necessarily slow
![Page 8: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/8.jpg)
Architecture - Apache CordovaThe simplest hybrid app is a full screen web viewBut the OS communication is platform dependantSo are the build processesThis is where Cordova comes in
![Page 9: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/9.jpg)
Architecture - Apache Cordova - OverviewOriginally an Open Sourced version of Phone GapNow managed by the Apache Software FoundationSupports Android, IOS, Windows Phone, ...Phone Gap now is built on Cordova
![Page 10: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/10.jpg)
Architecture - Apache Cordova - As Middleware ...
...
![Page 11: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/11.jpg)
Architecture - Apache Cordova - DetailsCordova provides 2 platform independent interfaces:
a. Using device functionalityb. Building to multiple platforms
![Page 12: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/12.jpg)
Architecture - Apache Cordova - Device InterfaceContains a set of plugins for native OSsWeb View accessible via global JS objectsThere is a plugin storage website at
https://cordova.apache.org/plugins/For example: File Plugin
![Page 13: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/13.jpg)
Architecture - Apache Cordova - Build InterfaceJust wraps device APKs
So you still have to download each APKInstalled as a command line NPM packageThis package is used globally when building
applications
![Page 14: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/14.jpg)
Architecture - Apache Cordova - End Result
Just a blank screen
![Page 15: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/15.jpg)
Architecture - Ionic - What it Gives You1.>Cross-Platform Build Tools
2. A UI Framework3. Tools for the Development Process (optional)
![Page 16: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/16.jpg)
Architecture - Ionic - Piecing it All Together1. Cross-Platform Builds2. How The UI Runs
![Page 17: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/17.jpg)
Architecture - Ionic - 1. Cross-Platform Build Tools
![Page 18: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/18.jpg)
Architecture - Ionic - 1. Cross-Platform Build Tools
Ionic CLI
e.g. --livereload
Cordova
iOS SDK
Android SDK
![Page 19: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/19.jpg)
Architecture - Ionic - 2. How The UI Runs
![Page 20: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/20.jpg)
Ionic - What it Gives You1.Cross-Platform Build Tools
2.>A UI Framework
3. Tools for the Development Process (optional)
![Page 21: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/21.jpg)
Ionic - UI Framework - MVC
Model ViewController
![Page 22: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/22.jpg)
Ionic - UI Framework - In addition to MVC1. Directives: An HTML element or attribute with
custom functionality. Can use full MVC2. Services: Wrappers over JavaScript object that use
and provide Dependency Injection3. Router: Maps app urls (routes) to controllers - view
sets
![Page 23: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/23.jpg)
Ionic - UI Framework - Example Tool
![Page 24: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/24.jpg)
Ionic - UI Framework - Example Review1. Index.html loads all app assets2. Calculator Route specifies the Controller and
View
3. The Controller and View are instantiated4.Controller loads the data from the Storage
Service
5. The bindings are then updated in the View
![Page 25: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/25.jpg)
Ionic VS AngularIonic wraps the Angular framework architecture with:1. A Set of UI components2. Mobile Specific Optimizations
![Page 26: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/26.jpg)
All optional
Ionic VS Angular - 1. A Set of UI Components
Ionic Components
(CSS Styles)Ionic Components(Directives & Services)
![Page 27: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/27.jpg)
Ionic VS Angular - 2. Mobile Specific Optimizations1. Directive native optimizations2. Built in practices to help with mobile3. Crosswalk
![Page 28: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/28.jpg)
Ionic VS Angular - Crosswalk3rd Party integration for modern Chromium for
AndroidDirectly packaged in the app deploymentIntegrates into Ionics build processCan I use ___________Yes (On Android)
![Page 29: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/29.jpg)
Ionic - What it Gives You1.Cross-Platform Build Tools
2.A UI Framework
3.>Tools for the Development Process (optional)
![Page 30: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/30.jpg)
Ionic - Tools1. Ionic Creator: GUI designer for Ionic apps2. Ionic Push (Alpha): Push notifications using an API3. Ionic Update (Alpha): Simple app updates on
demand4. Ionic Package (Alpha): Build your app on an
external server5. Ionic Analytics: Web like analytics for your app6. Ionic View: Make your app downloadable in app by
uploading it to the Ionic servers
![Page 31: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/31.jpg)
Ionic - Tools - Ionic View
Ionic Servers
ionic upload
![Page 33: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/33.jpg)
Ionic - The End
![Page 34: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/34.jpg)
Sources 1All Diagrams and pictures were created by Jacob Friesen except for any logos
Webviews:
a. Android: http://developer.android.com/reference/android/webkit/WebView.html
b. iOS: https://developer.apple.com/library/mac/documentation/Cocoa/Reference/WebKit/Classes/WebView_Class/
Screens from Twitter App: https://play.google.com/store/apps/details?id=com.twitter.android&hl=en
Cordova as Middleware:
c. Cordova Logo: https://cordova.apache.org/artwork/d. Android Logo: http://developer.android.com/distribute/tools/promote/brand.htmle. iOS Logo: https://commons.wikimedia.org/wiki/File:Apple_iOS_new.svgf. Windows Logo: https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svgg. Phone Gap Logo: http://buildtool.com/wp-content/uploads/PhoneGapLogo1.png
Cordova info and logo: https://cordova.apache.org/
Ionic
h. Live Reload: http://ionicframework.com/docs/cli/test.html
i. Ionic Logo: https://commons.wikimedia.org/wiki/File:Ionic_Logo.svgj. CLI Tasks: https://github.com/driftyco/ionic-cli/wiki/Ionic-CLIk. Some commands call Cordova directly: https://github.com/driftyco/ionic-cli/blob/master/lib/tasks/cliTasks.js#L144l. https://github.com/driftyco/ionic-cli/blob/master/lib/ionic/cordova.js#L175m. Ionic Tools: http://ionic.io/
![Page 35: Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58729ee21a28ab07208b54f5/html5/thumbnails/35.jpg)
Sources 2What is an APK? https://en.wikipedia.org/wiki/Android_application_package
What is an iPA? https://en.wikipedia.org/wiki/.ipa_(file_extension)
Remote files and pages can be loaded too, but they will have to be whitelisted:a. https://forum.ionicframework.com/t/how-can-we-switch-browsing-between-remote-website-and-local-html-pages-into-io
nic-app/7659b. https://blog.nraboy.com/2015/05/whitelist-external-resources-for-use-in-ionic-framework/c. https://github.com/apache/cordova-plugin-whitelist
Angular MVC: http://www.tutorialspoint.com/angularjs/angularjs_mvc_architecture.htmPouch DB Storage: http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/Local Storage Issues: http://stackoverflow.com/questions/7750857/how-permanent-is-local-storage-on-android-and-iosOriginal Crosswalk Release Note: http://blog.ionic.io/crosswalk-comes-to-ionic/Current Ionic Crosswalk Support: http://ionicframework.com/docs/cli/browsers.htmlIonic Market Release Note: http://blog.ionic.io/introducing-the-ionic-market-buy-and-sell-ionic-starters-plugins-and-themes/
d. August 19, 2015Vysor App: https://chrome.google.com/webstore/detail/vysor-beta/gidgenkbbabolejbgbpnhbimgjbffefm/related