"Modern" Javascript-ingPlone

... how to drink less while doingJavascript in Plone.

/ Rok Garbas @garbas

Products.ResourcesRegistry

orders resources,minimizes,

groups them.

Nothing wrong with it,

right?

Hard to debug

Hard to keep resources up to date.

Nothing / Nada / Niente of our JS is tested.

Tricky for addons to plugin.

Seriously...

We need to get out shittogether!

PLOG pledgeOn my honor, I will try,

To serve Plone community and worship **all** Javascript

Gods,

To write Modular, Tested, Documented Javascript code

And to live by the Girl Scout Law.

ModularJavascript

AMD vs CommonJSScope

Remote/LocalAsynchrony

AMD

CommonJS

// define wrapperdefine( // dependencies are specified in advance. ['modA', 'modB'], // the module is declared within a definition function. // dependencies are mapped into function parameters. function (modA, modB) { // inside here is the module's code. // the module is exported to the outside world via the // the definition function's returned value. var modC = modA + modB; return modC; });

// dependencies specified as neededvar modC = require('modC');

// the module is exported by decorating the `exports` free variable.exports.foo = require('modA') + require('modB');

ResuireJSPaths for network/CDN resources.

Minimize resources.

Optimizing into one lite JavaScript file.

Keepingresources up to

date

JamManage dependencies

"npm" for browserReally nice integration with RequireJS

$ jam install backbone$ jam upgrade$ jam compile compiled.min.js$ jam compile --almond compiled-standalone.min.js

TestingJavascript

Test FrameworksQUnit

JasmineBusterMocha

Test Assertionsexpect.js - Minimalistic BDD-style assertions for Node.JS

and the class="fragment"browser.should.js - BDD style assertions for node.js

better-assert - c-style assert() for nodejs, reporting theexpression string as the error message

Buster, Jasmine -

My assertion library choiceChai is a BDD / TDD assertion library for node and the

browser.chai.should();

foo.should.be.a('string');

foo.should.equal('bar');

foo.should.have.length(3);

tea.should.have.property('flavors').with.length(3);

var expect = chai.expect;

expect(foo).to.be.a('string');

expect(foo).to.equal('bar');

expect(foo).to.have.length(3);

expect(tea).to.have.property('flavors').with.length(3);

var assert = chai.assert;

assert.typeOf(foo, 'string');

assert.equal(foo, 'bar');

assert.lengthOf(foo, 3)

assert.property(tea, 'favors');

assert.lengthOf(tea.flavors, 3);

Test runnersQUnit, Jasmine, Buster, Mocha

TEST'EM

Mockupproject