Unobtrusive JavaScript

[bumble.bee]

According to this blog: http://cagataycivici.wordpress.com/2009 ... usive-jsf/ PrimeFaces attempts to follow unobtrusive JavaScript practices, but I think there is room for improvement.

In particular, inserting a <script> tag after each PrimeFaces component is mixing behavior with presentation. It would be much cleaner to place all component initialization JavaScript in a JavaScript file and then update the page load / Ajax logic of PrimeFaces to call initialization code as needed.

[Oleg]

That's a good point bumble.bee.

Actually as library developer I would try to do the following thing in every renderer class: Check if current request is an ajax request ==>
1) Yes ==> No changes to the existing code is needed
2) No ==> Put script markup without surrounding <script> tag as one string to a special request scoped list. Overwrite BodyRenderer which gets this list and output all added scripts into just one <script> tag close to the body tag.

Advantages: we have just one <script> at the end (should be faster evaluated than many small <script>'s ) and all JS files can be attached to the body too (should cause faster page rendering). The good news: you can try to this without touch PrimeFaces. Just overwrite BodyRenderer and ResponseWriter where you check writer.startElement("script", null); (to recognize scripts and gather them separately).

What do you think?

[bumble.bee]

You might be able to have zero script tags.

What if in one of the included JavaScript files you have a jQuery ready function that scans for PrimeFaces components and calls their init functions?

The component renders can use HTML5 data attributes to store component configurations: http://www.w3.org/TR/html5/elements.htm ... attributes

[Oleg]

Hmm... Embedded HTML5 data or jQuery data (obj.data(key, value)) is a good idea, but scanning of PrimeFaces components would take a time. No, scanning is not a good idea in my opinion One <script> tag at the page's end seems to be better for me.

[bumble.bee]

Scanning (traversing the DOM) is pretty much essential to unobtrusive JavaScript.

I doubt the performance implications are prohibitive since jQuery is constantly traversing the DOM and seems to work just fine.

[Oleg]

Hmm... If you write a <script> tag at the end, you write init functions in the right order - the order is the same as now with multiply <script> tags. But how do you know the order of components to be scanned if you traverse through the DOM? Or do you think it's not important? I have experience that it's important. Furthermore external JS files are difficult for debugging. Inline script is better for debug purposes.

[bumble.bee]

Generally if order of initialization is an issue then you create a function which does the initialization and bind that (http://stackoverflow.com/questions/2902 ... ith-jquery).

PrimeFaces itself can be responsible for creating this "master" init function and it can order the events based on a new optional attribute associated with each component such as "init-order" (integer); giving the user control of init order (if this is even necessary).

[tandraschko]

What about writing an component (for example: p:collectScripts) and an ResponseWriterWrapper.
Then collect all scripts and render all scripts for the childs of this component?
Is this possible?
What about ajax updates then?

[cagatay.civici]

My concern is ajax updates, when PF updates a component, it evals the script as well which almost every PF component renders along with markup.

What we can do is to buffer the script part(StringBuilder?) of components to RequestContext.execute(script here) on ajax updates and for initial load on head section.

Let me do a proof of concept after M3, as a fan of unobstrusive javascript, I'd like to take it to the next step as well with this enhancement.

[tandraschko]

All right, great!