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)
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:
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
Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.
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.
That looks interesting! I will definitely try it! Thanks for sharing!
Hey, Thanks for this tutorial.
For future readers, might be worth mentioning,
after step 5, you need to run.
npm install
bower install
Thanks
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.