JS & CSS @ EB

Setup

First you're going to need a C++ compiler. That means, `build-essentials` on ubuntu and `XCode` on mac.

Install NVM (node Version Manager)

> curl https://raw.github.com/creationix/nvm/master/install.sh | sh> source ~/.bash_profile  # or .profile or .bash_rc> nvm install 0.10.23> nvm use 0.10.23> node -v> npm -v

nvm allows you to maintain multiple versions of node installed. More importantly it gets us all on the same page and all using npm (node package manager) without sudo.

Install Node Packages

Grunt: A build tool

Yo: A code generator

Bower: Client side package manager

 > npm install -g grunt-cli > npm install -g yo > npm install -g bower

Install Our (Eventbrite's) Generators

Generators allow us to:

duplicate a folder structure
setup common scripts
provide scaffolding for new files

 npm install -g git+ssh://git@github.com:eventbrite/generator-frontend

Drop in the Scaffolding

Go to your app's public directory.
I'm going to use express for this example.

> npm install -g express        # this is optional> express my-new-app
> cd my-new-app/public
> yo frontend:init

What did that do?

It created a directory structure
added a build/watch script (grunt)
added a package.json, which lists dependencies
cloned our styleguide repo
added bower.json, which lists client side dependencies
included jasmine and a means to test js

You still need to do a little work though

Install all dependencies

 > npm install      # installs all packages > npm build

`grunt build` here is going to do some magic for us.

It is going to:

build our styleguide and docs.
bower install all client deps
compile all `app.js` files using requirejs

Let's write some Code

Well, first lets generate some to see an example:

 > yo frontend:jsmodule js/apps/events/views/add.js > What is this [ItemView, CollectionView, ... ?]: Layout > Mixins?: withStickitMarionette > Done!

This created a new file and some folders.
It required `layout` from backbone marionette
Required and mixed in stickitWithMarionette
Returns a new object extending Layout