Ramon Navarro Bosch and Rob Gietema: Resource Registries

Current state

js registry, css registry, tools. Register your files in cssregistry.xml and jsregistry.xml. There are limitations. We are missing out:

• js and css have evolved. No one wanted to touch javascript a few years ago and now it is quite fun.
• dependency management was added in the javascript world
• now there is precompiling with less/sass
• versioning
• Mockup to do this in Plone.

Other tools

• RequireJS: you include require.js, add all your dependencies in javascript, asynchronous loading of files and modules.
• grunt: task runner, run tests, concat, minimize, jshint, etc. Kind of like a Makefile, but more suited for Javascript.
• npm: nodeJS server based package management tool, dependencies, versions.
• Bower: same thing on client side.

Less/sass: precompilers for css, variables, nesting, macros.

Design of the solution

• Diazo on top of static html
• bundle, resource, registry

Bundles are the main resources, loaded in dependency order. They can have js and less files that are compiled. You can enable/disable a bundle. There is a special legacy bundle with the old stuff as you are used to in current Plone 4.

Resource: defines the js, any needed export/init code, css, url. All defined in the Plone configuration registry.

Define Less variables, in the config registry record plone.lessvariables. For example define your own favorite plone-link-color.

Pattern options, for example for the pickadate widget.

Development versus production

• Compile on browser on each reload using RequireJS/Less.
• Develop static html with compiled bundles for testing
• Grunt using browser config.js/mixins.less.

Diazo

You can now say which bundles are enabled.

Views

• config.js has requireJS config.
• less-variables.js: has the standard less variables.
• plone.less: import files, patterns
• plone.js: requires the files.

This all is fully customizable through the web.

Legacy Plone: cssregistry.xml and jsregistry.xml still work. You probably want to convert it though. There are some incompatibilities: there is no ordering in the new stuff, only dependencies. So you may need to tweak a bit.

generate_gruntfile.py extracts all the information from the resource registries and creates a Gruntconfig.js file so you can test it on a static site.

A new Plone 5 site uses production settings for the theme. For development you obviously want to put it in development mode in the Site Setup. You can edit files through the web, have it compile and see the changes.

Migration

• Define resources as pattern and less file.
• Always generate production bundle.
• Move jsregistry.xml and cssregistry.xml to registry.xml.
• On/live jquery 1.11 modifications.
• Never loose hope.

See a plone.app.mosaic branch for the changes I did for migrating that package. It took me less than one hour to migrate.

More information: http://www.nathanvangheem.com/news/plone-5-resource-registries

We are going to sprint on this.

Watch the video of this talk.