Drupal, meet Assetic
•
4 likes•9,083 views
Drupal 8 leverages Assetic for managing Javascript and CSS assets. This library abstracts the headaches of integrating with the burgeoning universe of asset pre-processors and optimization tools available to the modern developer. The lead developer of Assetic will give a tour of the library and discuss the current state of the project, its strengths, and its weaknesses, and also touch on the future: Assetic 2.0.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Drupal, meet Assetic
Similar to Drupal, meet Assetic (20)
More from Kris Wallsmith
Recently uploaded
Recently uploaded (20)
Drupal, meet Assetic
- 1. assetic
- 3. things are pretty good
- 4. things could be better
- 5. problems
- 6. solutions
- 7. past
- 8. present
- 9. future
- 11. inspired by python’s webassets http://github.com/miracle2k/webassets
- 12. 2,500+ stars
- 13. 400+ forks
- 15. the team • kriswallsmith • stof • schmittjoh • everzet • 88 other contributors
- 16. boring
- 19. css
- 21. javascript
- 27. assets
- 29. • path • last modified • content
- 31. interface AssetInterface! {! function getContent();! function getSourceRoot();! function getSourcePath();! function getTargetPath();! function getLastModified();! ! // ...! }
- 32. interface AssetInterface! {! // ...! ! function load();! function dump();! ! // ...! }
- 33. implementations • StringAsset • FileAsset • HttpAsset
- 34. use AsseticAssetStringAsset;! ! $a = new StringAsset('alert("hi!")');! $a->load();! echo $a->dump();
- 35. use AsseticAssetStringAsset;! ! $a = new StringAsset('alert("hi!")');! $a->load();! echo $a->dump();
- 36. use AsseticAssetStringAsset;! ! $a = new StringAsset('alert("hi!")');! ! echo $a->dump();
- 37. use AsseticAssetFileAsset;! ! $a = new FileAsset('/path/to/hi.js');! ! echo $a->dump();
- 38. use AsseticAssetHttpAsset;! ! $a = new HttpAsset('//example.com/hi.js');! ! echo $a->dump();
- 39. special implementations • AssetCollection • GlobAsset • AssetCache • AssetReference
- 40. use AsseticAssetAssetCollection;! use AsseticAssetFileAsset;! use AsseticAssetStringAsset;! ! $a = new AssetCollection(array(! new StringAsset('// (c) me'),! new FileAsset('/path/to/main.js'),! ));! ! echo $a->dump();
- 41. use AsseticAssetGlobAsset;! ! $a = new GlobAsset('/path/to/js/*.js');! ! echo $a->dump();
- 42. use AsseticAssetAssetCache;! use AsseticAssetHttpAsset;! use AsseticCacheApcCache;! ! $a = new AssetCache(! new HttpAsset(‘//example.com/hi.js'),! new ApcCache()! );! ! echo $a->dump();
- 43. use AsseticAssetAssetReference;! use AsseticAssetStringAsset;! use AsseticAssetManager;! ! $am = new AssetManager();! $am->set('hi', new StringAsset('...'));! ! $a = new AssetReference($am, 'hi');! ! echo $a->dump();
- 44. slow
- 46. fewer requests
- 48. tools
- 49. • CssEmbed • Google Closure • jpegoptim • jpegtran • JSMin • JSqueeze • optipng • PhpCssEmbed • pngout • UglifyCSS • UglifyJS • YUI Compressor
- 50. tedious
- 51. more tools
- 52. • CoffeeScript • Compass • Dart • Less • Lessphp • Packager • Roole • SASS • Scssphp • Sprockets • Stylus • TypeScript
- 55. use AsseticAssetAssetInterface as Asset;! ! interface FilterInterface! {! function filterLoad(Asset $asset);! function filterDump(Asset $asset);! }
- 56. var myVariable var _a dumpload coffeescript javascript
- 57. load javascript • CoffeeScriptFilter • DartFilter • EmberPrecompileFilter • HandlebarsFilter • PackagerFilter • SprocketsFilter • TypeScriptFilter
- 58. load css • CompassFilter • CssImportFilter • GssFilter • LessFilter • LessphpFilter • PhpCssEmbedFilter • RooleFilter • SassSassFilter • SassScssFilter • ScssphpFilter • StylusFilter
- 59. dump javascript • GoogleCompilerApiFilter • GoogleCompilerJarFilter • JSMinFilter • JSMinPlusFilter • JSqueezeFilter • PackerFilter • UglifyJsFilter • UglifyJs2Filter • YuiJsCompressorFilter
- 60. dump css • CssEmbedFilter • CssMinFilter • CssRewriteFilter • UglifyCssFilter • YuiCssCompressorFilter
- 61. dump images • JpegoptimFilter • JpegtranFilter • OptiPngFilter • PngoutFilter
- 62. use AsseticFilterFilterInterface;! ! interface AssetInterface! {! function ensureFilter(! FilterInterface $filter);! ! // ...! }
- 63. use AsseticAssetFileAsset;! use AsseticFilterCoffeeScriptFilter;! use AsseticFilterUglifyJs2Filter;! ! $a = new FileAsset('/path/to/app.coffee');! $a->ensureFilter(new CoffeeScriptFilter());! $a->ensureFilter(new UglifyJs2Filter());! ! echo $a->dump();
- 64. use AsseticAssetFileAsset;! use AsseticFilterCoffeeScriptFilter;! use AsseticFilterUglifyJs2Filter;! ! $a = new FileAsset(! '/path/to/app.coffee',! array(! new CoffeeScriptFilter(),! new UglifyJs2Filter(),! )! );
- 65. serve
- 66. # /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();
- 67. # /path/to/web/js/app.php! ! use AsseticAssetAssetCache;! use AsseticCacheApcCache;! ! // ...! ! $a = new AssetCache($a, new ApcCache());! ! header('Content-Type: text/javascript');! echo $a->dump();
- 68. flat
- 69. use AsseticAssetFileAsset;! use AsseticAssetManager;! use AsseticAssetWriter;! ! $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);
- 70. reference
- 73. <script src="<?= asset('app_js') ?>"></scri
- 75. <script src="<?=! assetic_javascripts(! array('js/app.coffee'),! array('coffee', 'uglifyjs2'),! array('output' => 'js/app.js')! )! ?>"></script>
- 76. use AsseticFilterCoffeeScriptFilter;! use AsseticFilterManager;! ! $fm = new FilterManager();! $fm->set(! 'coffee',! new CoffeeScriptFilter()! );
- 77. use AsseticFactoryAssetFactory;! ! $factory = new AssetFactory('/www');! $factory->setFilterManager($fm);
- 78. use ...LoaderFunctionCallsFormulaLoader;! use ...ResourceDirectoryResource;! ! $ldr = new FunctionCallsFormulaLoader();! $rsc = new DirectoryResource(! '/path/to/views',! '/.php$/'! );
- 79. use AsseticFactoryLazyAssetManager;! ! $am = new LazyAssetManager($factory);! $am->setLoader('php', $ldr);! $am->addResource($rsc, 'php');
- 81. detect
- 83. while (true) {! foreach ($am->getNames() as $name) {! // ...! }! ! sleep(1);! }
- 84. push
- 86. use LurkerResourceWatcher;! ! $watcher = new ResourceWatcher();! $watcher->track('twig', '/path/to/views');! $watcher->addListener('twig', function($e) {! // ...! });! ! $watcher->start();
- 87. respond
- 88. _colors.sass
- 89. foreach ($am->getNames() as $name) {! $asset = $am->get($name);! // ...! ! if ($match) {! // ...! }! }
- 90. graph
- 91. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
- 92. nodes
- 93. edges
- 94. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
- 95. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
- 96. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
- 98. use AsseticAssetHttpAsset;! ! $a = new HttpAsset('//example.com/hi.js');
- 99. • proxy • authentication • errors • ssl • mock • test • logging • profiling • curl • guzzle
- 100. represent
- 101. separate
- 103. • load • filter • reflection • optimization
- 104. maintain
- 105. ~40 filters
- 106. ping
- 107. opinion
- 108. • engines • javascript optimizer • css optimizer • jpeg optimizer • png optimizer
- 110. sponsor
- 112. hire • workshops • architecture • audits • performance • symfony • phpunit • twig • doctrine
- 113. questions?