Your SlideShare is downloading. ×
Drupal, meet Assetic
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Drupal, meet Assetic

7,968
views

Published on

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 …

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.

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,968
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. assetic
  • 2. @kriswallsmith
  • 3. things are pretty good
  • 4. things could be better
  • 5. problems
  • 6. solutions
  • 7. past
  • 8. present
  • 9. future
  • 10. kriswallsmith/assetic
  • 11. inspired by python’s webassets http://github.com/miracle2k/webassets
  • 12. 2,500+ stars
  • 13. 400+ forks
  • 14. 2.4 million installs
  • 15. the team • kriswallsmith • stof • schmittjoh • everzet • 88 other contributors
  • 16. boring
  • 17. css
  • 18. javascript
  • 19. such assets so wait wow
  • 20. model the problem
  • 21. assets
  • 22. images stylesheets javascripts
  • 23. • path • last modified • content
  • 24. an object-oriented api
  • 25. interface AssetInterface! {! function getContent();! function getSourceRoot();! function getSourcePath();! function getTargetPath();! function getLastModified();! ! // ...! }
  • 26. interface AssetInterface! {! // ...! ! function load();! function dump();! ! // ...! }
  • 27. implementations • StringAsset • FileAsset • HttpAsset
  • 28. use AsseticAssetStringAsset;! ! $a = new StringAsset('alert("hi!")');! $a->load();! echo $a->dump();
  • 29. use AsseticAssetStringAsset;! ! $a = new StringAsset('alert("hi!")');! $a->load();! echo $a->dump();
  • 30. use AsseticAssetStringAsset;! ! $a = new StringAsset('alert("hi!")');! ! echo $a->dump();
  • 31. use AsseticAssetFileAsset;! ! $a = new FileAsset('/path/to/hi.js');! ! echo $a->dump();
  • 32. use AsseticAssetHttpAsset;! ! $a = new HttpAsset('//example.com/hi.js');! ! echo $a->dump();
  • 33. special implementations • AssetCollection • GlobAsset • AssetCache • AssetReference
  • 34. use AsseticAssetAssetCollection;! use AsseticAssetFileAsset;! use AsseticAssetStringAsset;! ! $a = new AssetCollection(array(! new StringAsset('// (c) me'),! new FileAsset('/path/to/main.js'),! ));! ! echo $a->dump();
  • 35. use AsseticAssetGlobAsset;! ! $a = new GlobAsset('/path/to/js/*.js');! ! echo $a->dump();
  • 36. use AsseticAssetAssetCache;! use AsseticAssetHttpAsset;! use AsseticCacheApcCache;! ! $a = new AssetCache(! new HttpAsset(‘//example.com/hi.js'),! new ApcCache()! );! ! echo $a->dump();
  • 37. use AsseticAssetAssetReference;! use AsseticAssetStringAsset;! use AsseticAssetManager;! ! $am = new AssetManager();! $am->set('hi', new StringAsset('...'));! ! $a = new AssetReference($am, 'hi');! ! echo $a->dump();
  • 38. slow
  • 39. fewer requests
  • 40. smaller responses
  • 41. tools
  • 42. • CssEmbed • Google Closure • jpegoptim • jpegtran • JSMin • JSqueeze
 • optipng • PhpCssEmbed • pngout • UglifyCSS • UglifyJS • YUI Compressor
  • 43. tedious
  • 44. more tools
  • 45. • CoffeeScript • Compass • Dart • Less • Lessphp • Packager
 • Roole • SASS • Scssphp • Sprockets • Stylus • TypeScript
  • 46. model the problem
  • 47. use AsseticAssetAssetInterface as Asset;! ! interface FilterInterface! {! function filterLoad(Asset $asset);! function filterDump(Asset $asset);! }
  • 48. var myVariable var _a dumpload coffeescript javascript
  • 49. load javascript • CoffeeScriptFilter • DartFilter • EmberPrecompileFilter • HandlebarsFilter
 • PackagerFilter • SprocketsFilter • TypeScriptFilter
  • 50. load css • CompassFilter • CssImportFilter • GssFilter • LessFilter • LessphpFilter • PhpCssEmbedFilter • RooleFilter • SassSassFilter • SassScssFilter • ScssphpFilter • StylusFilter
  • 51. dump javascript • GoogleCompilerApiFilter • GoogleCompilerJarFilter • JSMinFilter • JSMinPlusFilter • JSqueezeFilter
 • PackerFilter • UglifyJsFilter • UglifyJs2Filter • YuiJsCompressorFilter
  • 52. dump css • CssEmbedFilter • CssMinFilter • CssRewriteFilter • UglifyCssFilter • YuiCssCompressorFilter
  • 53. dump images • JpegoptimFilter • JpegtranFilter • OptiPngFilter • PngoutFilter
  • 54. use AsseticFilterFilterInterface;! ! interface AssetInterface! {! function ensureFilter(! FilterInterface $filter);! ! // ...! }
  • 55. use AsseticAssetFileAsset;! use AsseticFilterCoffeeScriptFilter;! use AsseticFilterUglifyJs2Filter;! ! $a = new FileAsset('/path/to/app.coffee');! $a->ensureFilter(new CoffeeScriptFilter());! $a->ensureFilter(new UglifyJs2Filter());! ! echo $a->dump();
  • 56. use AsseticAssetFileAsset;! use AsseticFilterCoffeeScriptFilter;! use AsseticFilterUglifyJs2Filter;! ! $a = new FileAsset(! '/path/to/app.coffee',! array(! new CoffeeScriptFilter(),! new UglifyJs2Filter(),! )! );
  • 57. serve
  • 58. # /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();
  • 59. # /path/to/web/js/app.php! ! use AsseticAssetAssetCache;! use AsseticCacheApcCache;! ! // ...! ! $a = new AssetCache($a, new ApcCache());! ! header('Content-Type: text/javascript');! echo $a->dump();
  • 60. flat
  • 61. 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);
  • 62. reference
  • 63. <script src="/js/app.php"></script>
  • 64. <script src="/js/app.js"></script>
  • 65. <script src="<?= asset('app_js') ?>"></scri
  • 66. template as configuration
  • 67. <script src="<?=! assetic_javascripts(! array('js/app.coffee'),! array('coffee', 'uglifyjs2'),! array('output' => 'js/app.js')! )! ?>"></script>
  • 68. use AsseticFilterCoffeeScriptFilter;! use AsseticFilterManager;! ! $fm = new FilterManager();! $fm->set(! 'coffee',! new CoffeeScriptFilter()! );
  • 69. use AsseticFactoryAssetFactory;! ! $factory = new AssetFactory('/www');! $factory->setFilterManager($fm);
  • 70. use ...LoaderFunctionCallsFormulaLoader;! use ...ResourceDirectoryResource;! ! $ldr = new FunctionCallsFormulaLoader();! $rsc = new DirectoryResource(! '/path/to/views',! '/.php$/'! );
  • 71. use AsseticFactoryLazyAssetManager;! ! $am = new LazyAssetManager($factory);! $am->setLoader('php', $ldr);! $am->addResource($rsc, 'php');
  • 72. detect
  • 73. includes references
  • 74. while (true) {! foreach ($am->getNames() as $name) {! // ...! }! ! sleep(1);! }
  • 75. push
  • 76. henrikbjorn/lurker
  • 77. use LurkerResourceWatcher;! ! $watcher = new ResourceWatcher();! $watcher->track('twig', '/path/to/views');! $watcher->addListener('twig', function($e) {! // ...! });! ! $watcher->start();
  • 78. respond
  • 79. _colors.sass
  • 80. foreach ($am->getNames() as $name) {! $asset = $am->get($name);! // ...! ! if ($match) {! // ...! }! }
  • 81. graph
  • 82. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
  • 83. nodes
  • 84. edges
  • 85. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
  • 86. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
  • 87. profile.sass _colors.sass background.gif home.sass includes includes references references included by included by referenced by referenced by
  • 88. use AsseticAssetHttpAsset;! ! $a = new HttpAsset('//example.com/hi.js');
  • 89. • proxy • authentication • errors • ssl • mock
 • test
 • logging • profiling • curl • guzzle
  • 90. represent
  • 91. separate
  • 92. • load • filter • reflection • optimization
  • 93. maintain
  • 94. ~40 filters
  • 95. ping
  • 96. opinion
  • 97. • engines • javascript optimizer • css optimizer • jpeg optimizer • png optimizer
  • 98. sponsor
  • 99. follow @kriswallsmith
  • 100. hire • workshops • architecture • audits • performance
 • symfony • phpunit • twig • doctrine
  • 101. questions?
  • 102. kris.wallsmith@gmail.com