Tweet
Tweet

Slide 1

Slide 1 text

Introduction to Assetic Daniel Gomes December 6, 2012 @danielcsgomes

Slide 2

Slide 2 text

About me • Software Developer at Sedimap PT • ZCE PHP 5.3 • @danielcsgomes

Slide 3

Slide 3 text

Agenda What is Assetic? Basic Concepts More Concepts

Slide 4

Slide 4 text

Assetic is ...

Slide 5

Slide 5 text

Asset Management Framework for PHP 5.3 Created by @kriswallsmith & inspired by Python’s webassets

Slide 6

Slide 6 text

with lots of tools (LESS, SASS, Coffeescript, Yui Compressor, Packer, ...)

Slide 7

Slide 7 text

that helps optimize the frontend (minifying, unifying, compressing, ...)

Slide 8

Slide 8 text

integration with Twig and Symfony2

Slide 9

Slide 9 text

Agenda What is Assetic? Basic Concepts More Concepts

Slide 10

Slide 10 text

Basic Concepts Asset & Filter

Slide 11

Slide 11 text

Asset

Slide 12

Slide 12 text

Asset content & metadata

Slide 13

Slide 13 text

Asset content & metadata can be loaded & dumped

Slide 14

Slide 14 text

Asset content & metadata can be loaded & dumped CSS, JS, Images

Slide 15

Slide 15 text

Asset Classes

Slide 16

Slide 16 text

Asset Classes FileAsset

Slide 17

Slide 17 text

Asset Classes FileAsset GlobAsset

Slide 18

Slide 18 text

Asset Classes FileAsset GlobAsset HttpAsset

Slide 19

Slide 19 text

Asset Classes FileAsset GlobAsset HttpAsset StringAsset

Slide 20

Slide 20 text

Filter

Slide 21

Slide 21 text

Filter acts upon Asset content

Slide 22

Slide 22 text

Filter acts upon Asset content on load and/or dump

Slide 23

Slide 23 text

Asset Workflow

Slide 24

Slide 24 text

Filter Asset Workflow

Slide 25

Slide 25 text

Filter Filter Asset Workflow

Slide 26

Slide 26 text

Filter Filter Asset load Workflow

Slide 27

Slide 27 text

Filter Filter Asset dump Workflow

Slide 28

Slide 28 text

Filters

Slide 29

Slide 29 text

Filters Coffeescript YUI Compressor Less, SASS Stylus CssEmbed, CssMin ...

Slide 30

Slide 30 text

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();

Slide 31

Slide 31 text

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();

Slide 32

Slide 32 text

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();

Slide 33

Slide 33 text

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();

Slide 34

Slide 34 text

Add to html

Slide 35

Slide 35 text

Agenda What is Assetic? Basic Concepts More Concepts

Slide 36

Slide 36 text

More Concepts

Slide 37

Slide 37 text

More Concepts Asset Collection

Slide 38

Slide 38 text

More Concepts Asset Collection Asset & Filter Manager

Slide 39

Slide 39 text

More Concepts Asset Collection Asset & Filter Manager Asset Reference

Slide 40

Slide 40 text

Asset Collection Filter Filter Asset Asset Collection

Slide 41

Slide 41 text

Nested Asset Collection Asset Collection Asset Collection Filter Filter Asset Filter Filter Asset Filter Filter Asset

Slide 42

Slide 42 text

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();

Slide 43

Slide 43 text

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();

Slide 44

Slide 44 text

Asset & Filter Manager

Slide 45

Slide 45 text

Asset & Filter Manager organize assets & filters

Slide 46

Slide 46 text

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();

Slide 47

Slide 47 text

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();

Slide 48

Slide 48 text

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();

Slide 49

Slide 49 text

Asset Reference

Slide 50

Slide 50 text

Asset Reference avoid duplication

Slide 51

Slide 51 text

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();

Slide 52

Slide 52 text

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();

Slide 53

Slide 53 text

Asset Factory

Slide 54

Slide 54 text

Asset Factory debug mode

Slide 55

Slide 55 text

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();

Slide 56

Slide 56 text

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();

Slide 57

Slide 57 text

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();

Slide 58

Slide 58 text

Advanced Topics

Slide 59

Slide 59 text

Advanced Topics Caching

Slide 60

Slide 60 text

Advanced Topics Caching Cache Busting

Slide 61

Slide 61 text

Advanced Topics Caching Cache Busting Static Assets

Slide 62

Slide 62 text

Advanced Topics Caching Cache Busting Static Assets Deploy to CDN

Slide 63

Slide 63 text

Advanced Topics Caching Cache Busting Static Assets Deploy to CDN Twig & Symfony 2 integration

Slide 64

Slide 64 text

Questions? @danielcsgomes [email protected] https://github.com/danielcsgomes/phplx-assetic-examples https://gist.github.com/4146071 https://github.com/kriswallsmith/assetic

Slide 65

Slide 65 text

Thanks @danielcsgomes [email protected]