Updating a js file
src/Uniplaces/TagBundle/Resources/public/js/TagListMain.js
Slide 5
Slide 5 text
Steps
• Edit src/Uniplaces/TagBundle/Resources/public/js/TagListMain.js
• Copy it to web/bundles
• From web/bundles copy to web/js ( done with assetic )
Slide 6
Slide 6 text
Setting up projects
Slide 7
Slide 7 text
app/console cypress:compass:compile
Slide 8
Slide 8 text
Running assetic:dump
Slide 9
Slide 9 text
More layers, more complexity, bigger learning curve
Slide 10
Slide 10 text
Introducing the POC
Slide 11
Slide 11 text
npm
Similar to composer, install dependencies for our frontend stack
Slide 12
Slide 12 text
package.json
Slide 13
Slide 13 text
bower
Also a package manager, but for js components for the web
Slide 14
Slide 14 text
bowerrc
configures where bower install assets
Slide 15
Slide 15 text
bower.json
list of dependencies we want to install
Slide 16
Slide 16 text
Sass and compass
for our css’s …
Slide 17
Slide 17 text
Require.js
To make our js code modular
Slide 18
Slide 18 text
Steps for production assets
• Minify, uglify and concat js
• Compile sass, minify css and concat
• Cache-bust
• Copy all assets to a new dist folder from where they will be served
Slide 19
Slide 19 text
Grunt
Task runner that will make the glue between all these tools
Slide 20
Slide 20 text
Gruntfile.js
where we configure our tasks
Slide 21
Slide 21 text
Summary
• NPM ( our composer for node )
• Bower ( our composer for web modules i.e. jquery )
• Compass ( like compass lol )
• Grunt ( like app/console in symfony )
Slide 22
Slide 22 text
Integration in our projects
Slide 23
Slide 23 text
Folder structure
Current New
Slide 24
Slide 24 text
Everything in two folders
web/assets for development
web/dist for production
Slide 25
Slide 25 text
Config files
placed at the root of the project
(bower.json, bowerrc, gruntfile, package.json)
Slide 26
Slide 26 text
How we use require.js
Slide 27
Slide 27 text
Entry point
src/Uniplaces/FrontendBundle/Resources/views/requirejs.html.twig
Slide 28
Slide 28 text
Loading modules
Current
New
Slide 29
Slide 29 text
The common layer
• web/assets/js/common.js
• the first layer of our js
• every page loads dependencies in this file
first and the requested dependency comes
after
• avoids the timeouts we were having
• we also use this as the requirejs config file
where we tell where to find our js modules
Slide 30
Slide 30 text
Shim
Use shim option in require config to load dependencies that have no AMD support
Then you can force it to load in correct order
Slide 31
Slide 31 text
Optimizing require.js
• Configuration used for r.js ( the optimizer )
• We can define modules and tell what we want
to include in each module.
• We can also exclude modules that are already
being imported from others
Slide 32
Slide 32 text
To place or not to place everything inside a module ?
Slide 33
Slide 33 text
CSS
How to import them ?
Slide 34
Slide 34 text
Importing css
Current
Slide 35
Slide 35 text
Importing css
New
Slide 36
Slide 36 text
Let’s grunt
Slide 37
Slide 37 text
> grunt
build the assets for development
( use —force if you have errors in jshint )
Slide 38
Slide 38 text
> grunt prod
build assets for production and place them into web/dist
Slide 39
Slide 39 text
how does this work ?
Slide 40
Slide 40 text
Gruntfile.js
overview of our configuration
Slide 41
Slide 41 text
Gruntfile.js
• init variables to use in the file
• prefix variable for cache busting
• copy task
Slide 42
Slide 42 text
Gruntfile.js
• requirejs task
• using <%= appDir %> to build the string
• this is copy pasted from the previous example
of require.js config. It integrates that nicely in
grunt.
Slide 43
Slide 43 text
Gruntfile.js
• uglify task
• jshint task
Slide 44
Slide 44 text
Gruntfile.js
• concat_css task
• compass task
Slide 45
Slide 45 text
Registering tasks
This is what enables us to run tasks with grunt ,
grouping the tasks
Slide 46
Slide 46 text
Remaining in config.yml
Slide 47
Slide 47 text
Improvements
• Use If-modified-since
• Improve cache-bust
• Better way to integrate assets url replacement
• gzip assets
Slide 48
Slide 48 text
All you need to know
npm install ( install node dependencies )
npm install —save-dev ( install dependency and update package.json )
bower install ( install web component dependency on assets/vendor )
grunt watch ( watch for sass updates and auto compile css )
grunt ( build assets for dev )
grunt prod ( build assets for prod )
grunt —force ( don’t stop execution on errors )
grunt compass:dev ( only compile sass for dev )
grunt prepare ( only copy files from other repositories to web )
grunt requirejs ( only build js without uglify )
./update-assets-prefix.sh ( replaces all __GRUNTPREFFIX__)