assetic
@kriswallsmith
things are pretty good
things could be better
problems
solutions
past
present
future
kriswallsmith/assetic
inspired by python’s webassets
http://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 assets
so 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 getTar...
interface AssetInterface!
{!
// ...!
!
function load();!
function dump();!
!
// ...!
}
implementations
• StringAsset
• FileAsset
• HttpAsset
use AsseticAssetStringAsset;!
!
$a = new StringAsset('alert("hi!")');!
$a->load();!
echo $a->dump();
use AsseticAssetStringAsset;!
!
$a = new StringAsset('alert("hi!")');!
$a->load();!
echo $a->dump();
use AsseticAssetStringAsset;!
!
$a = new StringAsset('alert("hi!")');!
!
echo $a->dump();
use AsseticAssetFileAsset;!
!
$a = new FileAsset('/path/to/hi.js');!
!
echo $a->dump();
use AsseticAssetHttpAsset;!
!
$a = new HttpAsset('//example.com/hi.js');!
!
echo $a->dump();
special implementations
• AssetCollection
• GlobAsset
• AssetCache
• AssetReference
use AsseticAssetAssetCollection;!
use AsseticAssetFileAsset;!
use AsseticAssetStringAsset;!
!
$a = new AssetCollection(arr...
use AsseticAssetGlobAsset;!
!
$a = new GlobAsset('/path/to/js/*.js');!
!
echo $a->dump();
use AsseticAssetAssetCache;!
use AsseticAssetHttpAsset;!
use AsseticCacheApcCache;!
!
$a = new AssetCache(!
new HttpAsset(...
use AsseticAssetAssetReference;!
use AsseticAssetStringAsset;!
use AsseticAssetManager;!
!
$am = new AssetManager();!
$am-...
slow
fewer requests
smaller responses
tools
• CssEmbed
• Google Closure
• jpegoptim
• jpegtran
• JSMin
• JSqueeze

• optipng
• PhpCssEmbed
• pngout
• UglifyCSS
• Ugli...
tedious
more tools
• CoffeeScript
• Compass
• Dart
• Less
• Lessphp
• Packager

• Roole
• SASS
• Scssphp
• Sprockets
• Stylus
• TypeScript
model the problem
use AsseticAssetAssetInterface as Asset;!
!
interface FilterInterface!
{!
function filterLoad(Asset $asset);!
function fil...
var myVariable var _a
dumpload
coffeescript javascript
load javascript
• CoffeeScriptFilter
• DartFilter
• EmberPrecompileFilter
• HandlebarsFilter

• PackagerFilter
• Sprockets...
load css
• CompassFilter
• CssImportFilter
• GssFilter
• LessFilter
• LessphpFilter
• PhpCssEmbedFilter
• RooleFilter
• Sa...
dump javascript
• GoogleCompilerApiFilter
• GoogleCompilerJarFilter
• JSMinFilter
• JSMinPlusFilter
• JSqueezeFilter

• Pa...
dump css
• CssEmbedFilter
• CssMinFilter
• CssRewriteFilter
• UglifyCssFilter
• YuiCssCompressorFilter
dump images
• JpegoptimFilter
• JpegtranFilter
• OptiPngFilter
• PngoutFilter
use AsseticFilterFilterInterface;!
!
interface AssetInterface!
{!
function ensureFilter(!
FilterInterface $filter);!
!
// ...
use AsseticAssetFileAsset;!
use AsseticFilterCoffeeScriptFilter;!
use AsseticFilterUglifyJs2Filter;!
!
$a = new FileAsset(...
use AsseticAssetFileAsset;!
use AsseticFilterCoffeeScriptFilter;!
use AsseticFilterUglifyJs2Filter;!
!
$a = new FileAsset(...
serve
# /path/to/web/js/app.php!
!
$a = new FileAsset('/path/to/app.coffee');!
$a->ensureFilter(new CoffeeScriptFilter());!
$a->...
# /path/to/web/js/app.php!
!
use AsseticAssetAssetCache;!
use AsseticCacheApcCache;!
!
// ...!
!
$a = new AssetCache($a, n...
flat
use AsseticAssetFileAsset;!
use AsseticAssetManager;!
use AsseticAssetWriter;!
!
$a = new FileAsset('/path/to/app.js');!
$...
reference
<script src="/js/app.php"></script>
<script src="/js/app.js"></script>
<script src="<?= asset('app_js') ?>"></scri
template as configuration
<script src="<?=!
assetic_javascripts(!
array('js/app.coffee'),!
array('coffee', 'uglifyjs2'),!
array('output' => 'js/app....
use AsseticFilterCoffeeScriptFilter;!
use AsseticFilterManager;!
!
$fm = new FilterManager();!
$fm->set(!
'coffee',!
new C...
use AsseticFactoryAssetFactory;!
!
$factory = new AssetFactory('/www');!
$factory->setFilterManager($fm);
use ...LoaderFunctionCallsFormulaLoader;!
use ...ResourceDirectoryResource;!
!
$ldr = new FunctionCallsFormulaLoader();!
$...
use AsseticFactoryLazyAssetManager;!
!
$am = new LazyAssetManager($factory);!
$am->setLoader('php', $ldr);!
$am->addResour...
detect
includes
references
while (true) {!
foreach ($am->getNames() as $name) {!
// ...!
}!
!
sleep(1);!
}
push
henrikbjorn/lurker
use LurkerResourceWatcher;!
!
$watcher = new ResourceWatcher();!
$watcher->track('twig', '/path/to/views');!
$watcher->add...
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 by
referenc...
nodes
edges
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included by
referenc...
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included by
referenc...
profile.sass
_colors.sass background.gif
home.sass
includes
includes
references
references
included by
included by
referenc...
use AsseticAssetHttpAsset;!
!
$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?
kris.wallsmith@gmail.com
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Drupal, meet Assetic
Upcoming SlideShare
Loading in …5
×

Drupal, meet Assetic

8,770 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 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
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,770
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
3
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Drupal, meet Assetic

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

×