Client side app workflow

Question

I'm trying to set up a client-side app workflow with yeoman (http://yeoman.io/), and as I'm coming from Rails background, I'm used to the niceties of the asset pipeline, which is backed by Sprockets (https://github.com/sstephenson/sprockets).

I'm struggling to make all the parts play nice with each other, and already spent a few hours trying to figure it out.

The first question that comes to mind is, is there a well established (e.g. convention over configuration, like in Rails world) way of developing a client side application with yeoman? Some definitive guide (besides the basic webapp-generator guide), perhaps? Some suggest using requirejs (which I rather not use, because while it simplifies things in development, I'll need to jump through hoops to package the app (e.g. use Almond.js or AMDclean.js, or incur the unneeded overhead of requirejs).

My setup is: Coffeescript, Backbone + Marionette, Handlebars for templates and ZURB Foundation with SASS.

What I'd like to accomplish in the end is the following setup, while using bower for managing the 3rd party dependencies:

In development:

1. Have something like Rails' manifest for javascript, so I can declare the order of dependencies, which will exploded into the the index.html
2. For all .scss files a .css entry added to index.html
3. Each file watched and compiled when needed

In production (dist):

1. All .scss files compiled, minified and concatenated to app.css
2. All bower files concatenated and minified to vendor.js
3. All application coffeescript files compiled, minified and concatenated to app.js
4. All templates compiled, minified and and concatenated to templates.js
5. index.html modified to include only those four files.

Is there something like this setup available?

I'm also open for suggestions and/or other alternative workflows.

Answer 1

Yeomam won't get you as close to a Rails workflow as you might expect. My two cents is that you take a look at something like Middleman has it does what you want out of the box.

Yeoman way

Using generators

You can use Yeoman generators and try to find out the combination of generators that will better suit the stack you are looking for, from what you describe I might take a look at:

• webapp
• backbone
• maryo

At this point most of your requirements (both development and production) would be fulfilled:

• a well defined project structure
• compile coffeeScript and .scss
• watch and compile
• generators for model, view, collection, ...
• compile and minify all files for production

You can use multiple generators to customise your own stack, every time that Yeoman detects that a generator overwrites a existing file it will prompt what to do, and you should be able to manage the conflict by yourself. Some framework-generators will obviously clash (it wouldn't make sense to try to use a angular generator on top of backbone).

Fine tuning

You can use sub-generators to scaffold more specific parts of your app, see Addy Osmani video.

Building generators

If you feel limited by some of the choices that a generator might impose (e.g. you prefer browserify instead of requirejs) you might want to fork a generator and add that as an option. You can even build a generator form scratch that will build your custom stack!

Grunt and Bower way

Yeoman is build on top of this two, but you can opt out at any moment and build your own stack using this two. You can add your dependencies through bower, and your tasks using grunt. There are plenty of examples that can give you some guidance, you could start with Yeoman webapp. There are also good examples at github like juanghurtado/puppeteer.

There are 3 files that you must keep an eye:

• package.json — all you node dependencies go in here
• bower.json — to manage the client dependencies
• Gruntfile.js — here you define the tasks

Wrapping up

Maybe I'm stating the obvious but Yeoman does some magic work and helps you managing Grunt and bower, this magic only happens when you fully understand how this 2 work. So I would recommend that first you dive into some code and fully understand how Grunt and Bower work, and then you may use Yeoman magic.

Some other tools

You asked for some suggestions, here it goes:

• gulp.js An alternative to Grunt. More you dive into Grunt more you will want Gulp (IMHO).
• browserify An alternative to Requiere. Read this
• assemble Static site generator for Node.js, Grunt.js, and Yeoman

Answer 2

Roman,

Answer for your first question, here is a guide on how to use Yeoman: http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254

If you want to use coffeescript by default, just pass the --coffee param

yo webapp --coffee

handling the assets order you can handle from the index.html file.

When you want to get the app ready for production just type the

grunt build

that will unify and minify all of your assets and throw it all dist folder.

To customise what you have in the build process you would have to write your own or customise the grunt build task, so that it will do exactly what you want.

Hope i gave you some useful information :)