Ready, set... Mockup!

About Plone's new Frontend library.




Plone Conference 2014, Bristol
Authors: Franco Pellegrini & Johannes Raggam



Printview for PDF Export


$ who

Franco Pellegrini

Johannes Raggam

Franco Pellegrini

Franco Pellegrini is a software developer from Cordoba, Argentina. He started developing Plone in 2005 in a small software company, and as an independent contractor since 2011. He believes in free software philosophy, and so, he has been a Plone core developer since 2010 and Framework Team member since 2012.

Johannes Raggam

Johannes Raggam from Graz/Austria works most of the time with a technology stack based around Python, Plone, Pyramid and Javascript. As an active Open Source / Free Software developer he believes in the power of collaborative work. He is BlueDynamics Alliance Partner and Plone Core Contributor since 2009 and member of the Plone Framework Team since 2012.

Mockup?

Mockup is a framework for adding JavaScript functionality from other libraries to DOM Elements of a site, while enforcing best standards for reproducible and stable behavior.
Mockup is also the new frontend library for JavaScript development, which is going to be used in plone.app.widgets and Plone 5.

Example

Example: moment.js pattern

2014-10-30T15:10:00
October 30th 2014, 3:10:00 pm

$ cat HISTORY.rst

CURRENT STATUS

  • Developing as if it were 2004
  • 41 Javascript files registered on a fresh Plone 4.3
  • 7 Disabled
  • New releases of Javascript libs require new releases of packages
  • You cannot do Javascript in Plone unless you are a Plone developer

Resource Registry

Errors

No tests

Patternslib

  • By Cornelis Kolbach, Wichert Akkerman et al in Jul 2011
  • Conceptual parent of Mockup
  • Addresses same problems
  • Solves it the same way
  • ... just differently (implementation details)

plone.app.widgets

  • plone.widgets and plone.app.widgets by Nathan Van Gheem in Nov 2011
  • Attempt to bring more modern UI elements to Plone core
  • First versions not based on Mockup nor Patternslib
  • Moved to Pattern based structure in Jan 2013
  • Based on Mockup since Jan 2013

Mockup

  • Mockup forked from Patternslib by Rok Garbas in Dec 2012
  • Split up in Mockup and Mockup Core in Dec 2013

Toolset

Build environment

  • YO - Used to generate a basic skeleton
  • GRUNT - Used to build, preview and test, by defining tasks
  • NPM - Node's package manager
  • BOWER - Package manager for frontend libs

Frontend toolset

  • RequireJS - Module definition and dependency management
  • and any other JS library we want to use in Plone


See: plone.github.io/mockup

Testing

  • KARMA - Test runner plugin
  • MOCHA - Test framework
  • Expect JS / CHAI - Assertion library

example / 2

Example: moment.js pattern

2014-10-30T15:10:00
October 30th 2014, 3:10:00 pm

Pattern Implementation / 1


define(['jquery', 'mockup-patterns-base', 'moment'],
function($, Base, moment) {
  'use strict';
  var Moment = Base.extend({
    name: 'moment',
    defaults: {format: 'MMMM Do YYYY, h:mm:ss a'},
    init: function () {
      var self = this,
          $el = self.$el,
          format = self.options.format;
      // TODO: do something
    }
  });
  return Moment;
});
            

Pattern Implementation / 2


define([
  'jquery',
  'mockup-patterns-base',
  'moment'
], function($, Base, moment) {
  'use strict';

  var Moment = Base.extend({
    name: 'moment',
    defaults: {
      // selector of elements to format dates for
      selector: null,
      // also available options are relative, calendar
      format: 'MMMM Do YYYY, h:mm:ss a'
    },
    convert: function($el) {
      var self = this;
      var date = $el.attr('data-date');
      if (!date) {
        date = $.trim($el.html());
      }
      date = moment(date);
      if (!date.isValid()) {
        return;
      }
      if (self.options.format === 'relative') {
        date = date.fromNow();
      }else if (self.options.format === 'calendar') {
        date = date.calendar();
      } else {
        date = date.format(self.options.format);
      }
      if (date) {
        $el.html(date);
      }
    },
    init: function() {
      var self = this;
      if (self.options.selector) {
        self.$el.find(self.options.selector).each(function() {
          self.convert($(this));
        });
      } else {
        self.convert(self.$el);
      }
    }
  });

  return Moment;

});
            

Testing a Pattern


define(['expect', 'jquery', 'mockup-registry', 'mockup-patterns-moment'],
function(expect, $, registry, Moment) {
  'use strict';
  window.mocha.setup('bdd');
  $.fx.off = true;
  describe('Moment', function () {
    it('test parse relative', function() {
      var date = new Date();
      date.setMinutes(date.getMinutes() + 2);
      var $el = $('
' + date + '
'); registry.scan($el); expect($el.html()).to.equal('in 2 minutes'); }); }); });

GENERATOR-PLONEMOCKUP

Uses YEOMAN


                $ npm install -g generator-plonemockup
                $ yo plonemockup
            

GENERATOR-PLONEMOCKUP

After answering a couple of questions

            ├── bower.json
            ├── config.js
            ├── dev
            │   ├── dev.html
            │   └── dev.js
            ├── Gruntfile.js
            ├── js
            │   ├── bundles
            │   │   └── myproject.js
            │   └── patterns
            │       └── mypattern.js
            ├── less
            │   └── myproject.less
            ├── package.json
            ├── README.md
            └── tests
                ├── config.js
                └── pattern-mypattern-test.js
            

GENERATOR-PLONEMOCKUP


            $ grunt
            
  • New build directory.
  • Everything you need to include in your site is in there

TRAINING

http://mockup-training.readthedocs.org/

Mockup Alternatives

Patternslib

  • Similar in concept like Mockup
  • Mockup got inspired by Patternslib
  • Mockup registry nearly the same as the one from Patternslib
  • Combined effort would be great, but ...

Web Components



Once the Standard is completed and implemented by all major Browsers, we should switch Mockup's implementation to it.

Angular JS Directives

  • Directives similar to Mockup
  • Angulas is a full stack JS Framework
  • Angular will switch itself to Web Components once it's ready

Our opinion

Great framework, big improvment, nice workflow. But uncertainty about future.

Your opinion?

That's all, folks!