One year as Angular Developer

Through out my career I never felt easy with writing front ends and I always considered my self as a back end developer. An year ago, I was given an opportunity to build a product from scratch with the freedom to choose whatever framework I like to build a robust app. I chose Angular for front end mainly because I had been reading about it and wanted to add something to my skill set. Below is my one year relationship with Angular, I hope it will be helpful for the folks who are in the midst of taking a similar decision which I took a year ago.

First Impressions

Getting started with Angular is very easy, with the help of Tours of Hero App anybody can get started with it within a day. Setup and installations is also very quick and Angular CLI makes it super easy to create basic angular app. Creating new components and writing front end code is super fast as compare to Vanilla JavaScript. I felt that development speed is much faster when writing apps in Angular.

HTML and Responsive Design

An year ago I was someone who had only basic experience with HTML and almost no experience with CSS. I could only write basic HTML but styling them was not my thing. But with Angular Material and Flex Layout it became super easy for me to write 70% of the HTML and CSS.

TypeScript

There is no doubt that Vanilla JavaScript is the king in Front end arena but to use it in a clean and leaner way requires a Pro. Average developers like me do a lot of mistakes in Vanilla JavaScript. TypeScript takes a lot of responsibility from developer to write better code. It's syntax is similar to C# and JAVA that makes it even more adaptable to back end developers.

Angular

Below I have explained some of my learning through out one year with Angular. There is still a lot to learn.

Go For multiple modules from the Beginning

When I started, my application had only one module (AppModule) and everything else was a component inside the App Module. Having one module in Angular means there will be only one JavaScript file for entire application. I realized the app is taking noticeable amount of time to load in the browser. That arises the need of having multiple JavaScript files for the application and that was fixed by breaking the applications in different modules. That also, enabled the lazy loading of the JS files.

Changing an existing app to modular approach is not straight forward, therefore if you are starting up a new Angular App go for modules from the start.

Angular Change Detection Strategy

Two way data binding removed the need of writing a lot JavaScript code to get or set data from DOM elements. Angular has embed this into its framework. I was expecting that Angular will only detect a change when a DOM element or the related model has changed. But Angular change detection cycle runs whenever there is an event and it detects the change in its component tree. On a mouse move, mouse down or up, a key press, scroll event etc angular change detection cycle will trigger. This change detection policy creates horrible performance issue in some scenarios. I had an excel like table and a lot of things were happening on different events on rows and cells. Default change detection was happening on mouse move and scroll events as well, which created sever performance problems. To make it work better change detection Strategy can be specified on the component, it can be completely disable as well but then you will have to manually trigger the change detection.

NgZone

I still need to utilize NgZone in more accurate way but this service can be injected to run a piece of code outside or inside of Angular Zone as per the need. I used NgZone to detect Self click event and then do some additional logic outside of Angular Zone. This also, helps in optimizing the performance of the App. More detail information can be read here.

HTTP Interceptors

Some times it is required to perform an action on every HTTP call, the very basic example is a loader. Angular provides HTTP Interceptors to do these kind of stuff. You can show a loader, handle HTTP errors or implement authentication using these interceptors.

Virtual Scrolling

Sometimes we have huge amount of data (for example list of products in an auto-complete). Rendering them on client side is very heavy operation. Even if you do the loading part on server you still might end up having slow performance. Angular provides you virtual scrolling to manage long scroll-able data. It basically displays only a fixed number of items in visible container.

Memory Leaks

Observables are objects which do not get destroyed along with the components. They remain in the memory. Therefore if these are not manually destroyed then new Observables will be created each time they come in scope. I wrote a small post few days ago about Angular memory leaks, find it here.

Conclusion

My experience with Angular is good and I think Angular is a great framework to build better and fast. But despite all the benefits Angular offers I do not think that every web app needs to be SPA. Angular and similar frameworks are best suited for simpler apps. An App which has potential to grow is a bad candidate for SPA. Angular creates and destroy DOM elements within the browser, that's why when DOM element grows Angular becomes slow. Yes there are technique which can be used to overcome slowness of the Angular but still its better to render HTML on Server side for better performance.