Thursday, May 19, 2016

A First Look at AngularJS

Lately I have been hearing a lot of people talk about using a framework called AngularJS. Just this week version 1.5.2 was released and 2.0 was moved in to beta. I figured it was about time that I did a little research and dug into what AngularJS is and what this framework can do for me. So here is a summary of what I've learned.

AngularJS is a popular front-end JavaScript Framework. It is open-source and the majority of the project is maintained by Google. AngularJS was designed to help build single page applications or websites also known as SPA. The idea is to give the end-user an experience similar to a desktop or mobile application. No page reloads or moving from page to page. The user will see one single page and the content will change as soon as they interact with the application. With the increased demand for mobile applications AngularJS has become a good alternative for web developers to create good-looking mobile applications.

By this point many web developers have been using jQuery for some time now. AngularJS feels very comfortable because its setup is just like jQuery. All you need to do is link the Angular.js library file to your webpage. Once the page has referenced Angular.js you can start using some AngularJS directives like ng-app, ng-click, ng-model and many more. AngularJS also has CDN (content delivery network) locations that you can link to that will allow you to access the cached file from a different website. What this means is if one of your customers have viewed any website that has used the same CDN they already have the framework on their machine. Because AngularJS has become popular and many people are using CDNs there's a high probability of that the user coming to your website will not need to download the framework at all.

One of the coolest features included in AngularJS is the concept of data binding. Basically you create a template which is how the data would format within a block of HTML and when a user preforms an action the template will bind data to a certain section of HTML on your site. Coming from a windows form background this concept is very familiar for me. Over the years I started doing more web development and I drifted away from this design pattern. It's nice to see this pattern is moving into the web space. When I started as a web developer it felt frustrating that after a specific action the page would need to refresh. And example of this is when someone selects their state from a drop-down list the page would refresh in order to get the data of all of the cities in the next drop-down list. Using data binding you now have the ability to use AngularJS to automatically find the cities for the next drop-down list without needing to refresh the page.

Components are another important feature included within AngularJS. A component is a reusable block of code. You can build components and share them with other developers to create consistent usable controls within your team. An example of this is you may have some form of animated button. It could consist of different images that show animation when your mouse hovers over it. You can build a component and share it within your team so everyone’s buttons will look consistent.

Another thing that is nice about AngularJS is they have a clean separation of concerns. Basically what that means is the code is separate from the user interface. This gives developers the ability to run automated testing. Many developers test their code using tools like nUnit to make sure it's performing how The developer would expect. Unit testing is something that's difficult on webpages this framework makes it easier to automate this type of testing.

In conclusion there's a few things I would like to point out. It's important to use the right tool for the right job and AngularJS may not be the right tool for all jobs. For example, AngularJS works very well as a single page application. If you're creating A webpage to log time or work orders on a single page AngularJS would be a perfect tool for that type of job. If you're making a commercial website with many pages used for marketing like photo galleries or different products this option may not be the best fit. Another thing to consider is in my research I discovered there's major differences between version 1.5.2 and 2.0. If I were a developer starting a new project, I would probably choose to hold off on AngularJS until version 2.0 was officially released. I do not like using beta frameworks in production applications and I would hate to learn a version that is going to be deprecated. With all that being said I only scratch the surface on the benefits of AngularJS and this is a very promising framework that I will definitely be using and future applications.