This blog post was written under the Pusher Guest Writer program.
Angular has exponentially grown as an open source project and is being used by a large number of cutting edge websites as well as mobile web applications these days. According to the ever growing list at www.madewithangular.com, popular organisations like: Microsoft Support, NASDAQ, Sony Pictures, GoPro and Tesla use Angular in their customer facing portals. Angular has also made a huge impact in helping with rapid application development of Internal Enterprise Apps for multiple conglomerates in Banking, Finance, and Retail domains.
In this article, we will refer to Angular version 1 as AngularJS, and any version greater than 2 as Angular.
Popularity of Angular
Angular has become a popular choice because of a large amount of community support, online resources like blogs, articles and video tutorials. Due to the popularity of Angular a lot of new developers planning to start with it, have a lot of misconceptions about Angular.
Misconceptions about Angular
In this blog post, I want to cover the 6 most common misconceptions that developers have in mind and I will also cover the actual reality of it.
1. Angular is a library.
On the other hand, Angular is like a toolbox and is equipped with plenty of features including: Component Hierarchy, Templating, Two-way data binding, Dependency Injection, Modules and Responsive support. Angular is a perfect framework candidate which is enough for building a performant web application rendered from any web server.
2. Angular is a big monolithic library.
Almost all developers who are working with frameworks other than Angular or even AngularJS developers believe that the new Angular framework is a big monolithic one. Developers have been creating AngularJS apps as big bloated apps with shared scopes and services which are perceived to produce huge monolithic systems which have become tech debts for many organizations.
Angular now has been divided into multiple modules with a core module being the skeleton and the main module stitching all of them together. The modules have been divided so that any developer can opt-in or out based on his use and circumstances. The optional modules are like: @angular/animations, @angular/forms, @angular/router and @angular/material. Also, the team behind Angular has really put in thought behind the Modules system in this framework which has been developed as NgModules. The definition in the Angular docs is
NgModules help organise an application into cohesive blocks of functionality.
NgModules have a few advanced features also like lazy loading and dependency injection at runtime which makes it a powerful tool for making large distributed front end apps with a modular approach. Lazy Loading helps in asynchronously loading the module at runtime whenever it is required by some other module. In order to learn more about this, you can refer the docs page at https://angular.io/guide/ngmodule
3. Angular applications are slow and not for performance intensive use cases.
A lot of developers think that Angular apps are slower than React or Ember apps and this becomes one of the major misconceptions for why they do not try Angular. A lot of web apps made using this framework suffer from either poor implementation by developers and also some bad design elements in the core framework.
In the new Angular framework, the team has moved away from the worst dirty checking algorithm to a one-way flow system. They would achieve two-way data binding using a new change detection system which uses a new library called zone.js. These words seem to be buzzing but they are all under the hood, you can use the Angular two-way data binding out of the box when building applications. Angular automatically uses Zones to detect the possible changes to update the view and internally implements some VM to process the implementations.
Also, the new Angular framework has a special feature of Ahead of Time compilation which improves the performance of the web application. In the older versions of Angular either templates were requested from the server on the fly and even modules were compiled using JIT which slowed down the app response times. AOT Compilation along with change detection and universal server side rendering helps the new Angular framework to match performance with React or VueJS.
4. Angular forces the usage of TypeScript.
5. Angular does not have state management or is not compatible with Flux or Redux.
Web Applications are becoming more complex every day and yet developers need to rapidly iterate and release new features without compromising performance. For any complex front end apps, state management is very important. We need to manage multiple types of state like server response data, local UI state, application state and user preferences. AngularJS did not work well with external state management libraries but the new Angular framework has been built in a way that it optionally support these libraries. The main concept of state management libraries like redux is based on unidirectional data flow, but the default 2-way data binding of AngularJS did not fit well with it. Another issue is that in AngularJS, the state should ideally be managed using services but the data binding is done using $scope so it becomes hard and cumbersome to tie these together in the controllers.
The new Angular framework follows the unidirectional data flow design pattern at its core which makes it easy to be used with popular state management libraries like Flux, Redux, RxJS or ImmutableJS. Even without using these external libraries due to the good change detection strategies you can use state in common services and inject them into your Angular Modules. An amazing reading resource on this topic is available at this link: https://bertrandg.github.io/angular2-application-state-management-strategy/
6. Angular generates a big bundle size and build process is complicated.
This particular misconception is always reinforced with developers who have tried out the initial beta or RC versions of Angular 2. Initial versions of Angular were generating huge bundle sizes and the build process itself was very complicated. In early versions, a simple HelloWorld app of Angular would come close to 1.3 MBs which was preposterous.
Angular team took its core focus to work on this and from the v4 release onwards a lot of optimisations have been done in this regard. After this release, the HelloWorld app bundle size has been reduced to less than 50KB and that is awesome for Angular developers. Angular has introduced the (AOT)Ahead of Time compiler which enables it to compile Angular apps into such small bundle sizes. We can achieve this by using the –****prod flag while building using Angular CLI. AOT also has an advanced feature if used with Rollup to enable tree shaking which further reduces the build size. A good read on this topic can be found at this link.
We have discussed many misconceptions but have only focused on the important ones. Angular framework has many more features which will eliminate your fear of using it and help you in at least trying the new Angular framework for building your web apps. There are features like Decorators, use of native CSS Animations, Reactive Forms modules, Scoped Styling, Dependency Injection and much more which makes Angular a perfect enterprise app development framework. It has a very rich ecosystem and an ever growing community which should be surely considered when making your choice for the front end framework of your next web app. Please tweet me if you have any doubts or questions regarding this on @mappmechanic.