My presentation of Assetic at Zendcon 2011.

1. Introducing Assetic
Asset Management for PHP 5.3
October 20, 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.com
• PHP 5.3 + Symfony2
• MongoDB + Doctrine MongoDB ODM
• MySQL + Doctrine2 ORM
• Less CSS
• jQuery

5. We all want to be FAST

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

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

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

9. Get your assets in line.

10. A poorly optimized frontend
can destroy UX

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

12. Asset Management

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

14. Integrating these tools cleanly
is a difficult problem

15. Assetic makes it easy

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

17. No B.S.

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();many files into one == fewer HTTP requests
Merge
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'),
), 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();

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

23. Assetic is
Assets & Filters

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

25. Assets have lazy, mutable content

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

27. Assets can be gathered in
collections

28. A collection is an asset

29. Load
Filter
Filter
Asset
Dump

30. Asset Collection
Filter Filter
Filter Filter
Asset Asset

31. Asset Collection Filter
Filter
Asset Collection Asset
Filter Filter
Filter Filter
Asset Asset
Filter
Filter
Asset

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

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

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

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

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

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

38. Asset Manager

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

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

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

42. Filter Manager

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

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

45. Asset Factory

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

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

48. Debug Mode

49. Debugging compressed
Javascript sucks

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

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

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

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

54. Good: Basic Caching

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

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

57. Better: HTTP Caching

58. // $core = new AssetCache(...
$mtime = gmdate('D, d M y H:i:s GMT',
$core->getLastModified());
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();

59. Best: Static Assets

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

61. Best-est:
Content Distribution Network

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

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

64. Not Lazy Enough?

65. Asset Formulae and the
Lazy Asset Manager

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

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

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

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

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

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

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

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

74. A template is a configuration file

75. Formula Loaders
extract asset formulae from templates

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

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

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

79. Twig Integration

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

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

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

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

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

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

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

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

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

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

90. AsseticBundle
Symfony2 integration

91. Configuration

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

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

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

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

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

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

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

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

100. assetic:dump

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

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

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

104. Roadmap
• 1.1 - Asset dependencies
• 1.2 - Dynamic assets

105. How can you help?
• Fork me, join the team
• Documentation
• Assetic needs a website

106. OpenSky is hiring
• Systems
• Dev-ops
• Help desk
• Java architect

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