Taking Care of Business–Tools for the Front-End Developer

"Pick your tools, know them, nurture them, but always be open to discovering and learning new tools, and remaking your workflow."

At Varnish Software we like to share knowledge, so through this post we’ll give you an inside look into the tools and workflow used for the VAC front-end development. Building a tool like the VAC is both a challenge and a fulfilment. From the first steps of architectural decision making, to a product ready for release, using the right tools, in coalition with a coherent workflow, mean the probability of project success is much higher.

Always keep an eye out for good resources

The front-end development landscape has changed a lot in the recent years. Every week new tools emerge, so we need to know what's out there. An excellent resource is the repo at Github. Also, the amazing Superhero.js.

A while ago, I watched a useful talk from Paul Irish, Chrome Developer Advocate at Google, which started me on setting myself up with the right developer toolkit. He also provided a great follow-up talk mid 2013 with upgraded content. These are very valuable resources to check out what's out there, and help you with your workflow.

Value your tools

“Making software is a craft”
–Per Buer, Founder and CTO, Varnish Software

A craft requires tools—especially tools that can do the job properly. When spending our days working in code editors, even the most simple ones, we need to get the most out of it. In JavaScript development, we use JSLintto act as a first test for the code, to prevent unnecessary errors in the code base. In case you are wondering, at the moment we are using it with Sublime Text, a text editor for code, markup and prose. Although we are addressing front-end development, that doesn't mean we do not love our terminal, so mastering something like dotfiles (or this) is quite helpful.

Our stack and the tools that help build it

In no specific order, and perhaps somewhat exhaustive, here are some of the tools and a brief explanation how we use them:

Chrome Dev Tools is an essential tool in our daily workflow. From basic breakpoints, directly with the code, or even with HTML elements, to live editing, profiling memory, or checking the call stack with the awesome flame chart. Chrome Dev Tools can also maintain and monitor your web application at 60fps (we’re happy to report we’ve managed to do this most of the time!). The Dev Tools console is also very useful to get instant feedback and perform a quick test of your code. At this stage, Chrome Dev Tools are a Front-end Developer’s best friend. Its close relative, Firefox Dev tools, is closing the gap, but in my opinion, they still don’t rival Chrome's offering.

Backbone.js allows us to implemented our front-end. We see it more as a library than an actual framework, giving structure to our JavaScript code while having the freedom to write our code in no particular style. Also, given our VAC API over a RESTful JSON interface, it’s a very good match. In the future, we could eventually choose another library/framework without compromising a lot of our code base.

Underscore takes care of our template pre-processing and it ships with Backbone.js. Why? We turn our HTML snippets into reusable functions to allow faster rendering.

D3.js is our graph library. We use it to produce real time graphs, and also historical data. It allows us to render graphs and text using SVG directly tied to the data from the VAC API.

Sass is used for our CSS preprocessing with compass.

Jasmine and SinonJS with Qunit using sinon-qunit to conduct our basic unit tests. Definitely an item that we are taking more time to improve on.

Foundation framework handles our responsive HTML elements.

RequireJS is the glue that gathers both our files and modules. We use it to manage different files in the project. With a count of more than a hundred files, keeping them working fast and clean would be a challenge withoutRequire. It’s build tool is also used to create a unique .js file from all sources.

Bower is used to fetch our dependencies through npm packages (npm is the official package manager forNode.js). Bower manages our front-end packages and libraries for use directly in the browser, maintaining versioning and dependencies.

Grunt is our automation helper. With it, we’ve managed to build our product, remove unnecessary references in the code, uglify our code, and much more. Grunt has several plugins that can help you automate almost anything. It runs over nodeJS.

Vagrant is used in our development cycle for tests. Instantiating virtual machines is fast and manageable, and we can quickly reproduce environments against our codebase.

The message we'd like to leave you with is simple; Pick your tools, know them, nurture them, but always be open to discovering and learning new tools, and remaking your workflow.

If you have any questions regarding these tools or how we use them at Varnish Software, we’d love to hear from you. Also, we’re currently looking for a new Frontend/Senior Software Developer for our London or Oslo office. Check out the blog.