2. Getting Started with 1.0

This guide introduces the most important aspects of JavaScriptMVC by walking through creating a simple Hello World application. Here's what's covered:

JavaScriptMVC in a Nutshell

Creating Hello World

Testing Hello World

Compressing Hello World

Next steps

JavaScriptMVC in a Nutshell

JavaScriptMVC helps you develop the right way, with:

Organization

Files are logically organized, so you can find what you�re looking for quickly.

Plugin system

Everything in JavaScriptMVC is a plugin, which provide functionality like Controllers and Views. You include just the ones you need.

Development modes

Modes for each phase of development:

Development - optimized for debugging
Test - loads console and application tests
Compress - compresses your application
Production - loads a compressed file

Here's a snapshot of a JavaScriptMVC application:

Creating Hello World

This section walks you through writing 'Hello World' after a page loads. The purpose of a Controller is to respond to events, so we'll use a Controller to create the event handler that responds to the document's load event. You'll:

Download JavaScriptMVC
Load JavaScriptMVC and an application file
Include the controller plugin and a controller file
Write a controller action
Run your Hello World application

Step 1: Download and install

Download the latest JavaScriptMVC. Unzip the folder on your file system or web server.

A simple JavaScriptMVC application, similar to what you'll create shortly, is running in index.html. You may want to refer to this as a reference.

Step 2: Create your page

JavaScriptMVC applications have an application file, which is a centralized place to load plugins and other JavaScript files, such as controller, model, and view files. To load a JavaScriptMVC application, you need to load JavaScriptMVC and an application file. You can do this with a one-liner:

<script type='text/javascript' src='jmvc/include.js?helloworld,development'></script>

Load JavaScriptMVC and helloworld application file

Paste the following in helloworld.html in the same directory as index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
   <head></head>
   <body>
      <script type='text/javascript' src='jmvc/include.js?helloworld,development'></script>
   </body>
</html>

Page HTML

This HTML creates a blank page that loads an application file called helloworld.js. Your HTML page can be anywhere, as long as your script tag points to the location of include.js.

Step 3: Load a plugin and a file

In the last section you loaded an application file called helloworld.js in development mode. Although this is an extra step, it provides one consistent location to manage the plugins and files your application loads.

Paste the following in helloworld.js in the apps directory:

include.plugins('controller');
include.controllers('main');

Load controller plugin and file

This code loads the controller plugin and a controller you'll create shortly.

Step 4: Write Hello World to the page

Controllers are organized collections of event handlers. The MainController is a special type of controller that provides event handlers for window and document events.

Paste the following in main_controller.js in the controllers directory:

Controller('main',{
  // the window onload event handler
  load: function(){
    document.body.innerHTML += "<h1 id='hello'>Hello World</h1>";
  }
});

Write "Hello World" to the page

This creates an onload event handler for the document, which writes "Hello World" to the page.

Step 5: Run it

That's it. You've created a simple Hello World application. Open helloworld.html in a browser.

Testing Hello World

The Test plugin allows you to simulate user interactions to comprehensively and easily test your applications. This section will go over testing your simple Hello World application.

Step 1: Turn on test mode

Change the src attribute of the script tag that loads include.js like this:

<script type='text/javascript' src='jmvc/include.js?helloworld,test'></script>

Change modes

Reload your page. The JavaScriptMVC Console will load in another window:

Step 2: Create a controller test

Controller tests are meant to test JavaScriptMVC's controllers' actions.

Paste the following code in main_controller_test.js in the test/functional directory.

new Test.Controller('main',{
   test_helloworld: function() {
      // check that Hello World has been written
      this.assert_equal('Hello World', document.getElementById('hello').innerHTML);
   }
});

Testing Hello World

This test asserts "Hello World" has been inserted into the page correctly.

Step 3: Run your test

Reload your page. The JavaScriptMVC Console will open. Click the Functional tab. Run the test by clicking the play button.

Compressing Hello World

There is a large overhead associated with downloading many JavaScript files. JavaScriptMVC stresses never burdening your users with slow downloads. Include makes it simple to compress your code into one file with no extra programming.

Step 1: Compress

First, turn on compress mode. Change the src attribute of the script tag that loads include.js:

<script type='text/javascript' src='jmvc/include.js?helloworld,compress'></script>

Change modes

Reload your page. Your application files and any included JavaScriptMVC files are compressed into a single file and presented to you.

Step 2: Switch to production mode

Create helloworld_production.js in your apps directory. In this file, copy the compressed code (the textarea under "Compressed Collection"). Turn on production mode by changing the src attribute one last time:

<script type='text/javascript' src='jmvc/include.js?helloworld,production'></script>

Change modes

When you reload your page, only two JavaScript files will load: include.js and helloworld_production.js.

Next steps

In the context of this trivial application, you've been exposed to major tenets of JavaScriptMVC: code separation, testing, and compression. This is pretty cool! Look at how simply you went from nothing to a compressed and tested application.

There is a lot more to be learned! JavaScriptMVC lets you work together with jQuery, Prototype, and other libraries, add error notification, separate your presentation markup, and easily access web services.

For more information, start by reading about the plugins on the Learning Center page, then read more detail about individual plugins.