Franco Pellegrini and Johannes Raggam: Ready, set... Mockup!

This is about Plone's new front-end library. Mockup is a framework for adding Javascript functionality from other libraries to Plone. Will be part of Plone 5.

For example the 'moment' pattern:

some date

That will output a nicer date using the client browser language.

Currently, on Plone 4.3, we are still developing js as if it were 2004. 41 Javascripts registered in a default site. The resource registries have a packer functionality, with last commit from 2009. Maybe not so good anymore. No tests.

History of mockup. Based on Patternslib, created by Cornelis Kolbach and Wichert Akkerman and others in 2011. Forked by Rok Garbas in 2012, split up in Mockup and Mockup core in December 2013. plone.widgets and plone.app.widgets by Nathan van Gheem in November 2011, an attempt to bring more modern UI to Plone.

Build environment:

• Yo: used to generate base skeleton
• Grunt: comparable to buildout for js
• NPM: node package manager
• Front end: RequireJS.
• Testing: Karma, Mocha, ExpectJS/CHAI

[Showing some code.]

We made a generator for mockup:

npm install -g generator-plonemockup
yo plonemockup

Then you answer a few questions and you get a base pattern.

Now do some coding and call make and it will minify, create a bundle, etc.

There is a training that you can follow online:

http://mockup-training.readthedocs.org

Alternatives:

• Patternslib is still being developed and is of course similar to Mockup due to the shared history.
• Web components, w3c draft. Some experimental projects, Google Polymer, Mozilla X-Tags. Limited browser compatibility. Status: html templates is completed, shadow dom and html imports are in draft.
• AngularJS directives are similar to Mockup. Angular is full stack framework. It will switch to Web Components once it is ready. Hard to migrate Mockup to using AngularJS of course.

Our opinion about Mockup: great framework, big improvement to current situation, nice workflow, but uncertainty about future, maybe Angular could be better. Open space tomorrow at 11:00.

Audience: mockup (or patternslib) is an abstraction layer, Angular is something really different. Don't use Angular as base for the Plone JS. We have to get the whole community into thinking 'Javascriptish', really push it into the head of more developers. It is actually pretty easy to change a Mockup pattern into a Patternslib pattern or the other way around. Changing a date picker pattern into a different one? Not so difficult either. Not enough people are currently feeling secure developing with Mockup, but that will come.

Watch the video of this talk.