Assetic: Asset Management for PHP
•
4 j'aime•9,083 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Assetic: Asset Management for PHP
Similaire à Assetic: Asset Management for PHP (20)
Plus de Kris Wallsmith
Dernier
Dernier (20)
Assetic: Asset Management for PHP
- 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?