My thoughts on AngularJs

If you work on web development you probably have heard AngularJs at some point. It’s a framework created by people at Google. So, we can be sure in some level for people who working behind this project. To summarise this project in short, I’d say it’s a framework to help you build a web application in an MVC-style same as Backbone.js but easier I’d say. AngularJs extends HTML instead of fighting with the language, so you can easily write your own HTML to manipulate your page. I’d recommend have a look at the documentation to understand more of AngularJs.

Single-page app

I guess this is a really buzz word for 2013. Single-page apps utilises AJAX to build a single page web application. So, user gets the same feeling as using native mobile application. I’d say this is the strongest point in AngularJs, if you’re thinking of building a simple single-page app AngularJs is worth to have a look for. However, you can also build a single-page application easily yourself but if you’re lazy like me, have a look at angular-seed to get you started quickly.

Off-line application

One thing that I really like about AngularJs is, it somehow enforces you to use client-side templating. So, you can make a request to your server and return data in JSON format which you can use AngularJs to manipulate that data to build a webpage. Also, you can cache those data in LocalStorage or use Browser caching so if users’ phone doesn’t have signal they can still use your application. Of course you can do the same with client-side templating like mustache.

Learning Curve

I’d said this is the biggest flaw of AngularJs because the documentation is not quite extensive. However, you can get by by asking people at stackoverflow or google forum. They’re plenty of people who can support you. Also, if you’re new to AngularJs it might take sometime to learn how to use AngularJs correctly. AngularJs would allow you to do anything as long as you’re not doing anything severely bad. AngularJs also won’t complain anything if you’re not following the desired design pattern. I’d strongly suggest you have a look at this video to learn how to do things in AngularJs from the creators of AngularJs. It took me a while and a lot of trial-and-errors. For example, you can use $http instead of resource.

Performance

If you search this ‘performance angularjs’ you’d find a lot of articles complaining about performance of AngularJs, which I also have encountered myself on my project. AngularJs uses technique called dirty-checking, which will check for changes of each object in your model. If you have a lot of objects in your model it’d substantially hurt your performance of the application. You have to keep an eye on the performance of your application and I’d suggest you use AngularJs-Batarang to find the hot spot. But most cases, it’s because you’re loading too many objects or please consider using pagination (I know I hate that too!). Lazy loading is also the technique I use to overcome this issue. Generally speaking, if you’re not doing something crazy I’d say angularjs is pretty fast and slick.

jQuery

One thing that I’d avoid as much as possible to do on mobile application is jQuery. It’s a huge framework for mobile phone. AngularJs comes with jQuery-lite which you can use popular methods like in jQuery without loading the whole jQuery framework in your application. So, if you think you have to use jQuery in your Angualarjs application please think twice. If you need to manipulate DOM you can try plain-old javascript to do that first, if it’s getting bloated then you can try jQuery but you have to keep an eye on the performance as well.

Summary

In general, AngularJs is a good framework if you want to do single-page application or normal web-application in MVC style. I tried Backbone.js and I felt it’s really hard to grasp the concept. I find AngularJs more natural and intuitive. Performance is a big thing in AngularJs so you have to keep an eye on that if you have a lot of objects on your webpage it’ll hurt the load time because of dirty-checking.