For instance, Ionic 1 ion-spinner components use icon attribute for the spinner type: The components API changed a bit between Ionic 1 and Ionic 2. Here is the list of the most common components: Ionic 2 gives you access to all the components that made Ionic 1 famous, but are now improved and based on Angular >= 2.x. Native scrolling support brings better performance and improves the user experience by helping to ensure a smooth scroll thanks to asynchronous events.
#Ionic angular versions android
It is only enabled by default on Android with Ionic 1 (since December 2015) and enabled on all platforms with Ionic 2. Until now, JavaScript scrolling was necessary, but Chromium (Android) and WKWebView (iOS) WebViews have evolved and now support native scrolling. It is not supported in all the browsers yet, but with a polyfill you can use it right now and enjoy one of the most performant and promising ways to animate the Web. The Web Animations API is a JavaScript API that provides developers with access to the browser’s animation engine. Ionic 1 and Ionic 2 still rely on CSS animations for internal transitions and animations, but as Ionic 2 is based on Angular >= 2.x, developers have access to the new Web Animations (W3C) API via the Angular animation system. Ionic 2, once again, benefits from this performance upgrade, and does so “for free”. As you can see, the performance of Angular >= 2.x is better than Angular 1.x, and is similar to React performance. 1.x, and only 40% more (177ms) with Angular >= 2. If you want a reactive User Interface (UI), DOM manipulation and JavaScript performance is important.įor example, creating 1,000 rows in a table takes 126 milliseconds with vanilla JavaScript, 110% more (264ms) with Angular. Faster DOM PerformanceĪngular Document Object Model (DOM) manipulation has evolved a lot.
#Ionic angular versions how to
If you want to know more about how to get a performant Ionic1 application, I suggest reading this Ultimate AngularJS and Ionic performance cheat sheet. It is basically already optimized for you. This strategy also avoids unnecessary rendering of components’ subtrees. Using the right change detection strategy ( OnPush or Default) in your own components is of paramount importance if you want to control the performance of your application.Īll Ionic 2 components use the OnPush strategy, meaning the change detection is not performed all the time but, instead, only when the inputs change. In Angular >= 2.x, change detection is always performed from top to bottom.
Instead, Angular >= 2.x relies on Zone.js to track application changes (both synchronous and asynchronous).Ĭhange Detection in Angular >= 2.x is worth exploring to understand how things work under the hood. The new version of Angular dropped the famous and decried digest cycle (tracking and testing every variable of the app at every change). With Angular >= 2.,x applications are pretty much performant out of the box.
With Angular 1.x, to get performant applications required a lot of deep framework knowledge (like $watch, One-time binding, and so on). The performance boost you get just by using Angular >= 2.x alone is significant. Ionic 1 is based on Angular 1.x, and Ionic 2 is based on Angular >= 2.x. From my 2+ years of experience using Ionic 1, here’s what this will mean in practical terms. With more than 27,000 stars on GitHub, it has risen to become one of the top 50 most popular open source projects worldwide.Īnd since the stable version of Ionic 2 was recently announced, it’s the perfect time for engineers to analyze and understand the differences between Ionic 2 and Ionic 1.Īt a high level, Ionic 2 is a complete rewrite of the Ionic 1 project with Angular >= 2.x. The Ionic project is rapidly gaining in popularity.
0 kommentar(er)
