symfonycon-frontend
Tools
PHP
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:
- Require.js
- Compass
- Uglify
- Grunt
See the Installation section or the What to Look for section that
explains what you should expect to see and where.
Installation
-
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’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’re actually developing, you’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’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’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 – the SASS files are located at <code>web/assets/sass</code> and<br /> compiled to <code>web/assets/css</code>.
</p>