committee.md

I'm a core team member on Angular and am leading the effort to build the Ivy version of our compiler.

This talk is designed as a high level tour of Angular's architecture, and how we've achieved significant gains by redesigning our framework with a few rules in mind. It has two main goals:

1. to present the techniques that we've developed for our new architecture
2. to illustrate the application of these techniques through examples

The audience will walk away with a greater understanding of the capabilities of ES6 tools, Javascript runtime performance, and the tradeoffs required when architecting applications.

For example, one of Ivy's central tenants is "pay for what you use" - that any code or feature not immediately required for rendering the page should either be lazy loaded (if used later) by the bundler, or removed entirely by the tree-shaker. Achieving this for ancillary components is easy, but doing this for core pieces of the framework required a change in architecture. I will show how Angular is designed from the ground up for tree-shaking, and share design patterns for doing this that can be applied to any application.

Another tenant of Ivy avoiding repeated megamorphic reads in hot code paths. This is frequently easy to achieve as long as the developer can recognize the condition. I will illustrate how this is achieved in Angular, how our instruction set has been designed to avoid them entirely, and showcase some of the performance speedups we've seen as a result.

While this talk is about the architecture of Angular and how our framework works internally, it's intended for a fully general audience - no Angular experience is necessary to derive the full benefit. The patterns I'm illustrating are equally applicable to React apps, Vue apps, or any other type of modern web application.

summary.md

The Angular team is constantly working to improve the performance and decrease the code size of applications built with our framework. Most of the time, these improvements come about gradually as the result of many small optimizations. Once in a while, though, a radical redesign of the framework's internals will bring about a major leap, often without changing a single line of application code.

This is the goal of the Angular Ivy project - to build a new rendering architecture for one of the web's largest frameworks. At its core is an instruction set for rendering Angular templates, integrated into the framework using set of techniques and design patterns that leverage the capabilities of the modern ES6 ecosystem, taking full advantage of transpilers, bundlers, and tree-shakers. Ivy is a way of thinking about application design that's applicable to any application, large or small.

This talk covers the design and philosophy of Angular Ivy from its instructions on up. It will illustrate exactly how the new architecture achieves major gains in performance and code size, and show you how to apply these same techniques to your own applications.