Present and Future of Angular with Ivy
Template ViewEngine Ivy Compiler Gen Gen Gen ☝ ✌ @SiddAjmera
3 Ivy is an enabler “ @SiddAjmera
Design Goals OPTIMIZABILITY INCREMENTALITY FLEXIBILITY ◉ Only pay for ◉ Locality ◉ Simple & easier to what you use ◉ Faster pick, understand, ◉ Tree Shaking compilation, & debug ◉ No metadata builds, & test ◉ HoC files execution ◉ Module-less Apps ◉ Smaller ◉ Dynamic bundles Component Loading @SiddAjmera 4
fn createViewNodes(view: ViewDef) { export function ɵɵ elementStart(..) {..} view.nodes.forEach(node => { switch(node.type) { export function ɵɵ text(..) {..} case ELEMENT: createElement(...) case TEXT: createText(...) export function ɵɵ template(..) {..} case DIRECTIVE: createDirectiveInstance(...) ... ... } }); } Rendering Engine @SiddAjmera Courtesy: @vikerman
export function ɵɵ elementStart(..) {..} export function ɵɵ text(..) {..} export function ɵɵ template(..) {..} ... Template Unused Ivy Instructions Tree Shaken Rendering Engine @SiddAjmera Credits: @vikerman
Ivy Instruction Set ◉ DOM Creation ◉ Styling ◉ Data Binding ◉ Containers ◉ Change Detection ◉ Templates ◉ I18N ◉ Content Projection ◉ Queries ◉ Pipes ◉ Dependency Injection ◉ SVG @SiddAjmera 7
@SiddAjmera 8
@SiddAjmera 9
component.js component.ts component.metadata.json component.html component.js component.ngfactory.js component.scss component.ngsummary.json @SiddAjmera Courtesy: @vikerman
🌴🤞 + 🚬🤙 = 📧 @SiddAjmera
@SiddAjmera 12
@SiddAjmera
@SiddAjmera 14
ɵɵ defineModule ɵ mod @NgModule ɵɵ defineComponent ɵ cmp @Component ɵɵ defineDirective ɵ dir @Directive ɵɵ defineInjectable ɵ prov @Injectable ɵɵ definePipe @Pipe ɵ pipe @SiddAjmera
@SiddAjmera 16 Ivy FTW - NG SriLanka Conf.
Design Goals OPTIMIZABILITY INCREMENTALITY FLEXIBILITY ◉ Only pay for ◉ Locality ◉ Module-less Apps what you use ◉ Faster ◉ Simple & easier to ◉ No metadata compilation, pick, understand, files builds, & test & debug ◉ Tree Shaking execution ◉ Dynamic ◉ Smaller Component bundles Loading ◉ HoC @SiddAjmera 17
Hello World! 👌 I am Siddharth Ajmera FullStack JS Developer Angular Writer Instructor @SiddAjmera
🆖 PRESENT A few examples to demonstrate how awesome Ivy is @SiddAjmera 19
Small & Meaningful Stacktraces 1 To get you straight to the source of your error. @SiddAjmera 20 View Engine V/S Ivy
AoT by default 2 So that you can see the error right while developing @SiddAjmera 21 AoT by default with Ivy 🍄
Lazy Loading Components 3 So that you can load components lazily and only when required. @SiddAjmera 22
ng Object for 🚬🐜 4 So that you can debug your code more easily at runtime @SiddAjmera 23 Debugging Angular Ivy Applications from the Devtools Console
🔯 FUTURE A few examples to demonstrate how Ivy enables the awesome future @SiddAjmera 24
25 Angular Modules are linchpins in an Angular Application “ @SiddAjmera
Render Components without Angular Modules from Scratch 1 To write Angular Component from Scratch without much dependency on Angular Modules, ZoneJS etc. @SiddAjmera 26 Angular Component with Change Detection from scratch in Ivy
Render Components without Angular Modules via Compiler 2 As you might not want to write the whole boilerplate again and again. @SiddAjmera 27 Angular Component via Compiler with Change Detection in Ivy
Dynamically Loading a Lazy Component with Ivy’s ɵ renderComponent 3 To give you the flexibility to load a Component lazily and dynamically @SiddAjmera 28
DI in a Dynamically Loaded Lazy Component 4 Coz what’s an Angular App without DI? @SiddAjmera 29
@SiddAjmera 30 Angular Ivy - Dutch Angular Group
🤕 WHERE FROM HERE? Into a world of Angular Apps where things like Angular Modules, ZoneJS, and RxJS is optional @SiddAjmera 31 Code Repo to Demo proposal for Standalone Angular Components
Thanks! 🙐 Any questions ? You can find me at ◉ @SiddAjmera ◉ SiddAjmera.DEV @SiddAjmera 32
Credits Special thanks to all the people who made and released these awesome resources for free: ◉ Presentation template by SlidesCarnival ◉ Photographs by Unsplash 33
Recommend
More recommend
