TL;DR

I chose Angular because together we make a great team. It provides a fully-fledged platform that takes care of non-functional requirements such as compatibility, maintainability and testability while I focus on the user.

What problem does Angular solve? 🤔

Frontend development has become increasingly complex.

Ever since we acknowledged the potential of the web, our interfaces got richer and our features got more sophisticated, but as our requirements grew bigger, so did our challenges.

To give you an idea, these are some of the aspects I have to take into account when building a large enterprise app today:

• A11Y ♿️: Making websites accessible for everybody including but not limited to color-blinded, vision-impaired, motor-impaired, or hearing-impaired people. Cross-browser 💻: Ensuring your website works seamlessly, or at least progressively, on almost every browser: Chrome, Safari, Edge, Internet Explorer, etc.
• Adaptive 🖼: Providing a UI and UX that can adapt to all kinds of screen sizes (TV’s or small devices), resolutions (retina, 2x images), and types (phones, tablets, desktops), etc.
• Multilingual 👄: Building websites that can adapt to different language structures such as RTL and LTF, plurals, currencies, etc.
• Performance 🏃‍♀️: Creating websites that can be rendered under different network conditions such as 3G and on low-RAM devices in a timely fashion.

And this is just for the end-user — the developer has to deal with a lot of matters as well:

• Maintainability 👩‍💻: Dealing with code bases that can easily reach millions of lines of code while ensuring proper developer ergonomics when it comes to modularity, scaffolding, and standards.
• Building 🚜: Making sure your app bundles are lightweight so that you don’t surpass size budgets that would otherwise affect your performance and keeping an eye on any compilation errors and build times.
• Testability 🧪: Ensuring both unit tests and end-to-end tests run flawlessly, but also making sure creating new test cases remains straightforward despite the app’s complexity.

Note that for some applications, this is just an excerpt of the things you need, for some others, you can completely ignore these requirements.

For someone who is joining the software industry for the first time, this is just overwhelming.

As a professional, I'm responsible for understanding these challenges and knowing how to address them. Nevertheless, I don't want to spend hours figuring it out every time I create a new app. 🤷‍♂️

That's my problem, and that's what Angular does best.

What does Angular do? 🤔

Angular does a lot of things, but maybe this picture can give you a better idea:

All those nice icons up there represent a set of tools Angular provides. Let's go through some of them:

• 💻 CLI: According to large enterprises, the Angular CLI is one of the best features Angular is equipped with. It allows you to scaffold components, services and modules with just a simple command, but of course, that by itself isn’t very impressive. The real value of the CLI comes with heavier commands such as ng add @angular/pwa which automatically turn your app into a Progressive Web Application, or ng update @angular/core @angular/cli which automatically updates your app to the latest stable version of Angular. All of this is possible thanks to the power of Schematics.
• 🚜 Schematics: You can think of Schematics as the Yeoman of Angular, but with superpowers. Schematics is a code generator, it allows you to create and transform code. For example, instead of creating your TypeScript models over and over again, you can create a schematic that generates the whole class for you with accessors and all. However, this is just a simple example — you might as well use it for complex logic such as refactoring a large application to use external templates instead of inline templates in all their components! Doing it by hand took me 2 hours, doing it with Schematics just a few minutes 😙.
• 🖼 Angular Material: It is a component library developed by Google that gives you access to a set of fully-tested components that work out of the box. It is initially themed with the Angular Material design system, but it also provides a CDK (Component Development Kit), giving you the opportunity to use whichever design system you need.

• 📞 Http Module: The Angular team knows that HTTP calls are present in most web applications. That's why Angular comes with a module that makes it easier for you. It is based on Observables so you can compose your calls in any way you like. Besides, it has HTTP interceptors which allow you to transform your incoming/outgoing requests with ease.
• 👄 i18n: Angular also provides built-in functionality through the Angular CLI to help you create multilingual websites. It reads your templates and generates the XLIFF (or XMB) files that can be used for translations of texts, numbers, dates, and currencies. Once you have set up your translations, the CLI will create the corresponding builds for you without any additional effort.
• 🧪 Karma, Jasmine, and Protractor: Unit tests and end-to-end tests are a priority for the Angular team. That's why Karma is already configured in every Angular project, created with the CLI. You can use Jasmine if you wish or switch to any other framework of your preference. In the end, all you have to worry about is writing your tests.
• 🗺 Router Module: Whether you are lazy-loading, pre-loading, or loading your routes on demand, the Angular CLI has a module ready to make it straightforward for you. It provides a maintainable structure that makes applications with heavy routing configuration easy to handle. You should only be concerned about the what while Angular cares about the how.
• 💥 Reactive Forms Module: Forms is one of the most common artifacts in web applications. Some are rather simple such as login forms, others are complex where some field values depend on other fields values and such values need to be validated on real-time in both the client and the server… 😲. Well, the Reactive Forms Module helps you reduce the amount of boilerplate code you need to achieve this while allowing you to keep logic out of the template.

Of course, some of these features are far from perfect, but for now, they have saved me a lot of time.

Should I use Angular then? 🤔

Whether a tool is suitable or not depends on your current needs, circumstances, and challenges.

To me, Angular is very well suited for large challenges. Although, isn't the web a large challenge already? Ryan Grove provides an interesting point of view here:

If today we have better tools to help us do it well, then why not use them? A good reason would be the cost. For some people, mastering Angular can take significantly more time than learning other frameworks out there.

In the end, it's up to you to pay for it or not, but then, Henry Ford's quote comes in very handy:

If you need Angular but you don't learn it, you will realize you learned how to deal with every single problem Angular solves, but you still don't know Angular.

Thanks for reading! 🎉

If you have questions about Angular or are not completely sure whether if Angular is a good fit for you, reach out to me! I'd be more than happy to help you figure it out! 🚀