Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework

137 views

Published on

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

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework

  1. 1. A Hybrid Approach To building mobile applications
  2. 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. 3. Option Overload
  4. 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. 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. 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. 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. 8. Ionic Creator
  9. 9. bower install ionic-timepicker –save ionic plugin add xxx --save https://github.com/rajeshwarpatlolla/ionic-timepicker
  10. 10. bower install ionic-timepicker –save ionic plugin add xxx --save https://github.com/rajeshwarpatlolla/ionic-timepicker
  11. 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. 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. 13. Plugins you should probably be using cordova-plugin-crosswalk-webview https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
  14. 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. 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. 16. Thank You! Time for Some Q/A? adam.larson@zymo.io www.zymo.io

×