Marionette JS

In my last blog entry, I wrote an article titled, “Backbone.JS Models and Collections” about using BackboneJS in the construction of an admin tool for a fantasy sports website. Another key component involved in the development of the page was MarionetteJS. MarionetteJS is an application library for Backbone.JS. It is primarily used to simplify the construction of bulky JavaScript applications. It contains a collection of design patterns for use with Backbone.JS. Within this blog entry, a very simplistic example of how these technologies were used will be shown.

To begin, a Home View was created where the players will be displayed. A basic example of this is shown below:

module.Views.HomeView = Marionette.Layout.extend({
	initialize: function () {

	},
	regions: {
		'playersTable': '#playersTable'
	}
});

Marionette and Backbone was used in conjunction with HandlebarsJS templating. A more in-depth explanation of Handlebars may be a good blog topic for another day. However, for the purpose of this blog, I will give a basic example of what a Handlebars template looks like. With all of the code examples contained in this blog, it is assumed that the developer will be using Marionette in combination with Handlebars. An example of a template used to display a table of players is shown below:

<script id=”player-row-template” type="text/x-handlebars-template">
	<td><b>{{FirstName}} {{LastName}} ({{TeamAlias}})</b></td>
</script>

<script id=”player-table-template” type="text/x-handlebars-template">
	<table>
		<thead>
			<tr>
				<th>Player Name</th>
			</tr>
		</thead>
		<tbody id="iterate"></tbody>
	</table>
</script>

An example of how a list view of players would be created is documented below:

module.Views.PlayersTableItemView = Marionette.ItemView.extend({

	initialize: function (options) {
	},
	tagName: 'tr',

	getTemplate: function () {
		return '#player-row-template';
	},
});

module.Views.PlayersTableView = Marionette.CompositeView.extend({
	initialize: function (options) {
		this.collection.on('change', this.render, this);
		this.collection.on('reset', function () {
			this.render();
		}, this);
	},
	getTemplate: function () {
		return '#player-table-template';
	},

	itemViewContainer: '#playerViewContainer',

	itemView: module.Views.PlayersTableItemView,

	appendHtml: function (containerView, itemView, index) {
		this.$(this.itemViewContainer).append(itemView.el);
	}
	}
});

Make sure that the Home View is visible.

var view = new module.Views.HomeView();
region.show(view);

Then Backbone.JS collection of players is passed into the view.

module.Views.players = new module.Views.PlayersTableView({ collection: playerCollection }
);
view.playersTable.show(module.Views.players);

The collection has models with attributes that correspond to “FirstName”, “LastName”, and “TeamAlias.” These attributes were placed within the Handlebars template shown above. For example, if a player’s name was “John Smith” and he played for Miami, the template would be used to display “John Smith (MIA)”. This is repeated for each model within the collection.

In conclusion, Marionette is a great tool to be used in conjunction with Backbone.JS in any JavaScript endeavor dealing with large amounts of data. Along with the help of Handlebars, Backbone.JS and Marionette can be used to simplify the somewhat daunting task of making such a large scale web application.

Grant Johnson
Junior Associate Programmer/Analyst
Grant Johnson

Writing your first internal DSL

If you are asking yourself, why would I ever need to write an internal DSL? In this blog series, I will explain the benefits of writing internal DSL’s. However, you might be wondering what an external DSL is in the first place. If so, this means you are curious enough to learn and I may be able keep your interest long enough for you to follow along with me. This will be a multi-part series, as I am unable to cover all the steps involved in single blog post.

First, let’s define what a DSL is: A DSL is Domain Specific Language. It helps to contrast with a General Purpose Language GPL such as Java or C#. Common examples of DSL’s are SQL, MSBuild, Regular Expressions, and CSS. As you can see, their applications are varied. Many have used these in their careers, but were probably unaware that these languages are considered DSL’s. The key here is specificity. We code to solve problems in a specific area.

An external DSL involves writing your own language, from the ground up. This generally requires developing an AST abstract syntax tree which represents your DSL’s grammar, and the use of a language parser and/or a compiler, like lex and yacc. While some computer science majors may have had the pleasure of creating their own compilers for class, my business degree coursework did not include this topic.

An internal DSL on the other hand, is written using an already existing language. A big language hosts language you create. Sound interesting? I hope I’ve got your attention now. Well, you might be asking yourself, how do I get started? Stick with me and we will make our way through the basics of how to write your first internal domain specific language.

In my opinion, I would like to list some of the more popular languages that are being used to create internal DSL’s. These are:

1. Ruby
2. Groovy
3. F#

A quick google search for “dsl” + pick one of the 3 above, i.e. “dsl groovy”, will provide countless results of examples. Feel free to ‘googelit’.

I have decided to write my first DSL in F#, a functional language. I chose to write this because I am a .NET developer. Furthermore, F# features a hybrid paradigm whereby one is free to construct classic OOP constructs like classes and enums or bust out into functional ones like discriminate unions and records. Also, it is built on top of the .NET framework, and so the familiarity in the core libraries is invaluable and inter-op with custom written .NET native assemblies is seamless.

Let’s take our first steps.

1. Picking a domain. I have chosen the domain of a car rental business(c-r-b).
2. Second step is to build up the primitives our language. Our imaginary c-r-b should provide a sufficiently rich context yet realistic domain to provide lots of interesting grammar like;

• arrival
• driver
• vehicleType
• destination
• startingPoint
• discount
• rents

Internal dsl’s also are widely used to implement units of measures. In our domain we will be able to define a one day unit of measure, like;

• 1day
• 2day
• 1week

Below, is the code I have developed thus far. I will continue to expand in the upcoming blog posts by fleshing out additional types in the c-r-b domain. A logistics aspect will be introduced and I will attempt to deal with that judiciously as that is a subject that can get very complex, although one F# is more than capable of handling it just fine. Things that deal with complicated schedule computations and estimated availability come to mind. Stay tuned, as I amplify scenario in upcoming blog posts.

References – http://www.slideshare.net/tomaspfb/dsls – By Tomas Petricek

namespace DSL2

// an enum
type makes = Chevy=0 | Ford=1 | Nissan=2 | Chrysler=3 | Honda=4 | Buick=5

// a enum
type vehicleType = Truck=0 | Compact=1 | Econ=2 | Sedan=3

// a record
type Customer = {firstName: string; lastName: string; gender: string; age: int}

//a class implicit ctor'tion
type Car(num:int , make: string , year:int , vt:vehicleType) = class
 member this.NumDoors = num
 member this.Make = make
 member this.Year = year 
 member this.VT = vt
end

//a record
type Business = {name: string; mutable listOfCars: list}

//a class explicit ctor'tion
type Car2 = class
 val NumDoors: int
 val Make: string
 val Year: int
 val VT: vehicleType
 (*first ctor*)

 new (numDoors, make, year, vt) = {NumDoors = numDoors; Make = make; Year = year; VT = vt} 
end

//TODO: upcoming - a logistical type that handles fleet maintenance
//TODO: upcoming - a type representing the rental agreement

Listing 2 – Script.fsx

// Learn more about F# at http://fsharp.net. See the 'F# Tutorial' project
// for more guidance on F# programming.

#load "Library1.fs"

open System
open DSL2

let BUSINESS_NAME = "C-R-B"
let mycar = Car(4, "Chevy", 2012, vehicleType.Compact)
let myca2 = Car(2, "Ford", 2011, vehicleType.Econ)
let myca3 = Car(4, "Nissan", 2013, vehicleType.Sedan)
let aListOfCars : Car list = [mycar; myca2; myca3]
let mybusiness = {name = BUSINESS_NAME ; listOfCars = aListOfCars} 
let mydriver = {firstName = "Daniel"; lastName = "Rosales"; gender = "M"; age = 39}

Console.WriteLine("NumOfDoors {0} = ", mycar.NumDoors)
Console.WriteLine("Make of car {0} = ", mycar.Make)
Console.WriteLine("Year of car {0} = ", mycar.Year)
Console.WriteLine("The driver is {0}, {1}, {2}", mydriver.firstName, mydriver.lastName, mydriver.gender)

Daniel Rosales
Programmer Analyst
Daniel Rosales

Backbone.JS Models and Collections

The main focus of this blog is on Backbone.JS models and collections. Backbone.JS provides a great solution for making JavaScript code modular within a web application. It allows the programmer to structure JavaScript code in an MVC (Model/View/Controller) style. It also connects to an existing API over a RESTful JSON interface. Backbone.JS represents data as Models and these models can be created, destroyed, validated, and also saved to the server. When a model is changed, it will fire a “change” event, which will update the View for which the model’s parent collection is attached.
Backbone.JS models and collections were integral in the creation of an administration page for a fantasy sports site that I recently helped develop. I was dealing with a considerable amount of data that included the names, teams, and statistics for thousands of players. Backbone supports the creation of collections to handle such large amounts of data and these collections are ordered sets of models. The data that was being used with the fantasy sports site was coming back from a database. It was accessed in a way very similar to the code example expressed below.

    var PlayerStats = Backbone.Collection.extend({
        url: function () {
            return '/api/PlayerStats?sportType=3’;
        }
    });

However, the collection can be created and data can be added within the JavaScript as well. This is represented by the code below:

var juniorAssociateCollection = new Backbone.Collection([
	{name:  “Dylan”, project: “Sports League Inc”},
	{name: “Jeremy”, project: “Blueberry Street”},
	{name:  “Grant”, project: “Field Medicine”}
]);
	alert(JSON.stringify(juniorAssociateCollection));

Manipulating the collection after its creation is effortless with the help of the included Underscore functions. If I want to add a model to the collection, it can be accomplished by using the following lines of code.

var jAssociate= Backbone.Model.extend({
idAttribute:  "_id",
name:  “John” ,
project: ”Doe Corp”
});
juniorAssociateCollection.add( jAssociate );

Removal is done in a similar fashion, although it was never used in the fantasy sports project. When the collections needed to be cleared out and repopulated with updated models, the Underscore function Reset was used. It could either be passed a collection of models or be called with empty parameters. If Reset was called with the parameters empty, the collection would be emptied. Emptying collections had to be done often within the administration site. This was due to the sheer number of models being updated. It was faster and easier to pass an array of updated models into the collection than it was to go through and update each model in the collection. Examples of Reset can be seen below.

juniorAssociateCollection.reset( Insert Updated Array of Models Here );

or to empty collection

juniorAssociateCollection.reset();

Collections can also be altered similar to a stack with Underscore functions as well. Push will add a model to the end of the collection. Pop will remove and return the last model from the collection.

juniorAssociateCollection.push( jAssociate );
var returnedJunior = juniorAssociateCollection.pop();

Models can be accessed using the Get and At functions provided by Underscore. Get retrieves the model by its specified ID. At retrieves the model by its index.

juniorAssociateCollection.get(1);

Or

juniorAssociateCollection.at(0);

These are just a few of the numerous functions that Underscore contains for Backbone.JS developers.
As demonstrated above, Backbone is a great JavaScript solution for a web application handling large amounts of data. It has all the facilities to maintain and alter the data on the client side.

Grant Johnson
Junior Associate Programmer/Analyst
Grant Johnson