Ivy
The future of Angular
@MartinaKraus11
What is the costliest Ressource on a webpage?
JavaScript
Ivy to the rescue
Default in Angular Version 9
tsconfig.json:
//to Opt-out:
"angularCompilerOptions": {
"enableIvy": false
}
That's me, Martina
GDE in Angular and Web Technologies
Trainer and Consultant
Women Techmakers Ambassador
Why do we need a compiler?
Angular
Code
ngc
JavaScript Code
export class AppCmp { title: string; ngComponentDef = ng.defineComponent( {...}) }
ngc
@Component({ selector: ‘app-component’ template: `<h1>{{ title }}</h1>` }) export class AppCmp {}
Ivy to the rescue
Faster compilation
Smaller
Easier to Debug
Let's compile
// 9.0.2
> ng new awesome-app
> ngc
ViewEngine:
1,3MB
Ivy:
14kB
The future of developing with Ivy
Lazy-loading Components
Optional
Angular Module
No Zone needed
Why disabling Zone?
-
more than 100kB
-
many performance issues
-
Too much magic
Higher Order Components
Easier to Debug
-
Cleaner API
-
Improvement of Stack Trace
-
Browser Errors also in the Console
new 'ng' object
Summary
-
Ivy reduces the bundle size significantly
-
Lazy loading of Components
-
Easier Debugging
-
Optional ngModules
Thank you !!!
kraus.martina.m@gmail.com
@MartinaKraus11
martina-kraus.io
Ping me:
Slides: slides.com/martinakraus/ivy-future
ngIndia2020
By Martina Kraus
ngIndia2020
Ivy-Talk at BASTASpring2020 on 26th February 2020
- 1,841