My conclusions after a year with Angular
Damian Wróblewski - October 2023
Table of contents
How I met Angular
I got interested in web development around 2017 when I decided to change my career path. Initially, due to my skills in graphic design software, I planned to focus on creating static websites. However, I quickly realized that frontend technologies offered much more than just building static company brochure websites. This is how I stumbled upon a React course on Udemy, which introduced me to the basics of building web applications. The choice was quite natural. At that time, React was the most popular frontend framework, and there was an abundance of learning materials available online. Additionally, its biggest rival, Angular, had a less favorable reputation and was not recommended for beginners due to its steep learning curve. While I was in the React bubble, I subconsciously developed a bias against Angular, believing it to be a clunky framework that couldn't keep up with the dynamic frontend world.
After some time, I found a job at a marketing agency, first at one and later at another. There, I mainly worked with WordPress. It wasn't the ideal start, but it was a small step forward on my journey. In the meantime, I worked on portfolio projects using React, which allowed me to make a much bigger leap forward. I joined a bootcamp at a large corporation where I discovered that the frontend of the application we would be building during the course was based on Vue. My initial experiences with Vue were very positive. After spending a long time with React, learning Vue was quite enjoyable. It was evident that Vue had been created based on the experiences of other tools like React and Angular, resulting in a high Developer Experience.
After completing the bootcamp, it was time for my first real commercial project. Quietly, I hoped to continue my adventure with Vue or return to the familiar React. However, as Woody Allen once said, "If you want to make God laugh, tell him about your plans."
First commercial project
As you can guess, fate introduced me to Angular in my first real project. I joined an international team as a frontend developer responsible for one of the modules of a large enterprise-level application used for project management in a European Union institution. The technological stack in this case included Angular and Spring Boot (Java), which is a fairly common combination for such systems.
I had been in the React information bubble for a long time, which made me less than thrilled about having to learn Angular. I had read many negative opinions about the Google framework. However, there was no choice but to grit my teeth and dive into an accelerated course on my third frontend technology in my short programming career. After all, it's just a tool, and the concepts underlying frameworks remain the same. The first contact was as expected. I was terrified when I first saw Angular code, which resembled a Java application more than a frontend framework. After functional programming and hooks, classes and decorators looked exotic at the very least. As you can see, my first impression was not the best. What came next?
Hard to Learn, Hard to Master?
According to popular opinion, beginner frontend developers should probably avoid Angular as their first framework, and it's hard to disagree with that. There are quite a few concepts to grasp initially. Some time ago, I even wrote a separate post about what's worth knowing at the beginning. You can find it here. However, what raises the entry bar for Angular are concepts like modularity (who needs it?) and the famous RxJS. And when you add state management with NgRx to the mix, you get a concoction that can fry your neurons. Therefore, I must admit that taking the first steps was simply difficult and required extra determination. Especially since I had just learned Vue, which seemed like a much more approachable tool. In the learning process, code reviews and the ability to inspect code written by more experienced developers proved to be invaluable.
Despite the fact that Angular probably requires more time to learn the basics compared to other frameworks, in my opinion, the time required to write high-quality code is similar, if not shorter, than with other frameworks.
What I Liked About Angular
I could go on about how Angular is a complete and robust framework where you don't have to worry about choosing a library for routing or forms because you get all the necessary tools out of the box. However, that's not particularly groundbreaking. Therefore, I'd like to focus more on my subjective developer experience here.
RxJS
The RxJS library, much like TypeScript, is integral to the Angular landscape. Handling reactive streams in Angular, especially in the beginning, is not the easiest task. However, once you get through the basics and become more proficient in RxJS, combining streams and transforming data using numerous operators can be incredibly satisfying. On one end, you have a stream emitting data, and on the other end, you have the final shape in which this data should be transformed. The task is to use various structures and operators (there are plenty of them) to create an optimal solution. There are many such logic puzzles when working with streams, and from a programmer's perspective, it's great fun. In addition to transforming complex data structures, RxJS also allows for returning multiple values simultaneously or easily canceling subscriptions.
Declarative Programming
This point is somewhat related to the previous one. Angular, in conjunction with RxJS, allows for the creation of reactive interfaces using fully declarative code. While it may seem more challenging at first glance, it helps avoid mess and hard-to-locate errors.
Reactive Forms
Reactive forms are a combination of forms and reactive streams, and RxJS works wonderfully in this case. Reactive forms allow you to create inputs conveniently and combine them into groups, organizing user-entered data as streams.
TypeScript by Default
Despite TypeScript facing some challenges lately, I personally cannot imagine tackling a more complex project without static typing. It aids both in code maintenance and is invaluable when onboarding into a new project. Angular adopted TypeScript from the very beginning, and it seems to be an inseparable combination.
What Irritates Me?
Like any tool, Angular has its more or less irritating flaws that can significantly impact the Developer Experience.
RxJS Spaghetti
Yes, RxJS is a powerful tool that allows you to build fully reactive applications and works wonderfully when dealing with complex data streams like user interactions, forms, or WebSocket communication. Its immense power, however, comes with a downside. Its complexity makes it easy to fall into the trap of creating overly complicated and hard-to-maintain constructions. Less experienced developers may easily resort to anti-patterns like nested subscriptions. It's also easy to encounter difficult-to-locate issues such as race conditions related to the order of data emission from different streams.
Another issue is the overuse of RxJS and its application in places where promises would be a better fit. This applies to simple, single HTTP requests where you receive a single value that doesn't require complex transformations. The situation is different when you want to send certain requests multiple times, as in the case of pagination or automatic retries in case of errors. More on this topic here.
Modules
Whoever has worked with Angular has probably experienced challenging
moments while configuring modules, deciding what should be imported, exported, and how to configure service providers. While the Angular team introduced standalone components, making it possible to get rid of modules or at least reduce the size of shared modules with many components, migrating away from modules can be painful in the case of large applications, and completely eliminating modules is often impossible. In my opinion, effective tree shaking and optimization of the final code size are something that should be happening under the hood in a modern framework.
Testing
I used to think that writing unit tests was one of the more enjoyable parts of building an application. Then I had to write my first test in Angular... While starting with testing in React or Vue was very enjoyable, it's not quite the same story with Angular, and the entry barrier for testing is relatively high. And I'm not just speaking from my own experience here. Colleagues in the field who I've had the chance to work with share a similar opinion.
Quo Vadis Angular?
For a long time, Angular had the reputation of being an outdated framework that couldn't keep up with the rapidly changing world of web development. However, recently, its development pace has significantly increased, and the latest releases have seen revolutionary changes like the standalone components I mentioned earlier or the introduction of signals borrowed from Solid.js, bringing Angular closer to React, Vue, or Svelte. While it might seem like a positive development direction, there are voices of discontent online, suggesting that Angular, in its efforts to "catch up" with the competition, is losing its core strengths. One of these strengths is stability, and the fact that Angular was seen as a gradually evolving tool that didn't care which direction the rest of the world was heading. It's important to remember that Angular, due to its object-oriented nature, is the preferred framework for Java developers venturing into frontend development, and this group likely constitutes a significant portion of the skeptical voices.
However, the Angular team seems determined to compete for the attention of new developers and achieve better ratings in the State of JavaScript survey. Regardless of the opinions, development in the frontend world is necessary to stay relevant, so I'll be eagerly awaiting new versions.
Is It Worth Learning Angular in 2023?
First, it's worth asking yourself what Angular is and in what types of projects it's typically used. Angular is a framework for building interactive web applications and is best suited for creating Single Page Applications (SPAs) where SEO and server-side rendering are not a top priority. Due to its stability and the fact that it's backed by a major player like Google, it's often used, along with Java, to build large, scalable enterprise applications. If you choose this path, you'll likely be working on these types of projects. Whether it's worth diving into the world of Angular in 2023 is a question each person must answer for themselves. Many large applications are still based on this framework, and for a long time, someone will need to maintain and develop them. As you can see in the graphic below, the use of Angular is at a high level all the time, so there is no shortage of job offers, and although there are significantly fewer than for React, the competition is also less.
Conclusion
My first year working on commercial projects, in addition to gaining a wealth of technical knowledge and learning how to function in a developer team, brought several reflections. Above all, I've learned to let go of my sentimental attachment to frameworks and libraries. Of course, some tools are more comfortable to work with than others, but ultimately, they're just tools. They perform better in some projects and worse in others, and the social media battles between fans of different solutions should be taken with a grain of salt. Additionally, getting familiar with various tools allows you to have a broader perspective and choose the right stack for your own or client projects in the future.
What are your experiences with Angular? What do you see as the strengths and weaknesses of Google's framework? Share your opinion in the comments section.
Stay in touch with me on Twitter or LinkedIn if you're interested in the world of web applications. 😉
Join the discussion