Developer Experience (DX) in Angular
How is Angular’s developer experience (DX)?
Newer JavaScript Frameworks like Svelte and SolidJS are increasing in popularity. One of the reasons for that is the DX. But why is it so important? And how does Angular perform regarding this topic?
What’s DX?
To answer the questions above, one might know what we are exactly talking about. After some research, I came across the following definition.
DX describes the overall feelings and perceptions a developer has while interacting with a technical product.“ [1]
So, let’s have a look at some statistics to get a better feeling about how Angular performs compared to other frameworks. The graph illustrates the ranking in retention. As you can see, Angular is ranked second last.
But why is Angular ranked so badly? And what do other Frameworks do better?
Why does Angular perform so badly?
Well, first and foremost Angular is not very beginner friendly. There are a lot of concepts one has to learn to write an application in Angular (such as modules, dependency injection, data binding and so on).
Secondly, feature requests might take a while. Angular does not add new features, because the community requests them, they deliberate very hard and have a look at what other frameworks do. Moreover, they have to be backwards-compatible, which increases the time it takes to add new features.
And thirdly, Angular’s reactivity concepts require some improvement. Other frameworks are better in terms of rendering, performance or bundle size.
What can Angular do to be ranked better?
In short, they have to improve their DX.
Angular has realized that they have to do better. Therefore, in each new Angular version, the focus lies on becoming improved and more beginner friendly.
One example are Standalone Components. Angular’s modules are not plain JavaScript modules — with import and export — but can be seen as a helper box to structure the application more easily. Imagine that someone who is not familiar with this concept just wants to create a simple application with a handful of components. This would be pretty hard because someone has to learn the module concept first. Therefore, since Angular 14+ components do not have to be defined within a module anymore they can exist without them. The underlying code is still the same, as is the compilation, only the developer experience is different.
💡 Tip: Your Angular components can be reused across multiple projects with an open-source toolchain such as Bit. With Bit, you can “harvest” them from any codebase and share them on bit.dev. This would let your team reuse and collaborate on components to write scalable code, speed up development, and maintain a consistent UI.
Learn more here:
But what’s still missing?
Not only does the Change-Detection have room for improvement but also the RxJS integration. In Svelte, for example, the use of RxJS feels more natural. Observables can be automatically subscribed and unsubscribed with the $ operator. Developers have to write less code to get the same result as in Angular.
Additionally, newer frameworks employ better rendering concepts. Let’s have a look at SolidJS. They rely on Signals, which enables fine-grained reactivity. Thus, only the parts of a component that did change will get re-rendered. In Angular, the whole component always is re-rendered.
Admittedly, Angular has also introduces Signals in its latest version. However, the Change Detection has not changed. It works as it did before. However, in future versions, there will be an option to enable fine-grained reactivity on the component level.
So what does Angular do?
It seems to me as Angular picks the best parts of each new Javascript framework out there and adds them to their new versions.
I am not sure if this is the best strategy, but hopefully, with each improvement, the DX gets better.
Conclusion
As we can see from the latest changes in Angular, their goal is definitely to be more beginner friendly and thus increase the DX. However, as they always want to be backwards compatible this is not the easiest task to do.
Other frameworks out there have better reactivity and rendering concepts and Angular tries to incorporate the best parts of these frameworks into their own.
Time will tell if that is the best strategy to attract more developers to use Angular. We just have to wait and see what will happen.
Links
[2] https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/
Build composable Angular apps with reusable components, just like Lego
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:
