1. "Modern" Javascript-ing
Plone
... how to drink less while doing
Javascript in Plone.
Rok Garbas / @garbas

2. Products.ResourcesRegistry
orders resources,
minimizes,
groups them.

3. 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.

4. Seriously...
We need to get out shit
together!

5. PLOG pledge
On 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.

6. Modular
Javascript

7. AMD vs CommonJS
Scope
Remote/Local
Asynchrony

8. AMD
// define wrapper
define(
// 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;
}
);
CommonJS
// dependencies specified as needed
var modC = require('modC');
// the module is exported by decorating the `exports` free variable.
exports.foo = require('modA') + require('modB');

9. ResuireJS
Paths for network/CDN resources.
Minimize resources.
Optimizing into one lite JavaScript file.

10. Keeping
resources up to
date

11. Jam
Manage dependencies
"npm" for browser
Really nice integration with RequireJS
$ jam install backbone
$ jam upgrade
$ jam compile compiled.min.js
$ jam compile --almond compiled-standalone.min.js

12. Testing
Javascript

13. Test Frameworks
QUnit
Jasmine
Buster
Mocha

14. Test Assertions
expect.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 the
expression string as the error message
Buster, Jasmine -

15. My assertion library choice
Chai 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);

16. Test runners
QUnit, Jasmine, Buster, Mocha
TEST'EM

17. Mockup
project