$ 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?

Example

Example: moment.js pattern

2014-10-30T15:10:00

$ 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

Testing

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

example / 2

Example: moment.js pattern

2014-10-30T15:10:00

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 = $('

GENERATOR-PLONEMOCKUP

                $ npm install -g generator-plonemockup
                $ yo plonemockup
            

GENERATOR-PLONEMOCKUP

            ├── 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

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

• W3C Draft
• Experimental Projects: Google Polymer, Mozilla X-Tags
• Limited Browser compatibility: X-Tags better than Polymer
• W3C Current status
  • Completed: HTML Templates
  • Draft: Shadow DOM, HTML Imports

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

Your opinion?