Angular 8 Features with Ivy Explained: What You Should Know?

Ivy is a new way of rendering Angular templates, which is completely different from any available frameworks we have seen, as it is based on the incremental DOM. The Angular team is working hard on a complete rewrite of the renderer responsible for turning the angular template into actual DOM nodes.

what's new in angular 8 ivy renderer featuresThe countdown has already started for the final release of Angular 8. This is why we decided to give an overview of the new features upcoming with the next version of Angular as well as explain some basic concepts behind the Angular project Ivy.

At the time of writing this article, release candidate (RC) version of Angular 8 is released.

The Angular 8.0.0-rc.0 version comes with some bug fixes:

Now, let’s talk about the new project Ivy, an Angular 8 template renderer.

What Is Ivy?

Ivy has been the most discussed subject among angular developers since the time it was announced during Google I/O 2018 by Kara Erickson, who is responsible of the future of Angular.

For the simple reason that Angular 8 Ivy is the Google’s new born, there isn’t much resources talking about it on the internet. So many developers are not aware of Ivy’s purpose or more simply what Ivy is. This blog post aims to help people understand some basics about Angular Ivy and get a simple overview of the project.

Ivy is a new way of rendering Angular templates, which is completely different from any available frameworks we have seen, as it is based on the incremental DOM. The Angular team is working hard on a complete rewrite of the renderer responsible for turning the angular template into actual DOM nodes.

Incremental DOM

Angular Ivy is based on the incremental DOM, which means that every component is compiled into a series of instructions. These instructions are responsible for creating DOM trees and updating them whenever a data change occurs. So the question you need to ask, why incremental DOM and not the virtual DOM?

angular ivy rendering pipeline

Why Incremental DOM

Google team have one goal to achieve: applications have to perform better on mobile devices. As a result two things need to be optimized, the bundle size and the memory footprint.

To reach these goals, the rendering engine Ivy needs:

  • To be Tree Shakable: removes the unused instruction from the bundle at compile time, because the component doesn’t make a reference for it.
  • To have low memory footprint: Only changed components allocate memory, which results in faster compilation and huge memory savings.

When Ivy will be completely ready, it should make Angular apps smaller, faster and simpler.

If you want to learn more about how Google uses incremental DOM, check these two links link1 and link2.

Why Not the Virtual DOM

Using the virtual DOM involves the use of an interpreter. A problem arises here, since the part needed of that interpreter isn’t known at compile time, which means that we have to transfer the entire app to the browser, resulting in a bigger bundle size and low performance.

Also, virtual DOM generates a whole tree from the ground every time you rerender, which leads to a waste of memory.

The Pros of Angular IVY (Per the Angular team)

  • Generated code that is easier to read and debug at run time
  • Smaller builds
  • Delivery of pre-compiled code
  • Faster re-build time
  • enhanced payload size
  • Improved template type checking
  • Great backwards compatibility
  • Rise of meta programming in Angular (new changes with no breaking changes)
  • No need of metadata.json

Some Angular 8 features

  • Creating optimized bundles for modern browsers
  • Creating legacy bundles for older browsers
  • Making the browser load the right set of bundles
  • Automating this all by providing an CLI extension
  • Opt-in telemetry in CLI to allow Angular collects anonymous information during development process.
  • Dependency update on the tools, like Typescript, RxJs, Node, etc.
  • Improved web worker building, which will increase the speed and parallelism ability of your application.

Angular 8 will be released in April/May 2019 and the complete version of Ivy will be available with Angular 9.

Conclusion

I hope this article helps you get an idea about Angular 8 Ivy, the concept of incremental DOM on which it is built, and to understand the Angular team choice of using the incremental DOM instead of the virtual DOM.

If you liked ❤️ the content please share it 📣 with your friends, and stay around for more to come.✌️

Name

Angular,7,Angular 8,1,Best Practices,1,Design,1,Firebase,1,Ionic,1,Java,5,Nodejs,2,Python,1,Restful API,1,Software Development,1,Spring,3,Spring Batch,1,Spring Boot 2,1,Web Development,1,
ltr
item
Programming Tutorials, News and Reviews: Angular 8 Features with Ivy Explained: What You Should Know?
Angular 8 Features with Ivy Explained: What You Should Know?
Ivy is a new way of rendering Angular templates, which is completely different from any available frameworks we have seen, as it is based on the incremental DOM. The Angular team is working hard on a complete rewrite of the renderer responsible for turning the angular template into actual DOM nodes.
https://3.bp.blogspot.com/-0BWF78i6zHI/XMNI7V5VJII/AAAAAAAAAP8/tjg9ByCaa9wvwy6SGAHbzHhB1pVJw4Q_ACLcBGAs/s200/angular-8-ivy-features-what-new.jpg
https://3.bp.blogspot.com/-0BWF78i6zHI/XMNI7V5VJII/AAAAAAAAAP8/tjg9ByCaa9wvwy6SGAHbzHhB1pVJw4Q_ACLcBGAs/s72-c/angular-8-ivy-features-what-new.jpg
Programming Tutorials, News and Reviews
https://www.ninjadevcorner.com/2019/04/angular-8-features-with-ivy-explained-what-you-should-know.html
https://www.ninjadevcorner.com/
https://www.ninjadevcorner.com/
https://www.ninjadevcorner.com/2019/04/angular-8-features-with-ivy-explained-what-you-should-know.html
true
493653397416713395
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy