Yeoman marionette generator a la AMD
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
collection
collectionview
compositeview
controller
helpers
itemview
layout
model
region
router
templates/javascript
test
tmpl
view
.gitignore
README.md
package.json

README.md

generator-marionette

Yeoman generator for Express, Marionette and Backbone with AMD

Stack

Directory structure

  • app/ --> client side files

    • /bower_components --> bower installs

    • /images

    • /scripts

      • /vendor --> 3rd party scripts
      • /models
      • /collections
      • /controllers
      • /routers
      • /regions
      • /views
        • /item
        • /collection
        • /composite
        • /layout
      • init.js --> require configuration
      • main.js --> application starting point
      • application.js --> application file
    • /styles --> scss files

    • /templates --> handlebar templates

  • server/ --> node server files

  • test/ --> unittesting

    • /spec --> individual spec files

Install

First make sure you have MongoDB, Node, Npm, Yeoman, Bower and Grunt installed.

Install mongoDB with:

$ brew install mongodb 

Or visit http://www.mongodb.org/

Visit nodejs.org to install node and NPM

Install phantomJS with:

$ brew install phantomjs

Or visit http://phantomjs.org/

To install Yeoman, Bower and Grunt run:

$ npm install -g yo grunt-cli bower

Install mocha-phantomjs:

$ npm install -g mocha-phantomjs

Install mocha generator:

$ npm install (-g) generator-mocha-amd

Install marionette generator

$ npm install (-g) generator-marionette

Bootstrap project

To bootstrap a new project simply run:

$ yo marionette

You have option to include the full express server OR just the marionette generators with a minimal server to develop and run test. No SASS/CSS in the latter.

To start the app run:

$ grunt

Unit testing generation

The biggest change in this release is the automatic unit test generation as part of the marionette-generator. The Marionette generator calls upon the mocha-amd generator. The default grunt task will automatically run all unit test files via phantom JS. You can also use the browser at localhost:1234/test. Test file generation looks something like the following:

  • yo marionette:collection sizes --model size --create-all // run collection generator
  • create app/scripts/collections/sizes.js
  • invoke marionette:model
  • create app/scripts/models/size.js
  • invoke mocha-amd:unitTest
  • create test/spec/models/size.js // unit test for size model
  • force test/spec/testSuite.js
  • invoke mocha-amd:unitTest
  • create test/spec/collections/sizes.js // unit test for sizes collection
  • force test/spec/testSuite.js // testSuite file which lists all test to run

Recommends

The generator is most useful using the --create-all flag. In the example:

$ yo marionette:compositeview peopleview --itemview personview --create-all

You will get the following files:

  • create app/scripts/views/composite/people.js
  • invoke marionette:itemview
  • create app/scripts/views/item/person.js
  • invoke marionette:tmpl
  • create app/templates/item/person_tmpl.hbs
  • invoke marionette:tmpl
  • create app/templates/composite/people_tmpl.hbs

Create routers

You can generate routers too with

$ yo marionette:router router-name

Create model

To add a Backbone model to the project use the model generator like this

$ yo marionette:model model-name

Or to inherit from an existing model

$ yo marionette:model model-name --inherit model-name

Create collection

To add a Backbone collection to the project use collection generator

$ yo marionette:collection collection-name

You can link the collection with an existent model

$ yo marionette:collection collection-name model-name

Or may be you want to create both, model and collection on one step

$ yo marionette:collection collection-name --model model-name --create-all

Or you may want to inherit from another collection

$ yo marionette:collection collection-name --model model-name --inherit collection-name --create-all

Create views

Backbone works with view definitions, to create one use this command. It is recommended to use Marionette views instead of the standard Backbone view

$ yo marionette:view view-name

Create item views

Create a Marionette ItemView and link to an existing template at location templates/[template-location]

$ yo marionette:itemview view-name 

You may want to inherit from another itemview

$ yo marionette:itemview view-name --inherit view-name

Or maybe you want to create both, itemView and template on one step

$ yo marionette:itemview view-name --create-all

Create collection views

Create a Marionette CollectionView that is associated to an existing itemview

$ yo marionette:collectionview view-name --itemview itemview-name

Or inherit from another collectionview

$ yo marionette:collectionview view-name --itemview itemview-name --inherit view-name

Or maybe you want to create both, itemview (with template) and collectionview.

$ yo  marionette:collectionview view-name --itemview itemview-name --create-all

Create composite views

Create a Marionette CompositeView

$ yo marionette:compositeview view-name --itemview itemview-name

Or inherit from another CompositeView

$ yo marionette:compositeview view-name --itemview itemview-name --inherit view-name

Or maybe you want to create all, itemview and compositeview and both templates.

$ yo marionette:compositeview view-name --itemview itemview-name --create-all

Create regions

Create a Marionette Region

$ yo marionette:region region-name

Or inherit from another Region

$ yo marionette:region region-name --inherit region-name

Create layouts

Create a Marionette Layout and link to an existing template at location templates/[template-location]

$ yo marionette:layout layout-name

Or inherit from another layout

$ yo marionette:layout layout-name --inherit layout-name

Or maybe you want to create both, Layout and template on one step

$ yo marionette:layout layout-name --create-all

Create controller

Create a Marionette Controller

$ yo marionette:controller controller-name

Or inherit from another Controller

$ yo marionette:controller controller-name --inherit controller-name

Create templates

Create a handle bars tmpl

$ yo marionette:tmpl tmpl-name --tmplLocation tmpl-location