Recently, my colleague Wes Dollar explained the benefits of building an application using React. Now it’s my turn to discuss Angular, the other giant in the application platform space. As a developer, one of the biggest headaches I’ve encountered is going down a path and realizing you should’ve done something using a different approach. Every application I’ve ever worked on has at least a few things we wish we had done differently. That’s normal. But deciding on the tech stack for your application is arguably the biggest, most fundamental decision you’ll make when it comes to building an application, and one you absolutely must get right. So why should you use Angular instead of React? While the final decision rests solely with you and your team, here are a few of my favorite features of Angular.
Angular is a full-fledged framework
Out of the box, Angular has everything you need to build an enterprise-level web application without the need for additional libraries. Component-based routing, data-binding, API interaction, and dependency injection are just a few of the things that come with Angular that often need to be solved with additional libraries when using other tools such as React.
Modular architecture
In the early days, when you were building a web application, you more often than not had to duplicate (and maintain) code if it needed to appear in multiple places or pages. This made even the simplest change tedious and time consuming as you would have to make the same change in several places. Angular uses a more modern modular approach. Angular modules are a collection of related and reusable components, services, directives, pipes, and more. Modules make organizing your code by functionality simple, leading to a cleaner codebase that’s easier to understand and maintain. For example, let’s say we have a dashboard page and an admin page. These would be great cases for feature modules. Modules can also be lazy loaded or even loaded in the background which reduces the user’s time to interaction (the amount of time before the user can use the app).
Consistency – there’s an Angular way of doing things
There are often several different ways of doing things in Angular, but there is usually a highly suggested way, especially when it comes to building components, modules, and services. Angular makes these suggestions in their style guide, which can be found in their documentation. This is extremely beneficial for larger teams because it shortens the onboarding process, reduces the time it takes to fully understand other developers’ code, and makes it easier to maintain a large codebase. Angular developers can usually hop from one Angular codebase to another and feel very comfortable. This also makes researching edge cases a breeze, because more often than not, someone out there has solved whatever problem you’re facing.
Angular uses TypeScript which helps the development process
TypeScript was developed by Microsoft and is a typed superset of JavaScript that compiles to JavaScript. Have you ever spent what seemed like hours debugging something only to find you made a typo in your variable name or were expecting a different payload from an API call? TypeScript helps editors (like VSCode and others) with autocompletion. Its transpiler helps with debugging, and its use of types and interfaces helps with improved code quality and understandability. TypeScript also gives you access to new JavaScript features before they are supported by major browsers.
Robust ecosystem
If you spend more than 15 minutes with Angular, you’ll truly understand just how robust their ecosystem is. This includes their incredible documentation, extremely active codebase, community support, code generation tools, and UI libraries. If you didn’t already know, Angular is developed and maintained by Google. You can imagine when you run into a problem and need to research (Google) something related to Angular, it’s usually not hard to find what you’re looking for. This leads to more time writing code and who doesn’t like that?
Other favorite features:
- Tree shaking – Unused code is removed at build time, leading to smaller code bundles.
- Ahead of time (AOT) compilation – Angular (by default) compiles your app and libraries at build time. The browser loads executable code instead of needing to compile the app first.
- Differential loading – Angular produces both a modern (ES2015+) and legacy (ES5) JavaScript bundle at compile time. When users load your application, they’ll automatically get the bundle they need. Users with modern browsers won’t have to pay the “polyfill tax” that older browsers require. This means smaller code bundle and reduced load times.
- Component based routing – Rather than fetching a new page from the server, Angular loads different views from memory which feels near instantaneous to the user. This is why an Angular app is known as a Single Page Application (SPA).
- Testing – With the modular structure, unit testing different components are simple and easy to do without the need to include additional libraries.
- Security – Angular has several built-in protections for things such as cross-site scripting attacks and sanitization.
Deciding the tech stack to use for your next application is a big decision, and both React and Angular have their respective benefits. That’s why, as Wes mentioned in his blog about React, only when you consider your team, goals, and the project at hand to know which tool will work best for you.
About the Author:
MacGregor Thompson is a full-stack developer and Microsoft Certified Professional with six years of experience building rich web applications. He has a passion for software and delivering the best user experience possible. He embraces challenging projects and staying on top of ever-changing technologies. In addition to JavaScript, he specializes in Angular and TypeScript.
Five Ways User Feedback Can Transform Your Product Strategy
User feedback is a critical asset that can provide valuable insights into your users' wants and needs. It can also give important observations into your application's overall performance. In this article, Principal Product Strategist Toyia Smith shares five ways to better incorporate user feedback into your product strategy.
Balancing Technical Debt and New Features: A Product Owner’s Guide
The term "technical debt" frequently emerges in discussions about software development, product health and organizational effectiveness. However, its true meaning and the balance organizations must find between managing this debt and new feature innovation can be confusing. In this article, learn how to manage that delicate balance so you can create an exceptional product.
Navigating Digital Product Discovery: A Guide to Avoiding the 5 Common Pitfalls in Custom Product Development
In digital product development, a well-structured discovery phase is critical to a product’s long-term success. However, bringing a digital product from concept to reality can be challenging. In this article, Principal Product Strategist Josh Campbell shares his guide to avoiding five common pitfalls during digital product discovery.
Preparing Your Business for the Realities of AI and Machine Learning: Beyond the Hype
The buzz around artificial intelligence (AI) and machine learning (ML) has almost certainly reached a fever pitch. With benefits including increased efficiency and enhanced customer experiences, many businesses are eager to take advantage of these technologies. In this article by Chief Technology Officer Derek Perry, learn why organizations need a solid foundation to ensure they're ready to harness the benefits of AI and ML, before jumping in headfirst.