Jan-Jaap Driessen - Fanstatic: handling javascript and css with ease

Jan-Jaap Driessen talks about fanstatic: handling javascript and css with ease, at the Plone conference 2012.

Loading resources (CSS and javascript) correctly and quickly can be hard. Which resources are needed on a specific page? How can you cache them correctly? You often get too many resources.

I see myself writing more and more javascript. Wouldn't it be cool if we treat our javascript, css, images as components, not just as simple files. Make them installable, give them dependency management. Collect them, load only the ones you really need. You can now easy_install about eighty js.* packages. Using entry points they know about each other. from js.jquery import jquery.

# Import a fanstatic resource:
from mypackage import my_email_validator

class MyWidget:
    ...
    # Make sure it gets loaded.
    my_email_validator.need()

You get flexibility of where and how to load the resource: put it at the top or bottom, maybe inserts the contents.

You can offload the work from the application server. Use WSGI to put this earlier in the pipeline and serve the files from the filesystem.

It is now zope "free". It has deep history in zope though, like hurry.resource. You can use it in grok, zope3, pyramid, django, webcore.

We have some bonuses:

• modes: give me the debug mode or give me the minified mode.

• caching: development versus production. You get a unique string for the datetime or with an md5 hash so caching can be done very strict.

• you can bundle resources:

  fanstatic/mypackage/:bundle:my-email-validator.js;my-password-helper.js
  

  Watch out for relative paths in your css though.

• You can also tell fanstatic to use a static server on a different domain, like static.example.org.

If you look at the performance guidelines from yahoo, a lot of stuff is already done by fanstatic.