When we plan to start a new web application, it’s worth it to do some brainstorming to decide what technology to choose and what technology not to choose. There are several factors which will definitely help you to take that decision. Like whether the application is static or dynamic, what is the strength of your team, what learning curve involve adapting to new technology, what will be future enhancement possible and what support you will get from the technology.
A few points which can be considered without any debate and without any explanation are, it’s a full-fledged framework which has a very strong Google team behind it and their upgrade path is very promising. As per my opinion, angular definitely lost some of its audience in the transition from AngularJS to Angular and the dev community must be a bit cautious about any further upgrades to Angular. The shift from AngularJS to modern Angular was not a upgrade it was a complete shift of the platform and there was not a easy way to upgrade from AngularJS (or Angular1) to Angular2+. Angular 2+ is complete component-based framework, it provides better performance, testability etc. In my opinion, it was definitely a must for the Angular team to make that transition in order to be sustainable in the tech market.
Because of a few promising features and a tremendous growth path, I think its worth it to consider Angular for your next web app.
Mature Command Line Interface
The Angular CLI is a command-line interface tool that you use to initialize, develop and maintain Angular applications.
The Angular CLI gives Angular its short learning curve, and the learning curve can be shortened further with 3rd party tools like Angular Console that gives you a visual for the CLI.
One of the greatest things about the CLI is that it will take care of anything you need to do from creating a new Angular project or creating services and components. CLI also creates an associated test for it.
Few developers find it hard to remember all commands in CLI, so for that Angular developers also build an interactive UI such as Angular Console.
The Angular CLI is immensely powerful and extensible. In fact, there are so many capabilities that it is helpful for developers to have all of the different configuration options for every command available to them. With Angular Console, you’ll get recommendations and be able to pull up easily forgotten or rarely used features.
Angular Console is, first and foremost, a more productive way to work with what the Angular CLI provides. You can read more about it in -
https://angular.io/cli.
A Standard approach
When you’re using the CLI or console UI, Angular automatically imposes its set of standards to your project, basically doing things the right way. This will help developers avoid mistakes, especially when you’re starting a new project or new to angular.
Whenever you hit a command to create a component or create a service, the CLI auto generates the basic code for you and it will give you a well-defined design to enhance it further.
Although for some people, this is a problem, as it does not leave you a lot of flexibility to defines things your own way, but I found it helpful as developers need not put in their time defining these standard. If you are working on a large project with multiple teams that becomes a big challenge as well.
Use of TypeScript
Angular uses Typescript. TypeScript is strict superset of javascript with some new features like typecasting for variables, variable scope and much more. JavaScript has many loopholes like lack of typecasting, classes etc. Typescript is purely object-oriented programming which offers a compiler that can convert to JavaScript-equivalent code.
Angular Material
All frameworks have plenty of component libraries that you can use, however, the Angular team has created Angular Material.
It encapsulates and standardizes most components you would need to create any kind of site or app. It’s a fine-tuned material for performance and fully tested across modern browsers and built by google team.
It’s provided multiple theme , for when you need to stay on brand or just have a favorite color. Accessible and internationalized so that all users are welcome.
IVY
Bringing Ivy in angular is the biggest turnaround. Ivy is the Angular's next-generation compilation pipeline. From Angular 8, you can choose to opt in to start using Ivy.
Using Ivy is very easy. Just use –enable-ivy switch to use it.
- ng new my-new-app --enable-ivy
In your app’s tsconfig.app.json , you will see below
- "angularCompilerOptions": {
- "enableIvy": true
- }
You can also set that option to true in your existing application by editing tsconfig.app.json file.
Please remember using ahead-of-time (AOT) compiler gives you performance advantage.
Why Ivy gives you performance advantage, is an interesting topic and it’s outside of the scope of this article. But you may want to read about incremental DOM vs virtual DOM.
A little deep dive into compiler options in Angular apps.
Angular offers two ways to compile your application:
- Just-in-Time (JIT), which compiles your app in the browser at runtime. JIT is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands:
- Ahead-of-Time (AOT), which compiles your app at build time. For AOT compilation, include the --aot option with the ng build or ng serve command. The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.
Build size
Incremental DOM (introduced by ivy compiler) has tree shaking capabilities. Tree shaking just removes unused bits of code and it makes bundle size smaller. Angular had much larger bundle sizes so far than other frameworks, but with the introduction of ivy, the Angular team is able to bring that down and that way the angular app will give performance on mobile devices where network speed and memory has always been a concern.
Summary
In this article, we learned about why it’s worth considering Angular for your next Web App.