PLOG - Modern Javascripting with Plone

983 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
983
On SlideShare
0
From Embeds
0
Number of Embeds
134
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

PLOG - Modern Javascripting with Plone

  1. 1. "Modern" Javascript-ing Plone... how to drink less while doing Javascript in Plone. Rok Garbas / @garbas
  2. 2. Products.ResourcesRegistry orders resources, minimizes, groups them.
  3. 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. 4. Seriously...We need to get out shit together!
  5. 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. 6. ModularJavascript
  7. 7. AMD vs CommonJS Scope Remote/Local Asynchrony
  8. 8. AMD// 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 modules code. // the module is exported to the outside world via the // the definition functions returned value. var modC = modA + modB; return modC; }); CommonJS// dependencies specified as neededvar modC = require(modC);// the module is exported by decorating the `exports` free variable.exports.foo = require(modA) + require(modB);
  9. 9. ResuireJS Paths for network/CDN resources. Minimize resources.Optimizing into one lite JavaScript file.
  10. 10. Keepingresources up to date
  11. 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. 12. TestingJavascript
  13. 13. Test Frameworks QUnit Jasmine Buster Mocha
  14. 14. 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 the expression string as the error message Buster, Jasmine -
  15. 15. 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);
  16. 16. Test runnersQUnit, Jasmine, Buster, Mocha TESTEM
  17. 17. Mockupproject

×