Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
•Download as PPTX, PDF•
1 like•2,357 views
A presentation on Ionic Mobile Applications presented at Boca JS: http://www.meetup.com/Boca-JS/events/227150049/. Traditionally, building Hybrid Mobile Apps with JavaScript (or other languages) was a middle ground between Mobile websites and Mobile Applications. Generally providing a more native like experience than websites, but with a reduced user experience compared to applications due to issues like slow animations or limited mobile OS access. The Ionic framework was created to provide hybrid development that does not compromise; matching native user experience while still allowing tools and techniques used on websites.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Similar to Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises (20)
Recently uploaded
Recently uploaded (20)
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
- 1. Ionic Mobile Applications Hybrid Mobile Applications Without Compromises
- 2. 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
- 3. Outline (1hr 25m) 1. Ionic and Hybrid Mobile Architectures 2. Writing Code In Ionic 3. The Ionic Ecosystem
- 4. Architecture 1. Web View 2. Cordova 3. Ionic Web View Ionic (extends) Cordova Abstraction For
- 5. Architecture - Web View UI component There can be any number of them Any size including full screen ● Displays a single web page ○ Which can be loaded remotely or locally
- 6. Architecture - Web View - A Non Hybrid Example Twitter’s Web View
- 7. Architecture - Web View - Implications ● Two Implications: ○ Modern Hybrid Apps are not hacks ○ Hybrid Apps are not necessarily slow
- 8. Architecture - Apache Cordova The simplest hybrid app is a full screen web view But the OS communication is platform dependant So are the build processes This is where Cordova comes in
- 9. Architecture - Apache Cordova - Overview Originally an Open Sourced version of Phone Gap Now managed by the Apache Software Foundation Supports Android, IOS, Windows Phone, ... Phone Gap now is built on Cordova
- 10. Architecture - Apache Cordova - As Middleware ... ...
- 11. Architecture - Apache Cordova - Details Cordova provides 2 platform independent interfaces: a. Using device functionality b. Building to multiple platforms
- 12. Architecture - Apache Cordova - Device Interface Contains a set of plugins for native OSs Web View accessible via global JS objects There is a plugin storage website at https://cordova.apache.org/plugins/ For example: File Plugin
- 13. Architecture - Apache Cordova - Build Interface Just wraps device APKs So you still have to download each APK Installed as a command line NPM package This package is used globally when building applications
- 14. Architecture - Apache Cordova - End Result Just a blank screen
- 15. Architecture - Ionic - What it Gives You 1. >Cross-Platform Build Tools 2. A UI Framework 3. Tools for the Development Process (optional)
- 16. Architecture - Ionic - Piecing it All Together 1. Cross-Platform Builds 2. How The UI Runs
- 17. Architecture - Ionic - 1. Cross-Platform Build Tools
- 18. Architecture - Ionic - 1. Cross-Platform Build Tools Ionic CLI e.g. --livereload Cordova iOS SDK Android SDK
- 19. Architecture - Ionic - 2. How The UI Runs
- 20. Ionic - What it Gives You 1. Cross-Platform Build Tools 2. >A UI Framework 3. Tools for the Development Process (optional)
- 21. Ionic - UI Framework - MVC Model ViewController
- 22. Ionic - UI Framework - In addition to MVC 1. Directives: An HTML element or attribute with custom functionality. Can use full MVC 2. Services: Wrappers over JavaScript object that use and provide Dependency Injection 3. Router: Maps app urls (routes) to controllers - view sets
- 23. Ionic - UI Framework - Example Tool
- 24. Ionic - UI Framework - Example Review 1. Index.html loads all app assets 2. Calculator Route specifies the Controller and View 3. The Controller and View are instantiated 4. Controller loads the data from the Storage Service 5. The bindings are then updated in the View
- 25. Ionic VS Angular Ionic wraps the Angular framework architecture with: 1. A Set of UI components 2. Mobile Specific Optimizations
- 26. All optional Ionic VS Angular - 1. A Set of UI Components Ionic Components (CSS Styles) Ionic Components (Directives & Services)
- 27. Ionic VS Angular - 2. Mobile Specific Optimizations 1. Directive native optimizations 2. Built in practices to help with mobile 3. Crosswalk
- 28. Ionic VS Angular - Crosswalk 3rd Party integration for modern Chromium for Android Directly packaged in the app deployment Integrates into Ionics build process Can I use ___________Yes (On Android)
- 29. Ionic - What it Gives You 1. Cross-Platform Build Tools 2. A UI Framework 3. >Tools for the Development Process (optional)
- 30. Ionic - Tools 1. Ionic Creator: GUI designer for Ionic apps 2. Ionic Push (Alpha): Push notifications using an API 3. Ionic Update (Alpha): Simple app updates on demand 4. Ionic Package (Alpha): Build your app on an external server 5. Ionic Analytics: Web like analytics for your app 6. Ionic View: Make your app downloadable in app by uploading it to the Ionic servers
- 31. Ionic - Tools - Ionic View Ionic Serversionic upload
- 32. Ionic - Tools - Ionic Market http://market.ionic.io/
- 33. Ionic - The End
- 34. Sources 1 All 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: a. Cordova Logo: https://cordova.apache.org/artwork/ b. Android Logo: http://developer.android.com/distribute/tools/promote/brand.html c. iOS Logo: https://commons.wikimedia.org/wiki/File:Apple_iOS_new.svg d. Windows Logo: https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg e. Phone Gap Logo: http://buildtool.com/wp-content/uploads/PhoneGapLogo1.png Cordova info and logo: https://cordova.apache.org/ Ionic
- 35. Sources 2 What 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- ionic-app/7659 b. 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.htm Pouch 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-ios Original Crosswalk Release Note: http://blog.ionic.io/crosswalk-comes-to-ionic/ Current Ionic Crosswalk Support: http://ionicframework.com/docs/cli/browsers.html Ionic Market Release Note: http://blog.ionic.io/introducing-the-ionic-market-buy-and-sell-ionic-starters-plugins-and-themes/ a. August 19, 2015 Vysor App: https://chrome.google.com/webstore/detail/vysor-beta/gidgenkbbabolejbgbpnhbimgjbffefm/related
Editor's Notes
- - Ionic is a Hybrid framework and ecosystem made by Drifty Co. - In the future certain parts of it (Probably the tools) will become paid for non Open Source users. - And although it was created by a company most of the code and tools are all Open Source. - You can view the base Ionic code here: https://github.com/driftyco/ionic
- - During this presentation, I am going to try and cover all of what Ionic encompasses with a focus on the UI framework. - First, I will start off with how Ionic fits into general Hybrid Mobile development. - Then I am going to talk about writing code in Ionic. - Finally, a little bit about the surrounding tools.
- - Often the architectural aspect of Hybrid mobile development is not properly explained which makes it seem like magic. - So today I am going to give an overview of how Ionic fits into the general architecture of Hybrid development. - Ionic applications are implemented by using Cordova which provides an abstraction for a Web View. - On top of that, Ionic provides a set of UI tools and extensions to the Cordova tools. - I should also mention that, during this talk I will only be talking about iOS and Android to keep things simple. But Ionic does build for more platforms like Windows Phones.
- - Android and iOS both give you a Web View UI component based on implementations of the Webkit engine. - There can be any number of these. - They can be any size necessary including full screen. - Each Web View is just a viewer using the device's default rendering engine with no user controls. - And this Web View just displays a single webpage that can be loaded remotely or locally - These local pages are the basis of hybrid apps.
- - Web Views are used in many mobile applications for example, Twitter’s Webview. - For example when I tap a link, Twitter opens up a Web View rendering the page to keep you in the app. - This tactic decreases the chance that users will leave their app.
- - All of these points lead to 2 important implications: 1. Modern Hybrid Apps are not built on hacks, they are valid Android and iOS applications. Identical in all packaging, distribution and so on to native apps. Technically, Hybrid apps are native apps. 2. Hybrid Apps do not need to be slow, they can rely on as much or as little native app support as necessary through an interfacing layer.
- - So just by creating an empty app with a full screen Web View and local assets, you could have your own hybrid app. - But the empty apps would have vastly different platform communication protocols, folder locations and other details due to the differences in underlying Operating Systems. - They would also have completely different build strategies. - This is where Cordova comes in; It provides a unified build process independent of OS and a unified OS communication layer.
- - Cordova was released as an Open Source version of Phone Gap (from Adobe Systems). - Now managed by the Apache Software Foundation. - It supports Android, iOS, Windows Phone, Blackberry and so on. - Now Phone Gap itself just uses Cordova directly in the same way that Ionic does; as a lower level of abstraction.
- - In fact a lot of Hybrid frameworks use Cordova. - So Cordova can be thought of as a common middleware to a lot of Hybrid App Frameworks.
- - Cordova becomes a middleware layer by Providing two platform independent interfaces: A unified interface for accessing device functionality. A unified interface for building apps to multiple targets.
- - The Device interface is Implemented through a set of plugins implemented in native languages. - These plugins are then accessible in the Web View via a global JS object. - There is a plugin storage website at https://cordova.apache.org/plugins/. *Go to site and type file, then select the file plugin* - For example, https://www.npmjs.com/package/cordova-plugin-file - As you can see if defines the file cordova.file object.
- - The build interface just wraps device SDK commands with a npm package for Node.js. - NPM just stands for Node Package Manager. - Node.js is a JavaScript wrapper over Chrome’s V8 JavaScript engine which is written in C++. - The important point here is that you still have to download and install all platform build tools. - For example to build iOS applications you need to download and install all the iOS tools. Since these can only be used on Mac OS X, iOS cordova applications can only be built on OS X. - So Cordova is installed as a command line package. - Then that package is used to create and install Cordova applications. - I will talk more about the build process in the Ionic section.
- - At the end of the cordova process you just get a blank screen with just the Cordova logo. - Which is great if you want to build an app with a unique interface involving almost no standard components. - It is also great if you have a previously made a mobile interface and want to package it as a mobile app. Although you will not get the smoothness and feel of a good Hybrid app. - But it would save a lot of time to have a preset of UI components and a standard way to structure code in the Web View if you are making a new somewhat standard interface. - This is where Ionic comes in.
- - Specifically Ionic provides: Build tools for each platform. A framework and that includes basic UI components. Optional tools to help with the development process.
- So in terms of architecture there are 2 things to cover: 1. Cross Platform builds 2. How the UI Runs
- - I think it is most instructive to switch over to a demo of creating a sample app to demonstrate the tools. *Transfer to CLI demo* - Ionic just like Cordova is implemented as a npm package for Node.js. # I have already done npm install -g ionic cordova ios-sim To avoid using the connection here. ionic start todo tabs (Involves some network connections) - This creates an empty app using a predefined starter template. - The starter template just defines some basic css and html to render a sample application. - You can choose a simple tab based ui, a one with a side menu and so on. - Third party starters can also be installed. - So to make it runnable a platform must be added. ionic platform add browser - Then just specify the platform to run. ionic run browser - Since the UI components are just a web application this can run directly in a browser. - But browsers will generally have no implementation of mobile features and they can differ a lot from phone Web View engines. - So it is best to run the application directly on the relevant platform. ionic platform add android - Note the platform additions just install application content for the relevant platform. You need to install the platform tools first for yourself. - At this point the code could be run on a platform emulator, but they are slow and have other issues. So it is best to just run the app directly on devices. (ionic emulate android) ionic run android - Finally, it is possible to load the app on the fly which reduces development cycle time. ionic run android --livereload - To demonstrate the live reload, I will just modify a single view template, nano www/templates/tab-dash.html *add “ionics”* - Finally, live reload does not work when the application itself needs to be recompiled. This would have for example when an app has a plugin added to it.
- - At a high level Ionic just does the following: - Ionic wraps cordova with extra functionality. - Once the functionality is wrapped (e.g. livereload), Cordova is called and managed by Ionic. - Then Cordova calls the platform specific SDK.
- - Mobile applications are just archive files of some kind -.apk for Android and .ipa for Apple. - So all of the UI code is stored directly in the application - Additionally, no conversions are done by Cordova or Ionic to the UI code that you write, it is just used directly. - The application starts a web view which just loads index.html from the asset folder. - Then the index.html file loads assets just like running a local browser would do. - Remote files and pages can be loaded too, but they will have to be whitelisted. - Device functionality is accessed by calling cordova plugins in JavaScript code. - The Cordova interface is injected as a global variable containing all the installed plugins. - When a cordova plugin is called it translates any arguments back and forth to and from the native code. The native code does the actual operations.
- As a reminder Ionic gives you: Build tools for each platform A framework and that includes basic UI components Optional tools to help with the development process 1. was already covered in the Ionic architecture portion, so on to 2.
- - Firstly Ionic follows a basic Model View Controller (MVC) pattern. - Which is models store the data to be accessed in the application. - Views are what the user sees. - And the controller modulates interactions between the model and view, by only allowing the view and model to use it directly. - So the view should never interact with the model and vice versa.
- - Layering on top of that MVC Ionic provides: 1. Directives: An HTML element or attribute with custom functionality. Can use full MVC. 2. Services: Wrappers over JavaScript objects that use and provide Dependency Injection. Any service can be injected into any other service or controller. So new or test versions can be swapped out as long as they implement the same interface. These provide general utilities for the application. They can serve as models for the application. 3. Router: Maps app locations in the form or url paths to controller-view sets. When the route is visited the controller and view are initialized.
- This used a real app demo of parts non Open Source code, so this part cannot be shown.
- So using the Calculator feature MVC was demonstrated: Index.html loads all the initial app assets. That calculator route specifies the view and controller to load. This route is is triggered when the user navigates to a url. For example on a menu click. The controller and view are instantiated. The controller then loads the data every second using the storage service. The bindings are then updated on each load.
- - That workflow was probably very familiar to those of you that have used Angular - So If Ionic is so similar to Angular why not just use Angular in a Cordova application instead? - The answer is that Ionic wraps the Angular application architecture and adds: 1. A set of UI components (whereas Angular provides no visual elements). 2. Mobile optimizations.
- - Firstly, all of these are optional, you can just add other libraries if you prefer. - For example, I prefer to use Font Awesome for icons over Iconic. - So you have iconicons for icons. - Ionic components that are just CSS styles for base HTML like buttons. - Finally, there are a set of basic components that provide things like popups. *Click on “Ionic Components” to visit the below page* - http://ionicframework.com/docs/api/service/$ionicPopup/ - These components are just directives or services. - As a reminder directives are HTML elements with additional functionality. Just like with Angular you can include 3rd party directives or create your own. - They are loaded with the main Ionic bundle required to load Ionic in general. - These components have very basic styling, because the intent is for you to customize them with your own theming. - Additionally, it is a good idea to use these components over other 3rd party ones, because some provide mobile specific speedups. For example, native scrolling can be added to any ion-view component which makes anything in that appear very fluid. - Finally, since mobile apps need to be simple, I have found that with some styling these cover ~%90 of my app UI component needs. The remainder is covered by just including 3rd party libraries usually from Angular.
- - Secondly, mobile specific optimizations. - So there are essentially 3 main optimizations Ionic gives: Directive native optimizations that add things like native device scrolling. Built in practices to help with mobile. These are practices like the view and controller caching I mentioned while doing the app demo. And finally there is Crosswalk.
- - This is 3rd party Open Source project that allows you to use modern Chromium in any Android version - Although Crosswalk supports iOS, unfortunately the Ionic integration does not yet. Although there are plans for that. - It is done by packaging a miniature version of Chromium to directly run your app instead of using the default Android specific browser rendering engine. - It adds an extra ~15mb to your app size which sucks, but it basically eliminates all older Android browser issues you could encounter. - I am actually using this for the app I demoed, because despite the larger size the user experience is vastly more smooth on older Androids like 4.0. - This support is added directly via the command line tools. - Now I don’t have time to demo a full integration of Crosswalk, but I know from experience that the decision to use or not use Crosswalk should be made as early as possible. It can be very annoying to add to projects without it due to build issues. You have to fiddle around with a lot of config and Java build issues. Which is not fun. - So you can use if you're using Crosswalk and on Android. *Click screen to get yes for Can I use*
- Once again Ionic gives you: Build tools for each platform. A framework and that includes basic UI components. Optional tools to help with the development process. We covered the build tools and frameworks, so the last part is the extra tools.
- - I should mention that Ionic was created by a company so eventually most of the tools will cost money to teams and non Open Source projects. - There are a bunch of tools beyond the Ionic CLI made by the Ionic team, but I have not had personal experience with most of these. - So I will just give an overview of them and explain how they would be useful based my experiences building an app using Ionic. You can visit ionic.io for more info. - Ionic Creator: A paid Browser based app to layout apps using standard Ionic components. - The cost is free for one person though and pretty cheap for teams ($22/month for 5 ppl). - But I find that mobile app layouts are simple so things like this do not really save time. - Ionic Push: Allows you to create push notifications to devices. - They provide an API which you can target which then pushes to the iOS and Android phones of your users. - This is a very useful system, but is in Alpha and the Ionic team recommends that you do not use it in production apps. So it is more of a thing to keep track of. - Ionic Update: Simple app updates can be made on demand. - Basically the app assets can be reloaded, so the Apple and Android deploys can be skipped. - Anything that requires new or modified native content cannot use this as that stuff requires the app to be recompiled. - I found that usually when I was creating a feature, it would involve native functionality. And even when it did not I wanted to guarantee the app and build worked by doing a full recompile. - So unless binary recompiles can be added, I think this is more of a novelty. - This is also Alpha and not recommended for production by the Ionic team. - Ionic Package: Build your app on an external server. - This is probably the most alpha of all the services as there is no guarantee of how long a build could take. Which makes it inappropriate for most real projects. - Since it is so Alpha it is hard to judge the potential usefulness, but I have found the build process using the base Ionic CLI is quite trivial past initial setup of the platform specific SDK. - Ionic Analytics: Web like analytics for your app. - Tracks when users are using your app, what pages they navigate to and so on. - Individual custom events can also be tracked by putting them directly in an app. - So this is useful. - Ionic View: Make your app downloadable in an App via Ionic based servers. - I think this is the most useful tool right now, so I will explain it in more detail.
- - Firstly, you get everyone that you want to show the app to, to download the Ionic View app on their various platforms. - Then you give permission to a set of people to access your app by email address, if they don’t have an Ionic account there will be instructions in that email on how to download the App and create an Ionic Account for them to login. - Whenever you want to show other people your app, you just do ionic upload. - Once that completes then anyone can just use the Ionic app to download any updates. - The Ionic View app just runs the HTML/CSS and JS assets and provides a few plugins. There are plans to support more in the future. - Despite the lack of native integration I found this to be a huge time saver over having to deploy an app and tell non developer users of how they can download and install an app. - It allowed me to rapidly show updates to the visuals and certain app flows almost as fast as you would with a shared web app integration server.
- **Go to http://market.ionic.io/** - Finally there is the Ionic Market which hosts free and paid app starters, plugins and themes. - There is not a ton of additions right now since the marketplace just launched a few months back, but the free plugins and starters can give you more detailed examples than the API might. - Also, since the Ionic team are in the process of just promoting the framework, they take no cut on any sales for the Market unlike many software marketplaces these days.
- - There are a lot of aspects to Ionic development, so even in a 1 hour presentation like this, I had to skip or just give an overview of some aspects. - Any questions?