Yo! Mr White!


I just released v0.1.0 of the Mr White angular generator for Yo. Check it out at https://github.com/Iteam1337/generator-mrwhite. To use:

npm install -g yo grunt-cli generator-mrwhite
mkdir myangularproj && cd myangularproj
yo mrwhite

What is?

The first time I tried Yeoman I was impressed but I didn't like it. It was cool but far to magical. If you never tried it, Yeoman is/was a generator for projects based on Angular, Backbone, Ember and a few more. You could set up your project and tell it you wanted an Angular controller and it would generate it for you, hook it up and add a test skeleton. Pretty impressive! But I abandoned it after just dipping my toe in the water. I had just gotten started with Grunt and that's the way I wanted it - full controll and MY way.


Since then Yeoman has recieved a revamp. It got broken up into a less monolithic tool where the former Yeoman entry point was renamed Yo. The presentation focused more on creating your own generators than on the magic. And again I got intrigued but not really sold. We started using a generator called cg-angular for one larger Angular project and pretty soon I got hooked. Not only did it save key strokes - it ensured a consistent folder structure across the project. Also, since I had gotten more fluent in Grunt since my last attempt, I could now see exactly what it was Yo actually did. The magic was gone!

Mr White

Code standards are good. It doesn't matter so much what thay are as that they exist. Cg-angular had good standards and a good test setup - they just weren't my standards. Hence: FORK!

There were a few things I wanted to change:

Mocha instead of Jasmine

Jasmine isn't bad but I prefer Mocha from a syntactic standpoint. Also, Mocha + Sinon is running laps around Jasmines mocks. The default test setup in Mr. White is Mocha + Chai (using expect) + Sinon + Sinon-Chai.

ui-router instead of ng-router

It's just sooo much better :)

Fewer assumptions

Cg-angular expects you to use jQuery, Bootstrap and some other things. Mr. White is more unoppinionated in that sense.

Lowercase names for singleton services

I know a lot of people tell you they should have upper case names, but they're just plain wrong. If it is an instance, it should be in lower case.


Angular really doesn't have anything called a Model. It does, however, have the capability to provide them. If you use service, it will always provide you with an object:

angular.module('foo').service('myService', function () {
    var myService = {};
    // stuff
    return myService;

This is really useful for something that you only have one of in your application, for example a wrapper for socket.io.

But if you use factory, you are free to return anything, for example a function reference:

angular.module('foo').factory('MyClass', function () {
    function MyClass() {};
    // MyClass.prototype stuff
    return MyClass;

This means that we can utilize the thin controllers/fat models pattern which is really good in dynamic languages.

No false passing tests

Cg-angular adds a test skeleton for every controller, directive, service and filter in your application. The problem is that all these test skeletons report as passing. So it encourages you to fall into the pit of 100% coverage - no asserts. Mr. White adds pending tests with the description it('should have tests');. Shaming is underrated ;)


When you use a code generator, nothing is more annoying than ugly(TM) code. One of the last steps in Yo Mr White was to make sure all code was indented using two spaces, that a space was added between every anonymous function and its parenthesis, that single quotes is used for all strings... and so on. (Thanks Dennis for assisting me in the OCDification!)


The reason for the name is that Christian and Rickard where really into Breaking Bad and kept uttering the phrase Yo! Mr. White! around the office. With the renaming, thay are now able to type it in the terminal as well ;)

Road map

The generator does what I want it to do now so I don't know when I will get around to improving it (except for fixing problems - hint, hint) but I do have some ideas. I really want to add support for selecting which router to use at startup as well as which css generator (less/sass/stylus). If you have any additional ideas, please tell me!


Johan Öbrink

Started programming on my VIC 20 in 1982. Programmed JavaScript, Java, ActionScript, C# and then some. Love TDD, XP and agile development. Enjoy talking (a lot), building drones and playing with LEGO.

comments powered by Disqus