This is to add the Assetic component to core in preparation for #1751602: Use Assetic to package JS and CSS files
It only adds the component, there are no other changes.

What is Assetic?

https://github.com/kriswallsmith/assetic

Assetic is an asset management framework for PHP.

Assetic is a Symfony component written by Kris Wallsmith, one of the main Symfony contributors.
We are looking to use it to help manage CSS and JS assets (though it can handle images, too).

Assetic can be used to:

  • discover assets
  • apply filters to assets (e.g. compression, convert SASS to CSS)
  • concatenate assets
  • write assets to the filesystem

Why would Assetic make sense in Drupal core?

Currently Drupal uses procedural — and difficult to override — code to:

  • work out which assets are needed on the page
  • group assets together
  • compress and concatenate assets
  • write assets to the filesystem

Drupal would still need to work out which assets were needed on a page and how to group those together, but by using Assetic for compression and filtering we would not only open the door for other types of filtering to occur — such as converting SASS files to CSS — but we would also avoid having to write custom code to do the same.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mcjim’s picture

Initial patch.

nod_’s picture

Issue tags: +JavaScript

tag

nod_’s picture

tag please?

mcjim’s picture

Original patch didn't actually include component… this one should :-)

Anonymous’s picture

Status: Active » Needs review

Setting for review by the testbot and others.

Status: Needs review » Needs work
Issue tags: -JavaScript

The last submitted patch, drupal-add-assetic-1784774-4.patch, failed testing.

mcjim’s picture

Status: Needs work » Needs review

#4: drupal-add-assetic-1784774-4.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +JavaScript

The last submitted patch, drupal-add-assetic-1784774-4.patch, failed testing.

mcjim’s picture

Status: Needs review » Needs work
FileSize
408.63 KB

Having fun, here :-)
Trying a patch using --full-index
Appears to work locally, using git apply, assuming testbot doesn't choke on trailing whitespace:

$ git apply ~/Downloads/drupal-add-assetic-1784774-9.patch
/Users/mcjim/Downloads/drupal-add-assetic-1784774-9.patch:651: trailing whitespace.
as long as it implements Assetic's filter interface. 
/Users/mcjim/Downloads/drupal-add-assetic-1784774-9.patch:1009: trailing whitespace.
 
warning: 2 lines add whitespace errors.
mcjim’s picture

Status: Needs work » Needs review
nod_’s picture

Status: Needs work » Reviewed & tested by the community

looks good to me :)

catch’s picture

Assigned: Unassigned » Dries

I'm happy to add Assetic on a 'use it or lose it' basis, notwithstanding the caveats I posted at #1751602: Use Assetic to package JS and CSS files. However I'd like to take some time to review it a bit closer before it goes in, and Dries usually likes to do the same with new libraries. So assigning to him.

webchick’s picture

We're over thresholds atm so we unfortunately can't commit any feature patches. Help with smashing critical and major bugs would be greatly appreciated.

webchick’s picture

Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs issue summary update

Can we please get an issue summary to describe what the heck this thing is, and why we want it over any other library that does a similar thing? (Doesn't have to be a book, but a couple of paragraphs would be nice.)

mcjim’s picture

Updated issue summary.

webchick’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs issue summary update

Thanks!

Dries’s picture

Status: Reviewed & tested by the community » Postponed (maintainer needs more info)

I read the issue summary and don't find the justification very compelling or why this is marked 'major'. I'd like to better understand why this is important and what immediate problem we're trying to solve. We already have different ways to get pluggability and this seems to add yet another one. Would love some more details and motivation.

nod_’s picture

Having that would de facto fix this issue #119441: Compress JS aggregation that has been tagged as "won't fix" because of licensing/legal issues and which is really, really important for frontend performance. That would allow contrib to implement all sorts of things trivially #1751602-1: Use Assetic to package JS and CSS files.

As far as JavaScript is concerned this is the biggest and most important issue for D8. Hence the "major" status. Ultimately this is a tool to fix this #352951: Make JS & CSS Preprocessing Pluggable. Also, Assetic has Twig integration, which could be very much useful down the line. This component is used by other big PHP projects, I was worried about the fragmentation of the pluggability thing too, after some talks with EclipseGc it seems to me that the most similar thing would be text input format. There are Assetic plugins (symphony-style), and Drupal plugins wrapping them to provide UI and configuration for them.

Using Assetic means we can use all of the other Assetic filters/plugins and extend that relatively easily. Before we just didn't have the oportunity to do it. Ask the labjs, headjs or the advagg module maintainers how much they love the D6/7 processing of JS files, I'm pretty sure they'd welcome any kind of pluggability since that means they wouldn't have to take over the whole processing to do what they want.

catch’s picture

At the moment, JavaScript processing is just concatenation, and CSS processing is a somewhat buggy regular expression. If you want to make these pluggable, you have to take over the entire rendering output just to replace those bits, they're not pluggable in the sense that cache backends are. There's more to JS/CSS pluggable handling than what Assetic does (i.e. bundling logic and the actual filename and file generation mechanism), but what it does I think we should use it for.

http://drupal.org/node/352951#comment-6532992 is where things currently stand in terms of fitting things together.

nod_’s picture

Also that's in the mobile goals: http://drupal.org/community-initiatives/drupal-core#mobile and there is some doc in the unofficial initiative page of JS: http://drupal.org/node/1667512

nod_’s picture

Status: Postponed (maintainer needs more info) » Needs review
tsi’s picture

+1 for Assetic in core, this would make it trivial for contribs like Sasson to compile Sass.
What is needed here ? or how a themer can help testing here ?

nod_’s picture

The patch probably needs a reroll and Dries need some more convincing or explanations it would seem.

nod_’s picture

The patch probably needs a reroll and Dries need some more convincing or explanations it would seem.

SebCorbin’s picture

Patch still applies for me

Fabianx’s picture

Another +1 why this is nice to have in Core and allows easy SASS/LESS/CSS Compression/JS Compression/... in Contrib:

$css = new AssetCollection(array(
    new FileAsset('/path/to/src/styles.less', array(new LessFilter())),
    new GlobAsset('/path/to/css/*'),
), array(
    new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),
));

// this will echo CSS compiled by LESS and compressed by YUI
echo $css->dump();

It is really easy to add new Filters into the mix, combine with the DIC / Plugin system to register the factory methods and voilá contrib only needs to implement a filter and it is integrated.

Trying to reach @mikeytown2 to chime in here.

nikkubhai’s picture

Also, please note that Add a CSS preprocessor to core depends on this issue.

jessebeach’s picture

mcjim or Fabianx, you two obviously understand how to implement the capabilities of Assetic. Would it be possible to provide example code here for folks reviewing this module that would put Assetic into use? Maybe a sandbox with a simple module implementation in it? That would be über helpful, thanks!

mcjim’s picture

@jessebeach Yes, a sandbox makes sense.
In the meantime, there's an example implementation here: http://drupal.org/node/1751602#comment-6519134 (this issue's patch from #9 would need to be applied first).

mikeytown2’s picture

Overall I'm for Assetic in core, I just have a couple of questions; because I don't want to take a step back.

Looking at the diagram in #352951-66: Make JS & CSS Preprocessing Pluggable Assetic and it's plugins will handle aggregate CSS/JS generation; it needs grouping of files in order to work. Seeing how Assetic needs a grouping of files, can I provide my own version of this to overwrite what will be in core? AdvAgg has one of the best *automatic* bundlers out there, and I would like to use it in the future. I've seen other examples on how grouping of files for aggregation is done and AdvAgg is the best IMO because it uses 2 database tables of info when creating the bundles.

Does assetic allow for aggregate generation to happen in the background via http (what AdvAgg currently does)? This would require #1447736: Adopt Guzzle library to replace drupal_http_request() or something like httprl to be in core so we can create non-blocking http requests (httprl was created by pulling code out of AdvAgg). Reason I'm asking this is CSS/JS minification is expensive and sometimes can take several seconds to run. Being able to generate aggregates on demand in the background is a major plus.

How does it handle GPL issues with minification? #1493876: Better GPL compliance when using JS minification - is how AdvAgg deals with it.

I like that Assetic handles minification so that's a big plus. Hopefully it uses a per file cache for JS and tests the output to make sure minification didn't kill the file.
I like that Assetic handles embedding css images in css files (http://drupal.org/project/css_emimage).

Is there some way to turn off Assetic aggregation with a url query parameter or a cookie? I've used this feature in AdvAgg quite a bit to help debug a production issue with CSS/JS.

I like how the example code in #26 looks.

RobLoach’s picture

Does assetic allow for aggregate generation to happen in the background via http (what AdvAgg currently does)?

Apptegic is an API, allowing us to handle assets how we want to handle assets. If we want to have it happen in the background, then we could do that.

How does it handle GPL issues with minification?

It's completely dependent on what Filters you're using. The UglifyJsFilter, for example, has a NoCopyright property, which tells UglifyJS whether or not to leave the first docblock during its processing. If you want to add your own AdvAgg Filter which would so something similar, then it might look something like:

function advagg_init() {
  // Create an instance of the AdvAggFilter, which will do some awesomeness.
  $filter = new Drupal\advagg\AdvAggFilter();

  // Add the filter to Drupal's asset collection.
  drupal_container()->get('assets')->load($filter);
}

If we want to do something like that in Drupal Core, then we could. The point is that Assetic is powerful and flexible enough to allow such a thing to happen in either Drupal Core or Contrib.

Is there some way to turn off Assetic aggregation with a url query parameter or a cookie?

Again, this comes down to how we use it. Assetic is just a tool. How we use that tool is up to us.

cosmicdreams’s picture

I'm all for this. It seems that we need to update the Assetic included in the patch in #9 to 1.1 and we likely need to reroll the patch.

What other follow-ups do we need in order for this to be a success?

Dries’s picture

Looked at this and we can go ahead on commit this on a "use it or lose it" basis.

The patch needs to be re-rolled though.

We'll re-evaluate the usefulness and code reduction/simplification of this patch before code freeze. We could choose to roll it back if the gains are limited.

Dries’s picture

Assigned: Dries » Unassigned

Un-assigning it from myself.

RobLoach’s picture

FileSize
517.28 KB

Had to lower our minimum-stability to bring in Assetic 1.1.0-alpha1.

Status: Needs review » Needs work
Issue tags: -JavaScript, -revisit before beta

The last submitted patch, 1784774.patch, failed testing.

nod_’s picture

Status: Needs work » Needs review
Issue tags: +JavaScript, +revisit before beta

#35: 1784774.patch queued for re-testing.

nod_’s picture

Status: Needs review » Reviewed & tested by the community

tests are ok and Dries okayed it :)

webchick’s picture

Status: Reviewed & tested by the community » Fixed

We're also under thresholds atm. YAYYY.

Committed and pushed to 8.x, along with a changelog entry.

cosmicdreams’s picture

Created a follow up issue so that we can use the stable version of Assetic instead of a possibly broken / rapidly changing version.
#1812172: Use the currently stable version of Assetic

tsi’s picture

Guys, I have just pushed a working POC of Sasson (D7) using assetic to compile Sass files.
If anyone wants to check it out or even help making it better that would be awesome.
git clone --recursive --branch assetic http://git.drupal.org/project/sasson.git

Just download sasson 7.x-3.x-dev

note: it was only tested on my Ubuntu machine, I expect issues with certain OSes :)

Fabianx’s picture

http://drupalcode.org/project/sasson.git/blobdiff/59aa4378b9f2df23c1f282...

Here is the diff from #41 for those that are curious how Assetic can be integrated.

tsi’s picture

@fabianx - Thanks but that diff is not a very good example - there are a lot of changes there that are not necessary for a simple integration of assetic.
I can produce a better example if anyone is interested but basically what you need is including composer's autoload.php (at the begining of sass.inc), then the compilation itself happens at sasson_parse_compass() on the same file.

tsi’s picture

-- Double posted --

mcjim’s picture

Wim Leers’s picture

Just for clarification, this issue was about the packager half, #352951: Make JS & CSS Preprocessing Pluggable is about the bundler (aggregator/grouper) half, right?

(We may want to clarify that in the issue titles, no?)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Updating summary to add more detail.

catch’s picture

Title: Add Assetic component to core » Remove Assetic component from core
Category: Feature request » Task
Status: Closed (fixed) » Postponed
Issue tags: -revisit before beta +revisit before release candidate

We're still not using this. #1762204: Introduce Assetic compatibility layer for core's internal handling of assets is critical at the moment but hasn't had any activity for 2-3 months.

hussainweb’s picture

Status: Postponed » Closed (duplicate)

This seems to be a duplicate of #2356845: Remove the assetic library.

catch’s picture

Issue tags: -revisit before release candidate