Angular-Apps with Ivy

The rise of a new engine

Expectations

What you cannot expect

Best practices with Angular in general
Enterprise Architecture

@MartinaKraus11

What you can expect

Deep dive in the functionality of the Angular compiler
Learning about the benefits of Ivy
Developing Ivy Apps
Dealing with old packages

GDE in Angular

Women Techmakers Ambassador

Trainer and Consultant

@MartinaKraus11

That's Me

Martina Kraus

martinakraus

@MartinaKraus11

Schedule

@MartinaKraus11

13:30 - 15:00

15:30 - 16:45

15:00 - 15:30

Part 1: Ivy as an enabler

Coffee break

Part 2: Libraries with Ivy

Requirements for Hands On

@MartinaKraus11

Node.js
Angular.CLI (Angular >= 8.x)
Google Chrome
Code Editor

Material

@MartinaKraus11

Example Repo and exercises:

http://bit.ly/angular-days-ivy

Slides:

http://bit.ly/slides-mk-ivy

Why support Ivy ? 🤔

How can we benefit from Ivy?

@MartinaKraus11

Better build times, thanks to incremental compilation
Smaller and faster bundles
Sets the ground for lazy-loading components
Is easy to debug
Introduces new non-zone.js based change detection
Uses higher-order components

Default since version 9

@MartinaKraus11

tsconfig.json

//to Opt-out:
"angularCompilerOptions": {
    "enableIvy": false
  }

Why do we need a compiler?

Compiler in Angular?

@MartinaKraus11

Angular

declarative Code

ngc

JavaScript Code

Compiler in Angular?

@MartinaKraus11

ngc

@Component({
 selector: ‘app-component’
 template:
`<h1>{{ title }}</h1>`
})
export class AppCmp {}

JavaScript Code

Compiler in Angular?

@MartinaKraus11

export class AppCmp {
  title: string;

ngComponentDef =    ng.defineComponent(
{...})
}

ngc

@Component({
 selector: ‘app-component’
 template:
`<h1>{{ title }}</h1>`
})
export class AppCmp {}

Other features

@MartinaKraus11

Scoping (ngModules)
Evaluation of
- Property chains
- Variables / function calls
- Type checking

Part 1: Enable Ivy

@MartinaKraus11

Smaller

Faster Compilation

Easier to debug

Ivy as enabler

Part 1: Enable Ivy

@MartinaKraus11

Smaller

Faster Compilation

Easier to debug

Ivy as enabler

Part 1: Enable Ivy

@MartinaKraus11

Stephen Fluin - https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3

Let's compile!

@MartinaKraus11


> ng new awesome-app
> ngc

Let's compile!

@MartinaKraus11

// 11.2.4
> ng new awesome-app
> ngc

ViewEngine:
1,4MB

Ivy:
14kB

DEMO

View Engine

@MartinaKraus11

app.cmp.ts

app.cmp.html

app.cmp.scss

app.cmp.js

app.cmp.ngFactory.js

app.cmp.metadata.json

app.cmp.ngsummary.json

Ivy

@MartinaKraus11

app.cmp.ts

app.cmp.html

app.cmp.scss

app.cmp.js

ViewEngine is not Tree-Shakable

Tree Shaking

@MartinaKraus11

Tree shaking is a term commonly used for dead-code elimination in the JavaScript Context.

It relies on the static structure of module syntax.

Takes place during the compilation of the Angular app

ViewEngine: Template compilation

@MartinaKraus11

ViewEngine: Template compilation

@MartinaKraus11

ViewEngine: Template compilation

@MartinaKraus11

HTML Template

Data

Template

Angular Interpreter

DOM

ViewEngine: Rendering pipeline

@MartinaKraus11

And the Ivy way?

export function elementStart()

export function text()

Ivy instructions

Unsused Code

export function pipe()

@MartinaKraus11

HTML Template

Template instructions

DOM

Ivy rendering pipeline

@MartinaKraus11

Angular-Apps

Others

Delta.com: 4.2MB

Forbes.com: 5.7MB

Android Messages: 1.1MB

Grubhub: 3.4MB

microsoft.com is 1.4MB

amazon.com is 7.5MB

Wikipedia pages are 223KB

reddit.com is 4.9MB

netflix.com is 4.2MB

twitter.com is 3.5MB

Stephen Fluin - https://fluin.io/blog/is-my-angular-performance-normal

Typical bundle size

@MartinaKraus11

angular.json

Budgets

Part 1: Enable Ivy

@MartinaKraus11

Smaller

Faster Compilation

Easier to debug

Ivy as enabler

Single file compilation

@MartinaKraus11

static ɵcmp = 
core.ɵɵdefineComponent({…})

app.component.js

ViewEngine

@MartinaKraus11

Ivy

@MartinaKraus11

defineDirective

@MartinaKraus11

Locality principle

@MartinaKraus11

Component has all information for being compiled

No global compilation anymore

Ivy provides stable API to ship code through npm

Modules already AOT

Part 1: Enable Ivy

@MartinaKraus11

Smaller

Faster Compilation

Easier to debug

Ivy as enabler

The new 'ng'-Object

@MartinaKraus11

Ivy runtime offers a new ng object for debugging Angular apps, when you run in Dev mode.

This ng object can be accessed in the Developer console of Google Chrome

Offers different Entry Points to access and modify a component and its dependencies

DEMO

@MartinaKraus11

Simpler stack traces

Part 1: Enable Ivy

@MartinaKraus11

Smaller

Faster Compilation

Easier to debug

Ivy as enabler

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

Lazy loading components

@MartinaKraus11

Lazy loading components

@MartinaKraus11

ComponentFactoryResolver

Lazy loading components

@MartinaKraus11

ViewContainerRef

Injector

Lazy loading components

@MartinaKraus11

Exercise #1

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

ComponentDefinition

@MartinaKraus11

ComponentDefinition

@MartinaKraus11

Higher-Order Component

@MartinaKraus11

DEMO

The future

@MartinaKraus11

Modifying component traits at runtime

(Automatically unsubscribing/ subscribing, changing styles)

More dynamic

Every Ivy component is a standalone component

New ways of writing Angular Apps

@MartinaKraus11

Lazy loading components

Higher Order Components

Zoneless

change detection

Zones.js

@MartinaKraus11

Hard dependency of every Angular Application

"zone.js": "~0.10.2"

NgZone triggers the change detection automatically

Takes care of all event handlers and data bindings

The issue about Zones

@MartinaKraus11

More than 100kB

many performance issues

(long cd cycles together with frequent browser events)

too much magic

Zone-less Change Detection

@MartinaKraus11

Ivy has been defined without considering Zone.js

markDirty

@MartinaKraus11

Calling Angular to check data Binding with Ivy Instruction

markDirty

@MartinaKraus11

Exercise #2

Part 2:

Angular Libraries with Ivy

The issues of compiling Angular projects

@MartinaKraus11

Compiling Angular projects

@MartinaKraus11

The Code that will be compiled with Ivy uses the ngtsc compiler

Libraries, npm modules, other dependencies are already precompiled

incompatible to the way ngtsc compiles Angular code
Angular team provides the compatibility compiler

Angular Compatibility Compiler (ngcc)

Compatibility Compiler

@MartinaKraus11

ngcc scans node_modules and produces Ivy-compatible versions of each package

detects the Angular Package Format (APF) and searches

for .metadata.json file and the package's entrypoint

creates output directory ngcc_node_modules (default)

Angular Package Format

@MartinaKraus11

Describes structure and format of the package available on npm
Provides entrypoints for several module definitions:
- ESM5
- ES2015
- Universal Module Definition
Libraries that don't use the APF aren't processed properly with ngcc
ngcc tries to produce a "wrapper" file

Compatibility Compiler

@MartinaKraus11

copied

converted

Example: Decorators

@MartinaKraus11

The ngcc uses the TypeScript parser to parse the compiled js code
producing a partial class using JS AST
extract the static property definition from the partial class

Example: Decorators

Ok, what about the Libs now?

Angular Libs with Ivy

@MartinaKraus11

Using Libraries

Lib author

Using incompatible Libraries

Entrypoints failure

@MartinaKraus11

#1: Error: Failed to compile entry-point <packagename> due to compilation errors:
node_modules/<packagename>/bundles/filename.umd.js(1034,34)]

The issue:

ngcc wasn't able to find a proper entrypoint for converting instructions nor able to create wrapper files

Possible solution (1)

@MartinaKraus11

Make sure your dependency is on the latest version
Provide configuration to modify how ngcc views entry-points to packages:
- Giving metadata information for ngcc to find the correct files
- Provided inside a ngcc.config.js file at the root of the package

Example ngcc.config.js

@MartinaKraus11

Create a ngcc configuration for the compiler to ignore it
- create your own wrapper classes and patch files
Remove the package from your dependencies
Try to avoid dependencies not following the APF
Open a PR for the Library maintainer

Possible solution (2)

Angular Libraries as an Author

The transition plan

@MartinaKraus11

Recommendation for lib authors

@MartinaKraus11

You need to publish View Engine AOT-compiled Angular libs
Additionally publish AOT-compiled libraries for version > 10

Libraries can be compiled ahead-of-time and be published as such to NPM, GitHub Packages etc.

Supporting both compiler

@MartinaKraus11

Using Git tags or branches to divide the code
To support differences between View Engine and Ivy we can use detection logic
- can be used to detect ivy components, ivy directives etc.

Angular Ivy detection

@MartinaKraus11

Ivy issues and breaking changes

Injectable Decorator

@MartinaKraus11

Token without @Injectable decorator were allowed if other decorator was used

All provided or injected tokens must have @Injectable decorator

ViewEngine

Ivy

@ContentChildren

@MartinaKraus11

Queries search any nested level in the DOM

Queries will only search direct chield nodes in DOM hierarchy

ViewEngine

Ivy

Injection tokens

@MartinaKraus11

Instance of TemplateRef, ViewContainerRef (and other special tokens) were shared on the same node

Requesting TemplateRef, ViewContainerRef (and other special tokens) return a new instance.

ViewEngine

Ivy

Element references

@MartinaKraus11

Accessing inputs through local refs are not longer support by default

Renderer to Renderer 2

@MartinaKraus11

Renderer has been marked as deprecated since version 4
removed in version 9
default migration for angular apps migrating to version 9
Library maintainer need to run this migration

Many more:

https://angular.io/guide/ivy-compatibility

Prepare your library for ngcc

@MartinaKraus11

The compatibility compiler can require some changes to your library

Use the ngcc validation project by the Angular team
https://github.com/angular/ngcc-validation

Provide your libraries in a proper Angular Package Format ...

... or with proper entrypoint configuration

Angular Package Format:

Do I need to add EVERYTHING manually?

ng-packagr

@MartinaKraus11

ng-packagr transpiles your libraries to Angular Package Format

>>npm install -D ng-packagr

DEMO

@MartinaKraus11

Features:

Implements APF
can be consumed by Angular CLI, Webpack ...
creates type definitions
Inlines templated and Stylesheets

https://github.com/ng-packagr/ng-packagr/blob/master/README.md

ng-packagr

@MartinaKraus11

Ivy is an enabler: (For more dynamic applications)

Lazy-loading components
Higher-Order Components
optional ngModules/ ngZone

Lib: support differences between both compilers

make sure you follow the Angular Package Format (ng-packagr)

Summary

me@martina-kraus.io

@MartinaKraus11

martina-kraus.io

Slides: http://bit.ly/slides-mk-ivy