Monday, April 6, 2015

Front end tooling for the .Net developer

At a Brain Food Friday a few weeks ago (yet another reason Rightpoint is an awesome place to work, knowledge sharing is part of who we are) Scot Goodhart did a deeper dive (than his blog post) into unit testing with karma. One of the things that came out of this was that some of the developers in the group weren’t aware of how the components in the front end stack fit together. To that end; here are some equivalences from the .Net/Server side world to their counterparts in front end development.

grunt and gulp – The closest on the .Net side of the stack is probably msbuild. Grunt and Gulp both allow you to define tasks to automate your builds and deployments. Tasks such as css concatenation and minification, front end dependency injection and javascript linting.

jasmine – Jasmine maps directly to tools such as msbuild, nunit, xunit and fixie. It’s a unit testing framework (strictly speaking it’s more of a bdd than tdd framework)

karma – Karma is a test runner, very similar to the visual studio test runner or the runners available for xunit.

livereload – Over on the server side there’s no real parallel, if you’re doing front end work in visual studio you’ve got browser link which is very close. What this allows you to do is change your sources at will and have the browser of your choice (or browsers) reload those components for you as you save.

jshint – Similar to StyleCop it’s a linter or code quality tool. Borne out of Douglas Crockford’s jslint; its aim is to help you avoid making silly mistakes in your javascript code (things like variables in arrays being part of the parent scope).

npm and bower – These are both package managers. Similar in use to nuget in that they’ll bring down dependencies for your project from well known sources at the version you require, without you having to keep them in sync. The difference between the two is that npm is for server side utilities (in this context we’re talking more about development tools like jshint) and bower is for client side dependencies (like angular, bootstrap or fontawesome)

yeoman – A templating engine or scaffolding tool. If you’ve been living within visual studio for the past few years (and I can’t blame you, it’s lovely) you don’t generally have to write a lot of boilerplate code in order to get working. The reason for this is that Visual Studios project and file templates take care of a lot of the cruft of getting started.


This is by no means an exhaustive list and there are a lot of seriously awesome tools out there to help with front end development, but I hope it’ll help clear up some of the terms from this brave new world for those of us used to the Microsoft server side stack.