Shower Presentation Engine
Yours Truly, Famous Inc.
Angular Ivy Overview
Agenda
- What is a rendering engine in JS frameworks?
- Why Ivy?
- How does it works?
- Features
What is a rendering engine?
Part of a framework that translates your templates into DOM elements
Angular issues
- Big bundle size
- Compilation
- Lazy loading
- Debugging
Component
<div>
<span>{{title}}</span>
<child-cmp *ngIf="show"></child-cmp>
</div>
View Engine rendering pipeline
View Engine output
Compiled with View Engine
View Engine
function createViewNodes(view: ViewDef) {
view.nodes.foreach(node => {
if(isElementDef(node)) createElement(node);
if(hasListeners(node)) listenToElementOutput(node);
if(hasPipe(node)) createPipeInstance(node);
});
}
Ivy rendering pipeline
Compiled with Ivy
Compiled with Ivy
Compiled with Ivy
Ivy uses a new instruction set
Runtime is based on incremental DOM
Why incremental DOM?
- The incremental nature allows for significantly reduced memory allocation during render passes, allowing for more predictable performance.
- It easily maps to template based approaches. Control statements and loops can be mixed freely with element and attribute declarations.
Compiled with Ivy
Locality
- Components/directives/etc. depend on each other via public API only
- Compiling them requires only local information
Non-Locality in View Engine
Locality in Ivy
Locality in Ivy
Locality in Ivy
- Ivy provides a stable API that allows shipping AOT compiled code to NPM
- Better JIT/AOT interop
- Faster compilation
Now framework is tree-shakable!
Tree-shaking in Ivy
Ivy can tree-shake
- Dependency injection
- ng-template & ng-container
- Animations
- Pipes
- i18n
- Core framework services
ComponentFactoryResolver
Essentially a Map<Component, ComponentFactory>
In Ivy, every component is its own factory
~5kB "Hello World" application
(minified, compressed)
Create application with Ivy enabled
ng new my-app --experemental-ivy
Compile your app with Ivy
node_modules/.bin/ivy-ngcc
Convert node modules to Ivy-compatible format
Compile your app with Ivy
Add to tsconfig.json
"angularCompilerOptions": {
"enableIvy": "ngtsc"
}
main.ts
import { ɵrenderComponent as renderComponent } from '@angular/core';
import { AppComponent } from './app/app.component';
renderComponent(AppComponent);
Compile your app with Ivy
- Remove BrowserModule from app.module.ts
- Remove polyfills from angular.json
Other features
- Debugging
- Lazy loading
- Guard prioritization
Ugly error stack traces
Debugging
$0
const cmp = ng.getComponent($0)
Ivy lazy-loading
Guards
What's next?
- Dynamic template composition
- Zone-less API
- Higher order components
Thanks!
