Software Engineering
Angular: A Tough Climb Worth the View
On embracing the power of complexity
Story: Bob is a software engineer who just delved into the world of Angular. He’s been hearing about its steep learning curve and, armed with a vast supply of coffee and snacks, he’s ready to face the challenge.
The first few weeks feel like trekking up Mount Everest. The intricacies of Angular’s architecture, the nuances of its lifecycle hooks, and the magic of data binding all seem daunting. Bob wonders, “Why couldn’t they just make it easier?”
Fast-forward a few months. Bob’s got a handle on Angular now. He’s built a few applications, wrangled some directives, and feels like he’s summiting the Angular mountain.
Then, his boss introduces a new project. Bob needs to wrangle with AWS, where the services list is longer than a CVS receipt. He’s dealing with EC2, S3, Route 53, and a host of other services that sound more like droid names from a Star Wars movie.
And let’s not forget Kubernetes, where every command feels like summoning a spell from a wizard’s grimoire.
Suddenly, Angular’s complexity seems like a cute, fluffy kitten in comparison. Bob looks back and chuckles:
“Remember when I thought Angular was complex? Ah, those were the days.”
Thought: There seems to be a narrative painting Angular as an over-complicated framework, struggling to maintain its foothold in a rapidly evolving tech landscape.
Today, I’ll challenge this narrative and offer you a fresh lens to view Angular and its vibrant role in the web development cosmos.
As we embark on this journey, know that my compass is calibrated by a rich history in the field of software engineering, one that spans over 15 years.
During this time, I danced with Java, tangoed with the Oracle database, waltzed with the Spring framework, and even had a few salsa sessions with Struts and SOAP. I embraced their intricacies and cherished the profound capabilities they granted me as a developer.
Since then, I’ve journeyed through a myriad of other languages, tools, and frameworks, ranging from Delphi, PHP, Zend framework (Laminas), jQuery, Sencha ExtJs, and SAP ABAP, to IBM Cognos TM1 — each with their unique quirks and merits.
As a cloud developer, I’ve navigated the labyrinth of AWS and survived the jungle of its over 300 services. More recently, I’ve dabbled in React and Python.
Yet, throughout this vast exploration, one truth has remained resolute: Angular has offered me the most gratifying Developer Experience (DX). No tool managed to kindle the same spark of pure elation that I experienced when I began my journey with it.
Interestingly, I’ve seen the same pattern emerge in many of my junior and seasoned colleagues. Once primarily backend engineers, these individuals embarked on the path of Angular and found themselves captivated by the framework’s robust capabilities. The transformation was unmistakable.
Their work with Angular ignited a newfound enthusiasm and a deep sense of satisfaction.
So, the burning question remains: where do these Angular critiques originate? Why do some people promote the framework as an intimidating castle?
Below, I’ll unwrap this riddle and examine the reliability of approaching Angular with a touch of trepidation.
Swiss Army Knife vs. a Single Blade
Let’s address the elephant in the room: complexity.
When compared to some other simple JavaScript frameworks, it’s true that Angular requires a more involved setup, with its modules, components, pipes, directives, decorators, and injected services.
But this is like comparing a Swiss Army knife to a single blade.
While the single blade is simpler and easier to use, the Swiss Army knife, despite its complexity, offers a far broader range of capabilities. It’s not just about rendering buttons on the screen and listening to events; it’s about providing a comprehensive toolbox that empowers developers to craft high-quality, maintainable applications.
Feast your eyes on the Lucene query editor below, delicately crafted as an Angular custom control:
How many other frameworks out there in the vast JavaScript world offer such flexibility and robustness? And if they do, what would the recipe… I mean, source code, look like?
Now, if the flexibility that Angular gifts me — the ability to weave together such intricate requirements — is labeled as “complexity,” then sure, let’s call Angular complex.
But this complexity is by no means arbitrary; it’s a reflection of Angular’s comprehensive capabilities and its commitment to providing a complete, all-encompassing toolkit to frontend development.
So, in this light, Angular’s complexity becomes less of a daunting maze and more of an exciting playground of possibilities.
Is Angular Truly More Intricate than React?
There’s a curious phenomenon when it comes to comparing Angular to React. Some folks pretend that with Angular, developers need more steps in their learning curve.
And yet, when you meander over to the realm of React, suddenly you’re in the land of concepts that sound more like they belong in a sci-fi novel than in a programmer’s toolbox.
I’m talking about a place where you’re casually dropping terms like “Virtual DOM” and “JSX.” It’s like you’re discussing time travel over a cup of coffee:
- The Virtual DOM? It sounds like some sort of parallel universe where discarded bits of code go to a party.
- And JSX? It sounds more like a new space-age alloy or a distant exoplanet than a syntax extension.
But wait, there are more concepts that may feel strange to newcomers:
- Props: React components are driven by two types of data: props and state. Props are passed from parent to child. It’s a paradigm that can lead to interesting data flow structures in your application.
- Render Props: Render Props is a technique for sharing code between React components using a prop whose value is a function. It’s like passing the baton in a relay race, but in this case, you’re passing the “render control” from one component to another.
- Higher-Order Components (HOCs): These are functions that take a component and return a new component. This concept can be quite peculiar, especially when you’re wrapping components inside other components like a set of Russian dolls.
- Context API: This is React’s solution to prop drilling, a practice where props are passed from parent to grandchild components through intermediary components that do not need the data. The Context API creates a sort of wormhole, allowing data to teleport from one component to another, bypassing those that don’t need it.
- Hooks: Introduced in React 16.8, hooks let you use state and other React features without writing a class. The names alone,
useState,useEffect,useContext, and the custom hooks users create, sound like magic incantations bringing your functional components to life. - React.Fragment: Instead of adding unnecessary nodes to the DOM, React introduces
Fragmentsas a way to return multiple elements from a component’s render method. It’s like an invisible wrapper, adding another level of abstraction to your JSX.
Add these to your sci-fi programmer’s toolbox, and you feel React is programming in a parallel universe.
Example with React
Let’s check the following React code that fetches a list of posts from a server, filters them based on user input, and renders the filtered list:
This component uses the useDispatch and useSelector hooks from react-redux to interact with the Redux store, and the useState and useEffect hooks from React to manage local state and side effects.
Understanding how all these pieces fit together and how the state updates in response to user input and server responses can be challenging, especially for developers who are new to React or Redux.
Furthermore, this component does a lot of different things instead of having a single responsibility, which can make it harder to maintain and test.
The Same Example with Angular
Now, let’s use Angular’s HttpClient to fetch the posts and store them in a service:
We’ll filter the posts in the PostListComponent by leveraging RxJS observables:
And here is the HTML template:
This Angular version offers a separation of concerns:
- The filtering logic is encapsulated within the
rxjsoperator in theposts$observable declaration. This makes it easier to reason about the state of the component and how it updates in response to changes in the filter. - The HTML template also clearly separates the UI logic from the JavaScript/TypeScript code, which can make it easier to understand and maintain than the React version.
It’s a Feature, Not a Flaw
Angular architecture helps enforce a strict project structure and promotes good programming habits, which are invaluable in large-scale projects.
And despite the narrative that React projects are more manageable, you may have seen instances where the lack of a holistic solution or specific capabilities in React leads to maintenance nightmares in the long run.
Airbnb Case Study
In 2019, Airbnb, which had been one of the most prominent users of React, shared its experiences about the challenges it faced with the library in a series of blog posts.
After years of using React Native, Airbnb sunset the framework and migrated to other tools.
Facebook Case Study
Another example can be found in the experiences of Facebook. Despite being the creators of React, they too have faced challenges with it.
Facebook has been working on upgrades to React to address various performance and usability issues. This work has resulted in new features and updates, such as the React Concurrent Mode and React Hooks.
Open-Source Projects
The WordPress Gutenberg project is one notable example, from the open-source world, which faced criticism from developers because of confusing and difficult-to-understand code.
These examples, among others, underline the point that while React’s flexibility can be an advantage in some cases, it can also lead to significant maintenance challenges, particularly for larger projects and teams.
Final Thought
To wrap it up, while it’s true that Angular comes with its own set of challenges, let’s not overlook its strengths.
Its complexity, while daunting to some, is a testament to its comprehensive capabilities as a holistic solution for web applications.
Let’s honor the fact that Angular is always in a state of flux, continuously striving to better cater to the needs of its developer community. From the introduction of directives, pipes, and standalone components to the recent addition of signals in version 16, Angular is an enduring force in the realm of modern web development, never resting on its laurels.
The commitment of the Angular team and the community to innovation is rock-solid, consistently pushing the boundaries to eliminate the ecosystem’s bottlenecks and enhance its functionality.
By choosing TypeScript as Angular’s default programming language, Angular has significantly contributed to the rise of this statically-typed JavaScript superset. Its adoption of RxJS, though adding another layer of complexity, supercharges it with the mighty abilities of reactive programming.
Angular might not be the most straightforward tool in your toolbox. But if you zoom out and observe the vast spectrum of technologies you encounter as a software engineer, its learning curve is a mere hill against a mountain range.
So the next time you’re wrestling with a cloud service or a tricky segment of a CQRS (Command-Query Responsibility Segregation) architecture, remember that Angular will be right there, purring softly in the corner, ready to be your fluffy kitten once again.
Let’s take a moment to truly appreciate Angular for what it truly is: a robust, powerful framework that’s worth every ounce of effort you invest in mastering it.
“Learning programming is hard, and that’s why I like it.” — Roger Collier
Want more?
I write about engineering, technology, and leadership for a community of smart, curious people 🧠💡. Join my free email newsletter for exclusive access or sign up for Medium here if you haven’t done it yet.
Join 20K+ students and get my online video course: How to Identify, Diagnose, and Fix Memory Leaks in Web Apps
