Frontend tools 4 frontend stuff

Talk about the changes in the frontend stack @ Uniplaces

Transcript

1. Frontend tools 4 frontend stuff Dive into our new frontend stack
2. Current stack • Bower ( SpBowerBundle ) • Sass ( CompassElephphantBundle ) • Requirejs ( HearsayRequireJsBundle ) • Assetic
3. Some common problems
4. Updating a js file src/Uniplaces/TagBundle/Resources/public/js/TagListMain.js
5. 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 )
6. Setting up projects
7. app/console cypress:compass:compile
8. Running assetic:dump
9. More layers, more complexity, bigger learning curve
10. Introducing the POC
11. npm Similar to composer, install dependencies for our frontend stack
12. package.json
13. bower Also a package manager, but for js components for the web
14. bowerrc configures where bower install assets
15. bower.json list of dependencies we want to install
16. Sass and compass for our css’s …
17. Require.js To make our js code modular
18. 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
19. Grunt Task runner that will make the glue between all these tools
20. Gruntfile.js where we configure our tasks
21. 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 )
22. Integration in our projects
23. Folder structure Current New
24. Everything in two folders web/assets for development web/dist for production
25. Config files placed at the root of the project (bower.json, bowerrc, gruntfile, package.json)
26. How we use require.js
27. Entry point src/Uniplaces/FrontendBundle/Resources/views/requirejs.html.twig
28. Loading modules Current New
29. 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
30. 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
31. 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
32. To place or not to place everything inside a module ?
33. CSS How to import them ?
34. Importing css Current
35. Importing css New
36. Let’s grunt
37. > grunt build the assets for development ( use —force if you have errors in jshint )
38. > grunt prod build assets for production and place them into web/dist
39. how does this work ?
40. Gruntfile.js overview of our configuration
41. Gruntfile.js • init variables to use in the file • prefix variable for cache busting • copy task
42. 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.
43. Gruntfile.js • uglify task • jshint task
44. Gruntfile.js • concat_css task • compass task
45. Registering tasks This is what enables us to run tasks with grunt <task>, grouping the tasks
46. Remaining in config.yml
47. Improvements • Use If-modified-since • Improve cache-bust • Better way to integrate assets url replacement • gzip assets
48. All you need to know npm install ( install node dependencies ) npm install <package> —save-dev ( install dependency and update package.json ) bower install <package> ( 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 <command> —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 <preffix> ( replaces all __GRUNTPREFFIX__)