Example Project for "Cool like Frontend Developer: Grunt, RequireJS, Bower and other Tools" from SymfonyCon 2013!
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
node_modules
src
web
.bowerrc
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
composer.json
composer.lock
package.json
play.js

README.md

SymfonyCon: JavaScript like a Frontend Developer

Well hello there! This is the example project used in the SymfonyCon 2013 presentation called "Cool like Frontend Developer: Grunt, RequireJS, Bower and other Tools".

Here is the slideshare : http://www.slideshare.net/weaverryan/cool-like-frontend-developer-grunt-requirejs-bower-and-other-tools-29177248

This highlights some real-word usage of:

  1. Require.js
  2. Compass
  3. Uglify
  4. Grunt

See the Installation section or the What to Look for section that explains what you should expect to see and where.

Installation

  1. Install the Composer vendors (download Composer first from http://getcomposer.org)

    php composer.phar install
    

    Follow the instructions at the end to make sure that you have the parameters.yml file setup.

  2. Make sure you DB is present and populated!

    php app/console doctrine:database:create
    php app/console doctrine:schema:create
    php app/console doctrine:fixtures:load
    
  3. Make sure you have node and npm installed and setup. If you do, the following 2 commands should work.

    node -v
    npm -v
    

    If these don't work, ya know, install them!

  4. Use npm to install bower, compass and grunt-cli

    sudo npm install -g bower
    sudo npm install -g compass
    sudo npm install -g grunt-cli
    
  5. Download the bower dependencies:

    bower install
    

    This should give you a populated web/assets/vendor directory.

  6. Download the local node dependencies:

    npm install
    

    This should give you a node_modules directory.

  7. Use grunt to initially compile the SASS files

    grunt
    

    Later, when you're actually developing, you'll use grunt to watch for file changes and automatically re-compile:

    grunt watch
    
  8. Start up a web server and view it:

    php app/console server:run
    

    Then go to:

    http://localhost:8000
    

What to Look for

Once you have the app running, if you login as admin:admin, you'll see the following JavaScript items:

  1. a little edit button on the homepage for each event which allows inline editing.
  2. When adding a new event, you'll see that the form is AJAX-submitted.
  3. When adding a new event, if you click the map, its border changes colors.

All of these are driven by JavaScript included by Require.js. See the ::base.html.twig file as well as the EventBundle::_requirejs.html.twig file and notes. Or, just watch the darn presentation :p.

Compass is also used - the SASS files are located at web/assets/sass and compiled to web/assets/css.