"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
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.
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.
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.