What Is Angular?
In this article, I will be explaining what is Angular? How does it work? What are the main features of Angular.
Are excited? Let’s get started.
First, let’s understand what is Single Page Applications (aka SPA) that everyone is talking about!
Single page applications are web applications that run on the browser and do not need reloading pages throughout the lifespan of the application and only data is transmitted back and forth.
Well no brainier, Angular is an SPA framework.
Let’s dig in more, Angular is an open source framework for front-end development that facilitates creating sophisticated, efficient and complex single page applications.
In fact, Angular v2+ was developed by Google developers back in 2012 to lift the heavy weight of unnecessary code and as a consequence ensuring a lighter and a faster application. It is based on modules, making its structure both more understandable and maintainable. It makes it also easier for the workload to be divided across developers in the same team which enhances the productivity and collaboration between them thus better code quality.
Moreover, Angular comes with a full range of helpful tools such as its own CLI, debug utilities, Angular material, ng Bootstrap, etc. For instance, the CLI saves a tremendous amount of time for developers by its ability to set up an Angular project which is rather a complicated and very long process if it is done manually from scratch as there are so many configurations, so many libraries and files to install. It also creates components, directives, guard, services and so on and it adds all the boilerplate code coming with each. On the other hand, it builds the application in order to run it in on the browser or for deployment. Angular CLI is also used for testing the application.
In addition, Angular applications use Typescript which is a superscript from JavaScript. In fact, Typescript makes JavaScript code simplified, easier to read as well as debug. It also ensures higher security as it supports types, classes, interfaces and eliminates errors at an early stage when writing the code. Moreover, typescript code can be directly debugged on the browser or in the editor and it ensures refactoring and auto completion services. Moreover, getter and setter functions are not needed when using Angular as it provides all of the functionalities JavaScript provides, meaning that objects used by Angular are POJO (Plain Old JavaScript Object).
It is very important to highlight that Angular is a component based Architecture which brings code consistency, emphasizes on code re-usability, simplifies unit testing as components are independent units. In fact, all components, services, directives, pipes, etc. are created using the same style. As an example, let’s decorticate what a component looks like. Each component defines a decorator that is @Component in which it is specified: Selector: will be used from other components to call it. Template/templateUrl: contains the HTML representation. Could be inline or in a separate file. Style/StyleUrls: contains the style for the template. Could be inline or in a separate file. And all the code is placed within a component class.
Angular design patterns:
Angular follows different design patterns, some of them are reactive programming, centralized state management flow and unidirectional data that are worth discussing.
Reactive Programming:
Angular uses RxJS (Reactive Extensions Library for JavaScript) in order to implement the Observable pattern that handles loading data asynchronously which makes modern web application a lot better compared to old applications that used to stall at different points making the user experience tougher.
The Observable pattern can be explained with the following diagram:
Centralize state management:
The main goal of centralizing a state in an application is to make changing data manageable, maintainable and predictable and that is achieved by following some restrictions such as knowing how, where and when updates can take place using unidirectional data flow.
The benefits of this pattern show in big applications where remembering different components’ state and data flows can turn to be a hideous task and, in some cases, messy and out of control.
Angular exploits Redux for managing centralized state. Redux is both a library and a design pattern which is based on the following 3 principles:
· Single source of truth:
Meaning that the state of the entire application is a single immutable data structure stored in an object tree within a single data store.
· State is read-only:
Meaning that the state is never changed directly, instead, changes are triggered by an action describing what happened.
· Changes are made with pure functions:
Changes on the state are made within pure functions called reducers that take the previous state and the next action to produce the new state.
Unidirectional data flow:
Unidirectional data flow is a data management pattern enforced by Angular to simplify how applications respond to a change. The ‘uni’ prefix defines how data can only flow in one direction. Angular has an entire life cycle of creating, composing, checking and destroying a view whenever a view is rendered. In other words, this means that each time something changes, the view gets re-rendered. On the other hand, and with keeping the unidirectional data flow, Angular ensures the two-way binding that literally means two one-way binding for property and event binding.
Moreover, Angular team provides a full documentation on how to build on a well architected application, making it easier for newbies to follow the essentials to have a clean and maintainable code.
Testing in Angular
The fact that components are independent from each other, makes unit testing much easier. Indeed, when an Angular project is set up using the angular-cli it comes with Jasmine+Karma all 14 configured for the developer. Nevertheless, developers have the choice of using different test runners such as Jest.
I hope that it was a clear and straight forward explanation, please let me know if you have any questions at info@techsoupe.com
instagram: https://www.instagram.com/techsoupe/
