Introduction
For frontend developers, there are a lot of options out there. Options such as React, Vue.js or even Next.js if you really want to be in vogue seems to be all the talk. But I always find myself falling back to one option, Angular.
In this post, I’ll go through my use case and a brief description of what Angular is why I choose Angular.
My Current Use Case
Admittedly, Angular is not a one size fits all. It’s general learning curve and lack of simplicity can make it a bad option in some use cases.
So before I talk about the nitty gritty of Angular, I need to talk about how my current workflow.
I currently work on larger enterprise applications with a lot of moving parts, that is super reliant on the collection and presentation of data. This is true both for my professional and personal projects.
Essentially, the apps I build end up being massive forms that act as a data presentation tool and an interactive dashboard. And Angular, as it so happens, is really good at doing this and it does so efficiently.
How? Well, let me explain.
Framework vs Library
One of the things that makes Angular great to use, is the fact that it is a frontend framework and not a library like React.
What’s the difference?
When thinking about the a framework vs a library, the best way to think about it is that a library is like pieces of individual furniture while a framework is made up of sets of ready made rooms.
Frontend libraries gives you the basic tools that focus on a base concept while a framework gives you a lot more structure to play around with.
You sacrifice some flexibility, but it gets made up for as a lot of the functions and features you would usually end up adding to your application would usually be taken care of.
It’s worth noting that frameworks generally contribute to a larger package size which impacts the performance of the application. But this is usually offset because a lot the functionality is already included and you wouldn’t need to rely on additional libraries to give you some common features.
My Favourite Angular Features
Angular, comes with everything you’ll really need to get a web application up and running. Some features include handling routing, the building of forms and automated testing suites.
Angular also has it’s own CLI, called Angular CLI. Apart from using it to creating and configuring a new Angular application, you can also execute certain commands to scaffold bits of code for services, modules and components (the building blocks of Angular).
Another thing that’s worth mentioning is that it runs standard with TypeScript, a superset of JavaScript that includes type safety and other features. This allows you to maintain a consistent state in the data across your application (from database to frontend).
Angular Components
As mentioned, Angular like most frontend applications are made up of components.
Each Angular component is made of 3 parts (usually split up into 3 different files):
- Component - The part that handles all the logic such as the lifecycle of the component, injecting services, events etc.
- Template - The template is HTML that allows for angular code to embedded into it so you can insert data and handle basic logic.
- CSS Module - This allows you to add styling to the component, .
While this might seem like unneeded complexity at first, breaking up the components like this gives you better organization of the component and prevents it from becoming cluttered and overcomplicated once the complexity of the component increases.
Angular Scales Effortlessly
Angular Components, makes use of services that’s injected through dependency injection to add functionality such as interacting with you REST API. Some of the benefits dependency injection include maintainability and testability, which is crucial for your applications ability to scale.
The components can also be organized into modules which are responsible for the imports, exports and declarations for the components and any other components and tools you wish to interact with the application.
Breaking up your application like this is what is referred to as modularizing. When you modularize your application, it separates the responsibilities or concerns that each part of the application needs to run resulting in your code being better to maintain and it being less error prone.
The great thing about Angular is that, once again, it comes with these functions out the box and uses the CLI to scaffold the code and structure of you app making the process of making improvements and maintaining the project a breeze.
Conclusion
As a fullstack developer working on enterprise applications, Angular covers a lot of the difficulties that I might encounter in the development process.
While Angular might be intimating because of the initial complexity and learning curve, it’s a great framework to use for developing everything from prototype to a fully fledged large scale application.
If you found this post insightful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.
Thanks for reading and have a great day! 😄