Presentation on Assetic at Symfony Live 2011 Paris.

1. Introducing Assetic
Asset Management for PHP 5.3
March 4, 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. Symfony2 is FAST

7. But you can still f*** that up

8. We build tools that
encourage best practices

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

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

11. Get your assets in line.

12. A poorly optimized frontend
can destroy UX

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

14. Asset Management

15. Lots of awesome tools:

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

17. The ones written in PHP…

18. The ones written in PHP…

19. This is a difficult problem

20. Assetic makes it easy

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

22. No B.S.

23. Enough talk

24. # /path/to/web/js/core.php
$core = new FileAsset('/path/to/jquery.js');
$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'),
));
$core->load();
header('Content-Type: text/javascript');
echo $core->dump();

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

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

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

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

30. Assetic is
Assets & Filters

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

32. Assets have lazy, mutable content

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

34. Assets can be gathered in
collections

35. A collection is an asset

37. Asset

38. Filter
Asset

39. Filter
Filter
Asset

40. Load
Filter
Filter
Asset

41. Filter
Filter
Asset
Dump

42. Filter
Filter
Asset

43. Asset Collection
Filter Filter
Filter Filter
Asset Asset

44. Asset Collection Filter
Filter
Asset Collection Asset
Filter Filter
Filter Filter
Asset Asset
Filter
Filter
Asset

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

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

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

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

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

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

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

52. Asset Manager

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

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

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

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

57. Filter Manager

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

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

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

61. Asset Factory

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

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

64. Debug Mode

65. Debugging compressed
Javascript sucks

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

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

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

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

70. Good: Basic Caching

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

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

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

74. Better: HTTP Caching

75. // $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();

76. Best: Static Assets

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

78. Best-est:
Content Distribution Network

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

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

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

82. Not Lazy Enough?

83. Asset Formulae and the
Lazy Asset Manager

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

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

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

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

88. <!-- 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; ?>

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

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

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

92. A template is a configuration file

93. Formula Loaders
extract asset formulae from templates

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

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

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

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

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

99. Twig Integration

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

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

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

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

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

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

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

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

108. {% javascripts 'js/*.coffee' filter='coffee,?closure' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Adds a default output string

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

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

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

112. AsseticBundle
Symfony2 integration

113. {% 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 %}

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

115. Configuration

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

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

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

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

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

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

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

123. {% 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 %}

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

125. assetic:dump

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

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

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

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