Empfohlen
Weitere ähnliche Inhalte
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
Ionic applications tuning
- 1. Ionic applications tuning by Veselin Dimitrov
- 2. Who am I? ● Veselin Dimitrov ● Lead Software Engineer at Snapp Inc. ● 2+ years experience with full-stack js and hybrid mobile apps development ● Love to learn new technologies and share experience (blogging, speaking, training)
- 3. What is the problem with the Ionic apps? ● DOM interaction ● AngularJS performance ● Layout and huge lists rendering ● Heavy animations ● Native UI components ● Support old devices
- 4. So everything is all about the WebView? ● The WebView is the heart of the hybrid apps ● Different WebViews ○ iOS ■ UIWebView (old) ■ WKWebView with Nitro (current) ○ Android ■ WebView (old) ■ Updatable WebView with Chromium (current) ● What was the problem with the old ones? ○ Not frequently improved ○ Not performant UI rendering and javascript engines
- 5. What is the benefit of the new WebViews? ● Better APIs support ○ CSS3 ○ Web Workers ○ WebRTC ○ WebGL ○ and much more... ● More performant UI rendering ● Boosted JavaScript execution ● Where is the catch?
- 6. So what we can do for our Ionic apps? ● Be careful with memory and compute usage ● Performance optimizations ○ reduce watchers, optimize lists, avoid heavy libs, compress and minify, optimize graphics ● Caching (images, views etc) ● Animations (only CSS3) ● Prevent common mistakes (follow best practices) ● Use Crosswalk
- 7. Ionic 2 performance optimizations ● Angular 2 ● Animation System ● Native scrolling ● Web workers ● Templates offline compiling ● Drastic file size reduction (10KB for Hello World app)
Hinweis der Redaktion
- Ionic Applications Tuning Agenda: 1. Introduce yourself 2. Tell the audience what is the problem with the hybrid apps (WebView) /* Performance is usually considered to be one of the major disadvantages of a hybrid mobile app. This is mostly true if your app has a lot of heavy animations, contains huge scrolling lists and needs to run on old devices. */ -- Include something to fill the gap like what is the direction on which we should focus when we are talking about hybrid apps optimization 3. Show them some graphs and statistics about how browsers (chromiun, v8) changed oved time 4. Tell them briefly what are the features and new APIs that hybrid apps can benefit from (Web Workers, CSS3, ) 5. Tell them how they can optimize their existing Ionic applications (ionic and angular optimizations, plugins for native UI components, Crosswalk, etc) /* https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/ Optimize For Performance */ Look at the Ionic 2 Announcment article 7. Just point that Ionic 2 change a lot in that direction and what is coming soon 6. Show some showcases (Snapp App Builder, Rio 2016, etc) 7. Summarize and shorly pass it to Stilian TODO: http://readwrite.com/2015/02/27/native-vs-web-apps-ceasefire/ http://www.universalmind.com/blog/technology/technology-trends-of-2015-part-5-hybrid-apps/ http://monaca.mobi/en/blog/crosswalk-performance/ http://www.html5rocks.com/en/tutorials/appcache/beginner/ http://docs.webplatform.org/wiki/tutorials/workers_basics http://kindofcode.com/web-workers-in-angular/ http://developer.telerik.com/featured/flip-that-app-hybrid-mobile-to-javascript-native/ http://developer.telerik.com/products/offline-support-for-hybrid-web-and-nativescript-apps/ http://developer.telerik.com/featured/native-or-hybrid-the-path-of-least-resistance/ http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/ http://developer.telerik.com/featured/securing-phonegapcordova-hybrid-mobile-app/ http://developer.telerik.com/products/appbuilder/web-vs-hybrid-vs-native-apps-pick-2015/ http://developer.telerik.com/products/appbuilder/five-tips-build-fast-hybrid-apps/
- Main problems Experience is not smooth enough (animations, transitions, single threaded, workers, mojs) Browser gestures vs Native mobile gestures (hammerjs) Native components Big binary size (crosswalk) UI diverge for different platforms (android, ios) AngularJS watchers using of track by in lists
- How to solve them Performance optimizations (collection-repeat (view-hold pattern)) remove watchers - bindonce
- http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/ https://forum.ionicframework.com/t/lack-of-dom-caching-killing-performance-on-slower-devices/4572 http://bcliks.blogspot.bg/2015/05/ionic-apps-improve-performance.html http://stackoverflow.com/questions/29070389/ionic-framework-mobile-application-performance-issue http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/ http://www.betsmartmedia.com/what-i-learned-building-an-app-with-ionic-framework http://jobs.ionic.io/job/6637ab https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic https://www.airpair.com/javascript/posts/a-year-using-ionic-to-build-hybrid-applications http://stackoverflow.com/questions/22245050/what-are-the-drawbacks-when-using-ionic-framework-or-onsenui-only-as-hosted-weba https://blog.nraboy.com/2015/11/nativescript-vs-ionic-framework-should-you-switch/ http://www.raymondcamden.com/2014/07/28/my-perspective-of-working-with-the-ionic-framework/ http://www.thomasmaximini.com/2015/01/12/improving-scroll-performance-for-lists-in-ionic-framework.html http://www.gajotres.net/speed-up-your-ionic-application-using-these-techniques/ https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135 http://coenraets.org/blog/2013/10/top-10-performance-techniques-for-phonegap-and-hybrid-apps-slides-available/ http://blog.scottlogic.com/2014/12/12/html5-android-optimisation.html http://www.bradcypert.com/5-things-you-should-know-before-deploying-your-ionic-app/ http://blog.teamtreehouse.com/ionic-reigniting-native-vs-html5-debate http://kcdipesh.com.np/improve-your-ionicframework-performance-with-template-caching/ Coming next: AngularJS performance optimization...