How to scaffold JavaScript Web Application in seconds using YEOMAN ? (example with Backbone Marionette)


Hey guys,

Today I want to discuss an issue that I have been recently facing, and how to solve it.

The issue is:

How to set up a new JavaScript web app as quickly as possible and start developing, instead of worrying about dependencies and digging into configuration files trying to tie different libraries together ?

If you are a Rails developer, you will understand what I mean. In Rails you can scaffold your application and have a mockup that you can start building on in seconds. I haven’t been able to find such tool for JavaScript web apps… Until now…..

My colleague Tim showed me a tool today, that does the job for you.

The tool is called: YEOMAN .

YEOMAN uses 2 other tools for JavaScript that should be in a must-have list for any JavaScript Web Developer.

They are:

a. Grunt  – JavaScript task runner
b. Bower –  A package Manager for Web

The good thing is that to develop simple Web App with YEOMAN, you don’t even need to know how to use those tools, because YEOMAN does everything for you. However, I highly encourage you to read documentation for both tools, because they will make your JavaScript development SO MUCH EASIER!

Finally, after this long intro, let’s get to setting up our first JavaScript Backbone Marionette application using YEOMAN.

Before you start:

You need to have: Node.JS and NPM. To be honest, if you are planning to develop web apps – you will need them anyway.

You can find how to install Node.JS and NPM here .

When you have Node and NPM in place, you need to:

1. Install Bower and Grunt.  using NPM:

npm install -g grunt-cli
npm install -g bower

Tip: ‘-g’ in npm install makes element that you have installed  – global, so you just need to install it once, and use it  for multiple applications.

2. Install YEOMAN

npm -g install yo

3. Install YEOMAN generator for Marionette.JS

npm install -g generator-marionette

4. Install Mocha Generator that Marionette Generator uses:

npm install -g generator-mocha-amd

5. Create Web App Folder, Scaffold Marionette Application using YEOMAN Generator:

mkdir WebAppTest
cd WebAppTest
yo marionette

Expected output: (If you need any components I said no to, please put Y instead of ‘n':

_-----_
 | |
 |--(o)--| .--------------------------.
 `---------´ | Welcome to Yeoman, |
 ( _´U`_ ) | ladies and gentlemen! |
 /___A___\ '__________________________'
 | ~ |
 __'.___.'__
 ´ ` |° ´ Y `
Out of the box I include HTML5 Boilerplate, jQuery, Backbone.js, Marionette, Handlebars, Require and Modernizr.
 [?] Would you like to install the full express app or simply the marionette generators? Yes
 [?] Would you like to include MongoDB for storage? No
 [?] Would you like to include Socket IO for real time communication? No
 [?] Would you like to include Baucis for REST? No
 [?] Where do you want the Bower components installed? (bower_components) ENTER

Note: this will take a while,  but in the end YEOMAN will create a web app, put all necessary dependences and even tests. Isn’t it amazing ?

6. Run your application:

grunt

This will load your browser and you will be able to see this screen:

Screen shot 2014-02-24 at 12.40.06 PM

So here you have your scaffolded Marionette application that includes Handlebars.JS templates and Unit tests.

Of course it doesn’t stop on Marionette, there are plenty of generators for YEOMAN allowing you to scaffold many web apps of your choice.

That’s it for today,

Try it and let me know how it goes!

Anatoly

About these ads

About Anatoly Spektor

My name is Anatoly Spektor (originally Anatolijs Spektors) I am Software and Web Developer. I have worked in Seneca Center for Development of Open Technology on Big Blue Button Add-on - Polling Module. Currently, I am employed as Software Engineer in Red Hat.
This entry was posted in Backbone.JS, Handlebars.JS, JavaScript, Marionette.JS, open-source, Programming Languages and tagged , , , , , , , . Bookmark the permalink.

4 Responses to How to scaffold JavaScript Web Application in seconds using YEOMAN ? (example with Backbone Marionette)

  1. Rick Eyre says:

    You might want to check out Sails.js as well: http://sailsjs.org. I haven’t used Rails that much, but from my understanding it’s similar.

  2. Wonderful ɑrticle! That is the tyρe of info that should be shared around the
    web. Shame on Google for not positioning this put up upper!

    Come on over and viseit my site . Thank you =)

  3. Kristy says:

    I’m curious to find out what blog system you are using?
    I’m experiencing some small security issues with my latest blog and I’d like to find something more secure.
    Do you have any recommendations?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s