[RFC] Use assetic for assets (.css|.js) file management

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

[RFC] Use assetic for assets (.css|.js) file management

Post by brunoais »

Intro
Assetic is an assets content management. For assetic, an asset is an image, a css file or a js file.

In this RFC I'm interested in the js and css management system.

What we want here
What was really useful with this tool is to integrate it with synphony2 and to use assetic capabilities to have a .less merger and compiler, a .css minifier and a .js merger and minifier. Assetic already has interfaces to merge and compile .less and to minify .css written in php. But, currently, does not have a .js merger and minifier written in php.

How is this used?
The objective is to use assetic while compiling the .html files. Instead of only compiling the .html files, compile&minimize its .js and .css files.

Which filters to use?
Thanks to its new additions *high and mighty* yours truly *normal* :D , JSMin and JSMinPlus are now included as filters of assetic.
I don't know if JSMinPlus has any errors, my tests say no, but I'm not sure (we may use it in the tests and if it fails we may use JSMin). So, to merge js we use assetic's internal merging system. To minimize the code we can use google closure compiler falling back to JSMinPlus or JSMin.

For CSS we have LESSphp and CSSMin to the rescue. We can pass the .less though LESSphp and then pass all the css we have though CSSMin (which also contains an internal prefixer!)

Where should the minified files go?
They can be stored in the cache folder among the .php file that uses it.

Problem:
The minified file takes space.
Anyway, I think 100KB (exaggerating a bit) is something makes no significant difference in a server, including a free server.

Extra
assetic also comes with an interface to use closureCompiler but it requires that the server has allow_url_fopen as true for it to use, so... not an option.

Pros
  1. Ready to use, simple interface.
  2. Managing the compile of less and css is much more simple.
  3. Lots of work done and ready for use. Less work for us
  4. Can much more easy to use if used with INCLUDEJS
Cons
  1. Processing the merge and minification is a slow process *1
  2. We need to store the compiled files somewhere and that takes space.
*1 Not that bad. It only happens 1ce per file load per cache purged. In production forums, that only happens 1ce, and usually during the forum tests.
I believe there are more pros and there are cons but... I'm not remembering.

The conversation that started all this

Edit: Times have changed (a bit) and this RFC has been slightly changed to makeup for those new times.
Checkout: Which filters to use?
Last edited by brunoais on Thu Apr 05, 2012 8:40 pm, edited 4 times in total.

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by callumacrae »

brunoais wrote: Good news
I proposed to add an interface for minify in assetic and the maker of assetic accepted me to do it. I just need to code it to get everything ready.
Writing a minifier will take… ages. Did you mean writing one, or adding an existing one?
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by brunoais »

Let me bold that for ya:
callumacrae wrote:
brunoais wrote: Good news
I proposed to add an interface for minify in assetic and the maker of assetic accepted me to do it. I just need to code it to get everything ready.
Writing a minifier will take… ages. Did you mean writing one, or adding an existing one?
I won't write a code minifier, I will write in interface so that a project cas write to another project. In assetic's case, I'll write what is called a filter (in the assetic project).

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by callumacrae »

Turn that into a hyperlink, or give it a capital letter. I thought it was just a grammar error.
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by brunoais »

Is that ok?

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by callumacrae »

Yep :-)

Also, +1 to the RFC (although I haven't actually read it: I'm assuming it's mostly you being verbose about the obvious, though?)
Made by developers, for developers!
My blog

User avatar
imkingdavid
Registered User
Posts: 1050
Joined: Thu Jul 30, 2009 12:06 pm

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by imkingdavid »

brunoais: can you please link to that gist instead of posting that. Shorter gists are fine, but this one is huge and takes forever (aka 1 or 2 seconds) to load each time, and for that time the styling is slightly messed up until it loads.

On topic, I don't see an issue with it, but then again I'm not overly familiar with this kind of thing.
I do custom MODs. PM for a quote!
View My: MODs | Portfolio
Please do NOT contact for support via PM or email.
Remember, the enemy's gate is down.

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by brunoais »

callumacrae wrote: (although I haven't actually read it: I'm assuming it's mostly you being verbose about the obvious, though?)
Hum... Isn't that (kinda) supposed to happen in RFC's?
Also give a fair explanation for the outsiders?

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by Arty »

Bumping this old RFC.

Assetic could be used for much more than just minimizing css/js files. All examples below assume that assets for style are stored in assets/{style_name}/{language}/ (for example, assets/prosilver/en/) which is actual directory where I suggest to store assets.


1. Language specific assets.

Because assets can be language specific and js/css files are compiled, it can be used to:
  • Use language variables in css and js files. For example text for pagination JavaScript.
  • Solve RTL/LTR problem by including only direction specific code in templates, or use variables like this

    Code: Select all

    .foo { margin-{{ left }}: 10px; }
    that would change to margin-left for LTR and margin-right for RTL languages.

2. Style specific assets and styles tree.

Each style can have parent style(s). When compiling assets compiler should copy not only files from current style's directory, but also from parent styles that do not exist in child styles.

For example, we have prosilver and progreen styles. Progreen is a child style of prosilver.

Files in style directories are these:

Code: Select all

prosilver/
    images/
        foo.png
        bar.png
progreen/
    stylesheet.css
    images/
        foo.png
Compiled directory would look like this:

Code: Select all

assets/progreen/en/
    stylesheet.css <-- minimized, compiled
    images/
        foo.png <-- from progreen
        bar.png <-- from prosilver because there is no such file in progreen
That would allow authors of child styles to not copy all images from parent style.
It would allow to remove dynamic location of assets that INCLUDEJS currently does because all files will be in correct directory.

User avatar
EXreaction
Registered User
Posts: 1555
Joined: Sat Sep 10, 2005 2:15 am

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by EXreaction »

Style specific assets should not be under assets/, they should be under style/style name/assets

Post Reply