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!

This talk has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

Over the past five years, Angular has grown close to seven times based on statistics from the public node registry.

Angular is actively developed, with over 16,000 pull requests received on its GitHub repository over the past five years.

The new reactivity model in Angular uses signals, which provide fine-grained reactivity and are interoperable with the current reactivity model.

Miko Getriev is the product lead for Angular at Google.

Angular momentum refers to the significant advancements and growth experienced by the Angular framework over the past year and a half.

Angular Ivy is a major refactoring of the Angular framework completed in 2021, which enabled numerous improvements and advancements.

Recent improvements include a new hydration mechanism that significantly improves load speed, declarative lazy loading in templates, and optimizations in the build process using esbuild.

The Angular CLI is a command-line interface that encapsulates the build process, offering features like the ngUpdate command for transforming code to use the latest APIs.

Angular is a rewrite of Angular.js with improved features and follows semantic versioning. Angular.js is deprecated and no longer maintained.

Angular offers built-in build-time internationalization support, allowing developers to build apps in multiple languages efficiently without runtime overhead.

Minko Gechev
Minko Gechev
22 min
01 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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.
Available in Español: Momento Angular

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.

Available in other languages:

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
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)
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
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
Micro-Frontends with Module Federation and Angular
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Manfred Steyer
Manfred Steyer
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.
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs