Sign upSign InSign upSign InDusan NovakovicFollowBits and Pieces--ListenShareAngular, a popular web framework, has undergone several versions over the years. While earlier versions focused on stability and improving existing features, recent iterations have introduced exciting innovations. In this article, we will explore the evolution of Angular, highlighting notable updates, such as Angular Signals but also touching on the previous versions and why are we currently in need of a long-awaited revolution.It can be said that previous versions of Angular did not revolutionize the web framework world. Instead, they concentrated on stability, bug fixes, and incremental improvements to the framework’s existing features. However, a few significant updates deserve special mention, such as the Ivy Renderer and Compiler, introduced in Versions 8 and 9. These updates significantly improved performance, reduced bundle sizes, and simplified lazy loading but also took a great part of the Angular team's development time and focus.Try typing this prompt into ChatGPT: “Act as a professional Angular developer with 6+ years of experience. I want you to give me a better insight into the greatest Angular features for each Angular version starting from Angular version 8. Make a list and include both new features and improved features.” see for yourself. Count the occurrences of these words: improved, updated.The focus on stability and compatibility with existing applications and workflows in Angular’s earlier versions resonated well with enterprise applications and its development teams. Upgrading to newer versions did not demand significant overhauls or drastic changes to already established implementation patterns. Meanwhile, other frameworks and libraries were quick to support or implement features that gradually diminished Angular’s popularity in usage rankings. This steady approach may have contributed to the current state of affairs.You can do a small research by yourself at this page: https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_experience_rankingWhile Angular maintained its position as a reliable and robust framework, new contenders, such as Qwik, Svelte, and Solid, emerged with a selling point based on modern approaches and architectures from the start. These frameworks capitalized on the demand for more streamlined and efficient solutions, potentially diverting attention away from Angular.There are three main points of problems leading to this state:Steep Learning Curve:Angular is known to have a steeper learning curve compared to other frameworks due to its size, complexity, and the number of concepts developers need to grasp. The extensive feature set and architectural patterns of Angular require developers to invest time and effort in understanding its intricacies.Large File Size:Angular applications can have larger file sizes compared to other frameworks due to the built-in functionalities and dependencies that come with the framework. For instance, Zone.js alone accounts for approximately 100KB in size. Additionally, the presence of excessive files with ng modules can contribute to the overall size of an Angular application.Performance:While Angular’s performance has significantly improved with the introduction of the Ivy Renderer and other optimizations, some developers still argue that modern frameworks outperform Angular in certain scenarios. One aspect that is often highlighted is the change detection mechanism, which is still based on Zone.js. However, it’s important to note that Angular’s performance is highly dependent on various factors such as application complexity, implementation choices, and proper utilization of performance optimization techniques.Taking all the aforementioned factors into consideration, the Angular team has recognized the need for a significant shift and the implementation of many sought-after modern solutions while ensuring backward compatibility (which has required additional implementation time). Notable examples include Signals working with RxJS and Standalone Components functioning with ngModule.Leading this revolution, Angular versions 15 and 16 are focused on improving the first three downsides by simplifying the architecture and introducing new features that further streamline the development process and reduce complexity. These updates aim to make Angular more accessible to new developers and mark the beginning of a modernized Angular.💡 As an aside, for bigger Angular projects, consider implementing a component-driven architecture using Bit. With Bit, you can independently build, test, version, document and publish components to Bit’s component-storage platform, from where you (or others) can import them into any project, making your codebase scalable and modular, reducing boilerplates and increasing reusability.bit.devOne notable feature that stands out in the context of Angular’s modernization efforts is Angular Signals. Signals represent a new reactive primitive in Angular, being part of the angular/core package.Reactive in Nature: Signals encapsulate values that change over time and notify all dependents whenever a change occurs. They function similarly to Subjects but without the need for explicit subscriptions (subscribe/unsubscribe) as it is handled under the hood.Angular Signals have been announced and eagerly awaited for some time. They are currently accessible as a Developer Preview starting from version 16. The Developer Preview phase allows the community to test and provide feedback on new features and characteristics, influencing further development until the stable release. It also enables optional extensions with additional features that might not have been initially planned.But what is the big fuss about them?Foundation for Fine-Grained Reactivity: Angular Signals lay the groundwork for fine-grained reactivity, enabling the future re-rendering of specific parts of a component or view rather than the entire component. Currently, they serve as a replacement for Observables, but in the future, they will play a key role in achieving partial view re-rendering and establishing the foundation for a zoneless paradigm.Towards a Zoneless Paradigm: While Angular has not yet reached the zoneless state, the introduction of Angular Signals represents a significant step towards that goal.New features like Signals or Standalone API, directly battle the three beforementioned key downsides of Angular.Signals provide us with three new paradigms:Writable:The Writable Signals allow us to set values in various ways. It provides the capability to update and modify the value associated with a signal.Computed:Computed signals in Angular are signals that cannot be directly modified. Instead, they automatically update whenever any of the signals used within the computed function change. In other frameworks, it may be necessary to explicitly specify a list of signals that the computed signal depends on. However, Angular simplifies this process by automatically determining the dependency graph, reducing the amount of code required. It is worth noting that for a re-computation to occur, the value of the computed signal must be read or requested somewhere in the application. Additionally, the results of computed signals are memoized, meaning that the last computed result is cached in memory until its context, such as a component, is destroyed. Developers should be mindful of memory usage and the data being stored.Watchers:Watchers are functions that use an injection context and are commonly used during the construction of a class instantiated by the Dependency Injection (DI) system, such as @Injectable or @Component. Watchers are triggered initially during class instantiation and then subsequently whenever the dependencies they rely on change. They allow developers to execute specific logic or side effects based on changes in the observed signals or dependencies. By utilizing watchers, developers can respond to changes dynamically and perform actions as needed.Returning to Writable Signals, there are three ways to modify their values:Set:The “set” method allows us to directly pass the desired value to be set for the signal. It is a straightforward way to update the value associated with the signalUpdate:The “update” method provides the current value of the signal, allowing developers to modify it as desired. It requires returning a new value, which will replace the current value of the signal. This method enables more complex modifications by leveraging the current value of the signal.Mutate:The “mutate” method allows developers to directly mutate and modify the current value of the signal. It provides the flexibility to make changes to the value without the need to return a new value explicitly. For example, developers can modify specific elements of an array or update the properties of an object directly.Let’s look at this example of accessing the value in our component:Here we illustrated how accessing the value of a signal is incredibly easier and simpler compared to using RxJS, which requires more lines of code. The beauty of signals is that we don’t need to subscribe to get the value and unsubscribe to clean up the subscription, making the process much more straightforward and efficient. This also goes for accessing the value in the UI eliminating the need for async pipe.Let’s compare these two code snippets:With RxJS, there is a potential glitch moment that occurs because we get three emissions: the initial emission, an intermediate/transitional value while only the first observable emits (technically incorrect, we only want the first and final emission: 10 and 40), and the final emission when both observables emit. We can defend against this case by using debounce on the derived observable, but it adds an extra step and there is still a possibility of not achieving the desired behavior if misused.On the other hand, when using signals, besides the definitely simpler code, we don’t encounter this glitch. This is due to glitch-free computing, as changes accumulate during the notify/schedule phase and dependencies are recalculated afterwards (Providing us with only two values: 10 and 40). Additionally, with signals, we are not required to use the async pipe in UI, further simplifying the code.By leveraging signals, developers can enjoy a more streamlined and reliable approach to handling data changes, avoiding the glitches and complexities that can arise when using RxJS.So, is this the end of RxJS? In some ways yes and in some ways not at all. Let’s break this thought down:Harnessing the Power of Signals:Signals excel in scenarios where values need to be combined from different events and displayed in the user interface. Unlike RxJS, Signals offer an enhanced developer experience, eliminating the need for complex subscriptions and reducing the chances of self-sabotage. By using Signals, developers can effortlessly manage synchronous reactivity, ensuring a smoother and more intuitive data-handling process.Leveraging RxJS for Asynchronous Scenarios:While Signals shine in synchronous reactivity, RxJS is the go-to solution for managing asynchronous operations and coordinating events, especially in cases where race conditions occur. When dealing with race conditions or event coordination, such as handling user input with simultaneous requests to a backend, RxJS ensures proper sequencing and coordination of events. It allows developers to handle scenarios where the order of responses from the backend cannot be guaranteed, ensuring accurate data representation.Finding the Right Fit:As a rule of thumb, Signals are best suited for synchronous reactivity, where values are known and can be immediately set. They offer an exceptional developer experience, simplifying code and reducing the likelihood of errors. On the other hand, RxJS shines in asynchronous reactivity, where a delay is expected before values can be set. It provides the necessary tools to handle complex scenarios involving race conditions and event coordination.Seamless Interoperability:To facilitate the integration of Signals and RxJS, Angular provides helpful utilities in the rxjs-interop package. The toObservable and toSignal functions enable smooth interoperability between the two libraries, allowing developers to harness the power of Signals and RxJS seamlessly within their Angular applications.In this example, we showcase a prime illustration of the seamless interoperability between RxJS and Signals. By utilizing RxJS, we can implement a range of valuable functionalities.-Firstly, we prevent sending a request if the search term consists of less than two characters, effectively reducing the transmission of unnecessary data.-Secondly, we incorporate a delay to accommodate user typing, avoiding excessive rapid requests to the API.-Additionally, we implement logic to ignore redundant values, ensuring that API calls do not retrieve data that has already been displayed.-Lastly, we address race condition issues by canceling previous requests if a new one is initiated before the previous request completes.To further enhance our development experience, we utilize the toSignal function. This enables us to exclusively utilize Signals for displaying and manipulating our data, providing a streamlined approach to handling reactive behavior. By combining the power of RxJS and Signals, we achieve a robust and efficient solution that optimizes data retrieval and manipulation while simplifying our codebase.Conclusion:The introduction of Signals in Angular development sets the stage for an exciting and promising future. This addition, coupled with Angular’s continuous improvements and innovative mindset, positions the framework for ongoing success and growth.As Angular evolves and embraces modern solutions like Signals, it is poised to regain its popularity and solidify its place in the future of the web development landscape. With a renewed focus on simplicity, adaptability, and addressing the needs of developers (Especially new developers), Angular’s revival is on the horizon, ready to propel it back to the forefront of web development.p.s. Sorry for the long blog post, it is my first one ever. Hope I gave you some more insight on this subject :)Bit is an open-source toolchain for the development of composable software.With Bit, you can develop any piece of software — a modern web app, a UI component, a backend service or a CLI script — as an independent, reusable and composable unit of software. Share any component across your applications to make it easier to collaborate and faster to build.Join the 100,000+ developers building composable software together.Get started with these tutorials:bit.devblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.io----Bits and PiecesSoftware developer with a strong affinity for Angular and TypeScript - Bachelor With Honours in InformaticsDusan Novakovic--Osusara KammalawattainBits and Pieces--1Robert Maier-SilldorffinBits and Pieces--2Dusan Novakovic--Julie Perilla GarciainLevel Up Coding--29Andrea Caruso--5Love SharmainByteByteGo System Design Alliance--53The Coding DiariesinThe Coding Diaries--121Jacob BennettinLevel Up Coding--84Tejas Variya--1HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams