Assetic (Symfony Live Paris)

Introducing Assetic
Asset Management for PHP 5.3

March 4, 2011

@kriswallsmith

• Symfony Guru at

• Symfony core team member

• Doctrine contributor

• 10+ years experience with PHP and web development

• Open source evangelist and international speaker

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.

ShopOpenSky.com

• PHP 5.3 + Symfony2

• MongoDB + Doctrine MongoDB ODM

• MySQL + Doctrine2 ORM

• Less CSS

• jQuery

But you can still f*** that up

We build tools that
encourage best practices

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

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

A poorly optimized frontend
can destroy UX

…and SEO!

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

Lots of awesome tools:
• CoffeeScript • Packer

• Compass Framework • SASS

• CSSEmbed • Sprockets

• Google Closure Compiler • Stylus

• JSMin • YUI Compressor

• LESS

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

# /path/to/web/js/core.php

$core = new FileAsset('/path/to/jquery.js');
$core->load();

header('Content-Type: text/javascript');
echo $core->dump();


$core = new AssetCollection(array(
new FileAsset('/path/to/jquery.js'),
new GlobAsset('/path/to/js/core/*.js'),
));
$core->load();

echo $core->dump();


));
$core->load();many ﬁles into one == fewer HTTP requests
Merge
echo $core->dump();


), array(
new YuiCompressorJsFilter('/path/to/yui.jar'),
));
$core->load();

echo $core->dump();


), array(
new YuiCompressorJsFilter('/path/to/yui.jar'),
));
$core->load();
Compress the merged asset == less data over the wire

echo $core->dump();

Inspired by Python’s webassets

https://github.com/miracle2k/webassets

Assets have lazy, mutable content

A ﬁlter acts on an asset’s contents
during “load” and “dump”

Assets can be gathered in
collections

Load
Filter
Filter
Asset

Filter
Filter
Asset

Dump

Asset Collection
Filter Filter
Filter Filter
Asset Asset

Asset Collection Filter
Filter
Asset Collection Asset
Filter Filter
Filter Filter
Asset Asset
Filter
Filter
Asset

# /path/to/web/css/styles.php

$styles = new FileAsset('/path/to/main.sass', array(
new SassFilter(),
));

header('Content-Type: text/css');
echo $styles->dump();


$styles = new FileAsset('/path/to/main.sass', array(
new SassFilter(),
));
Load is implied


$styles = new AssetCollection(array(
new FileAsset('/path/to/main.sass', array(
new SassFilter(),
)),
new FileAsset('/path/to/more.css'),
));



new SassFilter(),
)),
), array(
new YuiCompressorCss('/path/to/yui.jar'),
));



new SassFilter(),
)),
), array(
new YuiCompressorCss('/path/to/yui.jar'),
));
Lazy! The ﬁlesystem isn't touched until now

Basic Asset Classes

• AssetCollection

• AssetReference

• FileAsset

• GlobAsset

• StringAsset

Core Filter Classes
• CallablesFilter • SassScssFilter

• CoffeeScriptFilter • SprocketsFilter

• CssRewriteFilter • StylusFilter

• GoogleClosureCompilerApiFilter • YuiCssCompressorFilter

• GoogleClosureCompilerJarFilter • YuiJsCompressorFilter

• LessFilter • More to come…

• SassSassFilter

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

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

$jquery,
$plugin1,
$plugin2,
));

header('text/javascript');
echo $core->dump();

jQuery will only be included once
$jquery,
$plugin1,
$plugin2,
));

header('text/javascript');
echo $core->dump();

$yui = new YuiCompressorJs();
$yui->setNomunge(true);

$fm = new FilterManager();
$fm->set('yui_js', $yui);

$jquery = new FileAsset('/path/to/core.js');
$jquery->ensureFilter($fm->get('yui_js'));

$jquery,
));
$core->ensureFilter($fm->get('yui_js'));

jQuery will only be compressed once

$jquery = new FileAsset('/path/to/core.js');
$jquery->ensureFilter($fm->get('yui_js'));

$jquery,
));
$core->ensureFilter($fm->get('yui_js'));

$fm = new FilterManager();
$fm->set('coffee', new CoffeeScriptFilter());
$fm->set('closure', new ClosureFilter());

$factory = new AssetFactory('/path/to/web');
$factory->setFilterManager($fm);

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

echo $asset->dump();

Debugging compressed
Javascript sucks

Mark ﬁlters for omission
in debug mode using a “?”

// new AssetFactory('/path/to/web', $debug = true);

array('coffee', 'closure')
);


// new AssetFactory('/path/to/web', true);

array('coffee', '?closure')
);


// new AssetFactory('/path/to/web', false);

array('coffee', '?closure'),
array('debug' => true)
);



$styles = new AssetCollection(
array(new FileAsset('/path/to/main.sass')),
array(new SassFilter())
);



$styles = new AssetCache(new AssetCollection(
), new FilesystemCache('/path/to/cache'));



$styles = new AssetCache(new AssetCollection(
), new FilesystemCache('/path/to/cache'));
Run the ﬁlters once and cache the content


// $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('Last-Modified: '.$mtime);
echo $core->dump();

# /path/to/scripts/dump_assets.php

$am = new AssetManager();
$am->set('foo', $foo);
// etc...

$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);

Best-est:
Content Distribution Network

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

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

A CloudFront S3 bucket

Custom Stream Wrappers

$s3 = new Zend_Service_Amazon_S3($key, $secret);
$s3->registerStreamWrapper();

Asset Formulae and the
Lazy Asset Manager

array('output' => 'js/*.js')
);

$formula = array(
array('output' => 'js/*.js')
);

$am = new LazyAssetManager($factory);
$am->setFormula('core_js', $formula);

echo $am->get('core_js')->dump();

A Thought
Assets are a part of the view layer
and should be deﬁned there.

<?php foreach (assetic_javascripts(
array('js/core.js', 'js/more.js'),
array('?yui_js')) as $url): ?>

<script src="<?php echo $url ?>"></script>

<?php endforeach; ?>

An Issue
Assets deﬁned in the view layer
must actually exist somewhere

Option Number Bad
Lazily dump assets to the
web directory

Option Number Good
Eagerly dump assets to the
web directory

A template is a conﬁguration ﬁle

Formula Loaders
extract asset formulae from templates

$loader = new FunctionCallsFormulaLoader();
$resource = new DirectoryResource(
'/path/to/templates',
'/.php$/'
);

$formulae = $loader->load($resource);

$am->setLoader('php', $loader);
$am->addResource($resource, 'php');


$am->setLoader('php', $loader);
$am->addResource($resource, 'php');
Expensive every time

$cache = new ConfigCache('/path/to/cache');

$loader = new CachedFormulaLoader(
$loader,
$cache,
$debug
);

$cache = new ConfigCache('/path/to/cache');

$loader = new CachedFormulaLoader(
$loader,
$cache,
$debug
);
Whether to stat each ﬁle for changes

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

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

{% assetic 'js/*.coffee' filter='coffee' output='js/*.js' %}
{% endassetic %}

{% javascripts 'js/*.coffee' filter='coffee,?closure' %}
{% endjavascripts %}

{% javascripts 'js/*.coffee' filter='coffee,?closure' %}

Adds a default output string

{% javascripts 'js/*.coffee' filter='coffee,?closure'
debug=true %}

Each "leaf" asset is referenced individually


AsseticBundle
Symfony2 integration

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

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

{# when use_controller=true #}

<script src="{{ path('assetic_foo') }}"...

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

{# when use_controller=false #}

<script src="{{ asset('js/core.js') }}"></script>

{# when use_controller=false #}

<script src="{{ asset('js/core.js') }}"></script>

Lots for free

The Symfony2 Assets Helper

• Multiple asset domains

• Cache buster

framework:
templating:
assets_version: 1.2.3
assets_base_urls:
- http://assets1.domain.com

$ php app/console assetic:dump web/

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

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

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

Assetic (Symfony Live Paris)

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Assetic (Symfony Live Paris) (20)

Recently uploaded (20)

Assetic (Symfony Live Paris)