[RFC|Merged] Include and use jQuery (originally for 3.2)

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
Post Reply
User avatar
RMcGirr83
Registered User
Posts: 357
Joined: Fri Mar 09, 2007 1:51 am
Contact:

Re: [RFC|Accepted] Include and use jQuery

Post by RMcGirr83 » Mon Apr 25, 2011 7:16 pm

If a user installs, eg prototype, that may take control of the $ that is used throughout the code now from jQuery. Maybe set a var of, eg

Code: Select all

var $phpBB = jQuery;
:?:

Just tossing stuff out there Igor.
Do not hire Christian Bullock he won't finish the job and will keep your money

User avatar
igorw
Registered User
Posts: 500
Joined: Thu Jan 04, 2007 11:47 pm

Re: [RFC|Accepted] Include and use jQuery

Post by igorw » Mon Apr 25, 2011 11:53 pm

I'll consider doing that:

Code: Select all

(function($) {

    // ... our code

})(jQuery);
If manage to get our inline javascript fully moved to external files this will be a lot easier too.

Thanks!

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC|Accepted] Include and use jQuery

Post by Oleg » Tue Apr 26, 2011 2:59 am

In the meantime I think we should spell out jQuery() instead of $().

Consider using jquery-min.js for the minified version.

I don't very much like the idea of including jquery on every page. The pages that need it should indicate so using some method, and it should only be included if it is needed. Unless over, say, 2/3 of the pages need it.

Which versions of jquery is our code compatible with? If there is a security release in 1.5.x branch can we update? If there is an unfixed security issue in 1.5 can we update to 1.6? 2.0? Consider including a prefix of version number into jquery(-min).js file name to indicate the acceptable update versions.

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: [RFC|Accepted] Include and use jQuery

Post by VSE » Tue Apr 26, 2011 5:20 pm

Some jQuery optimization tips for faster and efficient use (may be known to most of you, but I thought it worth mentioning):

1. Do not use classes as the only selector, instead cascade down from ids and/or tags
Selecting by classes is much slower than by IDs or even by html tags.
  • $('.some_link') is very slow because every single HTML tag on the page is searched for this class
  • $('a.some_link') is better, now only every <a href> tag is searched for this class
  • $('#myDiv a.some_link') is best, because now only <a href> tags inside MyDiv are searched for this class
2. Cache selectors if they are to be used more than once.
This example is no good, because the element MyDiv has to be searched for twice:

Code: Select all

$('a.open').show('#MyDiv');
$('a.close').hide('#MyDiv');
Instead, we search for MyDiv once, cache the result, like this:

Code: Select all

var targetDiv = $('#MyDiv');
$('a.open').show(targetDiv);
$('a.close').hide(targetDiv);
3. Chain jQuery functions being applied to the same selector whenever possible.
Instead of this:

Code: Select all

$('#MyDiv').show();
$('#MyDiv').html('hello world');
Do this:

Code: Select all

$('#MyDiv').show().html('hello world');
Has an irascible disposition.

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC|Accepted] Include and use jQuery

Post by Oleg » Fri Apr 29, 2011 3:18 am

An idea from the template engine pull request: if dE() is desired, put it into a compat.js file that modifications can request.

User avatar
RMcGirr83
Registered User
Posts: 357
Joined: Fri Mar 09, 2007 1:51 am
Contact:

Re: [RFC|Accepted] Include and use jQuery

Post by RMcGirr83 » Fri Apr 29, 2011 9:36 am

Code: Select all

$('#MyDiv').show().html('hello world');
:?:

Code: Select all

$('#MyDiv').show('fast',function(){$(this).html('hello world');});
Do not hire Christian Bullock he won't finish the job and will keep your money

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 788
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC|Accepted] Include and use jQuery

Post by hanakin » Fri Apr 29, 2011 10:34 pm

also not sure if you noticed igorw but I started to make some conversions for some features already in the scripts folder of my theme that you can use for reference. not all of them were fully working but some were. that way you don't have to complete reinvent. I can send it to you over msn if you want or you can find it under the backup version under scripts labeled "phpbb.fn.jquery.js" on git.

User avatar
igorw
Registered User
Posts: 500
Joined: Thu Jan 04, 2007 11:47 pm

Re: [RFC|Accepted] Include and use jQuery

Post by igorw » Fri Apr 29, 2011 10:48 pm

VSE+ wrote:Selecting by classes is much slower than by IDs or even by html tags.
Well, CSS is matched from right to left, so some of those may even be slower in some cases.

The suggestions are good, but for phpBB3's use of JavaScript it's barely significant. If something really is sluggish then we can do some performance optimizations there.
nn- wrote:In the meantime I think we should spell out jQuery() instead of $().
I'd rather encapsulate in a closure than writing jQuery all over the place.
Consider using jquery-min.js for the minified version.
Any specific benefits except that it's more descriptive? People may want to switch it out to non-minified for dev purposes.
I don't very much like the idea of including jquery on every page. The pages that need it should indicate so using some method, and it should only be included if it is needed. Unless over, say, 2/3 of the pages need it.
Will analyze this, but it's being cached, so probably not all that bad. And it adds a burden to MOD authors, so needs to be carefully considered I suppose.
Which versions of jquery is our code compatible with? If there is a security release in 1.5.x branch can we update? If there is an unfixed security issue in 1.5 can we update to 1.6? 2.0? Consider including a prefix of version number into jquery(-min).js file name to indicate the acceptable update versions.
I'm not very familiar with the API history of jQuery. But I believe there have been hardly any API breakages so far. Thus, I would suggest sticking with the latest 1.x. I'm not really a fan of having the version in the file name, because it means you have to change it in several places when a new version comes out.
An idea from the template engine pull request: if dE() is desired, put it into a compat.js file that modifications can request.
Yes, paul already suggested that and it's a good idea.

@RMcGirr83 mind to explain? What's the difference / benefit?

Thanks for the feedback so far everyone.

User avatar
RMcGirr83
Registered User
Posts: 357
Joined: Fri Mar 09, 2007 1:51 am
Contact:

Re: [RFC|Accepted] Include and use jQuery

Post by RMcGirr83 » Sat Apr 30, 2011 12:57 am

igorw wrote:@RMcGirr83 mind to explain? What's the difference / benefit?
As I understand it, which may be totally incorrect, in this way

Code: Select all

$('#MyDiv').show().html('hello world')
show will happen, then .html for "hello world"

in this way

Code: Select all

$('#MyDiv').show('fast',function(){$(this).html('hello world');});
html happens prior to show occurring.

As I said that is the way I understand it which may, or may not, be correct and it may be minutia anyway. Being a Dev the choice is, ultimately, yours. ;)
Do not hire Christian Bullock he won't finish the job and will keep your money

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 670
Joined: Mon Mar 08, 2010 9:18 am

Re: [RFC|Accepted] Include and use jQuery

Post by VSE » Sat Apr 30, 2011 2:37 am

RMcGirr83 wrote:
igorw wrote:@RMcGirr83 mind to explain? What's the difference / benefit?
As I understand it, which may be totally incorrect, in this way

Code: Select all

$('#MyDiv').show().html('hello world')
show will happen, then .html for "hello world"

in this way

Code: Select all

$('#MyDiv').show('fast',function(){$(this).html('hello world');});
html happens prior to show occurring.

As I said that is the way I understand it which may, or may not, be correct and it may be minutia anyway. Being a Dev the choice is, ultimately, yours. ;)
Jeez Louise, I was just trying to show an example of chaining to avoid multiple selector calls... You didn't have to jQuery police me :lol:

So better yet, I'll just refer one of the many jQuery best practices listings:
http://www.tvidesign.co.uk/blog/improve ... -tips.aspx
In particular, Rules 5 through 10
Has an irascible disposition.

Post Reply