Angular TS

Component-based architecture

The component-based architecture is one of the things that makes the difference between AngularJS and its successor. Angular components can be thought of as small pieces of user interface, like a section of the application. While each component is encapsulated with its functionality, there is a strict hierarchy of components in Angular. For example, in Angular 9 Google Maps and YouTube Player components were introduced.

Reusability

Components of similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope applications where different systems converge but may have many similar elements like search boxes, date pickers, sorting lists, etc.

Readability

Encapsulation also ensures that new developers – who’ve been recently onboarded to a project – can read code better and eventually reach their plateau of productivity faster.

Unit-test friendly

The independent nature of components simplifies unit tests, quality assurance procedures aimed at verifying the performance of the smallest parts of the application, units.

Maintainability

Components that are easily decoupled from each other can be easily replaced with better implementations. Basically, your engineering team will be more efficient in maintaining and updating the code within the iterative development workflow.

TypeScript

Angular is written using TypeScript language, which is basically a superset for JavaScript. It fully compiles to JavaScript, but helps spot and eliminate common mistakes when actually typing the code. While small JavaScript projects don’t require such an enhancement, the enterprise-scale applications challenge developers to make their code cleaner and verify its quality more often.

RxJS

RxJS is a library commonly used with Angular to handle asynchronous data calls. Thinkster suggests viewing RxJS for JavaScript code as you would Henry Ford’s assembly line to car manufacturing. It allows for handling events independently in parallel and continuing execution without waiting for some event to happen and leaving a web page unresponsive. In principle, this works like the assembly line, where execution is broken down to individual and interchangeable pieces, rather than being tied to a single person. Obviously, asynchronous programming existed before RxJS, but this library has made many things easier.

The platform-agnostic philosophy

Angular was developed with the mobile-first approach in mind. The idea is to share the codebase and ultimately the engineering skillset across the web, iOS, and Android applications.

High Performance

Multiple factors can help in making your application faster. The main boost is ensured by hierarchical dependency injection and Angular Universal support.

Hierarchical dependency injection

Angular uses improved hierarchical dependency injection compared to AngularJS. The technique decouples actual components from their dependencies by running them parallel to each other. Angular builds a separate tree of dependency injectors that can be altered without reconfiguring the components. So, classes don’t have dependencies in themselves but consume them from the external source.

hierarchical dependency injection tree

Every component tree has an assigned tree of injectors that contain dependencies information

Angular Universal

Angular Universal is a service that allows for rendering applications view on a server instead of client browsers. Google provides a set of tools to either pre-render your application or re-render it for each request by a user. Currently, the toolset is tailored to Node.JS server-side frameworks and supports ASP.NET Core. Google claims that they are going to add support for PHP, Python, and Java.

Ivy renderer

Angular components and templates are written in TypeScript and HTML, but the actual HTML is not used directly in the browser. It takes an additional step when HTML and TypeScript are interpreted into JavaScript instructions. A renderer is an engine that translates templates and components into JavaScript and HTML that browsers can understand and display. Ivy is the third iteration of the Angular renderer after the original compiler and renderer2.

With the Angular 9 update, Ivy became a standard compiler and runtime for Angular applications. One of the interesting features of Ivy is tree-shaking. It refers to the component tree on the rendering stage, meaning that it removes unused chunks of code, making the applications smaller and faster to load. This can optimize the size of large applications, as well as improve their performance. Also, it’s backward compatible: After the Angular update, your existing applications will be rendered with Ivy without additional hassle.

Ivy is an ahead-of-time (AOT) compiler, which compiles your app right during the build process. That said, we can expect several improvements in Angular apps:

AOT compilation time decreased from 0.8x to 0.5x for a tested Angular.io documentation app, which implies that the renderer brings faster compiling across other applications as well.

Smaller build size

Differential load was added in Angular 8 as another optimization technique. Differential loading is a way to load content and optimize bundle size. What it actually does, is allow you to create two different bundles for legacy browsers and new ones. Angular would use recent syntax and polyfills for the newer browsers, while creating a separate bundle with stable syntax for legacy browsers. That way, differential loading reduces bundle size and loading speed for corresponding browsers, improving the overall performance.

Google Long-Term Support

Some software engineers consider the mere fact that Angular is supported by Google a major advantage of the technology. While this may sound justified, Google itself is not enough. The good sign though is that Google announced Long-Term Support (LTS) for the technology. Igor Minar and Steven Fluin, the engineers behind Angular, confirmed this commitment in the NG-Conf 2017 Keynote.

What this basically means is that Google plans to stick with the Angular ecosystem and further develop it, trying to hold the lead positions among front-end engineering tools.

Powerful ecosystem

As Angular has been around for donkey’s years, it’s been snowed under by packages, plugins, add-ons, and development tools. You can explore a part of the community handiwork by looking at the list of Angular Resources. These include IDEs, tooling, UI environments, Angular Universal for server-side rendering that we mentioned above, analytics tools, facilities for ASP .NET, data libraries, etc.

Angular elements

If you have multiple projects running some of which aren’t Angular, with the 6th update you can use Angular Elements in other engineering environments. These may be the apps built with VueJS, React, or even jQuery. You can reuse your Angular component by wrapping it as a DOM element (Custom Element). It’s really convenient if you or your team have to switch between various environments.

Two-way data binding

AngularJS was built with Model-View-Controller architecture. And the framework synchronized the Model and the View. As the data in the Model changes, the View does too. Two-way data binding allowed engineers to reduce development time as it didn’t require writing additional code to provide continual View and Model synchronization.

Directives

This feature actually enabled the HTML extension mentioned above. Directives allowed developers to assign special behaviors to the Document Object Model (DOM), permitting engineers to create dynamic and rich content with HTML.

Dependency injection

Dependencies define how different pieces of code interact with each other and how the changes in one component impact the other ones. Usually, dependencies are directly defined in the components themselves. So that every change in dependency requires changing components as well. With AngularJS, you could use injectors that defined dependencies as external elements decoupling components from their dependencies. Dependency injection made components more reusable, easier to manage and test.

Community

Right from the beginning, AngularJS became extremely popular among engineers. A strong community provided enough training materials, discussions, and third-party tools to embark on using AngularJS as well as find a solution to nearly every arising issue.