ne•o•phil•i•ac

Merb provides some useful helpers when developing a web application (not them all though, man I miss the date helper…) and some can be used to help your site align with the best practices for speeding up your website from Yahoo!.

The helpers provide a way to collect the CSS files, Javascript files and blocks of content required specifically for a page. This functionality can be used to easily ensure that all CSS and Javascript in any page of your application are in accordance with the following guidelines:

• 1: Make fewer http requests
• 5: Put CSS at the top
• 6: Put Javascript at the bottom
• 12: Remove duplicate scripts

Below is a stripped down example of a layout (in HAML) of how this can be achieved.

!!!
%html
  %head
  %title My Javascript Best Practice Website
  / 5
  = css_include_tag 'reset', 'screen'
  /1,5
  = include_required_css
  %body
    #content
      = catch_content :for_layout
    #footer
      link_to "About us", "about_us.html"

    / 6
    = js_include_tag 'jquery-1.2.6.min', 'site.js'
    / 1,6,12
    = include_required_js
    - if thrown_content? :javascript
      %script
        == $(document).ready(function() { #{catch_content :javascript} });

The ‘include required’ helpers allows your templates and partials to specify which javascript and CSS files they require. Ensuring that they are always correctly placed (with the CSS at the top and javascript at the bottom) and also removes any duplicates.

The last section of the layout catches any blocks that you throw called ‘javascript’, it is assumed we are using jQuery, so the output is rendered in the document ready function. Again this can be used from any template or partial but when adding content to this you should always favor the append_content method (as throw_content will always replaced what is in the named store).

So with all this in place you can now do things like this:

- require_css '/facebox/facebox.css'
- require_js '/facebox/facebox.js'

= link_to("A facebox", "/content.html", :rel => "facebox")

- append_content :javascript do
  $('a[rel*=facebox]').facebox();

and each of the elements is output in “best” position on the page.

I really like this approach as, other than the benefits of performance, it leads you away from creating or using helpers that spurt out javascript in the middle of the page. I also think it encourages you to think about progressive enhancement early on and jQuery with the throw/catch content helpers provides an easy way to achieve it.