Wednesday, January 11, 2012

A Fresh Start to Spine.js for ASP.NET MVC with MeetSpine.js- Part 1

In the past, JavaScript has been looked down on as buggy and on a use only when you can't do without basis. When I was in college, I had an ASP.NET WebForms teacher tell us that we shouldn't even use JavaScript because it would soon be dead. That statement couldn't be further from the truth. With the introduction of jQuery and other libraries, JavaScript is no longer the ugly duckling of the programming world.

JavaScript has even entered the MVC world with the introduction of frameworks such as Backbone.js and Spine.js. The problem with these frameworks is that there tends to be a huge learning curve for those use to "traditional" JavaScript.

Today I'm going to take a well know tutorial MeetSpine.js published by Kazi Manzur Rashid and elaborate on it for those of us not familiar with Spine.js or CoffeeScript in hopes that I can give someone a quicker start than I got.

Kazi has done an excellent job at creating a tutorial on creating a ASP.NET MVC project using Spine.js. However, I believe that he left out several key steps in that would alleviate some headache for those just starting out.

To start off, I'm going to make a couple of assumptions that I hope aren't too far fetched. First, you're using a Windows 7 OS. Second, You have Visual Studio 2010 installed, it doesn't matter which version you are using for this tutorial. Third, you know how to access the command prompt. And last, you understand the basics of how an MVC framework is supposed to work.

Getting Started

Lets start by installing the CoffeeScript command line tool onto our machine. To make the install easy, we're going to use Node.js and npm. If you don't already have node.js installed on your machine, just go to, click the download link, select Windows Installer, and run the msi. The installer will automatically install npm along with node.js. Now, open up the command prompt and type

npm install -g coffee-script

Okay, now let's go to Kazi's tutorial and follow it until we get to the part talking about project folder structure. Go ahead and set it up like he has it, but when you download Spine.js, there are a few files that you'll need to rename before moving them into the project, ajax.js -> spine.ajax.js and local.js -> spine.local.js.

Now onto where Kazi talks about the Initial Task Model. At this point, you're going to want to add a new file called to your solution in the assets/javascripts/models folder. Fairly obvious, but still missing from the original post. I should also mention that you shouldn't trust Kazi's code snippet line numbers, they almost always start at the number one even when he could be talking about line 10 or even 100 and will likely confuse you if you try to use them.

Now we continue on with the tutorial until we reach the part where Kazi talks about trying out our model using Firebug. There are a couple of steps that Kazi left out here if you actually want to test it for yourself. First, make a test page in your project root called TestPage.htm. I know it's not MVC, but we don't care right now.

In the head tag, include the following 3 files:

    <script src="assets/javascripts/lib/Date.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/spine.js" type="text/javascript"></script>
    <script src="assets/javascripts/models/Task.js" type="text/javascript"></script>

If you've noticed, we don't have a Task.js file, we only have a file in our solution. What we need to do is open up the command prompt and navigate to our assets/javascripts/models folder. Once there, type in the following command: (Note: you don't need to do this if you're using Mindscape's Web Workbench since it generates the js files on save)

C:\Users\user\Projects\MeetSpine\assets\javascripts\models>coffee -c .

This will compile all of our CoffeeScript files into usable JavaScript files and we should now be able to test out what we've done just like Kazi does. (Note: don't forget to put the period on the end of the command)

By the time you get done reading over the Task Spec and Task Validation snippets, you'll probably be lost again. This is because Kazi never mentions where all this taking place and what files we're working with.

In Part 2, I'll be sure to explain how to get out project to match the Jasmine Spec Runner output that Kazi has in his post. Until then, I hope this helps to clear up some of the finer points of getting started with Spine.js.

A Fresh Start to Spine.js for ASP.NET MVC with MeetSpine.js- Part 2
A Fresh Start to Spine.js for ASP.NET MVC with MeetSpine.js- Part 3

No comments:

Post a Comment