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.