Drupal, meet Assetic
-
Upload
kris-wallsmith -
Category
Technology
-
view
7.882 -
download
1
description
Transcript of Drupal, meet Assetic
assetic
@kriswallsmith
things are pretty good
things could be better
problems
solutions
past
present
future
kriswallsmith/assetic
inspired by python’s webassetshttp://github.com/miracle2k/webassets
2,500+ stars
400+ forks
2.4 million installs
the team• kriswallsmith
• stof
• schmittjoh
• everzet
• 88 other contributors
boring
css
javascript
such assetsso wait
wow
model the problem
assets
images stylesheets javascripts
• path • last modified • content
an object-oriented api
interface AssetInterface!{! function getContent();! function getSourceRoot();! function getSourcePath();! function getTargetPath();! function getLastModified();!!
// ...!}
interface AssetInterface!{! // ...!!
function load();! function dump();!!
// ...!}
implementations
• StringAsset
• FileAsset
• HttpAsset
use Assetic\Asset\StringAsset;!!
$a = new StringAsset('alert("hi!")');!$a->load();!echo $a->dump();
use Assetic\Asset\StringAsset;!!
$a = new StringAsset('alert("hi!")');!$a->load();!echo $a->dump();
use Assetic\Asset\StringAsset;!!
$a = new StringAsset('alert("hi!")');!!
echo $a->dump();
use Assetic\Asset\FileAsset;!!
$a = new FileAsset('/path/to/hi.js');!!
echo $a->dump();
use Assetic\Asset\HttpAsset;!!
$a = new HttpAsset('//example.com/hi.js');!!
echo $a->dump();
special implementations
• AssetCollection
• GlobAsset
• AssetCache
• AssetReference
use Assetic\Asset\AssetCollection;!use Assetic\Asset\FileAsset;!use Assetic\Asset\StringAsset;!!
$a = new AssetCollection(array(! new StringAsset('// (c) me'),! new FileAsset('/path/to/main.js'),!));!!
echo $a->dump();
use Assetic\Asset\GlobAsset;!!
$a = new GlobAsset('/path/to/js/*.js');!!
echo $a->dump();
use Assetic\Asset\AssetCache;!use Assetic\Asset\HttpAsset;!use Assetic\Cache\ApcCache;!!
$a = new AssetCache(! new HttpAsset(‘//example.com/hi.js'),! new ApcCache()!);!!
echo $a->dump();
use Assetic\Asset\AssetReference;!use Assetic\Asset\StringAsset;!use Assetic\AssetManager;!!
$am = new AssetManager();!$am->set('hi', new StringAsset('...'));!!
$a = new AssetReference($am, 'hi');!!
echo $a->dump();
slow
fewer requests
smaller responses
tools
• CssEmbed
• Google Closure
• jpegoptim
• jpegtran
• JSMin
• JSqueeze
• optipng
• PhpCssEmbed
• pngout
• UglifyCSS
• UglifyJS
• YUI Compressor
tedious
more tools
• CoffeeScript
• Compass
• Dart
• Less
• Lessphp
• Packager
• Roole
• SASS
• Scssphp
• Sprockets
• Stylus
• TypeScript
model the problem
use Assetic\Asset\AssetInterface as Asset;!!
interface FilterInterface!{! function filterLoad(Asset $asset);! function filterDump(Asset $asset);!}
var myVariable var _a
dumpload
coffeescript javascript
load javascript
• CoffeeScriptFilter
• DartFilter
• EmberPrecompileFilter
• HandlebarsFilter
• PackagerFilter
• SprocketsFilter
• TypeScriptFilter
load css• CompassFilter
• CssImportFilter
• GssFilter
• LessFilter
• LessphpFilter
• PhpCssEmbedFilter
• RooleFilter
• Sass\SassFilter
• Sass\ScssFilter
• ScssphpFilter
• StylusFilter
dump javascript• Google\CompilerApiFilter
• Google\CompilerJarFilter
• JSMinFilter
• JSMinPlusFilter
• JSqueezeFilter
• PackerFilter
• UglifyJsFilter
• UglifyJs2Filter
• Yui\JsCompressorFilter
dump css• CssEmbedFilter
• CssMinFilter
• CssRewriteFilter
• UglifyCssFilter
• Yui\CssCompressorFilter
dump images
• JpegoptimFilter
• JpegtranFilter
• OptiPngFilter
• PngoutFilter
use Assetic\Filter\FilterInterface;!!
interface AssetInterface!{! function ensureFilter(! FilterInterface $filter);!!
// ...!}
use Assetic\Asset\FileAsset;!use Assetic\Filter\CoffeeScriptFilter;!use Assetic\Filter\UglifyJs2Filter;!!
$a = new FileAsset('/path/to/app.coffee');!$a->ensureFilter(new CoffeeScriptFilter());!$a->ensureFilter(new UglifyJs2Filter());!!
echo $a->dump();
use Assetic\Asset\FileAsset;!use Assetic\Filter\CoffeeScriptFilter;!use Assetic\Filter\UglifyJs2Filter;!!
$a = new FileAsset(! '/path/to/app.coffee',! array(! new CoffeeScriptFilter(),! new UglifyJs2Filter(),! )!);
serve
# /path/to/web/js/app.php!!
$a = new FileAsset('/path/to/app.coffee');!$a->ensureFilter(new CoffeeScriptFilter());!$a->ensureFilter(new UglifyJs2Filter());!!
header('Content-Type: text/javascript');!echo $a->dump();
# /path/to/web/js/app.php!!
use Assetic\Asset\AssetCache;!use Assetic\Cache\ApcCache;!!
// ...!!
$a = new AssetCache($a, new ApcCache());!!
header('Content-Type: text/javascript');!echo $a->dump();
flat
use Assetic\Asset\FileAsset;!use Assetic\AssetManager;!use Assetic\AssetWriter;!!
$a = new FileAsset('/path/to/app.js');!$a->setTargetPath('js/app.js');!!
$am = new AssetManager();!$am->set('app_js', $a);!!
$writer = new AssetWriter('/path/to/web');!$writer->writeManagerAssets($am);
reference
<script src="/js/app.php"></script>
<script src="/js/app.js"></script>
<script src="<?= asset('app_js') ?>"></script>
template as configuration
<script src="<?=! assetic_javascripts(! array('js/app.coffee'),! array('coffee', 'uglifyjs2'),! array('output' => 'js/app.js')! )!?>"></script>
use Assetic\Filter\CoffeeScriptFilter;!use Assetic\FilterManager;!!
$fm = new FilterManager();!$fm->set(! 'coffee',! new CoffeeScriptFilter()!);
use Assetic\Factory\AssetFactory;!!
$factory = new AssetFactory('/www');!$factory->setFilterManager($fm);
use ...\Loader\FunctionCallsFormulaLoader;!use ...\Resource\DirectoryResource;!!
$ldr = new FunctionCallsFormulaLoader();!$rsc = new DirectoryResource(! '/path/to/views',! '/\.php$/'!);
use Assetic\Factory\LazyAssetManager;!!
$am = new LazyAssetManager($factory);!$am->setLoader('php', $ldr);!$am->addResource($rsc, 'php');
detect
includesreferences
while (true) {! foreach ($am->getNames() as $name) {! // ...! }!!
sleep(1);!}
push
henrikbjorn/lurker
use Lurker\ResourceWatcher;!!
$watcher = new ResourceWatcher();!$watcher->track('twig', '/path/to/views');!$watcher->addListener('twig', function($e) {! // ...!});!!
$watcher->start();
respond
_colors.sass
foreach ($am->getNames() as $name) {! $asset = $am->get($name);! // ...!!
if ($match) {! // ...! }!}
graph
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included byreferenced by
referenced by
nodes
edges
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included byreferenced by
referenced by
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included byreferenced by
referenced by
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included byreferenced by
referenced by
use Assetic\Asset\HttpAsset;!!
$a = new HttpAsset('//example.com/hi.js');
• proxy
• authentication
• errors
• ssl
• mock
• test
• logging
• profiling
• curl
• guzzle
represent
separate
• load
• filter
• reflection
• optimization
maintain
~40 filters
ping
opinion
• engines
• javascript optimizer
• css optimizer
• jpeg optimizer
• png optimizer
sponsor
follow@kriswallsmith
hire
• workshops
• architecture
• audits
• performance
• symfony
• phpunit
• twig
• doctrine
questions?