Zymo Interactive's President Adam Larson gave an in-depth presentation on Ionic Framework for Hybrid App Development at the Technology Hub Conference in Appleton, Wisconsin. Visit Zymo Interactive to learn about our custom development team and capabilities! www.zymo.io

1. A Hybrid Approach
To building mobile applications

2. 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

3. Option Overload

4. 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)

5. 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.

6. 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

7. 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

8. Ionic Creator

9. bower install ionic-timepicker –save
ionic plugin add xxx --save
https://github.com/rajeshwarpatlolla/ionic-timepicker

10. bower install ionic-timepicker –save
ionic plugin add xxx --save
https://github.com/rajeshwarpatlolla/ionic-timepicker

11. 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

12. 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 

13. Plugins you should probably be using
cordova-plugin-crosswalk-webview
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

14. 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)

15. Animations
angular.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/);
}
)

16. Thank You!
Time for Some Q/A?
adam.larson@zymo.io
www.zymo.io