Cowboy and Batman.js for Erlang Web Development

Why Cowboy and Batman.js

There are a lot of Erlang web frameworks out there today. Not all are modeled after the MVC model (see Nitrogen), but I think all of them are addressing the problem the wrong way. I recently gave a presentation, slides here and the code for this example here, describing my perferred method for using Erlang for web development and why I think it is the best way to go. In this post, I’ll go into more details on how to build the Erlang backend for the TodoMVC clone I did with Batman.js. I will not spend time on Batman.js but instead only give a quick list of reasons I prefer it to other Javascript frameworks.

Batman.js advantages:

  • Automatic URL generation based on model
  • HTML data-bind templates
  • Coffeescript

Cowboy is a newer Erlang web server that provides a REST handler based on Webmachine. Both of these are perfect for developing a RESTful API, because they follow the HTTP standard exactly and when you are building an API based on HTTP, being able to properly reason about how the logic of the application maps to the protocol eases development and eases getting REST “right”.

Nginx

Any non-dynamic content should be served by Nginx since there is no logic needed and it is something Nginx is great at, so why have Erlang do it? The snippet below configures Nginx to listen on port 80 and serve files from bcmvc’s priv directory. Each request is checked to see if it is a POST or any other method with a JSON request type. If either of those are true, the request is proxied on to a server listening on port 8080, in our case the Cowboy server.

server {
  listen 80;
  server_name localhost;

  location / {
    root   <PATH TO CLONE>/bcmvc/lib/bcmvc_web/priv/;

    if ($request_method ~* POST) {
      proxy_pass        http://localhost:8080;     }

    if ($http_accept ~* application/json) {
      proxy_pass        http://localhost:8080;     }
  }
}

The API

Batman.js knows what endpoints to use and what data to send based on the name of the model we created and the encoded variables, code here. This results in the following API:

 
Method Endpoint Data Return
POST todos {todo : {body:”bane wants to meet, not worried”,isDone:false}}
PUT /todos/33e93b30-2371-4071-afc5-2d48226d5dba {todo : {body:”bane wants to meet, not worried”,isDone:false}}
GET todos [{todo : {id:"33e93b30-2371-4071-afc5-2d48226d5dba", body:"bane wants to meet, not worried", isDone:false}}]
DELETE /todos/33e93b30-2371-4071-afc5-2d48226d5dba

Cowboy Dispatch and Supervisor

Dispatch rules are matched by Cowboy to know what handler to send the request to. Here we have two rules. One that matches just the URL /todos and one that matches the URL with an additional element which will be associated with the atom todo. Both requests will be sent to the module bcmvc_todo_handler.

Dispatch = [{'_', [{[<<"todos">>], bcmvc_todo_handler, []},
                   {[<<"todos">>, todo], bcmvc_todo_handler, []}]}],

Cowboy provides a useful function child_spec for creating a child specfication to use in our supervisor. The child spec here tells Cowboy we want a TCP listener on port 8080 that handles the HTTP protocol. We additionally provide our dispatch list for it to match against and pass on requests.

ChildSpec = cowboy:child_spec(bcmvc_cowboy, 100, cowboy_tcp_transport, 
                              [{port, 8080}], cowboy_http_protocol, [{dispatch, Dispatch}]),

Cowboy Handler

Now that we have a server on port 8080 that knows to send certain requests to our todo handler, we can build the module. The first required function to export is init/3. This function let’s Cowboy know we have a REST protocol, this is how it knows what functions to call (some have defaults and some existing in our module) to handle the request.

init(_Transport, _Req, _Opts) ->
    {upgrade, protocol, cowboy_http_rest}.

Knowing that this is a REST handler Cowboy will pass the request on to allowed_methods/2 to find out if our handler is able to handle this method. Next, the content types accepted and provided by the handler are checked against the incoming request. The expected HTTP response status codes are returned if any of these fail. 405 for allowed_methods, XXX for content_types_accepted and XXX for content_types_provided.

allowed_methods(Req, State) ->
    {['HEAD', 'GET', 'PUT', 'POST', 'DELETE'], Req, State}.

content_types_accepted(Req, State) ->
    {[{{<<"application">>, <<"json">>, []}, put_json}], Req, State}.

content_types_provided(Req, State) ->
    {[{{<<"application">>, <<"json">>, []}, get_json}], Req, State}.

Now the request is sent to the function that handles the HTTP method type of the request.

For a POST, a request to create a new todo item, the function process_post/2 is sent the request. Here we retrieve the body, a JSON object, from the request, convert it to a record and save the model. We’ll see how this record conversion is done when we look at the model module. To inform the frontend of the id of our new resource we set the location header to be the path with the id.

process_post(Req, State) ->
    {ok, Body, Req1} = cowboy_http_req:body(Req),
    Todo = bcmvc_model_todo:to_record(Body),
    bcmvc_model_todo:save(Todo),

    NewId = bcmvc_model_todo:get(id, Todo),
    {ok, Req2} = cowboy_http_req:set_resp_header(
                   <<"Location">>, <<"/todos/", NewId/binary>>, Req1),

    {true, Req2, State}.

For this handler we expect PUT for an update to an object, that is what Batman.js does, but a PATCH would make more sense. For a PUT the URL contains the id for the todo item to be updated. That is retrieved with the binding/2 function. The todo record is created the same as in process_post/2 but then the this id is set for the model and the update/1 function is used to save it to the database.

put_json(Req, State) ->
    {ok, Body, Req1} = cowboy_http_req:body(Req),
    {TodoId, Req2} = cowboy_http_req:binding(todo, Req1),
    Todo = bcmvc_model_todo:to_record(Body),
    Todo2 = bcmvc_model_todo:set([{id, TodoId}], Todo),
    bcmvc_model_todo:update(Todo2),    
    {true, Req2, State}.

For a GET request, which for this application we do not deal with a request for a single todo item, all todo items are retrieved from the model module. Each of these is passed to the model’s to_json/1 function and the result of converting each to JSON is combined into a binary string and placed between brackets so the Batman.js frontend receives a proper JSON list of JSON objects.

get_json(Req, State) ->
    JsonModels = lists:foldr(fun(X, <<"">>) ->
                                 X;
                            (X, Acc) ->
                                 <<Acc/binary, ",", X/binary>>
                         end, <<"">>, [bcmvc_model_todo:to_json(Model) || Model <- bcmvc_model_todo:all()]),

    {<<"[", JsonModels/binary, "]">>, Req, State}.

And lastly, DELETE. Like in PUT the todo item’s id is retrieved from the bindings created based on the dispatch rules and this is passed to the model’s delete function.

delete_resource(Req, State) ->
    {TodoId, Req1} = cowboy_http_req:binding(todo, Req),
    bcmvc_model_todo:delete(TodoId),
    {true, Req1, State}.

Models

Model’s are repsented as records and must provide serialization functions to go between JSON and a record. Each model uses a parse transform that creates functions for creating and updating the record. The transform is a modified version of exprecs from Ulf Wiger that also uses the type definitions in the record to ensure when setting a field that it is the correct type. For example in the todo model isDone is a boolean, so when the model is created the boolean convert function will be matched to convert the string representation to an atom:

convert(boolean, <<"false">>) ->
    false;
convert(boolean, <<"true">>) ->
    true;

So the key pieces of the bcmvc_model_todo are:

-compile({parse_transform, bcmvc_model_transform}).

-record(bcmvc_model_todo, {id = ossp_uuid:make(v1, text) :: string(),
                           body                          :: binary(),
                           isDone                        :: boolean()}).

to_json(Record) ->
    ?record_to_json(?MODULE, Record).

to_record(JSON) ->
    ?json_to_record(?MODULE, JSON).

The ?record_to_json and ?json_to_record macros are defined in jsonerl.hrl. These marcos are generic and work for any record that is typed and uses the model transform.

Conclusion

Clearly, much of what the resource handler and model do is generic and can be abstracted out so that implementing new models and resources can be even simpler. This is the goal of my project Maru. Currently it is based on Webmachine but is now being convered to Cowboy.

In the end, using Cowboy for building a RESTful interface for your application allows you to build interfaces for the frontend entirely separted from backend development, and if you want multiple interfaces (like native mobile and web), they both talk directly to the same backend. Also, from the beginning you have the option to open up your application with an API for other developers to take your application new places, and, shameless plug here, add your API to Mashape to spread your new app!

About these ads

4 thoughts on “Cowboy and Batman.js for Erlang Web Development

  1. Martin says:

    I really like your setup, its elegant and clean… My only problem is that when I try to run it, it crashes.

    Do you have any idea why?

    6> application:start(hello_world_rest).
    {error,{bad_return,{{hello_world_rest,start,[normal,[]]},
    {‘EXIT’,{undef,[{cowboy,start_listener,
    [my_http_listener,1,cowboy_tcp_transport,
    [{port,8080}],
    cowboy_http_protocol,
    [{dispatch,[{‘_’,[{'_',hello_world_rest_handler,...}]}]}]],
    []},
    {application_master,start_it_old,4,
    [{file,"application_master.erl"},{line,274}]}]}}}}}
    7>
    =CRASH REPORT==== 30-Jan-2013::11:09:45 ===
    crasher:
    initial call: application_master:init/4
    pid:
    registered_name: []
    exception exit: {bad_return,
    {{hello_world_rest,start,[normal,[]]},
    {‘EXIT’,
    {undef,
    [{cowboy,start_listener,
    [my_http_listener,1,cowboy_tcp_transport,
    [{port,8080}],
    cowboy_http_protocol,
    [{dispatch,
    [{‘_’,[{‘_’,hello_world_rest_handler,[]}]}]}]],
    []},
    {application_master,start_it_old,4,
    [{file,"application_master.erl"},{line,274}]}]}}}}
    in function application_master:init/4 (application_master.erl, line 138)
    ancestors: []
    messages: [{'EXIT',,normal}]
    links: [,]
    dictionary: []
    trap_exit: true
    status: running
    heap_size: 377
    stack_size: 24
    reductions: 107
    neighbours:

    =INFO REPORT==== 30-Jan-2013::11:09:45 ===
    application: hello_world_rest
    exited: {bad_return,
    {{hello_world_rest,start,[normal,[]]},
    {‘EXIT’,
    {undef,
    [{cowboy,start_listener,
    [my_http_listener,1,cowboy_tcp_transport,
    [{port,8080}],
    cowboy_http_protocol,
    [{dispatch,[{‘_’,[{‘_’,hello_world_rest_handler,[]}]}]}]],
    []},
    {application_master,start_it_old,4,
    [{file,"application_master.erl"},{line,274}]}]}}}}
    type: temporary

  2. Tristan Sloughter says:

    Martin, this code is out of date with the current Cowboy API. I’ll update the code in github and make a note on the post.

    Thanks for pointing this out!

  3. Hello, Tristan and Martin,

    I email you guys at facebook. I really like the Maru idea and would like to use for a very large project. I will be glad to chat with anyone who is keen on working with me based on the maru suggestion. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s