#232: Resource Registries Improvements

Contents
  1. Definitions
  2. Motivation
  3. Assumptions
  4. Proposal
  5. Implementation
  6. Deliverables
  7. Risks
  8. Progress log
  9. Participants
by Michael Dunlap last modified Jan 21, 2010 07:28 AM

Allow Resource Registries to use conditional comments for CSS to bring the IEFixes.css into the registry and allow external references to resources for all registries.

Proposed by
Michael Dunlap
Seconded by
Florian Schulze
Proposal type
Architecture
Assigned to release
Repository branch
branches
State
completed

Definitions

Conditional Comment
A small string to be included in a conditional comment around the resource. For example, entering simply 'IE' in the field will result in a conditional comment of: <!--[if IE]>...<![endif]--> 
This would be interpreted by IE as something to be processed. All other browsers would see a valid HTML comment and ignore the contents. Another option would be to target a specific version of IE using Microsoft's syntax such as "lt IE7" would only be used by browsers earlier than IE 7. This behavior is currently only enabled for the CSS Registry. For more information see: http://msdn.microsoft.com/en-us/library/ms537512.aspx

Motivation

An Enhancement request in the tracker that I stumbled upon motivated me to become more proactive with the Plone community and the requests for the ability to include external resources in registries (resources not hosted by the Plone site) and have IE conditional comments around CSS resources so that, at a minimum, the IEFixes.css file no longer has to be hard-coded into main_template.

Assumptions

 

Proposal

Coding is already complete and available in two branches:

Patches are also available on the plone tracker:

Implementation

Implementation is already complete. See above.

Example cssregistry.xml entry for IEFixes.css for conditional comments:

<stylesheet title="" cacheable="False" compression="none" cookable="False"
 rel="stylesheet" expression="" id="IEFixes.css" media="all" enabled="1"
 rendering="import" conditionalcomment="IE" />

This would result in the following inclusion in a rendered page:

<!--[if IE]>       
    
      <style type="text/css" media="all">@import url(http://localhost:8080/registryTest/portal_css/Plone%20Default/IEFixes.css);</style>
    
<![endif]-->

Example jsregistry.xml entry for external jQuery library:

<javascript cacheable="False" compression="none" cookable="False"
 enabled="True" expression="" id="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
 inline="False" insert-before="jquery-integration.js" />

This would result in the following inclusion in a rendered page:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>

According to limi, we are actually encouraged to reference single sources for things like javascript as explained in http://ajaxian.com/archives/announcing-ajax-libraries-api-speed-up-your-ajax-apps-with-googles-infrastructure

Deliverables

 The only extra code needed at this point is an additional migration step for CMFPlone to move IEFixes.css into the registry and remove the call to it from main_template.pt

Risks

There are a few risks with introducing new functionality without clear documentation on how to use conditional comments as well as expectations of merging, caching and compression of external resoucres, which in my branches are forcefully disabled and will raise exceptions if bad values are attempted to be set.

Special Case: SSL

SSL presents an additional hurdle to a seamless user experience. Most modern browsers will throw a warning if any resources (javascript, CSS, images, etc) are included without also being retrieved via an SSL connection as well. To that end, external resources would need to be defined twice, once for normal HTTP connections, and a second for SSL connections. An example jsregistry.xml below:

<javascript cacheable="False" compression="none" cookable="False"
 enabled="True" expression="python:request.get('ACTUAL_URL','').startswith('https://')"
 id="https://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"
 inline="False" insert-before="jquery-integration.js" />

<javascript cacheable="False" compression="none" cookable="False"
 enabled="True" expression="python:request.get('ACTUAL_URL','').startswith('http://')"
 id="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"
 inline="False" insert-before="jquery-integration.js" />

Note that the only real difference between them is that the first tests for, and links to https, and the second, only for http. This introduces a bit of redundancy, but helps solve the problem where you can't guarantee that the url for the SSL version of an external resource is the same as the non-SSL resource except for the protocol. The major example of this is in Google Analytics.

Progress log

  • Code complete. It's possible that more tests are required, but I'm not sure how to write them, especially with generic setup.

Participants

fschulze said he would be willing to handle the merging of the two patches provided.

Comments (8)

Alex Limi Aug 05, 2008 12:36 AM
Just wanted to make you aware that Google hosts a lot of the common JS libraries on a redundant, high-speed infrastructure (and it also helps performance to load JS from a separate host as long as the DNS record exists):

http://ajaxian.com/archives[…]with-googles-infrastructure

Once people start using this, the various versions of the JS libraries will even be in a shared cache for different websites, speeding up access even more.

This is another reason why being able to specify external JS is a very cool improvement to ResourceRegistries.

Nice work!
Sidnei da Silva Aug 12, 2008 02:16 PM
(from email discussion)

Since Limi mentioned in a comment on the PLIP that loading CSS and JS
from different hosts can help speeding up the page load, I was
reminded of an idea I had myself:

- Why doesn't the CSS and JS registries allow for specifying
 alternative hostnames for the CSS and JS resources?

So for example, one configures a few hostnames on CSS and JS
registries:

 - r1, r2, r3, r4

Assuming that the current hostname is 'www.plone.org' or 'plone.org',
then CSS and JS are generated as:

 http://r1.plone.org/[…]/ploneStyles4308.css
 http://r2.plone.org/[…]/ploneStyles6933.css
 http://r3.plone.org/[…]/ploneScripts4221.css
 http://r4.plone.org/[…]/ploneScripts5923.css

BTW, while writing this I've just noticed that the CSS's for Plone.org
are being re-validated and getting 304. Supposedly, if you are using
the CSS/JS registries those resources need *NEVER* to be re-validated
because when the resources change, the filename changes too. I believe
you can do that by tweaking CacheFu to not set the Last-Modified
header.
Andreas Zeidler Aug 06, 2008 09:15 PM
+1 (in case i'll still be part of the team for plone 3.3)
Florian Schulze Aug 06, 2008 10:12 PM
+1 from me.

I already reviewed the IE conditional branch. I still have to check out the external includes branch.
Tom Lazar Aug 11, 2008 06:15 PM
+1 from me on both patches.
Raphael Ritz Aug 12, 2008 01:39 PM
+1 on both accounts
Martijn Pieters Oct 27, 2008 02:49 PM
+1
Danny Bloemendaal Oct 27, 2008 03:14 PM
+1