We have been working on some cool process automation products from last few months, as a nature we dig deep before we decide upon our tech-stack. While there are multiple frameworks which could have done the job, we went for Angular. Here is some thoughts on what went behind making this decision.
Angular is the third most used web framework by professionals and others in 2020, according to Stack Overflow Survey. Angular is gaining popularity and is used by the big companies out there. Why? Why is Angular so popular? Why is it used by many big companies? Let’s know everything about Angular.
What is Angular?
Angular is a TypeScript based open-source front-end web framework. Angular is developed and maintained by the Angular Team at Google and by a community of individuals and corporations. Angular is written in TypeScript. The latest version of Angular is 10(at the time of writing).
What is TypeScript?
TypeScript is a strict syntactical superset of JavaScript. TypeScript is developed and maintained by Microsoft. The only difference between them is TypeScript needs to be compiled, JavaScript doesn’t need to be compiled.
Is Angular and AngularJS the same?
There’s often a misconception that Angular is the next version of AngularJS. Also, many use it interchangeably. Angular and AngularJS are completely different. Angular is a complete rewrite of AngularJS from the same team.
Angular is developed to address many of the challenges encountered in developing the SPA’s (Single Page Applications) and is used by many big companies and many professionals.
Why Angular is gaining popularity? What is so special about Angular?
Angular provides its users with many “out-of-the-box” features. Some of the “out-of-the-box” features of Angular are,
- Develop across all platforms (web, mobile, native mobile, native desktop). For mobile application development, there’s a framework called NativeScript.
- Detailed Documentation where developers can find all the necessary information.
- Simplified MVC (Model-View-Controller) pattern, which is the reason why it is easy to maintain even a large application.
- Reusability of components. New Default browser configuration(in v10).
- XSS (Cross-Site Scripting) Protection. Dependency Injection.
- AJAX Required libraries. Routing libraries.
- Utilities for unit testing. Forms and form Validations.
- Long term supported by Google
- Speed and Performance. Speed and Performance were an issue in older versions of Angular, after the release of the last 3 versions of Angular, Speed and Performance issues has reduced to a great extent. It is because of the Ivy compiler introduced in v8 and the complete feature is released in v9.
What is Ivy?
Ivy is the codename for Angular’s next-generation compilation and rendering pipeline. From the Angular v9, the new compiler (Ivy) and runtime instructions are used by default, instead of the older compiler and runtime known as View Engine.
As I said earlier, Ivy was introduced in v8 but it is not the default compiler for the version, if needed we can manually set Ivy as the compiler in v8. The significant point here is that we don’t have to change how we write our applications. Ivy is compatible with the existing applications, but Ivy doesn’t have the same behavior in some cases. So, to not break the applications when we switch to Ivy, Angular has migration scripts to prepare it for Ivy if necessary.
A big part of Angular is its compiler.
JavaScript framework is a compiler, this is very true for Angular. In Angular, when we write a component, we write components in the TS file, and template in HTML. The significant thing a lot of people doesn’t know here is that the HTML will never touch the browser. It will be compiled into JavaScript instructions to create an appropriate DOM. This is the reason why the compiler is a big part of Angular. This compiler has been completely rewritten over the last years, and this what Ivy is all about. This is the reason why Ivy is the stepping stone in Angular history. It changes how the framework internally works, without changing how we write Angular applications.
Advantages of Ivy
- Reach better build times and better build sizes.
- Unlock new potential features like lazy loading of components instead of modules etc.
- Backward compatibility and many more
As we know, Angular has changed its default compiler from View Engine to Ivy in v9. The code generated by Ivy is very different from the code generated by View Engine. So, code generated by View Engine cannot be consumed by Ivy, which is a huge problem because most of the libraries and components of Angular are generated using the View Engine. We need to make these compatible. But, how? With the help of ngcc. No, you need not do anything. Ngcc makes View Engine code compatible with the Ivy.
What is ngcc and its working?
Ngcc is Angular Compatibility Compiler. Ngcc compiler parses the precompiled JavaScript code which is produced by the View Engine compiler, for components, directives, pipes, injectables, etc. It modifies all the formats of JavaScript that are needed for the application. Then it updates the typing file, which is needed by the Ivy compiler to process the application source files. Ngcc mostly runs from the post-install hook in the package.json file.
{
“scripts”: {
“postinstall”: “ngcc”
}
}
The post-install script will run on every installation of node_modules.
Operations done by ngcc
- Scan the node_modules for packages by checking metadata.json files.
- Produce an Ivy compatible version for each of these packages.
Angular CLI automatically runs the ngcc for us, there’s an option to run ngcc manually too.
This all happens when we run ng serve or ng build for the first time which is the reason why it takes longer than usual for the first time we run ng serve or ng build, as ngcc will do all this magic behind the scenes for us. This doesn’t happen every time we run the application, happens again only when a new Angular library is added to the application.
Real-world applications developed in Angular
Many big companies like Apple, Microsoft, Forbes, HBO, Adobe, Nike, McDonald’s, Sony, AT&T, Google, BMW, and many use Angular. There are also many popular and daily used applications developed using Angular. Some of them are,
- iStock
- Gmail
- Microsoft Office Home(web)
- Upwork
- Freelancer
- Youtube TV
- BMW Driveaway price calculator
- Mixer
- Xbox
- Paypal
- Wix
- Udacity
- Samsung Forward and many more.
Angular Rivals
Angular has many rivals but the biggest rival is React. React is becoming one of the most popular frameworks nowadays. Angular has even lost to React in Stack Overflow Survey, 2020.
Angular vs React
Angular is a full-fledged MVC framework and React is just a JavaScript library. This is both an advantage and a disadvantage for both the technologies. Because Angular as a full-fledged framework has many default libraries, we do not have to decide which library to use where or any such considerations which is an advantage, this is also considered as one of the biggest advantages of Angular over React. I said this as a disadvantage because we have to use what Angular provides.
React on the other hand is a library that provides only “View” in MVC, we need to choose libraries that best fits our requirements(advantage). With this, we end using many independent and fast-moving libraries and it becomes our responsibility to take care of the updates, migration, maintaining the folder hierarchy and architecture. Things can go wrong more easily due to this which is a disadvantage.
React is powerful and popular because of its speed and performance. But, Angular with its latest release is no less than React, Speed and performance from Angular v8 has increased to a great extent. In the future, Angular will definitely come with many groundbreaking features.
This is all about Angular, why we need to use, some real-world projects built on Angular, and it’s internal working. Hope you like it.
Feel free to reach-out to us at hello@kormoan.in for any query.
