Introduction to Assetic

Assetic is an asset management framework for PHP 5.3, on this talk will explain the concepts and show how can you use it and take advantage of it.

Presented at 1st phplx meetup.

Note: The video of this talk is now available but is in portuguese. You can watch it here: http://www.youtube.com/watch?v=Do9OaXYUB4I

Transcript

1. Introduction to Assetic Daniel Gomes December 6, 2012 @danielcsgomes
2. About me • Software Developer at Sedimap PT • ZCE PHP 5.3 • @danielcsgomes
3. Agenda What is Assetic? Basic Concepts More Concepts
4. Assetic is ...
5. Asset Management Framework for PHP 5.3 Created by @kriswallsmith & inspired by Python’s webassets
6. with lots of tools (LESS, SASS, Coffeescript, Yui Compressor, Packer, ...)
7. that helps optimize the frontend (minifying, unifying, compressing, ...)
8. integration with Twig and Symfony2
9. Agenda What is Assetic? Basic Concepts More Concepts
10. Basic Concepts Asset & Filter
11. Asset
12. Asset content & metadata
13. Asset content & metadata can be loaded & dumped
14. Asset content & metadata can be loaded & dumped CSS, JS, Images
15. Asset Classes
16. Asset Classes FileAsset
17. Asset Classes FileAsset GlobAsset
18. Asset Classes FileAsset GlobAsset HttpAsset
19. Asset Classes FileAsset GlobAsset HttpAsset StringAsset
20. Filter
21. Filter acts upon Asset content
22. Filter acts upon Asset content on load and/or dump
23. Asset Workflow
24. Filter Asset Workflow
25. Filter Filter Asset Workflow
26. Filter Filter Asset load Workflow
27. Filter Filter Asset dump Workflow
28. Filters
29. Filters Coffeescript YUI Compressor Less, SASS Stylus CssEmbed, CssMin ...
30. Asset with filter use Assetic\Asset\FileAsset; use Assetic\Filter\Yui\JsCompressorFilter; $filter = new JsCompressorFilter('path/to/yui/compressor.jar'); $asset = new FileAsset('path/to/file.js', array($filter)); header('Content-Type: application/javascript'); echo $asset->dump();
31. Asset with filter use Assetic\Asset\FileAsset; use Assetic\Filter\Yui\JsCompressorFilter; $filter = new JsCompressorFilter('path/to/yui/compressor.jar'); $asset = new FileAsset('path/to/file.js', array($filter)); header('Content-Type: application/js'); echo $asset->dump();
32. Asset with filter use Assetic\Asset\FileAsset; use Assetic\Filter\Yui\JsCompressorFilter; $filter = new JsCompressorFilter('path/to/yui/compressor.jar'); $asset = new FileAsset('path/to/file.js', array($filter)); header('Content-Type: application/js'); echo $asset->dump();
33. Asset with filter use Assetic\Asset\FileAsset; use Assetic\Filter\Yui\JsCompressorFilter; $filter = new JsCompressorFilter('path/to/yui/compressor.jar'); $asset = new FileAsset('path/to/file.js', array($filter)); header('Content-Type: application/js'); echo $asset->dump();
34. Add to html <script src="path/to/web/file_asset.php"></script>
35. Agenda What is Assetic? Basic Concepts More Concepts
36. More Concepts
37. More Concepts Asset Collection
38. More Concepts Asset Collection Asset & Filter Manager
39. More Concepts Asset Collection Asset & Filter Manager Asset Reference
40. Asset Collection Filter Filter Asset Asset Collection
41. Nested Asset Collection Asset Collection Asset Collection Filter Filter Asset Filter Filter Asset Filter Filter Asset
42. Asset Collection use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; use Assetic\Filter\Yui\JsCompressorFilter; $filter = new JsCompressorFilter('path/to/yui/compressor.jar'); $collection = new AssetCollection(array( new FileAsset('/path/to/js/site.js'), new GlobAsset('/path/to/js/jquery/*.js') ), array($filter)); header('Content-Type: application/js'); echo $collection->dump();
43. Nested Asset Collection use Assetic\Asset\GlobAsset; use Assetic\Filter\Yui\CssCompressorFilter; use Assetic\Filter\LessFilter; $filter = new CssCompressorFilter('path/to/yui/compressor.jar'); $collection = new AssetCollection(array( new AssetCollection( array(new FileAsset('path/to/less/file.less')), array(new LessFilter()) ), new GlobAsset('/path/to/css/*.css') ), array($filter)); header('Content-Type: text/css'); echo $collection->dump();
44. Asset & Filter Manager
45. Asset & Filter Manager organize assets & filters
46. Asset & Filter Manager use Assetic\Asset\FileAsset; use Assetic\AssetManager; use Assetic\FilterManager; use Assetic\Filter\Yui\JsCompressorFilter; // Simple usage of Filter Manager $filterManager = new FilterManager(); $filterManager->set('sass', new SassFilter('/path/to/sass/parser')); // Simple usage of Asset Manager $assetManager = new AssetManager(); $assetManager->set('jquery', new FileAsset('path/to/js/jquery.js')); header('Content-Type: application/js'); echo $assetManager->get('jquery')->dump();
47. Asset & Filter Manager use Assetic\Asset\FileAsset; use Assetic\AssetManager; use Assetic\FilterManager; use Assetic\Filter\Yui\JsCompressorFilter; // Simple usage of Filter Manager $filterManager = new FilterManager(); $filterManager->set('sass', new SassFilter('/path/to/sass/parser')); // Simple usage of Asset Manager $assetManager = new AssetManager(); $assetManager->set('jquery', new FileAsset('path/to/js/jquery.js')); header('Content-Type: application/js'); echo $assetManager->get('jquery')->dump();
48. Asset & Filter Manager use Assetic\Asset\FileAsset; use Assetic\AssetManager; use Assetic\FilterManager; use Assetic\Filter\Yui\JsCompressorFilter; // Simple usage of Filter Manager $filterManager = new FilterManager(); $filterManager->set('sass', new SassFilter('/path/to/sass/parser')); // Simple usage of Asset Manager $assetManager = new AssetManager(); $assetManager->set('jquery', new FileAsset('path/to/js/jquery.js')); header('Content-Type: application/js'); echo $assetManager->get('jquery')->dump();
49. Asset Reference
50. Asset Reference avoid duplication
51. Asset Reference use Assetic\Asset\AssetReference; $assetManager->set('custom_plugin', new AssetCollection(array( new AssetReference($assetManager, 'jquery'), new FileAsset('path/to/js/jquery.plugin.js'), ), array( $filter ) ); header('Content-Type: application/js'); echo $js->dump();
52. Asset Reference use Assetic\Asset\AssetReference; $assetManager->set('custom_plugin', new AssetCollection(array( new AssetReference($assetManager, 'jquery'), new FileAsset('path/to/js/jquery.plugin.js'), ), array( $filter ) ); header('Content-Type: application/js'); echo $js->dump();
53. Asset Factory
54. Asset Factory debug mode
55. Asset Factory use Assetic\Factory\AssetFactory; $factory = new AssetFactory('/path/to/assets/directory/', true); $js = $factory->createAsset( array( '@jquery', // load the asset manager's "jquery" asset 'js/3rd-party/*.js', // load every js files from "/path/to/js/3rd-party/" ), array( '?yui_js', // will not be used in debug mode ) ); header('Content-Type: application/js'); echo $js->dump();
56. Asset Factory use Assetic\Factory\AssetFactory; $factory = new AssetFactory('/path/to/assets/directory/', true); $js = $factory->createAsset( array( '@jquery', // load the asset manager's "jquery" asset 'js/3rd-party/*.js', // load every js files from "/path/to/js/3rd-party/" ), array( '?yui_js', // will not be used in debug mode ) ); header('Content-Type: application/js'); echo $js->dump();
57. Asset Factory use Assetic\Factory\AssetFactory; $factory = new AssetFactory('/path/to/assets/directory/', true); $js = $factory->createAsset( array( '@jquery', // load the asset manager's "jquery" asset 'js/3rd-party/*.js', // load every js files from "/path/to/js/3rd-party/" ), array( '?yui_js', // will not be used in debug mode ) ); header('Content-Type: application/js'); echo $js->dump();
58. Advanced Topics
59. Advanced Topics Caching
60. Advanced Topics Caching Cache Busting
61. Advanced Topics Caching Cache Busting Static Assets
62. Advanced Topics Caching Cache Busting Static Assets Deploy to CDN
63. Advanced Topics Caching Cache Busting Static Assets Deploy to CDN Twig & Symfony 2 integration
64. Questions? @danielcsgomes me@danielcsgomes.com https://github.com/danielcsgomes/phplx-assetic-examples https://gist.github.com/4146071 https://github.com/kriswallsmith/assetic
65. Thanks @danielcsgomes me@danielcsgomes.com