euler angles
Angular is one of the most well-known open-source web app frameworks. Every year Google adds on certain new and advanced features to it.
Angular是最著名的开源Web应用程序框架之一。 Google每年都会为其添加某些新功能和高级功能。
With Angular 9, various new features came into the picture. Out of these, Ivy Renderer stood out as one of the key features. In this blog, we will examine the new Ivy renderer and what makes it one of the key features in the latest update.
有了Angular 9，图片中出现了各种新功能。 其中， Ivy Renderer成为主要功能之一。 在此博客中，我们将研究新的Ivy渲染器以及它如何成为最新更新中的关键功能之一。
Ivy is the code name for Angular’s compilation and rendering pipeline. Applications developed in Angular 9 are Ivy compiled by default. These applications are compiled Ahead of Time (AOT) i.e. before the browser downloads and runs it, which makes the application faster and more efficient.
Ivy是Angular的编译和渲染管道的代号。 默认情况下，使用Angular 9开发的应用程序是Ivy编译的。 这些应用程序会提前(即在浏览器下载并运行之前)进行编译，从而使应用程序更快，更高效。
Before Ivy, View Engine was the default compiler in Angular. Ivy uses Ahead Of Time compilation technique instead of Just In Time (JIT) which was used in the previous Angular versions.
在Ivy之前， View Engine是Angular中的默认编译器。 Ivy使用Ahead of Time编译技术代替了以前的Angular版本中使用的Just In Time(JIT)。
In the newer ivy engine pipeline, if the same component is recompiled, nothing else will be needed to recompile it. This technique puts an end to the global recompilation problem.
在较新的常春藤引擎管道中，如果重新编译相同的组件，则不需要其他任何东西来重新编译它。 该技术消除了全局重新编译问题。
Angular’s Ahead of Time compiler converts Angular’s HTML and TypeScript code into efficient JavaScript code during build time i.e. before the browser downloads and displays it.
Angular的Ahead of Time编译器在构建期间(即在浏览器下载并显示之前)将AngularHTML和TypeScript代码转换为有效JavaScript代码。
Compiling of Angular templates during the build time facilitates faster rendering in the browser since the browser downloads the precompiled version of the template.
在构建期间编译Angular模板有助于在浏览器中更快地进行渲染，因为浏览器会下载模板的预编译版本。
The angular compiler takes declarative Angular syntax and changes it into an imperative code.
angular编译器采用声明性Angular语法并将其更改为命令式代码。
The type of compilation i.e. JIT or AOT depends upon the value of AOT set in build options in the angular.json file. It is set as true by default for Angular 9 and above applications.
编译的类型(即JIT或AOT)取决于在angular.json文件的构建选项中设置的AOT值。 对于Angular 9及更高版本的应用程序，默认情况下将其设置为true 。
1. Code Analysis
1.代码分析
In this phase, the AOT collector analyses the metadata and then represents it in the best possible manner. All analysed information is recorded in the .metadata.json file. Any error found in the metadata syntax is recorded and an error is thrown to the ‘.metadata.json’ file.
在此阶段，AOT收集器分析元数据，然后以最佳方式表示它。 所有分析的信息都记录在.metadata.json文件中。 记录在元数据语法中发现的任何错误，并将错误引发到' .metadata.json'文件。
2. Code Generation
2.代码生成
In this phase, the metadata collected from the Code Analysis phase will be interpreted by the compiler’s StaticReflector. During this phase, a check for metadata is done once again. If any violations in metadata syntax are found, then an error is thrown.
在此阶段，将从代码分析阶段收集的元数据由编译器的StaticReflector解释。 在此阶段，将再次检查元数据。 如果在元数据语法中发现任何冲突，则将引发错误。
3. Template Type Checking
3.模板类型检查
In this phase Angular template compiler uses typescript compiler to check the validation of binding expressions in templates. For this phase to happen, “fullTemplateTypeCheck” is set to true in “angularCompilerOptions” in the tsconfig.base.json:
在此阶段，Angular模板编译器使用Typescript编译器来检查模板中绑定表达式的有效性。 对于发生此阶段，“fullTemplateTypeCheck”设置为true在tsconfig.base.json“angularCompilerOptions”：
{“angularCompilerOptions” : {“fullTemplateTypeCheck” : true;}Reduced Build Times
减少构建时间
Source 资源On compilation of the components through the old View Engine, two files are generated:
通过旧的View Engine编译组件时，将生成两个文件：
Component.js file — It contains the compiled typescript code.
Component.js文件—它包含已编译的打字稿代码。
ngFactory.js file — It contains the static representation of the code present in the component.
ngFactory.js文件—它包含组件中存在的代码的静态表示。
On compilation of the components by Ivy, only component.js file is generated.
在由Ivy编译组件时，仅生成component.js文件。
The ngFactory.js file has been removed and its functionality is handled inside the singly generated component.js file, with no additional need to generate ngFactory.js file. This saves a lot of compilations.
ngFactory.js文件已被删除，其功能在单个生成的component.js文件中进行了处理，而无需另外生成ngFactory.js文件。 这样可以节省大量的汇编。
In View Engine, the generation of the ngFactory.js file took a lot of time. This reduced the build time efficiency of the application.
在View Engine中，生成ngFactory.js文件花费了很多时间。 这降低了应用程序的构建时间效率。
Smaller Bundle Size
较小的包装尺寸
One of the largest resources of an application is its JavaScript file because it not only has to be downloaded but also has large parse and execution costs added to it. The bundle size being generated was large which led to poor user experiences on slower networks.
应用程序最大的资源之一就是它JavaScript文件，因为它不仅需要下载，而且还增加了大量的解析和执行成本。 生成的捆绑包很大，这导致较慢的网络上的用户体验较差。
Using Ivy, the generated bundle size of the template reduced to just 1/3rd or 1/4th compared to before.
使用Ivy，与以前相比，模板生成的包大小减小到仅三分之一或1/4。
1. Tree Shakable — Pay only for the Angular code which is being used in real-time.
1.树形可摇树-仅支付实时使用的Angular代码。
Build optimization steps ensure unused code doesn’t end up in the final being shipped to the browser.
生成优化步骤可确保未使用的代码不会最终被运送到浏览器中。
>> In the old View Engine pipeline:
>>在旧的View Engine管道中：
<div class = “heading”>Hello Reader</div>Suppose you have the above HTML code in your component.html file.
假设您的component.html文件中包含上述HTML代码。
Template HTML is the code you have in the component.html file.
模板HTML是您在component.html文件中拥有的代码。
When it is passed through the angular compiler, it would parse the template and generate highly optimized JavaScript that will represent the structure of the template.
当它通过有角度的编译器传递时，它将解析模板并生成高度优化JavaScript，该JavaScript将代表模板的结构。
The generated code would look something like this:
生成的代码如下所示：
viewDef( 0, [elementDef( 0, 0, null, null, 1, ‘div’, [[ ‘class’, ‘heading’]]…),textDef( -1, null, [‘Hello Reader]…),]);The generated code will have an elementDef which contains a Data Structure based on elements and a textDef that contains another Data Structure based on the text node.
生成的代码将具有一个elementDef ，它包含一个基于元素的数据结构，以及一个textDef ，它包含一个基于文本节点的另一个数据结构。
At runtime, this parsed code is passed onto the Angular Interpreter. The Angular Interpreter then decides which operation it needs to run to generate the correct DOM, which is then displayed on the screen.
在运行时，已解析的代码将传递到Angular Interpreter。 然后，Angular Interpreter决定需要执行哪个操作才能生成正确的DOM，然后将其显示在屏幕上。
>> In the new Ivy pipeline:
>>在新的Ivy管道中：
Instead of parsing the template and creating the Data Structure and then passing the structure into an interpreter that needs the information of how to do each and everything, Ivy brought forth a technique to generate instructions directly.
Ivy提出了一种直接生成指令的技术，而不是解析模板并创建数据结构，然后将结构传递给需要有关如何做所有事情的信息的解释器。
It can be considered as an Array of Instructions because of which the interpretation step is now skipped this step contained all the conditional checks).
可以将其视为指令数组，因为现在已跳过解释步骤，因此此步骤包含所有条件检查。
>> In Ivy, the generated code will look like this:
>>在Ivy中，生成的代码将如下所示：
elementStart( 0 , ‘div’ [ ‘class’ , ‘heading’ ]);text( 1, ‘Hello Reader);elementEnd();Please note — elementStart creates the div while text creates the text written in the div.
请注意— elementStart创建div，而text创建以div编写的文本。
In Ivy, if you are using certain features like pipes or containers, that code would not be generated from the template that is given in the compiler because of which there would be no references.
在Ivy中，如果使用管道或容器之类的某些功能，则不会从编译器中提供的模板中生成该代码，因此将没有引用。
If there are no references, tree shaking tools would easily remove that code from the bundle.
如果没有引用，摇树工具将很容易从捆绑软件中删除该代码。
>> Ivy can tree shake:
>>常春藤可以摇树：
Dependency Injection 依赖注入 Content Projection内容投影View and Content Queries查看和内容查询Animations动画制作Pipes管子i18ni18nCore Framework Services 核心框架服务 Lifecycle Hooks生命周期挂钩2. Local effects — Ivy is local in its effects i.e. when you compile your apps, you only compile components that you are actually changing.
2.局部效果-Ivy在局部效果上是局部的，即，当您编译应用程序时，仅编译实际更改的组件。
For example, earlier, when we made use of ng build command, the whole application would get recompiled. In the older View Engine, this meant recompiling a much larger subset of the app, which took much of the time. The reason behind this was that the Angular components identified all their dependencies.
例如，在前面，当我们使用ng build命令时，将重新编译整个应用程序。 在较旧的View Engine中，这意味着重新编译应用程序的更大子集，这花费了很多时间。 其背后的原因是Angular组件标识了它们的所有依赖关系。
For example, lets assume your Angular application has a component that contains an ‘*ngIf’ directive.
例如，假设您的Angular应用程序具有一个包含' * ngIf'指令的组件。
In the context of the older View Engine, this meant any changes made to any of the dependencies of ‘*ngIf’ directive would cause all components containing this *ngIf directive recompile.
在较旧的View Engine的上下文中，这意味着对' * ngIf'指令的任何依赖项进行的任何更改都将导致包含此* ngIf指令的所有组件重新编译。
To overcome this problem, Ivy introduced the locality principle i.e. single file compilation, since the components that contain ‘*ngIf’ directive do not need to know about its dependencies.
为了克服这个问题，Ivy引入了局部性原则，即单文件编译，因为包含' * ngIf'指令的组件不需要了解其依赖性。
So, in the newer ivy engine pipeline, if the same component is recompiled, nothing else will be needed to recompile it. This technique puts an end to the global recompilation problem.
因此，在较新的常春藤引擎管道中，如果重新编译相同的组件，则不需要其他任何东西来重新编译它。 该技术消除了全局重新编译问题。
Ivy will directly call the constructor of ‘*ngIf’ directive, which knows its exact dependencies. This new structure facilitates faster re-build times in Angular applications.
常春藤将直接调用' * ngIf'指令的构造函数，该指令知道其确切的依赖性。 这种新结构有助于在Angular应用程序中加快重建时间。
3. Ivy is backwards compatible — Angular compilations with Ivy are also faster because of its new Ahead of Time (AOT) compiler is default.
3. Ivy向后兼容-由于默认使用新的Ahead of Time(AOT)编译器，因此使用Ivy进行Angular编译也更快。
You can check this in the angular.json file in an Angular 9 application. In your build options, you should have ‘aot’ set to true.
您可以在Angular 9应用程序的angular.json文件中进行检查。 在构建选项中，应将“ aot”设置为true 。
Ivy Engines can also be built with libraries that were created with the View Engine compiler by using ngcc i.e. Angular Compatibility Compiler. In this case, you will have to run ngcc after installation of every third party package. To perform this step automatically, add “postinstall” : “ngcc” in the angular.json file under the scripts in the manner below:
常春藤引擎也可以使用通过ngcc(即角度兼容性编译器)使用View Engine编译器创建的库来构建。 在这种情况下，必须在安装每个第三方软件包后运行ngcc 。 要自动执行此步骤，请按照以下方式在脚本下的angular.json文件中添加“ postinstall”：“ ngcc” ：
{“scripts” : {“postinstall” : “ngcc”}}Angular is popular for many reasons. With Ivy, this trend will continue and will benefit developers which in turn will benefit end users. Here is a quick summary going over why Ivy is so advantageous:
Angular之所以受欢迎，有很多原因。 使用常春藤，这种趋势将持续下去，并将使开发人员受益，从而使最终用户受益。 这是一个简短的摘要，介绍了为什么常春藤如此有优势：
Easy to Debug 易于调试 Faster Compilation更快的编译Easier to Ship libraries更容易运送图书馆Faster test execution更快的测试执行Easier dynamic component loading动态组件加载更轻松Better experience on Mobile devices with slower connections.在连接速度较慢的移动设备上获得更好的体验。Hope this blog gave you useful insights on Angular Ivy Renderer & AOT!
希望此博客为您提供有关Angular Ivy Renderer和AOT的有用见解！
Happy coding!
编码愉快！
Author — Akarsh Srivastava, DLT Labs™
作者— DLT Labs ™的Akarsh Srivastava
About the Author: Akarsh is a Software Engineer who is part of the Frontend team at DLT Labs. He is skilled in Angular 4+.
关于作者： Akarsh是一位软件工程师，隶属于DLT Labs的Frontend团队。 他精通Angular 4+。
https://angular.io/guide/ivy
https://angular.io/guide/ivy
https://angular.io/guide/aot-compiler
https://angular.io/guide/aot-compiler
翻译自: https://medium.com/the-innovation/what-makes-angulars-ivy-so-important-for-developers-cee09c5abc43
euler angles
