Angular Momentum

Rate this content
Bookmark

In this talk you'll learn all about the renaissance Angular has been going through! First, we'll look into how the framework embraced fine-grained reactivity with signals to boost its runtime performance by orders of magnitude.


After that we'll dive into applying a similar fine-grained approach to code loading to make everything load faster. At the end, you'll learn about the tooling you can leverage to land all this in your apps!

22 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.

1. Introduction to Angular

Short description:

Hello, everyone. My name is Miko Getriev. I lead products for Angular at Google. In this talk, I'm going to share everything that has been going on for Angular over the past year and a half. The Angular community has been calling this the Angular momentum. Angular grew close to seven times in the past five years and is the second most popular framework after React.

Hello, everyone. My name is Miko Getriev. I lead products for Angular at Google. Unfortunately, I couldn't join you in person last week in Amsterdam because I got COVID. But in this talk, I'm going to still share with you everything that has been going on for Angular over the past year and a half.

In fact, the framework experienced a lot of advancements. The Angular community has been calling this the Angular momentum. I also realize that most of the folks at Just Nation are not Angular developers. There are many frameworks out there. And I realize that every framework and every community has its own narrative. That is why I'll just ask you to try to be as unbiased as possible, and let me tell you everything that has been going on for Angular.

If you have any questions, please leave them in the comments below or reach out to me on Twitter at mgedgiv. Over the past about five years, Angular grew close to seven times. That's all the statistics from the public node registry. Given that the majority of Angular developers rely on private registries, the projected number is way higher. And the state of JavaScript showed that Angular is the second most popular framework in the survey right after React, and the survey by Stack Overflow confirmed this data.

2. Angular Adoption and Popularity

Short description:

But even if Angular is widely adopted, does it mean that it is very actively developed? Looking at the Angular repository on GitHub, the project received over 16,000 pull requests over the past five years. The coolness factor of every technology in the JavaScript community drops by half for every month it has existed. Is Angular hip? I honestly have no idea. I still consider Rick Astley to be cool. The framework went through a major refactoring, which we completed in 2021. It was called Angular Ivy.

All right. But even if Angular is widely adopted, does it mean that it is very actively developed? Well, looking at the Angular repository on GitHub, the project received over 16,000 pull requests over the past five years. If you're not using Angular on a day-to-day basis, you might still not be completely convinced. And the answer for your feelings is likely hidden behind this logo. Which looks very suspiciously similar to the Angular logo. But is it? This is one of the reasons why there is such a misunderstanding of the Angular framework adoption and popularity. But more about this, we're going to talk in a little bit.

So, before that, based on all these surveys and public trends, it seems that Angular is doing pretty well. But we all know that the JavaScript ecosystem is moving super fast. Since we created Angular, the number of frameworks doubled or tripled. This growth of the space is great. Because everyone brings new insights. Which leads to innovation. But also, well, there is some skewed perspective. The coolness factor of every technology in the JavaScript community drops by half for every month it has existed.

So, I guess there is a question. Is Angular hip? I honestly have no idea. I definitely don't consider myself the authority if something is hip or not. I still consider Rick Astley to be cool. And also, between 2014 and 2021, before I changed roles at Google, I had an almost perfect GitHub streak for these 7 years. As you can see, I was partying really hard in college, getting emotional thinking about algorithms and data structures, and I was using every single opportunity to write some code. Do you know how when you go to a new place, a lot of people take selfies of themselves, right? Well, because I wanted to capture different experiences to make sure that I'm taking pictures from different places I visited, I created a post-commit hook for Git, which was taking a selfie of myself together with a very sentimental commit message for each individual time I push code and to the hash sum. Well, clearly, I can't say whether Angular 6 HIP or not. Making it HIP is also outside of my control and also outside of the control of our team. But there are a few things we can do. We can make sure that Angular is performant, powerful, and stable. The framework went through a major refactoring, which we completed in 2021. It unblocked us to make a lot of improvements and drive a major momentum. Many of you might have heard about this refactoring. It was called Angular Ivy.

3. Angular Reactivity Model

Short description:

The latest release of Angular is the biggest ever, with many advancements and improvements. Angular reflects data changes in the view by traversing the entire component tree and updating the associated view. Despite this, Angular is optimized for performance and performs well in benchmarks compared to other frameworks. Angular is currently working on improvements to control flow and expects updates in the next couple of months. Now, let's discuss the changes in the reactivity model that Angular experienced.

In fact, the latest release of Angular, we shared last month, is the biggest we've ever shared. And there is way more to come. We shared many advancements, including a brand new Reactivity model, which is 100% backwards, compatible and also interoperable with the current Reactivity model. We shared improvements in our service side and dozens of quality of life improvements.

I would like to talk about the Reactivity model. But before this, let me give you a quick overview of how Angular reflects data changes in the view right now. For the past seven years or so, Angular has been using a compiler, which takes templates like this and translates them to efficient JavaScript instructions that can render your components pretty quickly. Here, you have your component tree. At a certain point, you may make an update in the state of your components. When the browser's microtask queue is empty, Angular's runtime will traverse this entire component tree and check every single binding within your templates. If any of these bindings have changed, Angular will update the view associated with it.

It's great that the framework updates only what has changed, right? But at the same time, it traverses this entire component tree by default. You might be thinking, wait, this might be extremely slow. Well, it's not that bad. The reason for Angular being fast is that it is designed with monomorphism in mind. In other words, it is optimized for your JavaScript virtual machine. This is an excellent article by Misko, who is the CTO at builder.io, where he developed a framework called QUIC. Before he joined builder.io, he was one of the technical leads for Angular at Google. You can find this in the JavaScript benchmarks comparing different frameworks. I respect the implementation of these benchmarks, and it is also really hard to build realistic examples and benchmarks, and it's even harder to judge about the performance of a framework based on manipulation of tables. But well, as a framework, which has never been optimized for this set of benchmarks, Angular performs still pretty well here. It's close to the middle, and outperforms some very popular alternatives. I have removed their names because I just really don't want to create any drama here. If you look deeper here, you'll see that Angular performs really well on almost all the benchmarks except one, swapping roles. Currently, we're working on improvements of our control flow, which includes conditional statements, and also loops directly in the templates. We're going to take into consideration the role swapping and expect updates in the next couple of months. When we improve this, the benchmarks are going to move from where they were to about third place in the framework section, which I consider a pretty satisfying result.

All right. Now, let us go back to the changes in the reactivity model that Angular experienced. Let us assume that we have the exact same component tree as we saw.

4. Angular Signals and Performance

Short description:

Ideally, we would like to identify the minimum amount of components affected by data changes. After exploring different approaches, we found that signals were the most optimal reactivity model for Angular. Signals work by dropping data as a signal and notifying the framework when the signal's value changes. They are conceptually simple, familiar, and interoperable. Signals also enable better integration with RxJS and support advanced reactivity patterns. In terms of performance, the MoviesApp project demonstrates the load speed of Angular apps, achieving high scores on desktop. However, mobile networks, especially slow ones, present challenges.

Ideally, we would like when the data changes to get notified and identify the minimum amount of components to detect changes in, only the components that might have been affected by the data update. We explored the reactivity space in depth and compared the different approaches in the context of Angular. We looked at hooks, compile time transforms that enable reactivity at runtime, and also signals. We spent so many discussions in the team to decide what is the most optimal reactivity model for Angular and we thought that it is signals.

I want to repeat again, I'm not saying that signals is the best reactivity pattern, period. I'm saying that it was the best for Angular when it comes down to making trade-offs between performance and developer experience. The way signals work. You'll drop your data as a signal. When you read the value of a signal in the templates, you let Angular know in which part of the templates the data is being used so it can enable very fine grained reactivity. When you want to set the signal's value, you invoke the dot set method, which notifies the framework that the signal has changed and it enables it to trigger an update in the affected parts of the view.

I'm not going to go too much in depth here in Angular signals, but there is a really quick example by Sarah Drossner, the engineering director for core web at Google. You can find the app at Angular-signals.netdivide.app. Also, for a way more comprehensive introduction, you can check Angular.io. All right. A few things I love about signals are that they're conceptually very simple. And it's clear when the framework might be interested in updating part of the view when the signal has changed. Additionally, they're a familiar concept. Even if you're not an Angular developer, you might have already used signals in frameworks such as solid, react, and others. Developers understanding signals have way more transferable skills. And at the same time, they're also interoperable. Angular's chain detection mechanism will continue working just as it has been working today. If you like signals, you'll be able to incrementally develop new components using the new reactivity model and migrate your existing components. Signals also enable better integration with RxJS without coupling the framework more with RxJS APIs. This reduces the learning curve while also supports advanced developers to take advantage of more advanced reactivity patterns.

Now, talking about performance, I'd like to discuss another aspect of it, load speed of apps. The MoviesApp project by taste.js implements a series of apps in different frameworks for viewing a catalogue from a movie database. We collaborated with the Angular GDE and the CEO of Pushbase, Michael Klatke, on Angular implementation, where the MoviesApp is using the very highly optimized image directive that the Angular team develops together with Chrome and the Chrome Aurora team. And also Michael took advantage of its RxAngular project, which enables development of zoneless applications even before signals were available. When you deploy this application to Firebase Hosting, you're easily getting something like a hundred out of a hundred on a desktop in Lighthouse. However, it gets tricky when you're on a mobile network, especially if this network is slow.

5. Angular Optimization and Declarative Lazy Loading

Short description:

We improved the largest Contentful Paint and Cumulative Layout Shift in version 16 with a new hydration mechanism. We collaborate with Cloudflare for rendering at the edge, optimizing server-side rendering based on network constraints. We're introducing declarative lazy loading in templates, allowing specific parts to be lazily loaded with separate bundles. This concept is inspired by React's lazy and suspense and has its own trade-offs.

We run a couple of tests via webpagetest.org, and we saw that there are some opportunities for improvement. In particular, the largest Contentful Paint and the Cumulative Layout Shift. In version 16, we shipped a new hydration mechanism, which dropped the LCP, or Largest Contentful Paint, with about 700 milliseconds and reduced the Cumulative Layout Shift to zero.

We also work with Cloudflare to enable deployment of modern Angular applications to their infrastructure. This allows rendering at the edge, with their workers and smart placement. Cloudflare will find the best placement of your server-side rendering process, based on different network constraints, or different calls that your server does to different services or databases. For example, if your app is talking to a database, it might be more optimal to perform rendering closer to the storage, to speed up queries. I don't know if that's hip or not, but it's definitely fast.

All right. But isn't that the end of all the possible optimizations for Angular? Well, that's actually just the beginning. We're just sharing an RFC that is going to enable declarative lazy loading in templates. Lazy loading in Angular, obviously, has been available for a while now. But this declarative lazy loading primitive will enable you to specify which parts of your templates you would like to lazily load, and the framework will extract the template segments, together with all of its transitive dependencies, into a separate bundle. We also allow prefetching by following specific conditions. In the example above, we're going to download and partially hydrate only the components outside of the lazy block, and in this case, the app and the nav. Astro named a similar concept island. However, Astro uses it for different technologies, potentially being the individual islands, and here the islands are just individual component subtrees. So since we haven't finalized the design yet, let's look at a made-up syntax that we will refine in the next couple of weeks. In this template, we have three blocks. Lazy part of the template that will be lazily loaded when it enters the viewport, loading indicator that is specified declaratively and an error block which will show if the lazy loading fails. This concept might remind you of React's lazy and suspense. I'll say that it definitely has some similar elements, and we have been inspired by suspense, of course. I'll say that there are different trade-offs of this approach, and as with everything in software engineering, there is no perfect solution. Suspense and Angular Lazy have their own trade-offs. The Angular Lazy block, for example, is very declarative and kind of restrictive. It doesn't allow you to shoot yourself in the foot here, and the lazy block does not invoke any JavaScript logic by default. At least you're not writing any JavaScript logic for it. You're just writing some templates declarative code. All right. If you're familiar with other frameworks, other than Angular, the concept of reactivity and the additional template syntax may look familiar to you, and they should be.

6. Angular Branding and TypeScript

Short description:

We're constantly inspired by good ideas all across the industry. We love Solid, Svelte, Preact, and many others. We strongly respect innovations that are happening in all these frameworks. Now I would like to talk a little bit about the improvements that we did in our build pipeline. As you may know, Angular has an official CLI. The original logo is of a framework called Angular.js. The Angular team deprecated Angular.js and created a new framework called Angular. Before, you say no way. There is no way that you could create such a confusing branding. And trick us all. Well, it even got a little bit more confusing. Originally, Angular.js was called Angular 1, and Angular was called Angular 2. That's why the framework, original one, got renamed to Angular.js, and now we have Angular. Even though we didn't do the best job with branding, we took some really sound, technical decisions. Probably the most impactful decision was to introduce TypeScript, which enabled the project to take off and currently becomes pretty much a standard that most software engineers are using to build their web applications.

We're constantly inspired by good ideas all across the industry. We love Solid, Svelte, Preact, and many others. We strongly respect innovations that are happening in all these frameworks, and we definitely want to acknowledge it.

Now I would like to talk a little bit about the improvements that we did in our build pipeline. As you may know, Angular has an official CLI. You can think about it in a similar way as SvelteKit for Svelte or Next.js for React, without the server-side rendering endpoints for now. But before we dig a little bit further into the improvements, I promised to share more gossip about the Angular logo that I shared a little bit earlier. And talk about the impact it had on the Angular product.

All right. I bet everyone seeing this logo here will think that this is Angular. I wish I was there in person in Amsterdam to ask you to raise your hand. In fact, that's not Angular. This is the Angular logo. The original logo is of a framework called Angular.js. This was another framework that Angular was inspired by. It was developed by the same team, in fact, at Google. The Angular team deprecated Angular.js and created a new framework called Angular. With an almost identical logo. Before, you say no way. There is no way that you could create such a confusing branding. And trick us all. Well, it even got a little bit more confusing. Originally, Angular.js was called Angular 1, and Angular was called Angular 2. Even though Angular is a rewrite of Angular.js, it kind of follows semantic versioning but not entirely. It was a confusing branding. Since now we're officially following semantic versioning and releasing new major versions twice a year, you can imagine that people could easily interpret each next major version of the framework as a rewrite, which is definitely inaccurate, but I understand the sentiment there. That's why the framework, original one, got renamed to Angular.js, and now we have Angular. It's no longer maintained, so I'm hoping that the confusion will be decreasing over time, but, yeah, we definitely didn't do the best job with branding. Even though we didn't do the best job with branding, we took some really sound, technical decisions. Probably the most impactful decision was to introduce TypeScript, which enabled the project to take off and currently becomes pretty much a standard that most software engineers are using to build their web applications.

7. Angular Build Pipeline and CLI

Short description:

The Angular CLI's ngUpdate command transforms code with deprecated APIs. 70% of Angular apps use the latest versions, keeping Angular evergreen and evolving applications with the framework and web platform.

And, as you can imagine, we had to introduce a build pipeline, right? So that's why we also enabled this with a CLI. We wanted to encapsulate the build process. One of my favorite features of the Angular CLI is the ngUpdate command. It will literally transform your code, anywhere it finds a deprecated API. Based on our developer survey, 70% of Angular apps are using the latest two major versions of Angular, which makes us believe that ngUpdate works really well. And we can also keep Angular evergreen this way. We can evolve your applications together with the evolution of Angular and the web platform as well.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships