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 

    JS & CSS @ EB

    By Parris Khachi

    Made with Slides.com

    JS & CSS @ EB

    How to setup a new project and write new frontend code at eventbrite!

    • 939

    More from Parris Khachi