Sign in
Skip to solution
hardFrontend

How does compilation work under the hood in Ivy?

956 views
01

Understand the problem

Explain Ivy compilers, incremental building, and runtime instructions.

ivyunder-the-hood
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Ivy compiles Angular HTML templates into static, tree-shakable TypeScript render instructions (template functions). It compiles components incrementally and features a locality principle, where only modified files compile, speeding up builds.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Visual compiled representation of an Ivy template function
// Component input source:
// template: '<h1>Hello {{ name }}</h1>'

// Ivy Compiler compiled javascript output code:
static ɵcmp = i0.ɵɵdefineComponent({
  type: GreetingComponent,
  selectors: [["app-greeting"]],
  template: function GreetingComponent_Template(rf, ctx) {
    if (rf & 1) {
      i0.ɵɵelementStart(0, "h1");
      i0.ɵɵtext(1);
      i0.ɵɵelementEnd();
    }
    if (rf & 2) {
      i0.ɵɵadvance(1);
      i0.ɵɵtextInterpolate1("Hello ", ctx.name, "");
    }
  }
});
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 90 of 121 decoded in the Angular track. One more won't hurt.

Back to track