6 Common Misconceptions about Angular

Introduction

Angular has become the most popular word among front-end/UI developers since jQuery. Angular is a popular JavaScript based open source front-end development framework maintained by Google and a community of developers/contributors.

Angular was started as a side project by Miško Hevery, intended for use by web designers, to easily add reusable utility into their projects. He, along with another core contributor, decided to open source this library.

After a while, when Hevery started working at Google, he convinced his boss, Brad Green, to use Angular in one project. After the success of that project, many of the Google Web apps in production started using Angular as their UI application platform.

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 https://www.madewithangular.com, popular organizations 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.

In this article, we will refer to Angular version 1 as AngularJS, and any version greater than 2 as Angular.

Popularity of Angular

Angular is one of the favourites in the JavaScript developer community, the new Angular core npm module has been downloaded 1,459,312 times in May 2017 and a whopping 2,634 other modules are dependent on it. AngularJS and above combined have around 80,000 stars on Github. The GitHub repository of core Angular project has combined 2,000 contributors which is one of the biggest project teams for an open source project.

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.

Web developers who have been creating websites using jQuery like libraries often feel that Angular or AngularJS is just another library like them. This is a big misconception and they should understand that Angular is a complete framework which encompasses the design patterns and best practices to build a modern single page web app. jQuery is a single tool which helps in writing the short syntax for long JavaScript functions.

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.

Another big misconception which is blocking developers in adopting the new Angular framework is its inclination towards TypeScript. In my opinion, this is it's biggest strength but Angular can even work without TypeScript. We can use ES5 (JavaScript) for developing apps using the new Angular framework. There is also a Dart version of Angular which you can use with the help of this guide.

Angular has been developed this time using well-thought design patterns which help in building scalable and performant universal web apps. JavaScript is evolving into a more mature language with the introduction of new ES6/ES7 features like: Classes, Arrow Functions, Spread Operators etc. TypeScript is just a superset of JavaScript and adds the capability of strong typing to your JavaScript. It helps in identifying and resolving many type-related bugs during the development stage itself. Although you can create Angular apps without TypeScript, I would strongly suggest using it. A good read on this point is here.

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.

Tree Shaking is a concept used by Javascript build systems to help in dead code elimination during the build phase which helps in reducing the final bundle size.

Conclusion

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.

This blog post was originally published on Pusher’s blog -https://blog.pusher.com/6-common-misconceptions-angular/.