Starting with AngularJS at BuildZoom

AngularJS

Last week at BuildZoom, we rolled out the first feature built using the AngularJS JavaScript framework. Up to this point our app, which helps homeowners find remodeling contractors they can trust, had been primarily Ruby on Rails, with javascript written utilizing jQuery and (Twitter) Bootstrap. This was an exciting moment since a major reason for joining BuildZoom a month earlier was to expand my experience with the latest front-end technologies.

I had experimented with AngularJS prior to BuildZoom, finding the framework very intuitive. Coding the “angular” way enforces modularization, the lack of which is a common problem with javascript code. Furthermore, utilizing the framework’s two-way data binding saved a lot of time and many lines code.

One of the key features of the BuildZoom app is the ability for a homeowner to get bids from top contractors. By submitting a service request, the homeowner provides details of a potential project, which is distributed to top rated contractors in the area. Providing useful details about a project is critical in getting timely responses from the best contractors with accurate bids. The new feature was aimed at increasing the quantity of information provided by homeowners, while simplifying how the information is collected. The service request transformed from having separate view and edit pages, to a single view page, with in-line editing.

A number of important learnings that came out of this project:

• Read before you start coding.
  There was a lot of thinking put into AngularJS and its components. Read through tutorials to understand how to utilize features and organize code. You should know the purpose of modules, controllers, services and directives.
• Separate your models.
  There’s not a concept of models in AngularJS as there is in traditional MVC frameworks. Data is stored/accessed in @scope, which is like having a model be a member variable of a controller. In order to decouple model and controller code, create models via a service — specifically a factory.
• Provide injection annotations.
  AngularJS is setup around the concept of dependency injection. Each module, controller, etc uses other modules and services. When javascript is minified for production, the dependency names get minified too. AngularJS no longer knows the services to include in your module. The solution is to provide a list of string names that map to the dependencies of your module or service. This is very important, since minification commonly only happens in production, which is where you’ll come across this issue.

Of course, this feature could have been implemented using only jQuery. The time spent on AngularJS ramp up could have been spent writing all those extra lines of data-binding code. Yet this would not scale for larger features. The learnings from this experience set us up to roll out more awesome features in less time.

Originally published at www.buildzoom.com on May 20, 2014.