Kinanee SamsonAngular is a super heroic JavaScript framework for building frontend Web Applications, Angular was created and released by Google in September of 2016, it is not to be confused with Angular JS which is the prequel to Angular. Angular and Angular JS are two completely different ways of doing the same thing. Angular JS is the first version of the MVC (Model View Controller) web application development framework, while Angular is used to collectively represent further releases to the framework starting from version 2 of Angular JS. The shift from Angular JS to Angular represents a major break away from version 1 and the team at Google had to rewrite the framework from scratch.
What Is Angular?
Angular is a JavaScript framework for building client side web applications, it is a super heroic framework that allows users to build very robust applications, it is built with TypeScript and has out of the box support for TypeScript. Angular has a very strong opinion about how your web app should be built and structured. It implements an MVC approach to building a web application. Angular comes loaded with a powerful CLI that can be used to scaffold new applications, generate components, services, route gaurds, etc. The CLI also allows us to test, run and build our applications. Angular has out of the box support for Test Driven Development (TDD) which is configured with Jasmine and Karma. It also supports end to end testing with Cypress. Angular is a full fledged frameworks and it comes baked with everything you'd need to build a frontend web app.
It has a powerful router, it is reactive by default and supports two way data binding and since it is built with TypeScript, you get all the extra features of that comes with using TypeScript, Angular also has a custom state management solution built directly into it. In Angular, there is a component which is a class that's decorated with the @Component decorator, this encapsulates component logic and is regarded as the controller, there is a UI which is built with handlebars and it is known as the view while our data is the model.
Features Of Angular
Angular is a very powerful framework and it is used every week by 2 million developers. Applications that are built using Angular implements the MVC approach and this is a great thing from an architectural perspective, since application architecture is quite a problem for new Devs and large teams. You can be sure of what to expect when handed an existing Angular project to manage, this does not automatically mean that all projects built with Angular are top notch, the strict application architecture can become quite limiting as we discover other architectural patterns, this is arguably one of the pitfalls that comes with Angular. The more you build with it, the deeper you get stuck with it and IMHO being restricted to one way of doing things, isn't a great feeling. Let's examine in detail some features of Angular.
Supports TypeScript
Angular is built with TypeScript, and has full support for it, in fact I am yet to see an Angular application this is built using plain JavaScript, this is one of the best things about Angular. Since we are using TypeScript we are sure that most of the nerve racking bugs that we get when using JavaScript, is actually avoided. We get a good IDE support and auto-completion with it, the development experience is nothing short of superb due to TypeScript support. TypeScript is a super set of JavaScript that was built my Microsoft, it extends JavaScript by adding types to it. TypeScript introduces to JavaScript all the capability of a strong Object Oriented Language and static typing. If you already know how to use TypeScript then you'd get a good experience with it, however for beginners, you find out that you have to learn TypeScript in order to fully grasp Angular.
Two Way Data Binding & Reactive By default
By Default angular keeps track of the changes in our data and it will re-render the UI whenever there is a change in our application state, the MVC approach of angular allows the UI to be a proper reflection of the data or state so whenever there is a change in our data, angular will automatically detect the change and render the correct UI for it, this is quite impressive considering that some frameworks has not been able to achieve this.
Powerful CLI
The Angular CLI is another strong feature of Angular, this CLI comes baked with the full power of Angular and it allows us to run some commands on our terminal that greatly reduces certain repetitive tasks, there's ng new angular-app for creating a new angular application, there's also ng g component folder/Name for generating new angular components, ng test for testing our application and lot's of other commands, collectively these helps us to greatly simplify some mudane tasks and keeps our focus on building our application.
Dependency Injection
This is a design pattern that allows a class to request for modules that it depends on form an external source as opposed to the class creating those dependencies itself. The Dependency Injection allows Angular to be highly flexible and increases the modularity of our code base, this helps in upgrading our apps and adding new features to it. The angular CLI can be used to create a provider or service ng g service folder/Name, which is decorated with the @Inejectable decorator, It is the decorator that specifies that the service can be injected to our components, it also helps us to limit the scope of the service and the modules or components that can have access to it.
Directives
Angular extends HTML by adding custom directives to simplify some common operation we would need to carry out, these directives are simple classes that extends the behaviour of certain elements in our Angular application, there are tons of built in directives that we could use to manage forms, lists and lots more. Some example of built in directives include [NgIf] for conditional template rendering, [NgFor] for repeating a node for each item in a list. [ngClass] conditional classes or [ngStyle] for adding inline conditional styling, [ngModel] for binding to a form element.
MVC
I personally think that the MVC approach that Angular enforces is also one of the benefits of using the framework, this solves a big problem that most developers face when building applications, inexperienced developers often struggle with choosing an application structure so it is an extra benefit to have that problem already solved for you. Even some experienced developers appreciates this approach, as it helps to achieve a level of consistency when working with a team, as per everyone are on the same page and you have an idea of what to expect.
Rxjs Support
I was learning how to use Angular to build UIs when i had to learn the Rxjs library, it isn't something that I use quite often but I appreciate the library and it's approach to handling asynchronous events that happens in our application. By allowing us to treat our data as a stream, Observables allows us to keep emitting values and any subscription to that Observable will be notified of new data, allowing our application to reactive. A single Observable can be shared across different components in our application, thus sharing a single source of data, almost eliminating the need for introducing custom state management solution.
Should You use Angular
We have examined some of the obvious features of the Angular framework, but should you use it? This is an important question that frontend developers need to ask. Let's discuss some of the things you need to consider if you are planning on learning or using angular;
You see all the benefits that comes with using angular can be achieved with most frameworks, the time curve needed to come to terms with the framework is not justified at all IMHO, first you have to learn how to use TypeScript, then you have to learn how to work with Observables all this while learning how to use the framework, from a beginners perspective this can easily become just too much.
The MVC approach limits you when designing your application architecture, you have to stick to this approach even when it does not clearly fit the situation or when another approach is more practical. I hate the restrictive feeling that I get when I work with Angular, I like the freedom to choose whatever that makes sense to me, instead of being locked in to one approach.
I feel like building an application is not really straight forward with Angular, there are so many unnecessary things you need to account for when you want to build an application with Angular, I think that the framework gets in your way and that it doesn't just allow you to go straight forward to building your application.
Applications built with Angular are notorious for having large bundle sizes, you will surprised at the bundle size of a very small application, this is not ideal as we want to keep the JavaScript we ship to the browser as small as possible, this helps our apps to be more perfomant. I have built apps that total as much as 5MB with angular and this application was ridiculously simple.
In 2022 there are lots of frameworks that does what Angular does albeit with less restriction, friendlier introduction to beginners and simplicity, most frameworks now supports development with TypeScript. So you can get started with JavaScript and progresively move to TypeScript when you feel more comfortable with it.
If you are interested in learning how to build UI with angular then you can visit the official Angular documentation to start coming to terms with the framework.
That said, this article is not intended to discourage you from using Angular or to take anything away from what we can accomplish with angular, I'm just a guy on DEV that is giving his opinion with using angular. Angular is a super heroic framework that can build robust and reactive applications, what are your experience with Angular? what are your thoughts about it? After reading this, do you think that in 2022 it is a great idea to build your UI with Angular? please leave your thoughts down below and definitely add in anything you feel like i left out about the framework. Would love to see your comments down below, thank you!
