Replies: 33 comments 142 replies
-
What impact will Signals have on hydration and server-side rendering improvements that are both on the roadmap? |
Beta Was this translation helpful? Give feedback.
-
Why decorators are magic for devs? Why perfectly designed class components should be replaced with some "react style" hooks? Looks like angular has lost it's popularity and you are trying to return back peoples attention. I really consider that react hooks are mess. |
Beta Was this translation helpful? Give feedback.
-
With a Zoneless application using signals, will this negate the need to trigger change detection when writing unit tests? Writing unit tests for OnPush components by wrapping them in a host component is a common pain point for me. If going Zoneless with signals solves/simplifies this, that'll be amazing! |
Beta Was this translation helpful? Give feedback.
-
Will a zoneless application using Signals offer bundle size improvements over a zoneful one, or are they marginally the same? |
Beta Was this translation helpful? Give feedback.
-
Interesting times ahead for #angular 😁 |
Beta Was this translation helpful? Give feedback.
-
Really appreciate the thoroughness and thoughtfulness of this RFC. Look forward to digging into the sub sections. But, overall, I'm excited for this development in the framework, especially with regard to its impact on performance, and enabling teams to create more performant components without having to hand-hold change detection so much. Eager for a zoneless future. |
Beta Was this translation helpful? Give feedback.
-
I'm curious how using signals as a reactive base for Angular will affect a part such as "Reactive forms module", |
Beta Was this translation helpful? Give feedback.
-
I'm wondering how will the use of Signals affect Angular’s internals that depend on observables such as forms, router, and http client? |
Beta Was this translation helpful? Give feedback.
-
I think this will also pave the way to having functional components in the future. It is very understandable, and I imagine a component built entirely on signals would be way more readable and simple than a "traditional" one. |
Beta Was this translation helpful? Give feedback.
-
It's better to have some code snippets of signals with each use case in docs. Signals are beast 😍 loved it. Appreciating your hard work @atscott @alxhub @dylhunn @pkozlowski-opensource @jelbourn |
Beta Was this translation helpful? Give feedback.
-
Is OnPush directly correlated to ZoneJS, or are they separate entities? More specifically, can I utilize a library using OnPush and still be able to remove zone.js from my application running Signals? |
Beta Was this translation helpful? Give feedback.
-
I think this is the most exciting evolution of Angular since 1.0, and the evolution since 1.0 has been solid. I'm extremely happy with the overall design, and what it unlocks for Angular going forward - namely clearer code and performance. Kudos to the team members leading this effort for the thoroughness of these RFCs and the prior work to refine the concepts and ensure backward compatibility in the design. I've always felt that zone.js and the change detection model was the worst/clunkiest part of Angular - to clarify, zone.js is an impressive building block, but it and the change detection model are the hardest parts to understand and troubleshoot. In addition to potential hidden efficiency problems, there are unintuitive rules - eg change detection doesn't propagate unless inputs have changed or a DOM event has occurred; and host attribute/style changes require a change detected on the parent. It requires regular developers to have a deeper understanding of the internals of Angular than it should. So I've avoided relying on zone as much as possible, use Hindsight is 20/20, but it's clear to me that this is the "correct" approach for Angular, and is needed to make/keep Angular competitive with newer frameworks. |
Beta Was this translation helpful? Give feedback.
-
HI :) got this error while using fromObservable: "ERROR Error: fromObservable() signal read before the Observable emitted" I have to add a startWith as a workaround. Is this an on-purpose behavior?
|
Beta Was this translation helpful? Give feedback.
-
Awesome works from you folks! 🔥 Do you already have some vision on the long term plans? I mean, are you aiming (in a future version like 18 or 19 or 20...) to make signal based components by default (and standalone as well) which will imply the deprecation of input/output decorators and ngOnInit and other lifecycle hooks. I'm asking that because as the primary goal of what's coming since v14 is to reduce the learning curve and increase the traction I guess new comers will get confused if both worlds (signal based and zone based components) are living together in the framework, I'm afraid some developers might get discourage when asking themselves "should i go signal based or zone based" which will requires a lot of digging to understand the pros and cons (thus the learning curve will stay the same). I'm a fan of opinionated technologies and I hope Angular will stay opinionated and that we are currently in a transition to full standalone and signal based apps. 🫶 |
Beta Was this translation helpful? Give feedback.
-
Is there a way to implement the signal change detection into the async pipe? |
Beta Was this translation helpful? Give feedback.
-
This feels like, we're reinventing the wheel... I mean: Angular is and was built to be reactive. The original idea was to use Signals are reactive programming but with a different syntax. More precisely, they are BehaviorSubject. Maybe we should let the things settle down, and provide a very robust paper: why Angular should move to Signals ? Are the benefits really worth it ? Are they other solutions, maybe better ? I mean, Angular is a widely used framework, mainly by companies requiring a stable, scalable, and robust framework. So we should not be blind, jumping from the latest trend just to attract "the cool kids". Angular's target should remain to focus on companies requirements, not on the "fun" and "latest" tool. They may be great, but they should not interfere with a long term vision. |
Beta Was this translation helpful? Give feedback.
-
Everyone should watch this entire video before posting here. |
Beta Was this translation helpful? Give feedback.
-
Okay wanted to give some feedback, i have been testing out angular 16.0.0 rc and watched the whole talk about Signals RFC and in the end there is a question about thoughts on functional components in the future - where the answer is (if we get it) it will be added on. So my question is keep adding features cant that exhaust newcomers to angular, i start to see a fairly complex component structure
What i have experienced over the years of using angular which has been ever since the first release of angular.js and up until now i feel a lot of people turn away because there is so much stuff, such a mountain to climb. And i think this ever growing mountain will have an effect on how the community could grow in the future Last but not least - I love the class based components and services But i also think function based guards, interceptors and pipes makes sense tbh |
Beta Was this translation helpful? Give feedback.
-
Could we have a semantic command to detect the variables that should be signals and change their types? |
Beta Was this translation helpful? Give feedback.
-
I'm very excited about signals; they're going to make building complex forms much easier. Playing around with the release candidate, I accidentally a bug by pushing to an array returned by a signal without using |
Beta Was this translation helpful? Give feedback.
-
Why is Angular trying to look like React or Vue ? We liked Angular because it had a strong opinion about how web pages should be built. We liked Typescript, classes, separation of concerns, modularity, SOLID and DRY. We liked Angular for the way it approached web, for the way it was standing for all web pages as structured pieces of software. We could really talk about web engineering at the core of Angular. I was ok with standalone components, I use them wisely enough to get proper benefits. I am ok with getting away from zone.js, I'm even okay for providing Rxjs as an option and not a requirement. But trying to recreate React syntax on Angular is not the way to go. Until recently, it was quite difficult to write bullshit with Angular. You had to get it done the solid way, by default. And I'm sure someday we'll be missing those days. |
Beta Was this translation helpful? Give feedback.
-
Let me try to ask/write some things as company mindset = "STABILITY". Considering RFC introduction / reasons :
As support policy is general guidance and are subjet to change, this is not clear about the future. How is possible to have a more official, precise and clearer response of support of "old way" which is already called "old way" instead "current way", to reassure companies choosing Angular2017 after migrating from angularjs2015 and be afraid of this choice. (i don't say it is but breaking-change, sometimes inevitable, is the word that scares companies/business the most).
It seems be out of scope to me. And I know i don't make friends saying that but without bad faith can someone explain what performance means here ? Considering deprecation practices :
Thank you a lot to team member being part of migration tooling. Questions: what will be the priority of the migration tools regarding Signals? Because working hard is one thing but priority is another. I ask comparing to standalone which is in production state and some issues
cross-cutting: standalone
UPDATE 21.04.2023 (adding point 4) Considering what I read somewhere in comments :
This kind of sentence or similar used by years is great to remind but IMHO this is not at all valable reassurance for companies. I know I still not make me friends but Angular Team should not be responsible for only migrating envery Google's application but for all existing companie’s app. And please be realistic/fair, Angular Team or other Google team is the same company, the fear of a breaking/refactoring/rewriting changes will not exist if companies have excellents developers from Google as internally help; instead companies have internals ressources for a limited time that not knowing how the heart works but juste lambda-business-developers. Please apologize, I am not saying this to disturb it is not question for laugts like "who from the top at Google is giving an end of life of Angular lol" , I am just afraid to see companies (like mine) leaving Angular without even necessarily following the departure of the very important and very competent resources of Angular Team. UPDATE (21.04.2023) |
Beta Was this translation helpful? Give feedback.
-
ForewordBefore you delve into the content below, we would like to make a few comments.
The goals are:
Concern 1: Deviating from Angular's IdentityA significant portion of those who commented on all five RFCs are concerned that some of the proposed changes, along with other possible upcoming alternatives for code authoring, could make Angular too similar to other libraries and frameworks (such as React.js or Vue.js). On the one hand, this similarity could increase the adoption of Angular by developers coming from similar libraries/frameworks as the ones mentioned above. But on the other hand, there is also a risk that by being too similar to these libraries/frameworks, Angular might lose its identity, which is defined by basic things like being opinionated, leveraging the power of OOP, having good homogeneity in most projects built with Angular, etc. In this process, Angular might get lost in the crowd and become just another web development framework that no longer offers anything unique to appeal to the current community as well as newcomers. Concern 2: Confusion for NewcomersCommunity members are also concerned about a steeper learning curve caused by implementing something in various ways. Angular has always been considered a framework that is quite challenging for beginners, and the need for simplification is understandable in that mindset. But allowing (too many) alternatives in how certain things are implemented is questionable and probably creates even more confusion for newcomers. This growing complexity of Angular with different authoring styles (standalone/ngModule-based, signal-based/ngZone-based, class-based/functional, etc.) might discourage people from adopting Angular and make them choose other technologies that are simpler in their structure and style guide. Concern 3: Backward Compatibility and MigrationA general concern about backward compatibility with existing features is raised, when new alternatives to them, such as signal-based components, are introduced. While it’s being said that there are no plans to deprecate ngZone-based components, it has been noted that a full automatic migration to signals won't be feasible and that some migration tools may appear along the way. This highlights the need for clear documentation and support for migrating to the new way of authoring components. This will also affect third-party Angular libraries, as authors will have to split them into two parts starting with the next versions of Angular. One for the library users who do not need the latest features (e.g. signal-based components), the other for the users who want to benefit from the latest additions. This not only makes maintaining such libraries more difficult, but is also confusing for the community. Concern 4: Impact on Enterprise ApplicationsThe community is raising questions about the potential impact of introducing the Signals proposed changes for ongoing projects, and how they will have to be adjusted/rewritten in order to stay up to date with the latest versions of Angular and the latest recommended approaches on writing code. And this will be driven not only by the desire of staying in-sync with the latest trends, but also by possible breaking changes added along the way. As part of this, the community is emphasizing the importance of stability in enterprise applications. Angular has been the go to web development framework not only for small to medium-sized enterprises, but even for the largest ones. That has been granted by its strengths, which make it well-suited for complex, large-scale and long-term projects. Just to name a few of what are considered to be its strengths:
Transforming Angular into a hybrid version of its current form and a more functional version, similar to React or Vue, could have unintended consequences: instead of attracting new users, it could drive away both existing and future users. Given Angular's commitment to long-term support and backward compatibility, it's also important to consider the potential negative impact of introducing signal-based components and functional lifecycle hooks on enterprise-scale projects. This is all in good spirit so we can avoid articles like this one being written for Angular: Concern 5: Focusing on Learning Curve May Not Be the Primary GoalThere is a real possibility that in a few years AI-based tools will make the entry-level role obsolete and allow experienced developers to take care of the architectural and critical aspects of projects, while AI takes care of the general and repetitive tasks. Such a change would make the proposed simplification of Angular through alternative authoring experiences less relevant, as easier entry points for less experienced developers would no longer be necessary. Concern 6: Moving away from Decorators in proposed Signal-based life cycle hooksIn several places in the RFCs there is a debate about the added value of decorators. Some say that they only make things more difficult and it would be better not to use them in the future. Others counter that decorators are one of Angular's strengths and a powerful feature that allows you to extend various structures of the framework with your own logic. And all this while ECMAScript is moving forward with the Decorators proposal, which is currently in Stage 3. On the same topic, there is a heated discussion about the way the proposed lifecycle event hooks for signal-based components look. They are functional and do not use decorators or class methods, but are declared (at least part of them) in the constructor of the class. People are concerned that this creates a big difference between the look and logic of the lifecycle hooks of standard components and those of signal-based components. Many ask why the new components cannot be developed using the same approaches as the standard components. Concern 7: Framework FragmentationWith the introduction of signal-based components and functional lifecycle hooks, community members express concerns about possible fragmentation of the framework. They fear that the different ways to write components could lead to confusion and inconsistency in the community. The official Angular coding style guide will also have to recommend one of the two alternatives, which could lead to frustration among developers, teams and ultimately companies that are already familiar with the old approaches. Concern 8: Reinventing the Reactive WheelThere are also concerns about the introduction of signals in Angular, which are seen as reinventing the wheel, since Angular was originally developed with RxJS's Observables for reactive programming. Since integration with RxJS is still needed for asynchronous reactivity, some of the commenters on the RFCs wonder why it's not possible to adapt the RxJS functions so that sync reactivity can also be handled through RxJS. They fear that the framework could end up with two Observable-like approaches. Concern 9: Proper Usage of Signals and their Relation to React HooksIn the Angular signals discussion, community members debate the proper use of signals and how they relate to React hooks. Some concepts, like effects, could do more harm than good if abused by developers who do not understand what side effects are and when they are really necessary. The same thing has happened in the past with React hooks, but over time some best practices have emerged. Will the Angular community have to go through a similarly lengthy process, or can there be a better way to get clear guidelines from the start on what to use and when? In addition, this debate raises again the question of whether the new changes are influenced by other popular frameworks, potentially causing Angular to lose its current identity. Concern 10: Adaptation to Industry TrendsCommunity members debate whether Angular should adapt to industry trends, such as by introducing more functional approaches, or whether it should retain its distinctive 'flavor' supported by classes, OOP, decorators, etc., that have been provided to users of the framework in an opinionated manner to date. Some believe that Angular's idiosyncrasy is an advantage, while others believe that the framework should evolve and adapt to remain competitive. Finding a balance between maintaining Angular's uniqueness and adapting to the needs of modern times is a challenge that needs to be carefully addressed. Final wordsThis summarizes all the major and fundamental concerns raised in the main RFC and sub-RFCs. We believe that these are well-formed and well-founded arguments. They address several aspects of the framework, including its identity, learning curve, migration, backward compatibility, impact on enterprise applications, etc. These concerns highlight potential challenges and risks associated with introducing new features such as signal-based components and functional lifecycle hooks, while emphasizing the importance of preserving Angular's strengths and core principles. Credits:
|
Beta Was this translation helpful? Give feedback.
-
Feels like there is "new way" & "old way" and this is bad for all patterns and guides we follow, haven't seen someone who witch to reactive coding and going back. In a year ago I proposed to switch to Angular and from then we cleared a lot of issues with the code and the codebase goes a lot smaller the app faster and much more pros. We don't have any performance issues because of change detection well if we can do better than we are going to use the better way if there is again well guided way as anything else Angular provide and everyone embrace it. For one I think signals are just Async pipe on steroids for me. So some smart people will probably do something like, or we can request it from the Angular team to implement.
|
Beta Was this translation helpful? Give feedback.
-
It is always stressful to adapt to new changes in life. The Vuejs team provides options for writing components (class-based, composition API, script setup). The React team also provides class-based components and hooks. On the other hand, the Angular team is now providing options for writing components, stand-alone signals, rxjs, etc. This is called evolution, caused by improvements in the code. Less is more, they say. Developers need to get used to the new way of writing Angular apps. Writing modern Vuejs and modern React don't confuse developers anymore. The same thing will happen in the Angular world. Thanks to the Angular core team and the people contributing to improving the DX of building Angular apps. 👏🏽 |
Beta Was this translation helpful? Give feedback.
-
Would anyone here like to share their thoughts about this sample repo that I made? I will start sharing these patterns with others if you think this kind of approach to Angular signals is an improvement with regards to having lesser code but testable code.
https://github.com/webmasterdevlin/modern-angular-course-2023 |
Beta Was this translation helpful? Give feedback.
-
The Signals RFC is now closed - we've posted a combined summary of the feedback in a separate discussion. |
Beta Was this translation helpful? Give feedback.
-
RFC: Angular Signals
Authors: @alxhub, @atscott, @dylhunn, @jelbourn, @pkozlowski-opensource
Area: Angular Framework
Posted: April 3, 2023
Status: Open
(this is the main RFC document, which links to the others)
We teased this in February, and now it's time to dig into the details: the Angular team requests your comments on our plan to adopt signals as a reactive primitive for Angular.
Before you dive in
Background context
Before going further, it's helpful if you understand How Angular change detection works today.
What kind of feedback are we looking for?
While we're excited to hear any and all comments on Angular Signals, we have additionally called out specific discussion points throughout the RFC for directed feedback. When you leave a comment, be sure to note the open question(s) to which you're responding.
As always, keep our code of conduct in mind. We know that a proposal of this scope significantly impacts Angular and the way you use it in your projects. We appreciate your commitment and investment in this project and ask to keep comments respectful. Remember, we are all just folks doing our best with limited resources.
How this RFC is organized
Because Angular Signals is a large project, we've split this RFC into several smaller docs. We recommend first reading the overview in this document and then jumping to the more specific docs in order.
Goals
This is a big change to Angular, so it's important to talk about why we're choosing to take this step. As we began our investigation into reactivity, we set out several goals we wanted to achieve that we felt would greatly improve Angular, based strongly on developer feedback over the last few years:
ExpressionChangedAfterItHasBeenChecked
errors.We think the best way to achieve our listed goals is to add fine-grained reactivity to the framework with Signals.
An RFC in four parts
If you're interested in the choice of signals as the reactive foundation of the framework, see the sub-discussion RFC #1: Signals for Angular Reactivity.
If you want to discuss our signal API and implementation itself, see RFC #2: Signal APIs.
If you're interested in exploring how using signals will look in Angular, then start with RFC #3: Signal-based components.
And finally, if you're curious about interoperability with RxJS, see RFC #4: Observable and Signal Interoperability.
Wrapping up
That's it!
This RFC has been a long time in the making. We're excited (and relieved) to finally share the details. Whether you're a long-time Angular developer or just stopping by to check out this new buzz on Angular, we're looking forward to obsessing over your every comment.
We want to make a special thanks to all of the hard work and innovation that have inspired us in the web community. Signals are clearly having a moment in the discourse today. Our ideas build on top of a large body of work– Preact, Vue, and SolidJS in particular have been inspirations for this project.
Frequently asked questions
Is this change going to be backward compatible?
Absolutely! Backward-compatibility is non-negotiable and we do everything to assure that the existing applications and libraries continue working as-is, without any modification. This is a gradual, opt-in change.
Is this another Angular rewrite?
No! This is mostly an additive change with some deeper modifications to the change detection algorithm. We take backwards compatibility seriously, and validate all changes with both our own suite of comprehensive tests and against the tests of thousands of Google applications built with Angular.
Is Angular getting less opinionated?
It's true that recent (and upcoming) changes to Angular have introduced new ways of building Angular applications. Most notably this includes standalone components and now signals. We introduce these new approaches over time to evolve the framework based on community feedback and our own observations of Angular in the wild. Our commitment to maintaining backwards compatibility means that the ecosystem ends up supporting multiple ways of doing things.
The result isn't that Angular is less opinionated, but instead that the opinions change over time. Typically, the most recent features represent the way we think most Angular developers should build their apps. We will always clearly communicate the preferred approach and update documentation / tooling accordingly. At the same time, the old way of building will live on for backwards compatibility (following our support policy).
Why are you working on signals and not feature XYZ?
In any popular framework there are always more features requested than we have bandwidth to work on at any given point in time. We are always focusing on projects that are the most helpful and impactful given the long-term evolution and stability of Angular. Signals are one of those projects.
First of all, improved runtime performance and optional zone.js was on our public roadmap for quite some time. Signals allow us to tackle this item.
More importantly, reactivity is at the very heart of a model-driven UI framework. By rethinking change detection, we open doors to simplification and evolutions that were not possible before. Faster performance, better forms, improved state management, and streamlined authoring format are prominent examples.
By baking-in reactivity into the framework we introduce primitives that the community can build upon.
Having said all this, the work on reactivity does not stop the work on the other important framework improvements. As an example, Angular v16 introduces the improved hydration, required inputs and tons of other improvements. We will continue working on other roadmap items while the reactivity work is in progress!
Appendix: How Angular change detection works today
Angular was built on the idea of a declarative, model-driven UI. Your application state is the source of truth and the framework automatically updates the page based on model changes. You declaratively express the mapping of model to UI via an HTML-like template. To keep the page up-to-date, the framework must track model changes over time.
zone.js
Angular uses zone.js to track various events in a browser (ex. DOM events, network requests and timers). Zone.js tracks these events by monkey-patching (wrapping and patching a callback function at runtime) any API that might lead to an application model change. When such an event occurs, however, Angular does not have any information as to what specific changes have occurred, or even if there were any changes at all.
Upon receiving event notification from zone.js, Angular will read (pull) new model values and update UI based on diffing the previously seen model values.
This approach provides excellent developer experience for small and simple applications:
setState
or similar APIs)In practice, however, large applications often grow to see zone.js become a source of performance issues and developer-facing complexity. As the web platform continues to grow and evolve, it also represents a rising maintenance cost for the Angular team.
While zone.js provides the mechanism that tells Angular when to run change detection, the next section discusses what this change detection entails.
Global, top-down change detection
Angular's default strategy is to run change detection over the entire component tree to make sure that the DOM reflects the most up-to-date model. Because Angular has no information about which parts of the application state have actually changed, it must check everything. In practice, however, only a fraction of the entire application state changes and only a handful of components need to be re-rendered.
Unidirectional data flow
Angular's change detection was designed to refresh application state once. The change detection process starts from the root of the component tree and walks all components down to the leaf nodes.
A single refresh traversal is sufficient if and only if components don’t modify the state of any of their ancestors after they have been visited. Unfortunately, the framework provides several convenient APIs to mutate state exactly in this way mid-traversal.
The component tree matches the rendered DOM tree, which means that change detection traverses the application in rendering order. However, several common web interaction patterns roll up descendant node states into ancestor nodes (e.g. form validity is computed as a function of descendant control states). This leads to the most "popular" error in Angular -
ExpressionChangedAfterItHasBeenCheckedError
.OnPush
Angular developers can optionally configure change detection to only run on a subset of the component tree using the OnPush strategy. Components configured as OnPush and their descendants are checked for changes only under specific conditions:
@Input()s
changed as a result of a template bindingWhile the OnPush strategy can reduce some of the performance cost, this strategy is limited:
RxJS integration
You might notice that none of this overview includes RxJS. Angular does not internally use RxJS to propagate state or drive rendering in any way. Instead, Angular uses RxJS as a convenient data structure to express streams of events over time (such as for
EventEmitter
), completely disconnected from the change detection and rendering system.Beta Was this translation helpful? Give feedback.
All reactions