zymo interactive presents: developing hybrid apps using ionic framework
TRANSCRIPT
![Page 2: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/2.jpg)
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
![Page 4: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/4.jpg)
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)
![Page 5: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/5.jpg)
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.
![Page 6: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/6.jpg)
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
![Page 7: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/7.jpg)
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
![Page 9: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/9.jpg)
bower install ionic-timepicker –save
ionic plugin add xxx --save
https://github.com/rajeshwarpatlolla/ionic-timepicker
![Page 10: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/10.jpg)
bower install ionic-timepicker –save
ionic plugin add xxx --save
https://github.com/rajeshwarpatlolla/ionic-timepicker
![Page 11: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/11.jpg)
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
![Page 12: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/12.jpg)
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
![Page 13: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/13.jpg)
Plugins you should probably be using
cordova-plugin-crosswalk-webview
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
![Page 14: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/14.jpg)
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)
![Page 15: Zymo Interactive Presents: Developing Hybrid Apps Using Ionic Framework](https://reader035.vdocuments.net/reader035/viewer/2022062412/58a4e41b1a28ab34318b7353/html5/thumbnails/15.jpg)
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/); })