{"id":1521,"date":"2022-01-04T14:10:03","date_gmt":"2022-01-04T13:10:03","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1521"},"modified":"2022-01-04T14:10:03","modified_gmt":"2022-01-04T13:10:03","slug":"aot-and-jit-compiler-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/01\/04\/aot-and-jit-compiler-in-angular\/","title":{"rendered":"AOT and JIT Compiler in Angular ?"},"content":{"rendered":"\n<p>An angular application mainly consists of HTML templates, their components which include various TypeScript files.<\/p>\n\n\n\n<p>Whenever we run over an application, the browser cannot understand the code directly (<em>Because of component, new directive, etc.. )<\/em> hence we have to compile our code.<\/p>\n\n\n\n<p>We have 2 alternative  to do it : <strong>AOT<\/strong> (Ahead of Time Compiler) or<strong> JIT<\/strong> (Just in Time Compiler)<\/p>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">What is Ahead of Time (AOT) compiler ?<\/span><\/strong><\/h4>\n\n\n\n<p><em>All technologies Ahead of Time is a process of compiling higher-level language or intermediate language into a native machine code, which is system dependent.<\/em><\/p>\n\n\n\n<p>In simple words, when you serve\/build your angular application, the Ahead of Time compiler converts your code during the build time before your browser downloads and runs that code.<em><span class=\"has-inline-color has-vivid-cyan-blue-color\"> From Angular 9, by default compiling option is set to true for ahead of time compiler. \u00a0<\/span><\/em><\/p>\n\n\n\n<h5><strong>Why should you use the Ahead of Time compiler ?<\/strong><\/h5>\n\n\n\n<ul><li>When you are using Ahead of Time Compiler, compilation only happens once, while you build your project.<\/li><li>We don\u2019t have to ship the HTML templates and the Angular compiler whenever we enter a new component.<\/li><li>It can minimize the size of your application.<\/li><li>The browser does not need to compile the code in run time, it can directly render the application immediately, without waiting to compile the app first so, it provides quicker component rendering.<\/li><li>The Ahead of time compiler detects template error earlier. It detects and reports template binding errors during the build steps before users can see them.<\/li><li>AOT provides better security. It compiles HTML components and templates into JavaScript files long before they are served into the client display. So, there are no templates to read and no risky client-side HTML or JavaScript evaluation. This will reduce the chances of injections attacks<\/li><\/ul>\n\n\n\n<h5><strong>How to compile our app in ahead of time compiler:<\/strong><\/h5>\n\n\n\n<p>We don\u2019t have to do much, because from angular 9 default compiling option is set to Ahead of time. Just add \u2013AoT at the end. (<strong><em> ng serve &#8211;aot<\/em><\/strong>.)<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">What is the Just in Time (JIT) compiler ?<\/span><\/strong><\/h4>\n\n\n\n<p><em><strong>Just in Time<\/strong><\/em>, provides compilation during the execution of the program at a run time before execution. In simple words, (template) code get compiles when it\u2019s needed, not at the build time.<\/p>\n\n\n\n<h5><strong>Why and When Should you use Just In Time Compiler ?<\/strong><\/h5>\n\n\n\n<ul><li>If you have a big project or a situation where some of your components don\u2019t come in use most of the time then you should use the Just in time compiler.<\/li><li>Just in Time compiler is best when your application is in local development.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4><strong><span class=\"has-inline-color has-vivid-red-color\">Comparison between Ahead of Time (AOT) and Just in Time (JIT) <\/span><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\"><strong>JIT<\/strong><\/td><td class=\"has-text-align-left\" data-align=\"left\"><strong>AOT<\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">JIT downloads the (<strong>Angular<\/strong>)compiler and compiles code exactly before Displaying in the browser.<\/td><td class=\"has-text-align-left\" data-align=\"left\">AOT has already complied with the code while building your application, so it doesn\u2019t have to compile at runtime.<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Loading in JIT is slower than the AOT because it needs to compile your application at runtime.<\/td><td class=\"has-text-align-left\" data-align=\"left\">Loading in AOT is much quicker than the JIT because it already has compiled your code at build time.<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">JIT is more suitable for development mode.<\/td><td class=\"has-text-align-left\" data-align=\"left\">AOT is much suitable in the case of Production mode<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Bundle size is higher compare to AOT.<\/td><td class=\"has-text-align-left\" data-align=\"left\">Bundle size optimized in AOT, in results AOT bundle size is half the size of JIT bundles.<\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">You can run your app in JIT with this command:<br><em><strong>ng build<\/strong><\/em> OR<strong><em> ng serve<\/em><\/strong><\/td><td class=\"has-text-align-left\" data-align=\"left\">To run your app in AOT you have to provide \u2013aot at the end like:<br><strong><em>ng build &#8211;aot<\/em><\/strong> OR <strong><em>ng serve &#8211;aot<\/em><\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">You can catch template binding error at display time.<\/td><td class=\"has-text-align-left\" data-align=\"left\">You can catch the template error at building your application.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em><strong><span class=\"has-inline-color has-vivid-red-color\">PS: <\/span><\/strong><span class=\"has-inline-color has-luminous-vivid-orange-color\"><strong>don\u00b4t be confused between AOT and SSR (Server Side Rendering)<\/strong><\/span><\/em><\/p>\n\n\n\n<h4><strong>What&#8217;s the difference between Angular AOT and Universal?<\/strong><\/h4>\n\n\n\n<p>Angular AOT is not actually a technology for the RENDERING of the UI. The Angular AOT compiler converts your Angular HTML and TS code into efficient JavaScript code&#8221; (\u00a0<a href=\"https:\/\/angular.io\/guide\/aot-compiler\">angular.io\/guide\/aot-compiler<\/a>\u00a0). That code is still run on client-side to render the first and every other view. (<em><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>The views are already compiled <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\"> but<\/span><\/strong><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong> not rendered<\/strong><\/span><\/em>)<\/p>\n\n\n\n<p> Angular Universal is all about server-side rendering of the initial page load. SSR is not an alternative but an additional technique to further increase performance for first-time visitors and SEO, as the first view is rendered on server side and the client receives that assembled and styled HTML, so there is no need to dynamically render anything at the beginning.  (<span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong><em>The first view is already compiled <\/em><\/strong><\/span><strong><em><span class=\"has-inline-color has-vivid-red-color\">and<\/span><\/em><\/strong><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong><em> rendered<\/em><\/strong><\/span>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An angular application mainly consists of HTML templates, their components which include various TypeScript files. Whenever we run over an application, the browser cannot understand the code directly (Because of component, new directive, etc.. ) hence we have to compile our code. We have 2 alternative to do it : AOT (Ahead of Time Compiler) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[427,428,424,425,426],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1521"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1521"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1521\/revisions"}],"predecessor-version":[{"id":1523,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1521\/revisions\/1523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1522"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}