Ionic Mobile ApplicationsHybrid Mobile Applications Without Compromises

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

Outline (1hr 25m)1. Ionic and Hybrid Mobile Architectures2. Writing Code In Ionic3. The Ionic Ecosystem

Architecture1. Web View2. Cordova3. Ionic

Web View

Ionic (extends)

Cordova

Abstraction For

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

Architecture - Web View - A Non Hybrid Example

Twitter’s Web View

Architecture - Web View - Implications● Two Implications:

○ Modern Hybrid Apps are not hacks○ Hybrid Apps are not necessarily slow

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

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

Architecture - Apache Cordova - As Middleware ...

...

Architecture - Apache Cordova - DetailsCordova provides 2 platform independent interfaces:

a. Using device functionalityb. Building to multiple platforms

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

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

Architecture - Apache Cordova - End Result

Just a blank screen

Architecture - Ionic - What it Gives You1.>Cross-Platform Build Tools

2. A UI Framework3. Tools for the Development Process (optional)

Architecture - Ionic - Piecing it All Together1. Cross-Platform Builds2. How The UI Runs

Architecture - Ionic - 1. Cross-Platform Build Tools

Architecture - Ionic - 1. Cross-Platform Build Tools

Ionic CLI

e.g. --livereload

Cordova

iOS SDK

Android SDK

Architecture - Ionic - 2. How The UI Runs

Ionic - What it Gives You1.Cross-Platform Build Tools

2.>A UI Framework

3. Tools for the Development Process (optional)

Ionic - UI Framework - MVC

Model ViewController

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

Ionic - UI Framework - Example Tool

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

Ionic VS AngularIonic wraps the Angular framework architecture with:1. A Set of UI components2. Mobile Specific Optimizations

All optional

Ionic VS Angular - 1. A Set of UI Components

Ionic Components

(CSS Styles)Ionic Components(Directives & Services)

Ionic VS Angular - 2. Mobile Specific Optimizations1. Directive native optimizations2. Built in practices to help with mobile3. Crosswalk

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)

Ionic - What it Gives You1.Cross-Platform Build Tools

2.A UI Framework

3.>Tools for the Development Process (optional)

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

Ionic - Tools - Ionic View

Ionic Servers

ionic upload

Ionic - Tools - Ionic Market

http://market.ionic.io/

Ionic - The End

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/

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