Angular Rendering Engine

[ericltw]

Angular Compiler // TODO

目的

將你寫的template, decorator（declative）轉換為runtime運行的代碼（imperative）。

Why not just write imperative code?

• 處理更少的boilerplate code，專注於business logic
• 將實現留給Angular，可以讓Angular執行很多優化

Compile Mode

Compiler可以以兩種方式進行compile，JIT和AOT。

• JIT

  • 在development mode中使用
  • compile at runtime

• AOT

  • compile at build time

Architecture

on a macro scale processes your code.

• Program Creation

  是TypeScript為了了解program而discover所有的source files的過程。

  • Begins with tsconfig.json
  • 根據imports discover更多source files (.ts, .d.ts)
  • Shims (.ngfactory files)

• Analysis

  • Go through the TS code, class by class
  • Looking for Angular "things"
  • 單獨了解每個component, module, service, directive...

• Resolve

  • 了解整個program的structure, dependencies
  • 做出優化決策

• Type Checking

  • Validate expressions in component templates

• Emit

  • 生成可以在瀏覽器運行的JavaScript
  • the most expensive step in compilation

Compilation Model

多個compilation根據定義好的compilation model一起工作。

Feature of the Compiler

• NgModule

  能夠幫助compiler執行tree-shaker。

• Partial evaluation

  Compiler嘗試運行decorator上編寫的TypeScript，並嘗試確定expression value。

• Template type-checking

Reference

• Deep Dive into the Angular Compiler

  https://www.youtube.com/watch?v=anphffaCZrQ

• Design Doc (Ivy): Compiler Architecture

  https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md // TODO

[ericltw]

Angular Runtime // TODO

介紹

應用的附帶框架代碼，實際在瀏覽器中運行。

• Angular compiler（@angular/compiler）

  將template, detector轉換為runtime能夠理解的component definition（instructions）。

• Angular runtime（@angular/core）

  執行instruction。

Application Bootstrap

• Module setup

  Framework initiate your module, setting up the module injectors.

• View creation

  Create the DOM for your application.

• Change detection

  Check binding values and update them if necessary.

Reference

• How Angular Works

  https://www.youtube.com/watch?v=S0o-4yc2n-8

[ericltw]

Ivy // TODO

介紹

Next-generation compiler and runtime (rendering pipeline).

解決

• Smaller

  更小的bundle size。

• Faster

  更快的載入時間，和smaller有關。

• Simpler

  易於use和debug。

How achived by Ivy?

Tree Shacking

tree shacking指的是在bundle過程刪除未使用的代碼。然而這些tree shacking tool當遇到條件內的引用時，會有侷限性，如：static analyzer無法識別"if"語句中為使用的code，這些code仍會出現在輸出的bundle。

View Engine Pipeline

現今的Angular compiler以Angular template當作輸入，生成代表template結構的JavaScript code，運行時，這些template data將會被Angular interpreter解釋生成DOM。正是因為Angular interpreter無法確定template data，存在條件判斷，因此無法很好的去執行tree shaking。

Ivy Pipeline

Ivy的方式則是直接生成template instruction，不需要interpreter就可以進行處理，生成DOM，因此更好的去執行tree shacking。

Locality

Locality指的是Ivy compile每個component時指關注component本身的information，不關注其依賴。在現今的Angular code，每個component包含了parent information。

影響

• build time與更改大小成正比，不與應用大小程正比 (increamental build)
• 發布precompiled code，不需要metadata.json // TODO
• Metaprogramming // TODO

Reference

• Kara talk about Ivy at Google I/O 2018

  https://www.youtube.com/watch?v=jnp_ny4SOQE&feature=youtu.be&t=1320

• Angular Ivy: Next Generation Angular Renderer For Enhanced Performance

  https://www.innominds.com/blog/angular-ivy-next-generation-angular-renderer-for-enhanced-performance