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 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: moment.js pattern

Put this in DOM tree

2014-10-30T15:10:00




Get this rendered

October 30th 2014, 3:10:00 pm

Patternslib

Tool for designers to add JavaScript functionality to templates without coding JavaScript



  • Web: patternslib.com
  • Code: github.com/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

Modern UI Elements for the Plone CMS



Mockup

A Patternslib fork with a slightly different concepts and structures



  • By Rok Garbas in Dec 2012
  • Split up in Mockup and Mockup Core in Dec 2013
  • Mockup: Generic but also some Plone specific patterns
  • Mockup Core: Generic infrastructure. Not Plone specific
plone.github.io/mockup

Build environment

  • GRUNT - Taskrunner to build, preview and run tests, ...
  • BOWER - Package manager for frontend libs
  • YO - Scaffolding to generate new patterns
  • LESS - CSS Preprocessor

Frontend toolset

  • RequireJS - Module definition and dependency management
  • jQuery - DOM API
  • Backbone - MVC framework, used by some patterns
  • lodash - Alternative underscore implementation


And any other JS library you want to use...

Testing

  • KARMA - Test runner plugin
  • MOCHA - Test framework
  • Expect JS - Assertion library
  • Sinon JS - Test spies and mocks

Example: moment.js pattern

DOM tree

2014-10-30T15:10:00




Rendered

October 30th 2014, 3:10:00 pm

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 = $('<div class="pat-moment" data-pat-moment="format:relative">' + date + '</div>');
      registry.scan($el);
      expect($el.html()).to.equal('in 2 minutes');
    });
  });
});
              

Patternslib

  • Similar in concept like Mockup
  • Mockup got inspired by Patternslib
  • Mockup registry nearly the same as the one from Patternslib
  • Combining efforts is planned!

Web Components



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

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

Web Resources