Skip to content

Commit

Permalink
some fixes on the readme + started to implement proper routing
Browse files Browse the repository at this point in the history
  • Loading branch information
juristr committed Jul 31, 2012
1 parent f83a06a commit 359b7bb
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 54 deletions.
143 changes: 91 additions & 52 deletions labs/architecture-examples/javascriptmvc/readme.md
@@ -1,78 +1,117 @@
@page stealjs StealJS
@parent index 1
# JavaScriptMVC TodoMVC app

StealJS is a collection of command line and JavaScript client utilities
that make building, packaging, and sharing JavaScript applications easy.
###Why this fork?

## Features
I began this fork of the useful JMVC Todo application as I felt it was missing a number of things including:

Behold StealJS's goodies:
* Setup documentation (which I've written up below)
* A directory structure that matches what the build files originally defined require
* Minor changes to help it fall in line with the Backbone and Spine todo apps including UI features and stylistic changes
* Pre-built production.js and production.css files so users could test the app right out of the box (as long as steal etc. are available)

### Dependency Management ([steal])
##Getting Started

[steal] loads JS and other file into your app. Features:
JavaScriptMVC is a jQuery-based JavaScript framework that's excellent as a comprehensive front-end solution for structuring applications using the MVC architecture pattern.

- Loads JavaScript, CSS, Less, CoffeeScript, and a variety of client-side templates.
- Can be use with scripts that don't use steal.
It's broken down into 4 separate projects that can be used independently of each other. These are:

steal('widgets/tabs.js',
'./style.css', function(){
$('#tabs ).tabs();
});

### JS/CSS Concatenation and Compression ([steal.build])
* jQueryMVC - MVC extensions for jQuery
* StealJS - Dependency management, build process, code generators
* FuncUnit - A web testing framework
* DocumentJS - A JavaScript documentation framework

The [steal.build] plugin combines an application's files into a single minified
JavaScript and CSS file extremely easy. Features:
For more information on getting started with the framework as a whole, you may find Justin Meyer's [documentation](https://gist.github.com/989117) on it quite helpful. It discusses classes, models, views and controllers and is an overall good read for any developers wishing to begin using JMVC. Otherwise just consult directly the [official JavaScriptMVC docs](http://javascriptmvc.com/docs.html#!);

- Configurable compressors (defaults to Google Closure).
- Compresses Less and CoffeeScript.
- Pre-processes and compresses client-side templates (templates don't have to be parsed).

@codestart text
js steal/buildjs mypage.html
@codeend

### Logging ([steal.dev])
###Setup

[steal.dev] logs messages cross browser. Messages are removed in production builds.
To get started with the Todo application, you'll first need to clone the repository to a local directory. You have a few options of how to approach this.

steal.dev.log('something is happening');
###Cloning with submodules automatically synched

### Code Generators ([steal.generate])
The repository also contains git submodules for jQueryMVC, StealJS, FuncUnit and DocumentJS out of the box. If you would like to check-out the code for the application including all submodules you can do so as follows:

[steal.generate] makes building code generators extremely easy. Features:
```
git clone --recursive git://github.com/addyosmani/todo
```

- Pre-packaged JMVC style code generators.
- Easily author custom generators.

@codestart text
js jquery/generate/app cookbook
@codeend
Git 1.6.5 supports this however if you're using an older version of Git you can achieve the same effect using `git submodule update --init`

### Package Management ([steal.get])
###Cloning with submodules manually

[steal.get] is a simple JavaScript version of [http://rubygems.org/ ruby gems] featuring:
Alternatively, you can checkout the main application files and clone the dependancies manually. To checkout the app simply execute:

- Download and install plugins from remote SVN or GIT repositories.
- Installs dependencies.
```
git clone git@github.com:addyosmani/todo.git
```

@codestart text
js steal/getjs http://github.com/jupiterjs/mxui/
@codeend
You can then either use *submodules* to checkout the submodules as their own repositories (eg. if you forked them from JMVC and wished to keep track of your own versions) or alternatively by cloning their repos locally.

### Code Cleaner ([steal.clean])
###Submodules

[steal.clean] cleans your code and checks it against JSLint.
```
git submodule add git://github.com/jupiterjs/steal.git steal
git submodule add git://github.com/jupiterjs/jquerymx.git jquery
git submodule add git://github.com/jupiterjs/funcunit.git funcunit
git submodule add git://github.com/jupiterjs/documentjs.git documentjs
```

@codestart text
js steal/clean path/to/page.html
@codeend
Note that as per Bitovi's original Todo application, jquerymx is actually stored in the directory called jquery in case we decide to sync up any changes made without worrying about path differences.

### Searchable Ajax Apps ([steal.html])
###Cloning

Cloning repositories using GitHub is a fairly straight-forward process and the todo application just requires the following commands to be executed to get you setup:

```
git clone git://github.com/jupiterjs/steal.git
git clone git://github.com/jupiterjs/jquerymx.git
git clone git://github.com/jupiterjs/funcunit.git
git clone git://github.com/jupiterjs/documentjs.git
```

###Structure

In order to correctly build the todo application, you'll need to ensure that you have the following directory structure, unless you decide to change the build files in the todo/scripts directory:

```
funcunit
jquery
steal
todo
todo
index.html, todo.js etc.
scripts
test
```



###Building

Within todo/todo, you'll find the main application (todo.js) as well as two additional folders. The *scripts* folder contains the build files needed to build the final production files required for the app to run, whilst the *test* folder contains the FuncUnit and QUnit files required for testing. Let's take a look at todo/todo/scripts/build.js:

```
load("steal/rhino/steal.js");
steal.plugins('steal/build','steal/build/scripts','steal/build/styles',function(){
steal.build('todo/todo/scripts/build.html',{to: 'todo/todo'});
});
```

In this simple build file, we're telling out build process to load steal.js from the rhino directory (for more on Rhino, see here: http://www.mozilla.org/rhino/doc.html) and then *steal* (ie. load within the context of a script loader) the steal plugins we'll be using for our build.

We finally define the build actions required, which essentially allows us to specify the build source (todo/todo/scripts/build.html) and the build target (todo/todo). In case you're wondering what build.html does, it effectively tells steal.js to build the application within the folder todo/todo as follows:

```
<script type='text/javascript' src='../../../steal/steal.js?todo/todo'>
```

You of course don't have to output your build files to the same directory as your application source, however as both our outputs have names which are different to the source files, I think this works fine for our example.

Finally, to perform the application build so that JMVC outputs the production-ready version of your code, execute the following command where we pass our build.js file as an argument to steal's builder.

```
./steal/js todo/todo/scripts/build.js
```

[steal.html] makes Google-crawlable html from your ajax app.

@codestart text
js steal/htmljs http://localhost/cookbook.html#recipes
@codeend
4 changes: 2 additions & 2 deletions labs/architecture-examples/javascriptmvc/todo/todo.js
Expand Up @@ -51,11 +51,11 @@ $.Controller("Router", {
},

"active route": function(routeData){
console.log("route active");
//$("#todoapp").controller().listActive();
},

"completed route": function(routeData){
console.log("route completed");
//$("#todoapp").controller().listCompleted();
}

});
Expand Down

0 comments on commit 359b7bb

Please sign in to comment.