Asset management

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Asset management

Post by callumacrae »

The phpBB front-end needs a few changes to a) join us in the current decade and b) become performant. Currently it takes ~2secs to load over a 3G connection—which is pretty good, but it's only because there aren't many images—we are doing pretty much everything else wrong.

A few things that need doing:

- CSS should be concatenated and minified.
- JS should be concatenated and minified.
- Icons and smileys should be a spritesheet.

A few things that can be done to make development easier:

- Autoprefixer can be used to make sure we don't have to worry about browser prefixes.
- rem fallbacks can be added automatically—adding them manually defeats the point, is ugly, and is maintainability hell.
- Linting tools can be ran without needing to install editor plugins, and it can also be ran on Travis.
- ∞

These are all things that can be done by a build tool such as Gulp. Some of them can be done using Assetic or a build tool like Phing, but these are not tools written by front-end developers, so they're usually out of date or don't let you do as much as the JavaScript equivalents.

While Gulp would definitely be better for the front-end bits of phpBB, it does add a dev dependency to the project.

Code: Select all

# Install Node.js and nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash
nvm install 0.12

# Install dependencies
npm install -g gulp
npm install
That would just be during development, though—users wouldn't have to have Node or Gulp installed.
Made by developers, for developers!
My blog

Nicofuma
3.2 Release Manager
3.2 Release Manager
Posts: 299
Joined: Sun Apr 13, 2014 1:40 am
Location: Paris

Re: Asset management

Post by Nicofuma »

There is two things to consider:
  • In any case we will ever add a required dependency to a frontend dev tool. So you need to propose something that make these tools optional for the contributor. (You should be able to install a dev board without having to deal with these tools).
  • The board admin should be able to tweak his board. So we need to also ship a not minified version of the CSS and JS
Member of the phpBB Development-Team
No Support via PM

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

Re: Asset management

Post by callumacrae »

Nicofuma wrote: [*] In any case we will ever add a required dependency to a frontend dev tool. So you need to propose something that make these tools optional for the contributor. (You should be able to install a dev board without having to deal with these tools).
The only way for that to be possible is to commit the compiled code. That's possible, but it's a bit ugly, and if a malicious contributor makes a change to the compiled code, we probably wouldn't notice (although it would be overwritten the next time the build tool was ran).

I guess that it would probably be a good idea for phpBB, though.
Nicofuma wrote: [*] The board admin should be able to tweak his board. So we need to also ship a not minified version of the CSS and JS
For sure. That's easily possible.
Made by developers, for developers!
My blog

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Asset management

Post by DavidIQ »

For a) just run as part of the packages preparation the minifier then, sort of like what gets done for the Composer dependencies.
Image

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

Re: Asset management

Post by brunoais »

That's actually not new.
https://area51.phpbb.com/phpBB/viewtopi ... 08&t=42665

Except the above went into empty pockets because it wasn't getting enough or properly meaningful feedback.

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

Re: Asset management

Post by brunoais »

Additionally, I think that it should be phpBB (or anything in the vendors) what minimizes and concatenates the js and css files for use.
I had already proposed assetic... I even made some PR to add the functionality that would be useful to phpBB (it's still there).
We probably can go back to that one. We will need to change how the assets are handled, though... I had some ideas and some code fragments for phpBB 3.0 (or was it 3.1 already...) but they never saw the light of day outside my PC.

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

Re: Asset management

Post by callumacrae »

This is a more generic topic. I would prefer to use Gulp because you can do more stuff with it and the dependencies are more up to date. We have people writing minifiers written in Node.js backed by huge companies like Google and Yahoo, and PHP minifiers written by… some dude in his spare time.

I'm fine with Assetic, but we won't be able to do anywhere near as much with it.
Made by developers, for developers!
My blog

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

Re: Asset management

Post by brunoais »

What do we really need or could use of that the tools made in javascript provide in special, actually?
There's really not much to do in the end and I don't get why so much fuss. Yes, we can use such thing and it is useful but it is not even near rocket science.
All we need is:
  1. Concatenate all meaningful js files in order.
  2. Do a reasonable minification of the js code (optionally, a good minification).
  3. Make a gzip version of the js to use when the browser supports it.
  1. Concatenate all meaningful css files in order.
  2. Do a reasonable minification of the css code (optionally, a good minification).
  3. Make a gzip version of the css to use when the browser supports it.
Obviously, a good minification is always better but... Do we actually win anything noticeable with that with the amount of CSS and js we have in phpBB?
You tell me the same about jQuery and other things you use. I think the only one that makes sense to squeeese any byte you can is with code we use as a black box.
As you are OK with it, I won't argument more unless if I see it necessary. I think you got the idea.

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

Re: Asset management

Post by callumacrae »

brunoais wrote:What do we really need or could use of that the tools made in javascript provide in special, actually?
I actually made a topic with a list of things, you should check it out!

Oh yeah, it's this one.
Made by developers, for developers!
My blog

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

Re: Asset management

Post by callumacrae »

I can't find any intelligent minifiers for assetic that haven't been abandoned, could you link me to one please?

Symfony are recommending using UglifyJS and UglifyCSS, which are both written in Node.
Made by developers, for developers!
My blog

Post Reply