Browsern + Javascript = sant

1,996 views

Published on

Björn Skoglund, Valtech.
Kärleken övervinner allt. En tydlig trend idag är att isolera sin javascript och testa funktionalitet isolerat från browsern via abstraktioner. Men förr eller senare måste vi alla erkänna att de hör ihop så jag kommer presentera ett experimentellt och annorlunda sätt att garantera funktionalitet i övergången mellan html och javascript.

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

  • Be the first to like this

No Downloads
Views
Total views
1,996
On SlideShare
0
From Embeds
0
Number of Embeds
1,541
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Browsern + Javascript = sant

  1. 1. Björn Skoglund @bjosk http://github.com/bjorns
  2. 2. Mot internet!
  3. 3. Suitest DOH LBRTW JSUnit Enhance JS QUnit Unit.js RhUnit Crosscheck J3Unit Mocha intern JSNUnit YUI Test JSSpec UnitTesting JSpec Jasmine screw-unit Test.Simple Test.More TestCase TestIt jsUnitTest JSTest JSTest.NET jsUnity RhinoUnit JasUnit FireUnit Js-test-driver Js-test-runner Sinon.js SOAtest Vows Nodeunit Tyrtle wru Compatible Buster.JS Lighttest Chai
  4. 4. ”It does not require a DOM.” http://jasmine.github.io
  5. 5. JS HTML Säker ? Osäker
  6. 6. TYDLIGT! SÄKERT!
  7. 7. JS HTML Säker Säker
  8. 8. gjut.js
  9. 9. • Node.js • Finns i npm • lib-modul eller terminal(gjutc) • Experimentellt gjut.js
  10. 10. • Tar annoterad html som input • Validerar din html gjut.js
  11. 11. <span>@package.variable</span> ! => ! <span>hej världen!</span> @mickec75 { variable: ”hej världen!” }
  12. 12. <div @package.func()></div> => <div id=”dynamisktId”></div> @mickec75 func: function(element) { element.attributes['id'].push('dynamisktId'); }
  13. 13. <span @package.success()>Success!</span> <span @!package.success()>Failure</span> => <span>Success!</span> @mickec75
  14. 14. <ul> <li @foreach(@func() in @array)> </li> </ul> @mickec75 array: [’Imse’, ’Vimse’, ’Spindel’], func: function(element, value) { element.content.push({ type: ’text', content: value + ’!’ }); }
  15. 15. <ul> <li> Imse! </li> <li> Vimse! </li> <li> Spindel! </li> </ul> @mickec75
  16. 16. Verifiering
  17. 17. @verify .carousel -> .canvas ! @verify label <- input ! @verify exist div#topstory Verifiering
  18. 18. Funkar det då?
  19. 19. http://openaid.skoglund.io
  20. 20. $ npm install gjut -g var gjut = require(’gjut’); ! $ gjutc index.html
  21. 21. https://github.com/bjorns/gjut.js
  22. 22. Björn Skoglund Tack @bjosk http://github.com/bjorns

×