[Framework-Team] JS/LESS integration - result Zidanca Sprint - Feedback

Ramon Navarro Bosch ramon.nb at gmail.com
Tue Aug 19 08:25:13 UTC 2014

After recovering from a hard week of work, thinking and writing/re-writing
code we acomplish an important goal in Zidanca Sprint, a replacement for
Resource Registry adapted to modern front-end dev and friendly with mockup

*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.

*PLIP* :

At that moment I wrote the PLIP (https://dev.plone.org/ticket/14261) 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

* 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


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 :

*What needs to be done ??*

* 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.

* 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.

* Documentation, examples, tests !!!

* Plone 4 compatibility, Asko already said that is willing to work on that
:) so it would be great to have it on plone 4.

That's all folks!

Ramon a.k.a bloodbare
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.plone.org/pipermail/plone-framework-team/attachments/20140819/9c4dcc17/attachment.html>

More information about the Framework-Team mailing list