zymo interactive presents: developing hybrid apps using ionic framework
TRANSCRIPT
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
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
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/); })
