Speed Up Your Angular Apps with Ivy

@sonicparke @chrisoncode IVY SPEED UP YOUR APPS

@sonicparke @chrisoncode BRAD MCALISTER CHRIS ON CODE @chrisoncode @sonicparke

@sonicparke @chrisoncode SHOW OF HANDS

@sonicparke @chrisoncode ANGULAR V8

@sonicparke @chrisoncode VERSION 4?

@sonicparke @chrisoncode WHAT ABOUT 3?

@sonicparke @chrisoncode GOTCHA!

@sonicparke @chrisoncode ANGULARJS FOREVER

@sonicparke @chrisoncode IVY TIME

@sonicparke @chrisoncode SMALLER SIMPLER FASTER

@sonicparke @chrisoncode WHY?

@sonicparke @chrisoncode 65% US MOBILE TRAFFIC

@sonicparke @chrisoncode 53% PEOPLE THAT LEAVE AFTER 3S

@sonicparke @chrisoncode -1.6B IF AMAZON.COM IS 1 SECOND SLOWER...

@sonicparke @chrisoncode Angular 2,024 kb

@sonicparke @chrisoncode Angular 1,352 kb + Differential Loading

@sonicparke @chrisoncode Angular 955 kb + Differential Loading + Ivy

@sonicparke @chrisoncode Angular 912 kb + Differential Loading + Ivy
+ No Zones

@sonicparke @chrisoncode 48.1 MAIN.JS

@sonicparke @chrisoncode 13.1 MAIN.JS

@sonicparke @chrisoncode HOW DO I TURN IT ON?

@sonicparke @chrisoncode ng new shiny*ivy*app ./enable*ivy

@sonicparke @chrisoncode { "compilerOptions": { ..; }, "angularCompilerOptions": { "enableIvy":
true } }

@sonicparke @chrisoncode { "projects": { "my*existing*project": { "architect": { "build":
{ "options": { ..; "aot": true, } } } } } }

@sonicparke @chrisoncode { ..; "aot": true }

@sonicparke @chrisoncode WHAT DO WE GET?

@sonicparke @chrisoncode DEV IS FASTER

@sonicparke @chrisoncode ERRORS ARE BETTER

@sonicparke @chrisoncode <img [src]=“getImageUrl()">

@sonicparke @chrisoncode <img [src]="getImageUr()">

@sonicparke @chrisoncode Compiled successfully.

@sonicparke @chrisoncode AppComponent.ngfactory.js? [sm]Q1 ERROR TypeError: _co.getImageUr is not a
function at Object.eval [as updateRenderer] (AppComponent.html:1)

@sonicparke @chrisoncode (AppComponent.html:1)

@sonicparke @chrisoncode What about Ivy?

@sonicparke @chrisoncode ERROR in src/app/user/user.component.html(2,13)Q Property 'getImageUr' does not exist
on type 'UserComponent'. Did you mean 'getImageUrl'?

@sonicparke @chrisoncode user.component.html(2,13)

@sonicparke @chrisoncode Did you mean 'getImageUrl'?

@sonicparke @chrisoncode NO LAZY

@sonicparke @chrisoncode @NgModule({ declarations: [AppComponent], imports: [BrowserModule, MyCustomModule], providers: [],
bootstrap: [AppComponent] }) export class AppModule {}

@sonicparke @chrisoncode DEMO!

@sonicparke @chrisoncode YES LAZY

@sonicparke @chrisoncode import { Component } from '@angular/core'; @Component({ selector:
'app*root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { }

@sonicparke @chrisoncode export class AppComponent { }

@sonicparke @chrisoncode export class AppComponent { constructor(private injector: Injector) {}
}

public loadLogin() { import('./login*form/login*form.component') } }

public loadLogin() { import('./login*form/login*form.component').then(c .d { ɵrenderComponent(c.LoginFormComponent, { host: 'app*login*form', injector: this.injector }); }); } }

@sonicparke @chrisoncode ?ɵ?

@sonicparke @chrisoncode <app*login*form>.fapp*login*form>

@sonicparke @chrisoncode <button (click)="loadLogin()"> Show Login Form .fbutton>

@sonicparke @chrisoncode LAZY + MODULE

@sonicparke @chrisoncode @NgModule({ declarations: [LoginFormComponent], imports: [ CommonModule, MatButtonModule, MatInputModule,
MatCardModule, FormsModule, ReactiveFormsModule ], exports: [LoginFormComponent] })

@sonicparke @chrisoncode export class LoginFormModule { constructor(private resolver: ComponentFactoryResolver) {}
}

@sonicparke @chrisoncode export class LoginFormModule { constructor(private resolver: ComponentFactoryResolver) {}
public resolveComponentFactory()Q ComponentFactory<LoginFormComponent> { return this.resolver.resolveComponentFactory(LoginFormComponent); } }

@sonicparke @chrisoncode export class AppComponent { @ViewChild('loginForm', { read: ViewContainerRef,
static: true }) public loginForm: ViewContainerRef; constructor(private injector: Injector) {} public loadLogin() { import('./login*form*material/login*form.module').then(m .d { const injector = ɵcreateInjector(m.LoginFormModule, this.injector); const loginFormModule = injector.get(m.LoginFormModule); const componentFactory = loginFormModule.resolveComponentFactory(); const componentRef = this.loginForm.createComponent(componentFactory); componentRef.changeDetectorRef.markForCheck(); }); } }

static: true }) public loginForm: ViewContainerRef; constructor(private injector: Injector) {} }

@sonicparke @chrisoncode <ng*container #loginForm>.fng*container>

static: true }) public loginForm: ViewContainerRef; constructor(private injector: Injector) {} public loadLogin() { import('./login*form*material/login*form.module').then(m .d { const injector = ɵcreateInjector(m.LoginFormModule, this.injector); const loginFormModule = injector.get(m.LoginFormModule); const componentFactory = loginFormModule.resolveComponentFactory(); const componentRef = this.loginForm.createComponent(componentFactory); componentRef.changeDetectorRef.markForCheck(); }); } }

@sonicparke @chrisoncode public loadLogin() { import('./login*form*material/login*form.module').then(m .d { const injector
= ɵcreateInjector(m.LoginFormModule, this.injector); const loginFormModule = injector.get(m.LoginFormModule); const componentFactory = loginFormModule.resolveComponentFactory(); const componentRef = this.loginForm.createComponent(componentFactory); componentRef.changeDetectorRef.markForCheck(); }); }

@sonicparke @chrisoncode NO ZONES

@sonicparke @chrisoncode .k * Zone JS is required by default
for Angular itself. .p import 'zone.js/dist/zone';

@sonicparke @chrisoncode .k * Zone JS is required by default
for Angular itself. .p .r import 'zone.js/dist/zone';

@sonicparke @chrisoncode platformBrowserDynamic() .bootstrapModule(AppModule)

@sonicparke @chrisoncode platformBrowserDynamic() .bootstrapModule(AppModule, { ngZone: 'noop' })

@sonicparke @chrisoncode export class CounterComponent implements OnInit { }

@sonicparke @chrisoncode export class CounterComponent implements OnInit { data =
interval(1000); number: number; }

@sonicparke @chrisoncode export class CounterComponent implements OnInit { data =
interval(1000); number: number; ngOnInit() { this.data .pipe(tap(() .d ɵmarkDirty(this))) .subscribe(num .d (this.number = num)); } }

@sonicparke @chrisoncode THE FUTURE IVY ENABLES

@sonicparke @chrisoncode K THX BAI

@sonicparke @chrisoncode BRAD MCALISTER CHRIS ON CODE @chrisoncode @sonicparke

Speed Up Your Angular Apps with Ivy

Speed Up Your Angular Apps with Ivy

Other Decks in Programming

Featured

Transcript