There are many choices when it comes to building SPAs with AngularJS. We've asked our developers to share the best tools they use to get the job done right.



So you’re starting a new project and want to build a single-page application (SPA) using AngularJS. Being one of the most popular JavaScript frameworks today, there are dozens of tools that can make your work easier. The question is, which ones to choose.

To help you get a running start, we asked our developers to list their most precious AngularJS (1.x) dev tools based on several months of evaluation and experience. It is only natural that the front-end stack has overtaken much of the article. Still, we have added their choices of back-end and testing tools for completeness:

Back-End Tools

Express Server Running on Node.js

Express is the most common choice for application framework when it comes to Node.js development. We use it because it is very easy to get started with and there are tons of support resources on the web.

Open API Initiative (Formerly Swagger)

Open API Initiative is our developers’ favorite specification for kick-ass RESTful APIs. The implementation is usually done with express and swagger-node-express. The new generic name is a little unfortunate, though.

Build Tool/Task-Runner

Now, we know that a lot of developers prefer not to use a task-runner or any build automation tool at all, but it saves a lot of time and repetitive effort, and we’re sold on them. While we started with Grunt, we switched to Gulp because it allowed us to write our build file in pure JavaScript. No need for complex configurations, as was the case with Grunt. Plus, we found Gulp to be faster and the better performing of the two.

UI Components

You guessed it—we walk the walk by relying on our own Kendo UI HTML5 and JavaScript framework for its integration with Angular via built-in directives. It has a vast number of highly evolved UI components; the Grid widget alone has over 100 features. One of the best things about using UI components is the amount of time and effort they save from having to build (often complex) elements from scratch—ours have taken us literally years to develop.

CSS

We use Sass for writing the CSS. It is far more powerful than writing vanilla CSS as it provides useful abstractions to avoid repetition and save time. Compared to LESS, it is more verbose, which in our case is a good trait.

We have the following Gulp plugins for Sass-to-CSS compilation:

gulp-sass plugin, which is unequivocally described as a "very light-weight wrapper around node-sass, which in turn is a Node binding for libsass, which in turn is a port of Sass"

gulp-autoprefixer for automatic injection of browser prefixes

gulp-sourcemaps for, well, source-maps generation

Development Time Productivity Tools

Browser Sync

Browser sync helps you test your app browser support by cutting repetitive manual tasks. “It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment,“ reads its webpage.

Wiredep

All SPA applications have an index page, which often includes many scripts and styles tags. It is very tedious to maintain them manually and add a new script/style tag whenever there is something new. Wiredep solves this problem by adding scripts/styles tag whenever a new dependency is added to a preset folder(s).

Gulp-inject

gulp-inject is a “stylesheet, JavaScript and webcomponent reference injection plugin for Gulp.” Its creators proclaim, "No more manual editing of your index.html!"

Linting Tools





JsHint

JsHint is “a tool that helps to detect errors and potential problems in your JavaScript code,” and is probably the most popular code-quality tool. We use it for sanity checks of our JavaScript.

JSCS

JsHint used to support coding-convention checks as well, but the authors of the tool decided to offload that functionality to another tool—JSCS. We use it to enforce coding conventions across the team.

The combination of JsHint and JSCS is very important if your team wants to write consistent and clean code. And which team doesn’t?

Testing Tools

Jasmine vs Mocha

Jasmine and Mocha are the two most famous frameworks for writing unit tests in the Angular world. One would usually go with Mocha if they want more freedom for the assertion framework and mocking frameworks used. This is exactly why we chose to go for the combo Mocha + Chai + Sinon.

Chai

Mocha is usually used with Chai as an assertion framework. Chai supports notations for both test-driven development (TDD) and behavior-driven development (BDD). It also goes well with a fresh blueberry muffin.

Sinon

Sinon is the usual choice for a mocking/stubbing framework when one goes the Mocha + Chai way.

Karma

Karma is the de-facto standard for test runners. One can write and run tests with Mocha/Jasmine only; however, Karma is what provides the spawn browser support and the tons of integration tools with other frameworks.

Build-Time Optimization Tools

UglifyJS

UglifyJS is a “JavaScript parser, minifier, compressor or beautifier toolkit.” Each JavaScript application contains HTML, JS and CSS that should be processed in some way before shipping to production. We use Uglify to minimize the JavaScript and CSS because of its superior performance when it comes to file size. The fact that it was developed by a colleague of ours at Telerik, Mihai Bazon, is an extra benefit.

CSSO

CSSO is pretty much the same as UglifyJS but for CSS.

HTML Min

HTML min optimizes the HTML and is used together with templateCache.

TemplateCache

templateCache can be seen as the "hub" where Angular finds its view templates.

Show Us Yours

All the tools in this list help developers move their application from the idea to the production stage faster and, arguably, more smoothly. They’ve helped increase our team’s productivity and performance and we hope they do the same for you.

Let us know in the comments what AngularJS dev tools you’d add or remove from this list and whether you use some of the same ones!

Related Articles:

