There’s no need for a long story here. Below you can find the description of how I make web apps these days. If you think that Visual Studio and ASP.NET MVC is all you need to make decent web apps … than you may be right - they are sufficient, but I’m daring enough to ask for more, so I don’t just want to create _decent_ apps, I want to make _top-notch_ ones, to do it fast, in a reliable way and deliver as frequently as possible. Here are my means to achieve that!
Chapter I - General Tooling
- I don’t use Visual Studio for web development. Period.
It’s fine, especially with Web Essentials, but if you haven’t yet, do yourself a favor and get WebStorm (http://www.jetbrains.com/webstorm/) - it’s blazing fast, optimized for web dev, enriched with plenty of useful plugins, integrated with the _proper_ VCSes (yes, I don’t mean TFS), etc. And in the end - it’s still quite cheap. - If I do web dev, I do web dev. So no server-side crap.
What does it actually mean? Web application is an HTML+JS+CSS application, so all I need to run that is a lightweight server that can deliver that content - for actual web dev I don’t use true server-side at all: there’s no MVC on IIS beneath: I serve static content (HTML+JS+CSS) via Node.js (http://nodejs.org/) and I mock all my service calls with suitable libraries (angular-mock, sinon, etc.).
Let me emphasize again - I don’t generate HTML on the server-side (like using Razor templates): it breaks presentation layer separation and slices the code unnecessarily. JS is really good enough on its own.
Needless to say - it’s very easily to integrate WebStorm with node.js. Works like charm. - I still “build” my app, but with Grunt (oink, oink).
There’re always some actions that have to be done with the code before it’s ready to be deployed on the server: get the external dependencies, build the configuration (I always split the config into static and dynamic parts), sometimes inject something into code (if you’re working with plugin-able app architectures, like I do), minify JS, process LESS, etc.. That’s what I use grunt.js (http://gruntjs.com/) for.
Grunt doesn’t just come with a bunch of pre-set options, it’s plugin-able itself and you can get a lot of goodies using node package manager - npm (https://npmjs.org/) or even write your own tasks - it’s very easy and I can’t imagine making web apps w/o that.
Needless to say (yupp, I realize I repeat myself) - it’s very easy to integrate WebStorm with grunt.js. Works like charm ;) - I’m running my tests. All the time.
If you’re making a serious, maintainable application that’s gonna be deployed more then once, you have to automate some tests. Automating UI tests is always challenging, but a lot of time and effort were spent by smart people to make it bearable.
In my case - the choice was quite simple - I’ve picked Karma (http://karma-runner.github.io/0.10/index.html), the companion project of angular.js, because the latter is my web app dev library of choice. But as far as I know, Karma is flexible enough to deal with apps that utilize different libraries / frameworks (like ember.js).
Karma can run your tests using the browser(s) you prefer, it can run in a continuous mode - triggering test execution once the appropriate code has been changed, etc. The test execution reports are very clean (ATDD approach is utilized) and … yes, it integrates with WebStorm smoothly - for instance, you can debug Karma test directly in your IDE. Obviously you’re not limited to running tests in typical browsers, you can use the headless one as well (for instance - phantom.js - http://phantomjs.org/).
In the following chapters:
- the core libraries I use
- how to build truly modular app using angular.js
- practical examples of automated testing using Karma
- … and more :)