Modern Domino: Resource Consolidation

I’ve recently been introduced to a static site generator called Middleman. This is a platform for assembling and demoing a site mockup. To see some examples head over to wrapbootstrap.com. When you “build” a middleman site it consolidates all of the js and css files into just 2, well actually you still need all the files from your various plugins and css files but you only include the 2 files in the resources of your XPage.

Middleman also allows you to minify or not all of the files you’ve included. During the development process include the un-compressed versions of all your plugins and don’t enable the minify feature for the build process. This allows for maximum troubleshooting capabilities which is always a welcome feature. Once you’re done with getting your plugins working, “build” your site with the minify feature turned on and all of your javascript and css files are now minified just like a good web developer should do.

We’re using jQuery with quite a few plugins and bootstrap:

  • Select2
  • Bootstrap Editable
  • xCharts
  • touchTouch
  • fullCalendar
  • gritter
  • iCheck
  • d3
  • font-awesome
  • etc
  • etc

All of these plugins include their own css files, images, js files, etc. Now we could include all of these files individually in our XPage site, but that would be a waste of time and bandwidth. Not to mention would probably affect performance, which is always a bummer. Middleman allows us to compile all of these plugins into just 2 files which will be included into our site. All of the plugin files, css, images, fonts, etc are still needed but are referenced when needed.

To accomplish this feat of magic you define 2 files. One for your js files and another for your css files. I called mine application.js and application.css. In these files you reference all of the js and css files you want to include in your site. You can even write javascript to handle initialization of these plugins based on custom css classes or to define custom widgets, etc.

The biggest drawback to this method is the installation of Middleman. It requires Ruby and RubyGems which are included with OSX but I still had a real problem getting it installed. I worked on it off and on over a few weeks in-between tasks until I finally found this article which got me the farthest in the install. Once installed then the fun begins putting together all of your resources and learning how to use Middleman. Middleman is a command line utility and includes some really cool features if you’re putting together a demo site. Honestly, for our purpose all these features aren’t really used, we’re just interested in the consolidation and minification of resources.

While the installation of Middleman is a real undertaking (at least for me it was, your mileage may vary) the results are really nice. If you need to debug you can not minify everything and have access to all of the javascript and css in one place. If you are using a lot of plugins this is the perfect way to knock down the size of the resources and effort to include all of those plugins. It also allows you to define your own widgets and how to handle things based on custom css classes. So take a look, you might find something useful and start using a modern technique for consolidating your resources.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: