1. Introducing Assetic
Asset Management for PHP 5.3
March 1, 2011

2. @kriswallsmith
• Symfony Guru at
• Symfony core team member
• Doctrine contributor
• 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. ShopOpenSky.com
• PHP 5.3 + Symfony2
• MongoDB + Doctrine MongoDB ODM
• MySQL + Doctrine2 ORM
• Less CSS
• jQuery

6. Agenda
• !(straw man)
• Assetic
• Twig, Symfony2 integration

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

8. A poorly optimized frontend
can destroy UX

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

10. Get your assets in line.

11. Asset Management

12. Lots of awesome tools:

13. Lots of awesome tools:
• CoffeeScript • Packer
• Compass Framework • SASS
• CSSEmbed • Sprockets
• Google Closure Compiler • Stylus
• JSMin • YUI Compressor
• LESS

14. The ones written in PHP…

15. The ones written in PHP…

16. This is a difficult problem

17. Assetic makes it easy

18. Enough talk

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

20. # /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();

21. # /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();

22. # /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();

23. # /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();

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

25. Assetic is
Assets & Filters

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

27. Assets have lazy, mutable content

28. Filters act on asset contents during
“load” and “dump”

29. Assets can be gathered in
collections

30. A collection is an asset

32. Asset

33. Filter
Asset

34. Filter
Filter
Asset

35. Load
Filter
Filter
Asset

36. Filter
Filter
Asset
Dump

37. Filter
Filter
Asset

38. Asset Collection
Filter Filter
Filter Filter
Asset Asset

39. Asset Collection Filter
Filter
Asset Collection Asset
Filter Filter
Filter Filter
Asset Asset
Filter
Filter
Asset

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

41. # /path/to/web/css/styles.php
$styles = new AssetCollection(array(
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();

42. # /path/to/web/css/styles.php
$styles = new AssetCollection(array(
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();

43. # /path/to/web/css/styles.php
$styles = new AssetCollection(array(
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();

44. Basic Asset Classes
• AssetCollection
• AssetReference
• FileAsset
• GlobAsset
• StringAsset

45. Core Filter Classes
• CallablesFilter • SassScssFilter
• CoffeeScriptFilter • SprocketsFilter
• CssRewriteFilter • StylusFilter
• GoogleClosureCompilerApiFilter • YuiCssCompressorFilter
• GoogleClosureCompilerJarFilter • YuiJsCompressorFilter
• LessFilter • More to come…
• SassSassFilter

46. Asset Manager

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

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

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

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

51. Filter Manager

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

53. $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'));

54. 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'));

55. Asset Factory

56. # /path/to/asset_factory.php
$fm = new FilterManager();
$fm->set('coffee', new CoffeeScriptFilter());
$fm->set('closure', new GoogleClosureCompilerApi());
$factory = new AssetFactory('/path/to/web');
$factory->setFilterManager($fm);

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

58. Debug Mode

59. Debugging compressed
Javascript sucks

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

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

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

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

64. Factory Workers

65. Everything passes through the
workers’ hands

66. $worker = new EnsureFilterWorker(
'/.css$/', // the output pattern
$fm->get('yui_css') // the filter
);
$factory = new AssetFactory('/path/to/web');
$factory->addWorker($worker);
// compressed
$factory->createAsset('css/sass/*', 'sass', array(
'output' => 'css/*.css',
));

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/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. Not Lazy Enough?

79. Asset Formulae and the
Lazy Asset Manager

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

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

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

83. This will make more sense
in a few minutes…

84. 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. # config/assetic.php
require_once '/path/to/assetic/functions.php';
assetic_init($factory);

87. Issue…
Assets defined in the view layer
must actually exist somewhere

88. Option Bad...
Lazily dump assets to the
web directory

89. Option Good…
Eagerly dump assets to the
web directory

90. Formula Loaders

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. Twig Integration

96. $twig->addExtension(new AsseticExtension($factory));

97. {% assetic 'js/*.coffee', filter='coffee' %}
<script src="{{ asset_url }}"></script>
{% endassetic %}

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

99. {% assetic 'js/*.coffee', filter='coffee' %}
<script src="{{ asset_url }}"></script>
{% endassetic %}

100. {% assetic 'js/*.coffee', filter='coffee',
output='js/*.js' %}
<script src="{{ asset_url }}"></script>
{% endassetic %}

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

102. {% assetic 'js/*.coffee', filter='coffee',
output='js/*.js' %}
<script src="{{ asset_url }}"></script>
{% endassetic %}

103. {% assetic 'js/*.coffee', filter='coffee,?closure',
output='js/*.js', name='core_js' %}
<script src="{{ asset_url }}"></script>
{% endassetic %}

104. AsseticBundle
Symfony2 integration

105. {% assetic filter='scss,?yui_css', output='css/all.css',
'@MainBundle/Resources/sass/main.scss',
'@AnotherBundle/Resources/sass/more.scss' %}
<link href="{{ asset_url }}" rel="stylesheet" />
{% endassetic %}

106. <link href="css/all.css" rel="stylesheet" />

107. {% assetic filter='scss,?yui_css', output='css/all.css',
'@MainBundle/Resources/sass/main.scss',
'@AnotherBundle/Resources/sass/more.scss' %}
<link href="{{ asset_url }}" rel="stylesheet" />
{% endassetic %}

108. {% assetic filter='scss,?yui_css', output='css/all.css',
'@MainBundle/Resources/sass/main.scss', debug=true,
'@AnotherBundle/Resources/sass/more.scss' %}
<link href="{{ asset_url }}" rel="stylesheet" />
{% endassetic %}

109. <link href="css/all_part1.css" rel="stylesheet" />
<link href="css/all_part2.css" rel="stylesheet" />

110. Each "leaf" asset is referenced individually
<link href="css/all_part1.css" rel="stylesheet" />
<link href="css/all_part2.css" rel="stylesheet" />

111. Configuration

112. assetic:
debug: %kernel.debug%
use_controller: %kernel.debug%
read_from: %kernel.root_dir%/../web
write_to: s3://mybucket

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

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

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

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

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

118. 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

119. {% assetic filter='scss,?yui_css', output='css/all.css',
'@MainBundle/Resources/sass/main.scss',
'@AnotherBundle/Resources/sass/more.scss' %}
<link href="{{ asset_url }}" rel="stylesheet" />
{% endassetic %}

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

121. assetic:dump

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

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

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

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