thedersen.com

Backbone.Validation

2011-12-28T00:00:00Z

I just released version 0.2.0 of my validation plugin for Backbone.js. The plugin lets you declare validation rules on your Backbone model, ensuring that input from the user is valid. It currently ships with 18 built-in validators such as required, min, max, range, length, minLength, maxLength, regex-validator etc. In addition to the built-in validators, it is very easy to extend with your custom validators.

Lets start with an example of how to declare validation rules on your model:

:::js
var SomeModel = Backbone.Model.extend({
  validation: {
    name: {
      required: true,
      msg: 'Name is required'
    },
    age: {
      range: [1, 80]
    },
    email: {
      pattern: 'email'  
    },
    someAttribute: function(value) {
      if(value !== 'somevalue') {
        return 'Error'; 
      }
    }
  }
});

To configure your validation rules, simply add a validation object with a property for each attribute you want to validate on your model. The validation rules can either be an object with one of the built-in validators or a combination of two or more of them, or a function where you implement your own custom validation logic. If you want to provide a custom error message when using one of the built-in validators, simply define the msg property with your message.

To add your own validators, extend the Backbone.Validation.validators object as shown in the example below where we use underscore.js extend method. You can also redefine one or more of the built-in validators if it doesn’t fit your needs.

:::js
_.extend(Backbone.Validation.validators, {
  myValidator: function(value, attr, customValue, model) {
    if(value !== customValue) {
      return 'error';
    }
  },
  required: function(value, attr, customValue, model) {
    if(!value) {
      return 'My version of the required validator';
    }
  }, 
});

var Model = Backbone.Model.extend({
  validation: {
    age: {
      myValidator: 1 // uses your custom validator
    }
  }
});

A couple conventions

After performing validation, an isValid attribute is set on the model that is (obviously) true when all the attributes on the model is valid, otherwise it is false.

The Backbone.Validation.callbacks contains two methods: valid and invalid. These are called (in addition to the error event raised by Backbone) after validation of an attribute is performed.

The default implementation of invalid tries to look up an element within the view with an id equal to the name of the attribute that is validated. If it finds one, an invalid class is added to the element as well as a data-error attribute with the error message. The valid method removes these if they exists. You can also configure it to use a class selector instead of id selector.

As with the validators, you can redefined the behavior of these callbacks by overriding the implementation.

:::js
_.extend(Backbone.Validation.callbacks, {
  valid: function(view, attr, selector) {
    // do something
  },
  invalid: function(view, attr, error, selector) {
    // do something
  }
});

Validation binding

For all of this to work, you need to hook up the validation. The validation binding code is executed with a call to Backbone.Validation.bind(view). The validate method on the view’s model is then overridden to perform the validation.

There are several places that it can be called from, depending on your circumstances.

:::js
// Binding when rendering
var SomeView = Backbone.View.extend({
  render: function(){
    Backbone.Validation.bind(this);
  }
});

// Binding when initializing
var SomeView = Backbone.View.extend({
  initialize: function(){
    Backbone.Validation.bind(this);
  }
});

// Binding from outside a view
var SomeView = Backbone.View.extend({
});
var someView = new SomeView();
Backbone.Validation.bind(someView);

Summary

With this declarative way of defining validation, combined with the conventional updating of your user interface, it makes for an easy way to handle client validation. At least I think so.

But remember: you add client validation to be nice to your users, but you also need to add server validation to be nice to yourself and your company.

The source code for this project is licensed under the MIT License and is available on GitHub.

UnityConfiguration 1.4 is out

2011-11-15T00:00:00Z

Some minor improvements has been made, issues are closed, and here’s the new version for you.

So, what’s changed in v1.4?

Added extension methods to the IAssemblyScanner for easier discovery and configuration of conventions
- scan.WithFirstInterfaceConvention()
- scan.WithNamingConvention()
- scan.WithAddAllConvention()
- scan.WithSetAllPropertiesConvention()
Added non-generic overload to the AddAllConvention that allows you to register open generic interfaces
- scan.WithAddAllConvention().TypesImplementing(typeof(IHandler<>))
Added option on the IAssemblyScanner interface to scan for internal types in an assembly
- scan.InternalTypes()
Strong named the assembly
Switched to Semantic Versioning. In short this means that when
- the major number is changed: There will be breaking changes
- the minor number is changed: New features are added, but it is still backwards compatible
- the patch number is changed: Backwards compatible bugs fixes only

As usual you can install it via NuGet using the package manager in Visual Studio:

PM> Install-Package UnityConfiguration

or, if you like, you can grab the code at GitHub.

Hope you enjoy it!

New version of UnityConfiguration

2011-07-17T00:00:00Z

I just pushed a new release of UnityConfiguration to NuGet.

So what’s new in v1.3?

Documented public facing methods
Included the xml documentation in the NuGet package
Debugging symbols are available on SymbolSource.org
Several more overloads for adding assemblies to the scanner
One more overload for adding a registry that takes an instance of a UnityRegistry
New convention that scans for registries
New convention that uses an overridable naming convention for registering a type mapping
Added Transient, PerThread, PerResolve, ExternallyControlled and HierarchicalControlled lifetime scope configuration
MakeSingleton() and MakeSingleton(string) is marked as obsolete. Use Configure().AsSingleton() or Configure().WithName(name).AsSingleton() instead
ConfigureCtorArgsFor(params object[] args) is marked as obsolete. Use Configure().WithConstructorArguments(params object[]) instead

Install using the package manager console in Visual Studio:

PM> Install-Package UnityConfiguration

Hope you enjoy it!

Auto mocking with Unity and Moq

2011-02-21T00:00:00Z

As mentioned in my previous post we used the Microsoft Unity container in a previous project. We also used Moq as our mocking library. Combining these two and making an auto mocking container seemed fairly easy, so I went ahead and created something I called UnityAutoMoq.

Now, some say that auto mocking is a bad practice since it can hide certain design flaws in your system, like classes with to many dependencies etc. I say, that if you have these issues, it is probably not the auto mocking that is causing them. Auto mocking can increase your productivity, so I have no issues with using it. In fact, I encourage you to do so.

Using the container

:::cs
// Creating a new instance of the auto mock container
var container = new UnityAutoMoqContainer();

// Resolving a concrete class automatically creates
// mocks for the class dependencies and injects them
// before returning an instance of the class
Service service = container.Resolve<Service>();

// Resolving an interface, returns a mocked
// instance of that interface
IService mocked = container.Resolve<IService>();

// GetMock returns the mock on which you can do setup etc.
Mock<IService> mock = container.GetMock<IService>();

// Sometimes you need to cast your interface to some other type
// This is how that is done
container.ConfigureMock<IService>().As<IDisposable>();
Mock<IDisposable> disposable = container.GetMock<IService>().As<IDisposable>();

Download

The framework is available as a NuGet package, and can be installed either using the package manager console in Visual Studio like this:

PM> Install-Package UnityAutoMoq

Or by right clicking on references in your project and select the Add Library Package Reference option

The source code for this project is licensed under the MIT License and is available on my GitHub profile.

Convention based configuration for Microsoft Unity

2011-02-20T00:00:00Z

In a previous project, long story short, we used the Microsoft Unity IoC container. After writing line upon line with configuration statements while looking at the nice convention based configuration options for other containers, I decided that enough was enough. Replacing the Unity container was sadly not an option at the moment, so I went ahead and created a convention based configuration api for Unity.

Below you can see a small example of configuring a container using registries, and I should probably apologize for the poor (or rather lack of) documentation at this time.

You get access to the configuration api by using the extension method Configure on the IUnityContainer interface.

:::cs
var container = new UnityContainer();
container.Configure(x =>
{
    x.AddRegistry<FooRegistry>();
    x.AddRegistry<BarRegistry>();
});

Configuration is done in one or several registries that inherit the UnityRegistry base class.

:::cs
public class FooRegistry : UnityRegistry
{
    public FooRegistry()
    {
        // Scan one or several assemblies and auto register types based on a 
        // convention. You can also include or exclude certain types and/or 
        // namespaces using a filter.
        Scan(scan =>
        {
            scan.AssemblyContaining<FooRegistry>();
            scan.With<FirstInterfaceConvention>();
            scan.With<AddAllConvention>()
                .TypesImplementing<IHaveManyImplementations>();
            scan.With<SetAllPropertiesConvention>().OfType<ILogger>();
            scan.ExcludeType<FooService>();
        });

        // Manually register a service
        Register<IFooService, FooService>().WithName("Foo").AsSingleton();

        // Make services a singleton
        MakeSingleton<ISingletonService>();

        // You can automatically configure the container to call
        // a method on any service when they are created
        AfterBuildingUp<IStartable>().Call((c, s) => s.Start();

        // You can automatically configure the container to 
        // decorate services when they are created
        AfterBuildingUp<IFooService>().DecorateWith((c, t) => new FooDecorator(t));

        // If you want to inject values or objects that are not registered in
        // the container, you can do so by adding them using this statement.
        // For instances you want the container to create, just specify the type.
        ConfigureCtorArgsFor<ServiceWithCtorArgs>("some string", typeof (IFooService));

        // Unity follows the greedy constructor pattern when creating instances.
        // If you want to use a different constructor, you specify it by listing 
        // the types of the arguments in the constructor you want it to use.
        SelectConstructor<ServiceWithCtorArgs>(typeof (IFooService));
    }
}

At the moment, built in conventions includes AddAllConvention, FirstInterfaceConvention and SetAllPropertiesConvention. If these doesn’t suit you, creating custom conventions is as easy as creating a class that implements the IAssemblyScanner interface.

:::cs
public class CustomConvention : IAssemblyScannerConvention
{
    void IAssemblyScannerConvention.Process(Type type, IUnityRegistry registry)
    {
        if (type == typeof(FooService))
            registry.Register<IFooService, FooService>().WithName("Custom");
    }
}

Download

The framework is available as a NuGet package, and can be installed either using the package manager console in Visual Studio like this:

PM> Install-Package UnityConfiguration

Or by right clicking on references in your project and select the Add Library Package Reference option

The source code for this project is licensed under the MIT License and is available on my GitHub profile.

Best of 2010

2010-12-19T00:00:00Z

It’s that time of the year again. Lists are popping up all over. Here is one more.

It’s been a good year.

Setting up a Rails 3 app with RSpec, Cucumber, MongoDB and jQuery

2010-09-13T00:00:00Z

With Rails 3 released, it comes with a set of new switches that let you opt out various stuff when generating apps. This makes it a bit easier to use alternatives to the default Active Record, Test::Unit etc. than it was with previous versions of Rails. Some of the options are:

-O, [--skip-activerecord]  # Skip Active Record files
-J, [--skip-prototype]     # Skip Prototype files
-T, [--skip-testunit]      # Skip Test::Unit files

You can get a complete list of all the available options by running the command:

$ rails new --help

Creating the app

$ sudo gem install rails
$ rails new YourApp -OJT
$ cd YourApp

The gem command will install the latest version of Rails 3. The rails command creates a new app named ‘YourApp’ without Active Record (-O), Test::Unit (-T), and the Prototype javascript files (-J).

Configuring the app and the required gems

To get things working you first have to install all the required gems. Since Rails 3 introduces Bundler, the gem management is as simple as it can get.

Open your Gemfile at the root of you application and specify the gems:

:::ruby
source "http://rubygems.org"

gem "rails", "3.0.0"
gem "bson_ext"
gem "mongo_mapper"

group :test, :spec, :cucumber do
    gem "rspec"
    gem "rspec-rails", ">= 2.0.0.beta"
    gem "capybara"
    gem "cucumber"
    gem "database_cleaner"
    gem "cucumber-rails"
    gem "spork"
    gem "launchy"
end

Then, install all of them by simply running:

$ bundle install

Finally, you have to tell the generators that you are not using the default stuff. You do that by editing the config/application.rb and add these lines:

:::ruby
config.generators do |g|
    g.orm             :mongo_mapper
    g.template_engine :erb
    g.test_framework  :rspec
end

Setting up the connection to MongoDB

Create a new file, config/initializers/mongo.rb with the following content:

:::ruby
logger = Logger.new("log/mongodb-#{Rails.env}.log")
MongoMapper.connection = Mongo::Connection.new('127.0.0.1', 27017, :logger => logger)
MongoMapper.database = "YourApp-#{Rails.env}"

If you use different databases in the different environments (e.g. dev, production), go ahead and put some if-else logic in here.

Generating the Cucumber and RSpec stuff

$ rails g rspec:install    
$ rails g cucumber:install --capybara --rspec --skip-database

That’s it. You’ll now have a folder features for your Cucumber features and a folder spec for your RSpec specs.

Adding jQuery

$ curl http://code.jquery.com/jquery-1.4.2.min.js > public/javascripts/jquery-1.4.2.min.js
$ curl http://github.com/rails/jquery-ujs/raw/master/src/rails.js > public/javascripts/rails.js

The first line downloads jQuery 1.4.2 and saves it to your public/javascripts/ folder. The second line downloads rails.js which is a wrapper around jQuery for Rails.

Finally, specify that the javascripts should be loaded as part of the default scripts by opening the file config/application.rb and change

:::ruby
config.action_view.javascript_expansions[:defaults] = %w()

:::ruby
config.action_view.javascript_expansions[:defaults] = %w(jquery rails application)

And, you’re done!

Shotgun

2010-08-23T00:00:00Z

In my previous post I wrote about using the thin web server to run your Rack app locally. This works fine, but there is one issue. If you change your code or configuration you have to restart the server. This is not a big deal, but it do get quite annoying after a while. The solution is a gem called Shotgun.

From the readme:

The shotgun command starts one of Rack’s supported servers (e.g., mongrel, thin, webrick) and listens for requests but does not load any part of the actual application. Each time a request is received, it forks, loads the application in the child process, processes the request, and exits the child process. The result is clean, application-wide reloading of all source files and templates on each request.

As you can see, there in no longer a need to restart your server when code has changed, Shotgun does it for you. Nice.

To get going you need to install the gem

$ sudo gem install shotgun

To start the web server, simply type

$ shotgun

if the current directory contains the config.ru file, or specify the config file like this

$ shotgun config.ru

The output should be something like

== Shotgun/Mongrel on http://127.0.0.1:9393/

telling you which server got started and on what port it is listening.

There are some more options available, which you can find by looking at the help

$ shotgun --help

Ruby options:
  -e, --eval LINE          evaluate a LINE of code
  -d, --debug              set debugging flags (set $DEBUG to true)
  -w, --warn               turn warnings on for your script
  -I, --include PATH       specify $LOAD_PATH (may be used more than once)
  -r, --require LIBRARY    require the library, before executing your script

Rack options:
  -s, --server SERVER      server (webrick, mongrel, thin, etc.)
  -o, --host HOST          listen on HOST (default: 127.0.0.1)
  -p, --port PORT          use PORT (default: 9393)
  -E, --env ENVIRONMENT    use ENVIRONMENT for defaults (default: development)

Shotgun options:
  -O, --browse             open browser immediately after starting
  -u, --url URL            specify url path (default: /)
  -P, --public PATH        serve static files under PATH
  -h, --help               show this message
      --version            show version

New blog in five minutes

2010-08-05T00:00:00Z

As part of learning Ruby I wanted to move my blog to the Ruby platform. I started out by creating one myself using Ruby on Rails, but then I came across toto, “the tiniest blogging engine in Oz”, in a blog post by Mark Nijhof. It looked very promising, and I decided to give it a shot.

This walkthrough assumes that you have installed Ruby and Git and is somewhat familiar with using Git. Oh, and I am using a Mac, but I think it should work just as fine on Windows.

toto

$ sudo gem install toto

That’s it. You have now installed the blog engine, but before you can get started writing your articles you need a toto template.

$ git clone git://github.com/cloudhead/dorothy.git myblog
$ cd myblog

Dorothy is toto’s default template. It’s very minimalistic, but fully functional. If you want to customize it, all the files you need to change is located in the templates and public folders. It also comes with a Rack configuration file, config.ru, where you can configure your toto instance.

Writing in Markdown

toto uses no database or anything except .txt files for storing articles with metadata. The articles are written in Markdown and the metadata is stored in yaml at the very beginning of the file. Markdown is a plain text formatting syntax that gets converted to html. Its goal is to make it as readable as possible and I think they’ve succeeded. All you need is a simple text editor to get going.

To create a new article I recommend using the rake task for it.

$ rake new
Title:

You enter the title, hit enter, and the .txt file is created with necessary metadata and saved to the articles folder.

Open the file and start writing your article. When you are done writing, you need to commit the article to the git repository.

$ git add -A
$ git commit -m"Added new article"

Hosting it

The best (in my opinion) hosting option for Ruby is Heroku. It’s very easy to set up and it uses a pure git workflow for publishing your blog or site. For a small blog like mine, it is also completely free. No cost what so ever.

To publish your blog go to Heroku and sign up for an account. Then install Heroku on your machine.

$ sudo gem install heroku

After that is done, you need to make your blog a Heroku application.

$ heroku create myblog
Created http://myblog.heroku.com
git@heroku.com:myblog.git

Finally, you publish it. There are two ways of doing so. You can either use the rake task that comes with Dorothy or you can use the git push command. Essentially, they both do the same thing.

$ rake publish

$ git push heroku master
-----> Heroku receiving push
-----> Rack app detected
-----> Launching......... done

Your blog is now online! If you want to use your own domain it is also possible and very easy to set up with Heroku.

Disqus it

As part of the minimalistic approach of toto, it does not come with any custom built commentary module. For comments it uses the Disqus service. If you would like to enable comments, you go to http://disqus.com/, register for an account, and then you open the toto configuration file, config.ru, and changes

#set :disqus, false          # disqus id, or false

set :disqus, "YourDisqusId"  # disqus id, or false

People can now comment on your articles.

Running it locally

Sometimes it can be very useful to run the blog on local machine. Especially when tweaking layout and css there can be a lot of changes. I choose to run it on the thin web server.

$ sudo gem install thin

To start the web server type:

$ thin start -R config.ru

When I started it the first time I got an error

/Library/Ruby/Gems/1.8/gems/rack-1.2.1/lib/rack/utils.rb:138:in `union': can't convert Array into String (TypeError)

After some Googling I found that the error was most likely caused by Rack 1.2.1. When downgrading to Rack 1.1.0 it worked, although I don’t know why (yet).

When thin is running, go to http://localhost:3000 and browse your blog.

Summary

It took me longer to write this article than to get the blog up and running. That, I think, says a lot. I really like the minimalistic approach of toto and the frictionless publishing to Heroku. I also actually like writing in markdown.

If you are considering creating a blog, or maybe moving your existing, I would definitively recommend the toto and Heroku combo. After all, it will only cost you five minutes.

Show hidden files in Finder

2010-08-04T00:00:00Z

By convention all files starting with a dot (.) is hidden in Mac OS X. To view these files open terminal and type the following:

$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

This will show you all of the hidden files and folders on your operating system. If you want to reverse the command replace TRUE with FALSE.

That’s all.