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.
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:
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.
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:
Development Time Productivity Tools
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.
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).
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?
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.
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 is the usual choice for a mocking/stubbing framework when one goes the Mocha + Chai way.
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
CSSO is pretty much the same as UglifyJS but for CSS.
HTML min optimizes the HTML and is used together with 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!