1. Introducing Assetic
Asset Management for PHP 5.3
Kris Wallsmith (OpenSky)
July 29, 2011

2. @kriswallsmith
• Symfony Guru at
• Symfony core team member
• Doctrine contributor
• Author of Assetic
• 10+ years experience with PHP and web development
• Open source evangelist and international speaker

3. OpenSky connects you with innovators,
trendsetters and tastemakers.You choose
the ones you like and each week they
invite you to their private online sales.

4. OpenSky connects you with innovators,
trendsetters and tastemakers.You choose
the ones you like and each week they
invite you to their private online sales.

5. opensky.com
• PHP 5.3 + Symfony2
• MongoDB + Doctrine MongoDB ODM
• MySQL + Doctrine2 ORM
• Less CSS
• jQuery

6. We all want to be FAST

7. We use good open source tools
that encourage best practices

8. Best practices like…
• Dependency injection (DI)
• Proper caching, edge side includes (ESI)
• Test-driven development (TDD)
• Don't repeat yourself (DRY)
• Keep it simple, SVP (KISS)
• Performance

9. If you haven’t optimized your
frontend, you haven’t optimized

10. Get your assets in line.

11. A poorly optimized frontend
can destroy UX

12. …and SEO!
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

13. Asset Management

14. Lots of awesome tools:

15. Lots of awesome tools:
• CoffeeScript • OptiPNG
• Compass Framework • Packager
• CSSEmbed • SASS & SCSS
• Google Closure Compiler • Sprockets
• jpegoptim • Stylus
• JSMin • YUI Compressor
• LESS

16. Integrating these tools cleanly
is a difficult problem

17. Assetic makes it easy

18. as•cet•i•cism
describes a lifestyle characterized by abstinence from various sorts of worldly
pleasures often with the aim of pursuing religious and spiritual goals

19. No B.S.

20. Enough talk

21. # /path/to/web/js/core.php
$core = new FileAsset('/path/to/jquery.js');
$core->load();
header('Content-Type: text/javascript');
echo $core->dump();

22. # /path/to/web/js/core.php
$core = new AssetCollection(array(
new FileAsset('/path/to/jquery.js'),
new GlobAsset('/path/to/js/core/*.js'),
));
$core->load();
header('Content-Type: text/javascript');
echo $core->dump();

23. # /path/to/web/js/core.php
$core = new AssetCollection(array(
new FileAsset('/path/to/jquery.js'),
new GlobAsset('/path/to/js/core/*.js'),
));
$core->load();many files into one == fewer HTTP requests
Merge
header('Content-Type: text/javascript');
echo $core->dump();

24. # /path/to/web/js/core.php
$core = new AssetCollection(array(
new FileAsset('/path/to/jquery.js'),
new GlobAsset('/path/to/js/core/*.js'),
), array(
new YuiCompressorJsFilter('/path/to/yui.jar'),
));
$core->load();
header('Content-Type: text/javascript');
echo $core->dump();

25. # /path/to/web/js/core.php
$core = new AssetCollection(array(
new FileAsset('/path/to/jquery.js'),
new GlobAsset('/path/to/js/core/*.js'),
), array(
new YuiCompressorJsFilter('/path/to/yui.jar'),
));
$core->load();
Compress the merged asset == less data over the wire
header('Content-Type: text/javascript');
echo $core->dump();

26. <script src="js/core.php"></script>

27. Assetic is
Assets & Filters

28. Inspired by Python’s webassets
https://github.com/miracle2k/webassets

29. Assets have lazy, mutable content

30. A filter acts on an asset’s contents
during “load” and “dump”

31. Assets can be gathered in
collections

32. A collection is an asset

34. Asset

35. Filter
Asset

36. Filter
Filter
Asset

37. Load
Filter
Filter
Asset

38. Filter
Filter
Asset
Dump

39. Filter
Filter
Asset

40. Asset Collection
Filter Filter
Filter Filter
Asset Asset

41. Asset Collection Filter
Filter
Asset Collection Asset
Filter Filter
Filter Filter
Asset Asset
Filter
Filter
Asset

42. # /path/to/web/css/styles.php
$styles = new FileAsset('/path/to/main.sass', array(
new SassFilter(),
));
header('Content-Type: text/css');
echo $styles->dump();

43. # /path/to/web/css/styles.php
$styles = new AssetCollection(array(
new FileAsset('/path/to/main.sass', array(
new SassFilter(),
)),
new FileAsset('/path/to/more.css'),
));
header('Content-Type: text/css');
echo $styles->dump();

44. # /path/to/web/css/styles.php
$styles = new AssetCollection(array(
new FileAsset('/path/to/main.sass', array(
new SassFilter(),
)),
new FileAsset('/path/to/more.css'),
), array(
new YuiCompressorCss('/path/to/yui.jar'),
));
header('Content-Type: text/css');
echo $styles->dump();

45. # /path/to/web/css/styles.php
$styles = new AssetCollection(array(
new FileAsset('/path/to/main.sass', array(
new SassFilter(),
)),
new FileAsset('/path/to/more.css'),
), array(
new YuiCompressorCss('/path/to/yui.jar'),
));
Lazy! The filesystem isn't touched until now
header('Content-Type: text/css');
echo $styles->dump();

46. Basic Asset Classes
• AssetCollection
• AssetReference
• FileAsset
• GlobAsset
• HttpAsset
• StringAsset

47. Core Filter Classes
• CoffeeScriptFilter • GoogleClosureCompilerJarFilter
• CompassFilter • JpegoptimFilter
• CssEmbedFilter • JpegtranFilter
• CssImportFilter • LessFilter
• CssMinFilter • LessphpFilter
• CssRewriteFilter • OptiPngFilter
• GoogleClosureCompilerApiFilter • PackagerFilter

48. Core Filter Classes
• PngoutFilter • More to come…
• SassSassFilter
• SassScssFilter
• SprocketsFilter
• StylusFilter
• YuiCssCompressorFilter
• YuiJsCompressorFilter

49. Asset Manager

50. $am = new AssetManager();
$am->set('jquery',
new FileAsset('/path/to/jquery.js'));

51. $plugin = new AssetCollection(array(
new AssetReference($am, 'jquery'),
new FileAsset('/path/to/jquery.plugin.js'),
));

52. $core = new AssetCollection(array(
$jquery,
$plugin1,
$plugin2,
));
header('text/javascript');
echo $core->dump();

53. jQuery will only be included once
$core = new AssetCollection(array(
$jquery,
$plugin1,
$plugin2,
));
header('text/javascript');
echo $core->dump();

54. Filter Manager

55. $yui = new YuiCompressorJs();
$yui->setNomunge(true);
$fm = new FilterManager();
$fm->set('yui_js', $yui);

56. $jquery = new FileAsset('/path/to/core.js');
$jquery->ensureFilter($fm->get('yui_js'));
$core = new AssetCollection(array(
$jquery,
new GlobAsset('/path/to/js/core/*.js'),
));
$core->ensureFilter($fm->get('yui_js'));

57. jQuery will only be compressed once
$jquery = new FileAsset('/path/to/core.js');
$jquery->ensureFilter($fm->get('yui_js'));
$core = new AssetCollection(array(
$jquery,
new GlobAsset('/path/to/js/core/*.js'),
));
$core->ensureFilter($fm->get('yui_js'));

58. Asset Factory

59. $fm = new FilterManager();
$fm->set('coffee', new CoffeeScriptFilter());
$fm->set('closure', new ClosureFilter());
$factory = new AssetFactory('/path/to/web');
$factory->setFilterManager($fm);

60. $asset = $factory->createAsset(
array('js/src/*.coffee'),
array('coffee', 'closure')
);
header('Content-Type: text/javascript');
echo $asset->dump();

61. Debug Mode

62. Debugging compressed
Javascript sucks

63. Mark filters for omission
in debug mode using a “?”

64. // new AssetFactory('/path/to/web', $debug = true);
$asset = $factory->createAsset(
array('js/src/*.coffee'),
array('coffee', 'closure')
);
header('Content-Type: text/javascript');
echo $asset->dump();

65. // new AssetFactory('/path/to/web', true);
$asset = $factory->createAsset(
array('js/src/*.coffee'),
array('coffee', '?closure')
);
header('Content-Type: text/javascript');
echo $asset->dump();

66. // new AssetFactory('/path/to/web', false);
$asset = $factory->createAsset(
array('js/src/*.coffee'),
array('coffee', '?closure'),
array('debug' => true)
);
header('Content-Type: text/javascript');
echo $asset->dump();

67. Good: Basic Caching

68. # /path/to/web/css/styles.php
$styles = new AssetCollection(
array(new FileAsset('/path/to/main.sass')),
array(new SassFilter())
);
echo $styles->dump();

69. # /path/to/web/css/styles.php
$styles = new AssetCache(new AssetCollection(
array(new FileAsset('/path/to/main.sass')),
array(new SassFilter())
), new FilesystemCache('/path/to/cache'));
echo $styles->dump();

70. # /path/to/web/css/styles.php
$styles = new AssetCache(new AssetCollection(
array(new FileAsset('/path/to/main.sass')),
array(new SassFilter())
), new FilesystemCache('/path/to/cache'));
Run the filters once and cache the content
echo $styles->dump();

71. Better: HTTP Caching

72. // $core = new AssetCache(...
$mtime = gmdate('D, d M y H:i:s',
$core->getLastModified()).' GMT';
if ($mtime == $_SERVER['HTTP_IF_MODIFIED_SINCE']) {
header('HTTP/1.0 304 Not Modified');
exit();
}
header('Content-Type: text/javascript');
header('Last-Modified: '.$mtime);
echo $core->dump();

73. Best: Static Assets

74. # /path/to/deploy/scripts/dump_assets.php
$am = new AssetManager();
$am->set('foo', $foo);
// etc...
$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);

75. Best-est:
Content Distribution Network

76. new AssetWriter('s3://my-bucket')

77. new AssetWriter('s3://my-bucket')
A CloudFront S3 bucket

78. Custom Stream Wrappers
$s3 = new Zend_Service_Amazon_S3($key, $secret);
$s3->registerStreamWrapper();

79. Not Lazy Enough?

80. Asset Formulae and the
Lazy Asset Manager

81. $asset = $factory->createAsset(
array('js/src/*.coffee'),
array('coffee', '?closure'),
array('output' => 'js/all.js')
);

82. $formula = array(
array('js/src/*.coffee'),
array('coffee', '?closure'),
array('output' => 'js/all.js')
);

83. $am = new LazyAssetManager($factory);
$am->setFormula('all_js', $formula);
header('Content-Type: text/javascript');
echo $am->get('all_js')->dump();

84. A Thought
Assets are a part of the view layer
and should be defined there.

85. <!-- header.php -->
<?php foreach (assetic_javascripts(
array('js/core.js', 'js/more.js'),
array('?yui_js')) as $url): ?>
<script src="<?php echo $url ?>"></script>
<?php endforeach; ?>

86. An Issue
Assets defined in the view layer
must actually exist somewhere

87. Option Number Bad
Lazily dump assets to the
web directory

88. Option Number Good
Eagerly dump assets to the
web directory

89. A template is a configuration file

90. Formula Loaders
extract asset formulae from templates

91. $loader = new FunctionCallsFormulaLoader();
$resource = new DirectoryResource(
'/path/to/templates',
'/.php$/'
);
$formulae = $loader->load($resource);

92. $am = new LazyAssetManager($factory);
$am->setLoader('php', $loader);
$am->addResource($resource, 'php');
$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);

93. $am = new LazyAssetManager($factory);
$am->setLoader('php', $loader);
$am->addResource($resource, 'php');
Expensive every time
$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);

94. $cache = new ConfigCache('/path/to/cache');
$loader = new CachedFormulaLoader(
$loader,
$cache,
$debug
);

95. $cache = new ConfigCache('/path/to/cache');
$loader = new CachedFormulaLoader(
$loader,
$cache,
$debug
);
Whether to stat each file for changes

96. Twig Integration

97. {% javascripts 'js/*.coffee' filter='coffee' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

98. <script src="js/92429d8.js"></script>

99. {% javascripts 'js/*.coffee' filter='coffee' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

100. {% javascripts 'js/*.coffee' filter='coffee'
output='js/all.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

101. <script src="js/all.js"></script>

102. {% javascripts 'js/*.coffee' filter='coffee'
output='js/all.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

103. {% javascripts 'js/*.coffee' filter='coffee,?closure' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

104. {% javascripts 'js/*.coffee' filter='coffee,?closure'
debug=true %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

105. {% javascripts 'js/*.coffee' filter='coffee,?closure'
combine=false %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

106. <script src="js/92429d8_1.js"></script>
<script src="js/92429d8_2.js"></script>
<script src="js/92429d8_3.js"></script>

107. Each “leaf” asset is referenced individually
<script src="js/92429d8_1.js"></script>
<script src="js/92429d8_2.js"></script>
<script src="js/92429d8_3.js"></script>

108. AsseticBundle
Symfony2 integration

109. Configuration

110. # config.yml
assetic:
debug: %kernel.debug%
use_controller: false
filters:
coffee: ~
yui_js:
jar: /path/to/yuicompressor.jar

111. {# when use_controller=true (config_dev.yml) #}
<script src="{{ path('assetic_foo') }}"...

112. # routing_dev.yml
_assetic:
resource: .
type: assetic

113. {# when use_controller=false (config_prod.yml) #}
<script src="{{ asset('js/core.js') }}"></script>

114. {# when use_controller=false (config_prod.yml) #}
<script src="{{ asset('js/core.js') }}"></script>
Lots for free

115. The Symfony2 Assets Helper
• Multiple asset domains
• Cache buster

116. framework:
templating:
assets_version: 1.2.3
assets_base_urls:
- http://assets1.domain.com
- http://assets2.domain.com
- http://assets3.domain.com
- http://assets4.domain.com

117. {% stylesheets filter='scss,?yui_css' output='css/all.css'
'css/src/main.scss' 'css/src/more.scss' %}
<link href="{{ asset_url }}" rel="stylesheet">
{% endstylesheets %}

118. <link href="http://assets3.domain.com/css/all.css?1.2.3" ...

119. assetic:dump

120. $ php app/console assetic:dump web/

121. $ php app/console assetic:dump s3://my-bucket

122. assetic:dump --watch
Dump static assets in the background as you develop

123. How can you help?

124. How can you help?
• Join the team!

125. How can you help?
• Join the team!
• Documentation

126. How can you help?
• Join the team!
• Documentation
• Assetic needs a website

127. Questions?
http://github.com/kriswallsmith/assetic