jQuery inclusion

Discussion corner for Developers of Serendipity.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

jQuery inclusion

Post by yellowled »

While I applaud the decision to include jQuery to the core (svn, trunk), I have some suggestions on how to do that. I'm not sure if these are included in Garvins commit since I haven't checked it out live yet due to some New Year's fatigue. :wink:

A. If at all possible, jQuery as well as all other JS should not be included in the <head> but at the bottom of the page, right before the </body> tag, for performance reasons. I realize this might be difficult since a lot of plugins right now include JS files or <script> tags anywhere they please, but I think if we're gonna go this route, we might just as well do it the right way, even if it requires some major changes.

B. I'd also recommend using the local copy as a fallback to a CDN hosted version. Here's an example how to do that taken from Paul Irish's HTML5 boilerplate:

Code: Select all

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>
(Of course, the path to the local copy needs to be adapted to S9y.)

Unfortunately, Google does not offer a way to "always use the latest jQuery", but since we'd have to maintain a local copy of the file anyway ...

YL
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: jQuery inclusion

Post by garvinhicking »

Hi!

1. What's the benefit of that? The admin template does not have a footer event, and I'd like to keep it compatible with as much modifications users might have made.

2. I'd like to not incude the CDN/Google route by default. Some users do not like google, I do not want to enforce a CDN on them by default. If they want the CDN version, we would need to add an option, but IMHO adding an option for that would be bloat. Also, if s9y ever needed to patch things of the bundled jquery lib (god forbid) that would only be possible when using a local version, and not a CDN version. Also, CDN versions get upgraded to minor version bumps, and if ever a problem arises from that we cannot do anything about it, it would just instantly break systems. I'd like to go the safer route...

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: jQuery inclusion

Post by yellowled »

garvinhicking wrote:1. What's the benefit of that? The admin template does not have a footer event, and I'd like to keep it compatible with as much modifications users might have made.
It speeds up (or better: does not slow down) page rendering. If a JS file is placed in the <head>, it will be executed before the HTML/CSS is rendered, which a) can lead to "funny" results and b) blocks parallel downloads/HTTP requests.

See http://developer.yahoo.com/performance/ ... #js_bottom

We might as well want to add some kind of logic to concatenate and compress/minify included JS files, but I have no idea how to that (right now).

YL
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: jQuery inclusion

Post by garvinhicking »

Hi!

Hm, I always thought its required in the head, because otherwise when javscript refers to jquery, it is not loaded and can lead to errors. and, if jquery uses things for onload events, it might generate trouble and "flickering" is introduced?

We would need plugins to be able to execut ejquery everywhere, and I think the only way to provide this is to have it in the head...?!

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: jQuery inclusion

Post by yellowled »

garvinhicking wrote:Hm, I always thought its required in the head, because otherwise when javscript refers to jquery, it is not loaded and can lead to errors.
It doesn't matter where jQuery is included as long as the files which need jQuery are included after the library itself. There are, however, some JS files which need to be included in the head, i.e. Modernizr. But those usually don't need any JS library.
garvinhicking wrote:if jquery uses things for onload events, it might generate trouble and "flickering" is introduced?
I can assure you, it is possible to use jQuery for our usual onload events, even if it is included at the bottom of the page, I actually have a (non-public) example template for that. :)

Which reminds me: we should also replace all inline JS like onload etc. with unobstrusive jQuery stuff placed in an external JS file. (As to "why": it's good practice to seperate structure [HTML], styling [CSS] and behaviour [JS], see http://www.digital-web.com/articles/sep ... ructure_2/)
garvinhicking wrote:We would need plugins to be able to execut ejquery everywhere, and I think the only way to provide this is to have it in the head...?!
Erm, no. :) It might require some changes to some plugins, yes. But there is really no good reason to place any JS somewhere in the HTML of the page.

Almost any JS can be executed after the HTML/CSS has been rendered by the browser. If it's not possible to do that now, the JS in question is very likely not unobstrusive (i.e. the related functionality would not work properly with JS deactivated, which is a huge no-no these days) and should be edited anyway. :)

Yes, there might be the occasional FOUC (flash of unstyled content), but this can usually be fixed with some CSS help.

Seriously, name some examples where the JS needs to be placed in the head or body of the page, I'll take a look at it and try to prove you wrong. :) (Although as I said before, there are a few examples which actually would need to stay in the head.)

YL
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: jQuery inclusion

Post by garvinhicking »

Hi!

I'd need to check that once I have the time; the last time I checked that a year or so ago, placing the jquery code call in the bottom of the code had several issues.

Inline JS costs MUCH less performance than having an external file that requires PHP to load, so we should leave dynamic calls inline where it is better to integrate. Many event hooks gather stuff that woud require JS inline, like the findmore javascriptlets, or whatever. Really, there's a lot of code that justifies that, and no real reason to forbid it apart from korinthenkackerei about how separation is great.

HTML is a glue language, its form should follow function, and you can see by XHTML2 what comes out when people make general statements about what is semantically valid and what not, and how well-formedness should be required, and why this has failed. Just throwing some $0.02 in here ;)

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: jQuery inclusion

Post by garvinhicking »

Hi!

Maybe a more precise example why I'm afraid that jquery code could hurt.

Imagine this dummy code:

Code: Select all

<html>
<body>
<script type="text/javascript">
$('.blabla').hide();
</script>
<div></div>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
wouldn't the browser then give an error about $(...) not working, because the jquery lib is not parsed yet?

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
kleinerChemiker
Regular
Posts: 765
Joined: Tue Oct 17, 2006 2:36 pm
Location: Vienna/Austria
Contact:

Re: jQuery inclusion

Post by kleinerChemiker »

Are we talking about todays s9y or s9y 2.0?

If we are talking about s9y 2.0 I would say, don't carry on too much old ballast. It's not necesary that everything from s9y 1.x works in 2.0, just try that upgrading a plugin or template is easy, meaning that the syntax is similiar and that only some stuff hase to be changed.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: jQuery inclusion

Post by yellowled »

garvinhicking wrote:Imagine this dummy code:

Code: Select all

<html>
<body>
<script type="text/javascript">
$('.blabla').hide();
</script>
<div></div>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
wouldn't the browser then give an error about $(...) not working, because the jquery lib is not parsed yet?
Yes, of course. Which is why one would simply write:

Code: Select all

<html>
<body>
<div></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('.blabla').hide();
</script>
</body>
</html>
(Yes, this would be an example for the FOUC.)

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: jQuery inclusion

Post by yellowled »

garvinhicking wrote:Inline JS costs MUCH less performance than having an external file that requires PHP to load
You know, after all these years, I'm still waiting for a S9y-powered blog to actually have performance issues. :wink:
garvinhicking wrote:and no real reason to forbid it apart from korinthenkackerei about how separation is great
I'm merely advocating what I consider to be good practice here. Also, although I hate to play that card, there are other systems out there that can do without inline CSS and JS, so why can't we?
garvinhicking wrote:HTML is a glue language, its form should follow function
Erm. That's exactly the approach that makes people use stuff like <div class="headline"> instead of <h1> etc. That's the way of argueing which got us constructs like <a ...></a><br /><a ...></a><br /> instead of a proper list element.

Maybe this a topic which should be discussed more hands-on, using actual code in an example environment instead of theoretical discussions whether it might work or not? I mean, we can spend a lot of time discussing this on a meta level, but it might be way easier to just give it a shot. We can still drop it if it doesn't work out, but let's at least give it a try.

YL
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: jQuery inclusion

Post by garvinhicking »

Hi!
Yes, of course. Which is why one would simply write:
Then this is not an option to implement, and we'll put it in the head.
I'm merely advocating what I consider to be good practice here. Also, although I hate to play that card, there are other systems out there that can do without inline CSS and JS, so why can't we?
Which ones? Wordpress has it in the head...
garvinhicking wrote:HTML is a glue language, its form should follow function
Erm. That's exactly the approach that makes people use stuff like <div class="headline"> instead of <h1> etc. That's the way of argueing which got us constructs like <a ...></a><br /><a ...></a><br /> instead of a proper list element.
No, what you are referring to is really something abusive. There is a headline element, so people should use it. But in this JS placement case, putting it before the closing body means losing possibilities and functionality only due to some "higher standard".
Maybe this a topic which should be discussed more hands-on, using actual code in an example environment instead of theoretical discussions whether it might work or not? I mean, we can spend a lot of time discussing this on a meta level, but it might be way easier to just give it a shot. We can still drop it if it doesn't work out, but let's at least give it a try.
Okay, then an example. I'd like to create a plugin that fetches the associated tags to each entry that is displayed on any page. Then I want to use jquery to by default hide all entries on the page that do not have at least 2 tags.

To do this with inline JS would be easy; use PHP code for the entry_display loop to echo a script section that fills in a JS array, and then simply use some javascript if/else structure to utilize a hide/toggle function.

To put this as inline JS into the head is not possible, because frontend_display is executed earlier, so it has no knowledge about the entries that are displayed later on.

To put it into its own external js file is not possible, because the content is dynamic.

But much more important to me is this: With the current solution, you can do either inline or head or whatever else methods - it's up to the authors to adhere to their standards - with your propsed solution, this would make inline scripting quite error-prone.

If you want to create a template that has jquery before the closing body that's okay; you can disable the internal s9y core output (use config.inc.php and simply unset($serendipity['core_events']['frontend_display']['jquery']) and output your own. Of course, this would crash all plugins that would depend on this functionality, so templates like these would only be good to use if you have full control over your own site.

In the end, I also want this because i do NOT want to rewrite every plugin to not use inline scripting, because currently they all just work perfectly fine. Even if we're talking about s9y 2.0 this is a step I don't really think would benefit anyone. The more compatible is still better, which is why the very strict XHTML routines are now abandoned. Why now begin the same war on JS side? JS and PHP are both so popular because they leave so much open to the user, and quick&dirty solutions are possible and easy to use.

Wasn't there also a problem with the google analytics javascript, that in some cases you need to have it in the head for certain functionality?

Regards,
Garvin
YL[/quote]
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: jQuery inclusion

Post by garvinhicking »

BTW: I do appreciate the discussion and your input, you surely do know that. It's just that when implementing new things I foremost think about the user and his possibilities, and not the most "best practice" standard. If it makes things harder or restrictive or error-prone, I'm in yellowled^halert mode. ;-)
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: jQuery inclusion

Post by yellowled »

garvinhicking wrote:Then this is not an option to implement, and we'll put it in the head.
I really don't see why it is not possible to have, i.e., two possible places to emit JS code - one in the head (for stuff which needs to be placed there), one for anything else at the bottom of the page, right after jquery, and instruct any part of S9y which emits JS (can't be that many so far) to put their JS there? (Apart from the fact that plugins need to be rewritten to work with that method, of course. Yes, I am aware that there might be [good] reasons I, being the frontend-only guy here, simply don't see or understand.)
garvinhicking wrote:Which ones? Wordpress has it in the head...
That part was referring to losing inline CSS and JS as far as possible, not where to include external JS files. :)
garvinhicking wrote:But in this JS placement case, putting it before the closing body means losing possibilities and functionality only due to some "higher standard".
Performance is most definitely not a "higher standard", and placing JS at the bottom of the page is all about performance. It's got nothing to do with seperation of structure and behaviour. :)
garvinhicking wrote:In the end, I also want this because i do NOT want to rewrite every plugin to not use inline scripting, because currently they all just work perfectly fine.
Are you gonna use the same argument once we get to rewriting the backend template or getting a new default template? Because the old ones work "perfectly fine" as well. (As a matter of fact, they really don't.)

I'm sorry for being so pushy here, but this is starting to sound very "un-progressive" to me, and I feel that this is a topic where I need to speak up. :)

YL
onli
Regular
Posts: 2830
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: jQuery inclusion

Post by onli »

Remember: Improvements in the browser-behavior will probably take care of the performance for us in that point (html 5 already offers some nice improvments). I also dont think we should optimise here - we want jQuery to be kind of the default for javascript-code used, so let's load it as soon as possible. Or we really needed to have a total seperation of js and html included in the structure of all plugins.

PS: Isotopp had performance-issues with serendipity.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: jQuery inclusion

Post by yellowled »

onli wrote:Improvements in the browser-behavior will probably take care of the performance for us in that point (html 5 already offers some nice improvments).
Please name them -- I have no idea what you're talking about. Besides -- are we even considering switching to HTML5 in the near future, maybe for 2.0? (I'd second that by all means, but I'm not sure the system is ready for that yet. Just think 3rd party stuff like WYSIWYG editors.)
onli wrote:I also dont think we should optimise here - we want jQuery to be kind of the default for javascript-code used, so let's load it as soon as possible.
I really don't see why including it in the head should be related to it being our JS library of choice?
onli wrote:Or we really needed to have a total seperation of js and html included in the structure of all plugins.
I still don't see why that should not be an option, although I'll admit that there might be cases in which it's simply not possible -- however, I don't see or understand those cases since I'm strictly frontend. :)

YL
Post Reply