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

Screen shot 2014-02-24 at 12.40.06 PM

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:

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

3. Install YEOMAN generator for Marionette.JS

4. Install Mocha Generator that Marionette Generator uses:

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

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:

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

Anatoly Spektor

IT Consultant with 6 years experience in Software Development and IT Leadership. Participated in such projects as Eclipse IDE, Big Blue Button, Toronto 2015 Panam Games.

Join the Discussion

Your email address will not be published. Required fields are marked *

Discussion

  1. Rick Eyre

    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.

    1. Anatoly Spektor

      That looks interesting! I will definitely try it! Thanks for sharing!

  2. Shakhal Levinson

    Hey, Thanks for this tutorial.
    For future readers, might be worth mentioning,
    after step 5, you need to run.
    npm install
    bower install

    Thanks

  3. Others just simply choose a blog site based on ease or name recognition. Place dollops of
    remaining batter overtop of the caramel layer. Here’s a great i – Phone cooking app that provides you with suggestions on what to cook
    based on the current ingredients you have in stock.

arrow