{"id":1491,"date":"2023-09-21T05:00:00","date_gmt":"2023-09-21T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1491"},"modified":"2023-09-15T14:59:54","modified_gmt":"2023-09-15T21:59:54","slug":"what-is-the-ivy-engine","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-the-ivy-engine\/","title":{"rendered":"What is the Ivy engine?"},"content":{"rendered":"\n<p>You&#8217;ve probably heard about the <a href=\"https:\/\/angular.io\/guide\/glossary#ivy\" target=\"_blank\" rel=\"noopener\" title=\"\">Ivy engine<\/a> if you&#8217;ve been working with Angular for some time. Ivy is the code name of Angular&#8217;s current compilation and rendering pipeline.<\/p>\n\n\n\n<p>Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the browser, using a second compiler called the <a href=\"https:\/\/angular.io\/guide\/glossary#view-engine\" target=\"_blank\" rel=\"noopener\" title=\"\">View Engine<\/a>. This was done for performance reasons in the past, but the toolchain and the framework evolved for much better performance using the Ivy Engine.<\/p>\n\n\n\n<p>View Engine was deprecated in version 9 and removed from the framework in version 13. Ivy is the only option now and results in:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Faster builds and smaller build output<\/strong>. Some applications became up to 80% smaller\/quicker when they started using Ivy &#8211; mostly because the View Engine compiler doesn&#8217;t need to be shipped to the browser anymore, but also because of the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/anti-pattern-not-using-production-builds-to-deploy-production-code\/\" target=\"_blank\" rel=\"noopener\" title=\"\">improved tree shaking<\/a>.<\/li>\n\n\n\n<li><strong>Faster runtime experience<\/strong> &#8211; The application loads faster since components no longer need to be compiled in the browser.<\/li>\n<\/ul>\n\n\n\n<p>If you&#8217;re stuck with an older version of Angular, you can look at this <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-update-my-version-of-angular\/\" target=\"_blank\" rel=\"noopener\" title=\"\">guide on upgrading Angular<\/a>. If the guide doesn&#8217;t work, 99% of the time, the problem comes from your dependencies, and following these <a href=\"https:\/\/blog.angulartraining.com\/how-to-pick-the-right-dependencies-for-your-angular-application-328ce637b982?sk=d6d83d6605b1adab22409e54d2cbe1bd\" target=\"_blank\" rel=\"noopener\" title=\"\">best practices to pick your dependencies<\/a> would help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;ve probably heard about the Ivy engine if you&#8217;ve been working with Angular for some time. Ivy is the code name of Angular&#8217;s current compilation and rendering pipeline. Before Ivy, Angular used a two-step process: Building a project would compile all Typescript code to Javascript. Then HTML templates would get compiled at runtime in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20],"tags":[],"class_list":["post-1491","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1491"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1491\/revisions"}],"predecessor-version":[{"id":1492,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1491\/revisions\/1492"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}