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! 🚀
Top comments (14)
I worked with Angular for almost three years, and I think it's a great framework.
But after working with React, my main issues with Angular is syntax and modules.
For example, React is close to JS syntax as possible, but if your work with Angular you need to learn the specific syntax, and it will be only useful in angular.
Angular modules are confusing, although Angular CLI project helps to manage them.
I still think Angular is a solid choice for any big project
How is that syntax "issue"? Do you mean the use of Typescript? Typescript is not an Angular related language. From my perspective, there are no cons in the use of Typescript... it's all benefits!
What confuse you of Angular modules?
I mean template syntax.
*ngIf, *ngFor, [input], (output), eventEmitter
In React you only need to remember how to do {input}, in everything else you use plain js
Same goes with modules, in React you just bring your component.
Don’t forget the banana in a box ordeal
Great post! You just wrapped out the reasons of why Angular is my #1 choice when I think of webdev (or mobile dev, take a look at NativeScript).
If I could highlight one benefit from using Angular would be this: Coding is like human languages. Despite from speaking the same language, there are different accents, variations... etc. which does not help to have an easy communication. What Angular does (beside from actually working!) is force us (devs) to speak the same language the most similar way possible, this way we are all going to understand what's happening in every piece of any app.
great post! thank you!
Angular is a great framework for building web applications. I use Vuejs for building landing pages, but for applications that need a lot of logic, Angular is always my first choice. The Angular team has done a great job with the CLI, CDK, Schematics. Some Developers find it hard to work with Angular Module, but in my experience, Angular Modules makes it easy for isolating, decoupling and grouping code, and with Angular Services you just connect all the pieces together.
Angular is perfect for enterprise software. It favors Typescript which is about strong typing (a huge intellisense enabler). The Typescript compiler allows us to target any Javascrpt version.
Plus it's use of webpack makes it tops in frontend work. What's easier than 'ng g component mycomponentname'?
But somehow, most of us can't give love over React to Angular.
Because most developers of the React community are starters ... and looking for to build simple crud apps
I am new to the webdev world. At first, I thought - wow Vue looks awesome! It's got the best parts of Angular and React., AND it's open source not backed by any major corporation. Sweet.
Then the new API proposal came out. Ew. Time to switch to Angular! Bye Vue!
Really a useful blog indeed! Thankyou and Keep sharing!
Only picked angular because work made me. If given a choice I’d pick web components/ polymer or just react.
Been working with angular for 4 years, I love it. I'm super productive with the toolchain.
Also LEARN RXJS!!!!