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
   

   <p>
     Follow the instructions at the end to make sure that you have the parameters.yml<br /> file setup. </li> 
     
     <li>
       Make sure you DB is present and populated!</p> <pre class="notranslate"><code>php app/console doctrine:database:create
   

   php app/console doctrine:schema:create php app/console doctrine:fixtures:load

  <li>
    Make sure you have node and npm installed and setup. If you do, the following<br /> 2 commands should work.</p> <pre class="notranslate"><code>node -v

npm -v

    <p>
      If these don&#8217;t work, ya know, install them! </li> 
      
      <li>
        Use npm to install bower, compass and grunt-cli</p> <pre class="notranslate"><code>sudo npm install -g bower

sudo npm install -g compass sudo npm install -g grunt-cli

      <li>
        Download the bower dependencies:</p> <pre class="notranslate"><code>bower install

        <p>
          This should give you a populated <code>web/assets/vendor</code> directory. </li> 
          
          <li>
            Download the local node dependencies:</p> <pre class="notranslate"><code>npm install

            <p>
              This should give you a <code>node_modules</code> directory. </li> 
              
              <li>
                Use grunt to initially compile the SASS files</p> <pre class="notranslate"><code>grunt

                <p>
                  Later, when you&#8217;re actually developing, you&#8217;ll use grunt to watch for file<br /> changes and automatically re-compile:
                </p>
                
                <pre class="notranslate"><code>grunt watch

              <li>
                Start up a web server and view it:</p> <pre class="notranslate"><code>php app/console server:run

                <p>
                  Then go to:
                </p>
                
                <pre class="notranslate"><code>http://localhost:8000

              <h3 dir="auto">
                <a rel="nofollow noopener" target="_blank" id="user-content-what-to-look-for" class="anchor" aria-hidden="true" href="#what-to-look-for"></a>What to Look for
              </h3>
              
              <p>
                Once you have the app running, if you login as <code>admin:admin</code>, you&#8217;ll see<br /> the following JavaScript items:
              </p>
              
              <ol dir="auto">
                <li>
                  a little edit button on the homepage for each event which allows inline editing.
                </li>
                <li>
                  When adding a new event, you&#8217;ll see that the form is AJAX-submitted.
                </li>
                <li>
                  When adding a new event, if you click the map, its border changes colors.
                </li>
              </ol>
              
              <p>
                All of these are driven by JavaScript included by Require.js. See the <code>::base.html.twig</code><br /> file as well as the <code>EventBundle::_requirejs.html.twig</code> file and notes.<br /> Or, just watch the darn presentation :p.<br /> Compass is also used &#8211; the SASS files are located at <code>web/assets/sass</code> and<br /> compiled to <code>web/assets/css</code>.
              </p>