PLOG - Modern Javascripting with Plone
1 like762 views
The document discusses modernizing JavaScript development in Plone by making code more modular, tested, and maintainable. It promotes writing JavaScript using AMD or CommonJS module patterns and managing dependencies and updates with tools like RequireJS and Jam. The document also advocates for writing tests with frameworks like QUnit, Jasmine, Buster, and Mocha and using an assertion library like Chai or should.js. Testing, modularization, and dependency management are presented as ways to improve code quality, make debugging and updates easier, and allow add-ons to integrate more seamlessly.
![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');](https://image.slidesharecdn.com/plog-130409085539-phpapp02/85/PLOG-Modern-Javascripting-with-Plone-8-320.jpg)
PLOG - Modern Javascripting with Plone
- 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.
- 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
- 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