Zidanca Sprint Report: JS/LESS Integration

After recovering from a hard week of work, thinking and writing/re-writing code, we accomplished an important goal at the Zidanca Sprint—a replacement for Resource Registry adapted to modern front-end development and friendly mockup widgets.

The back history

Mockup project is a great bunch of widgets/ui elements written in less/js using the idea of patterns lib to trigger and configure the widgets with data attributes on the html elements. This elements where compiled on single files using requirejs/grunt/less so it could get a bundle version that can be shipped with plone. The problem of this solution is that is outside plone, you get the bundle and you can't modify it, split, debug. There was a solution to make it closer to plone but you needed a complet setup of mockup repo and every single js that you want to integrate with that needed to be stored on mockup repository.

Some months ago I started a project that needs toons of js/css and we were going to use mockup widgets on it, so I started to feel a lot of pain when I saw that in order to get it working I needed to fork mockup repo, adapt to use a complex grunt configuration and I ended having huge problems integrating mockup with other add-ons, js projects, ... So I thought that if mockup is needed to be on Plone 5 and it needs to be friendly with integrators we need to find a better solution.

On the other hand we needed to find a way to allow people to extend mockup, create its own patterns on their packages and finally make it easier for people to write their code for plone.


At that moment I wrote the PLIP with an initial implementation It's main idea is:

  • As we are using requirejs on mockup for getting the resources and less for css
  • As we are using less on barceoneta theme to create a bunch of files that defines all the parts of the theme
  • As plone uses plone.app.registry to store the configurations
  • Create a plone.app.registry interface to store the bundles/resources. Bundles are a group of resources or one that gets its dependencies. Resources are a group of js/css files that defines a resource (pattern modal : 1 less , 1 js). All these resources have definitions of its requirements ( with requirejs or import less ). Bundles have the expression condition as we will have one css/js element for each bundle
  • Create a config.js and mixins.less browser views that defines the names and urls of all the possible dependencies
  • Define the "oficial" group of external js/css elements that is deployed with Plone and its versions. Creating a bower.json on static folder in Plone and adding the bower components folder on CMFPlone. So if you want to know which jquery version uses Plone5 you have a place at bower.json ( you can always update it at your own risk overwriting the resource jquery )
  • Define a Dev and Production mode on frontend plone. Each bundle will be minified/compiled into a js/css file when you change the status from dev to production
  • Create a nice UI !! ( nathan rocks soo much ! ) Using the patterns library you can see the bundles, resources, modify them, overwrite them TTW, define LESS variables, compile them...
  • Move Tinymce to a oficial version without patches that is already translated and works on different languages. One big task is to move the tinymce control panel to plone 5, Rob did a really great job on it!
  • Define resource configuration, each resource can have a default configuration with json so it can be retrieved
  • Create a legacy importer, we already adapted the jsregistry.xml and cssregistry.xml to import its elements to the new registry
  • Be friendly with the Legacy code, in order to support legacy js/css code that is not requirejs compatible or less, there is a plone-legacy bundle that gets all the resources that are legacy and minimizes/compress it for production

Actual Status

So we could acomplish all our goals, the implmentation is there, it needs the resource registry tests to be adapted to the new one, upgrade steps, documentation, tests on the ui, some edge use cases that need to be tuned (when we should compile legacy code, when you install a package ? when you modify the registry ...)

As the Zidanca sprint was also a plone5 theme sprint, Albert and Victor where working hard integrating all the GSOC with plone5. We needed the toolbar working, we needed the less compilation and all this code is outside of mockup, so we merged our work and actual 13787-maintemplate-remove (I know the name is really bad) PLIP configuration is the actual merge of the latest plone 5 barceloneta theme and this JS/LESS integration.

There is a JK job for this plip.cfg: http://jenkins.plone.org/view/PLIPS/job/plip-main_template-remove/

What needs to be done ??

  1. What we have on global js namespace on plone development mode: jquery and all the legacy code. On development mode requirejs loads the resources when are needed so we will need to change the plaaces where we have inline js/manual script src elements to use require.
  2. Feedback, feedback and more feedback. While we were at Zidanca sprint we were thinking with all the possible use cases (and rewriting the code everytime), trying to be as much BBB as possible and as much js/css tech friendly as possible, but I'm sure that we may miss some problems. So feedback is really important.
  3. Documentation, examples, tests !!!
  4. Plone 4 compatibility, Asko already said that is willing to work on that :) so it would be great to have it on plone 4.

Also checkout Plone 5 Resource Registries, by

Nathan Van Gheem