Present and Future of Angular with Ivy Template ViewEngine Ivy - - PowerPoint PPT Presentation

Present and Future of Angular with Ivy

Template Compiler ViewEngine Ivy

@SiddAjmera

Gen ☝ Gen ✌ Gen 󾠱

“

Ivy is an enabler

@SiddAjmera

FLEXIBILITY ◉ Simple & easier to pick, understand, & debug ◉ HoC ◉ Module-less Apps ◉ Dynamic Component Loading

Design Goals

OPTIMIZABILITY ◉ Only pay for what you use ◉ Tree Shaking ◉ No metadata files ◉ Smaller bundles INCREMENTALITY ◉ Locality ◉ Faster compilation, builds, & test execution

@SiddAjmera

fn createViewNodes(view: ViewDef) { view.nodes.forEach(node => { switch(node.type) { case ELEMENT: createElement(...) case TEXT: createText(...) case DIRECTIVE: createDirectiveInstance(...) ... } }); }

Rendering Engine

export function ɵɵelementStart(..) {..} export function ɵɵtemplate(..) {..} export function ɵɵtext(..) {..} ...

@SiddAjmera

export function ɵɵelementStart(..) {..}

Template Rendering Engine

export function ɵɵtemplate(..) {..} export function ɵɵtext(..) {..} ...

Tree Shaken

Unused Ivy Instructions

@SiddAjmera

Ivy Instruction Set

◉ DOM Creation ◉ Data Binding ◉ Change Detection ◉ I18N ◉ Queries ◉ Dependency Injection

◉ Styling ◉ Containers ◉ Templates ◉ Content Projection ◉ Pipes ◉ SVG

@SiddAjmera

@SiddAjmera

@SiddAjmera

component.ts component.html component.js component.ngfactory.js

component.js component.ngsummary.json component.metadata.json component.scss

@SiddAjmera

🌴🤞 + 🚬🤙 = ฀📧

@SiddAjmera

@SiddAjmera

@SiddAjmera

@SiddAjmera

@NgModule ɵmod ɵɵdefineModule @Directive ɵdir ɵɵdefineDirective @Injectable ɵprov ɵɵdefineInjectable @Pipe ɵpipe ɵɵdefinePipe @Component ɵcmp ɵɵdefineComponent

@SiddAjmera

@SiddAjmera

FLEXIBILITY ◉ Module-less Apps ◉ Simple & easier to pick, understand, & debug ◉ Dynamic Component Loading ◉ HoC

Design Goals

OPTIMIZABILITY ◉ Only pay for what you use ◉ No metadata files ◉ Tree Shaking ◉ Smaller bundles INCREMENTALITY ◉ Locality ◉ Faster compilation, builds, & test execution

@SiddAjmera

I am Siddharth Ajmera

FullStack JS Developer Angular Writer Instructor

Hello World! 👌

@SiddAjmera

PRESENT

A few examples to demonstrate how awesome Ivy is

@SiddAjmera

🆖

Small & Meaningful Stacktraces

To get you straight to the source of your error.

1

@SiddAjmera

AoT by default

So that you can see the error right while developing

2

@SiddAjmera

Lazy Loading Components

So that you can load components lazily and only when required.

3

@SiddAjmera

ng Object for 🚬🐜

So that you can debug your code more easily at runtime

4

@SiddAjmera

FUTURE

A few examples to demonstrate how Ivy enables the awesome future

@SiddAjmera

🔯

“

Angular Modules are linchpins in an Angular Application

@SiddAjmera

Render Components without Angular Modules from Scratch

To write Angular Component from Scratch without much dependency

• n Angular Modules, ZoneJS etc.

1

@SiddAjmera

Render Components without Angular Modules via Compiler

As you might not want to write the whole boilerplate again and again.

2

@SiddAjmera

Dynamically Loading a Lazy Component with Ivy’s ɵrenderComponent

To give you the flexibility to load a Component lazily and dynamically

3

@SiddAjmera

DI in a Dynamically Loaded Lazy Component

Coz what’s an Angular App without DI?

4

@SiddAjmera

@SiddAjmera

WHERE FROM HERE?

Into a world of Angular Apps where things like Angular Modules, ZoneJS, and RxJS is

• ptional

🤕

@SiddAjmera

Any questions ?

You can find me at ◉ @SiddAjmera ◉ SiddAjmera.DEV

Thanks! 🙐

@SiddAjmera

Credits

Special thanks to all the people who made and released these awesome resources for free: ◉ Presentation template by SlidesCarnival ◉ Photographs by Unsplash