zymo interactive presents: developing hybrid apps using ionic framework

A Hybrid ApproachTo building mobile applications

Introductions – Adam Larson• Programmer• Professor for UWGB (Adjunct)• Technical Book reviewer for

books about the Unity Engine.• Shipped more than 50 mobile

products.• Originally from the Video Game

industry where I shipped 15 titles.

President and CTO of Zymo Interactive – www.zymo.io

Option Overload

Keep an Eye on React Native• Does not have a release candidate yet only on 0.34• Incredible speed improvements over Ionic.• React Native renders using native components where Ionic renders

using HTML and CSS.• Still too early for production use (In my opinion)

Why hybrid over native

There is really more to it than just time and money, but the decision really is usually made based on them.

The framework you choose needs to enable speed and quality to save money.

Just know you are sacrificing performance when choosing a hybrid approach.

Ionic Framework advantages• Familiar languages (HTML, JavaScript, CSS, SASS)• Uses Angular out of the box• Maintained by a very well funded company out of Madison• Very active open source community• Tons of already developed plugins that enhance the core Ionic

Framework• Deploys very quickly to IOS and Android with very little changes

A few notes• Ionic Framework 2.0 is very close to being released out of Beta• All of my examples will be based on the latest stable version of

Ionic Framework 1.3• I will also be using Angular 1.X in my examples

Ionic Creator

bower install ionic-timepicker –save

ionic plugin add xxx --save

https://github.com/rajeshwarpatlolla/ionic-timepicker

bower install ionic-timepicker –save

ionic plugin add xxx --save

https://github.com/rajeshwarpatlolla/ionic-timepicker

ionic plugin vs bower plugin• Generally used to add native

functionality (camera, gps etc)• Including –save will add this to

your package.json file• Calling ionic state reset will

remove all plugins and platforms and download them again

• Adds angular directives, or functionality• Adds the dependencies to

bower.json if –save is included

Plugins you should probably be using

ionic-native-transitions

https://github.com/shprink/ionic-native-transitions

CAUTION: As of a few days ago the main contributor has backed away from the project

Plugins you should probably be using

cordova-plugin-crosswalk-webview

https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

More performance tips• collection-repeat instead of ng-repeat• Limit number of js files• Cache all templates using Angular Template Cache to speed up

load times• Use data-tap-disabled where possible for faster input speeds• Minify your JavaScript and CSS code using –minify (make sure your

paths are included in the configuration)

Animationsangular.module("app").config( function ($animateProvider) { // By default, the $animate service will check for animation styling // on every structural change. This requires a lot of animateFrame-based // DOM-inspection. However, we can tell $animate to only check for // animations on elements that have a specific class name RegExp pattern // present. In this case, we are requiring the "animated" class. $animateProvider.classNameFilter(/\animated/); })

Thank You!Time for Some Q/A?

adam.larson@zymo.iowww.zymo.io