Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Pro bun-fighting Testing, quality and group hugs
What the who? <ul><li>Frances Berriman </li></ul><ul><li>BBC Glow JavaScript Library </li></ul><ul><li>General web nerd </...
Jake Archibald
Michael Mathews* *not actually Michael, but an entertaining real  photo could not be located
<ul><li>…  and that’s it. </li></ul>
<ul><li>…  and that’s it. </li></ul>Steve Elson
 
<ul><li>…  and that’s it. </li></ul>Ed Scotcher
<ul><li>…  and that’s it. </li></ul>I love Glow for 1/6 th  of my day! Ed Scotcher
A small and distributed problem <ul><li>There’s only 3 of us. </li></ul><ul><li>2/3rds live in not-London. </li></ul><ul><...
Problem 1: Communicating what we want to make
Why care?
The unwrap() method <ul><li>“ We need something that'll let us get a node and remove it from whatever it's in, and remove ...
The unwrap() method <ul><li>“ We need something that'll let us get a node and remove it from whatever it's in, and  remove...
In JSDoc… <ul><li>@name glow.NodeList#unwrap </li></ul><ul><li>@function </li></ul><ul><li>@description Removes the parent...
In JSDoc… <ul><li>@name glow.NodeList# unwrap </li></ul><ul><li>@ function </li></ul><ul><li>@description  Removes the par...
The bun-fight
Free documentation
Problem 2: Checking what we’ve made actually works
Qunit
unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul>
unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul><ul><li>test('gl...
unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul><ul><li>test('gl...
unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul><ul><li>test('gl...
Sanity checking & code reviews
Conflict resolution
Problem 3: Checking what we’ve made is fast
Why Woosh?
Creating tests
Run time <ul><li>How long does it take for this method to run 1000 times? </li></ul><ul><li>woosh.addTests('glow2-src', { ...
Over time <ul><li>How many times does this method run in a second? </li></ul><ul><li>woosh.addTests('glow2-src', { </li></...
Live demo
 
 
 
The headlines <ul><li>Treat documentation like code </li></ul><ul><li>There's no such thing as too many unit tests </li></...
And the rest
Roll credits <ul><li>Frances Berriman / @phae </li></ul><ul><li>fberriman.com </li></ul><ul><li>github.com/glow/glow2 </li...
Nächste SlideShare
Wird geladen in …5
×

Pro bun-fighting - Working with JavaScript projects

2.608 Aufrufe

Veröffentlicht am

This is the talk I gave at March's London Web Standards meet-up in London. It covers how we create Glow and make it a quality library. The talk has notes available for each slide and a video will be published soon.

Veröffentlicht in: Technologie
  • This was a great presentation on the realities of test-driven development.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Pro bun-fighting - Working with JavaScript projects

  1. 1. Pro bun-fighting Testing, quality and group hugs
  2. 2. What the who? <ul><li>Frances Berriman </li></ul><ul><li>BBC Glow JavaScript Library </li></ul><ul><li>General web nerd </li></ul><ul><li>London based… </li></ul>
  3. 3. Jake Archibald
  4. 4. Michael Mathews* *not actually Michael, but an entertaining real photo could not be located
  5. 5. <ul><li>… and that’s it. </li></ul>
  6. 6. <ul><li>… and that’s it. </li></ul>Steve Elson
  7. 8. <ul><li>… and that’s it. </li></ul>Ed Scotcher
  8. 9. <ul><li>… and that’s it. </li></ul>I love Glow for 1/6 th of my day! Ed Scotcher
  9. 10. A small and distributed problem <ul><li>There’s only 3 of us. </li></ul><ul><li>2/3rds live in not-London. </li></ul><ul><li>Build, support & learn. </li></ul>
  10. 11. Problem 1: Communicating what we want to make
  11. 12. Why care?
  12. 13. The unwrap() method <ul><li>“ We need something that'll let us get a node and remove it from whatever it's in, and remove the parent, and then it needs to put the thing that's being unwrapped back in place. And then we'll give the user back what we put in. </li></ul><ul><li>Any objections?” </li></ul>
  13. 14. The unwrap() method <ul><li>“ We need something that'll let us get a node and remove it from whatever it's in, and remove the parent , and then it needs to put the thing that's being unwrapped back in place. And then we'll give the user back what they put in . </li></ul><ul><li>Any objections?” </li></ul>
  14. 15. In JSDoc… <ul><li>@name glow.NodeList#unwrap </li></ul><ul><li>@function </li></ul><ul><li>@description Removes the parent of each item in the list </li></ul><ul><li>@returns {glow.NodeList} The now unwrapped elements </li></ul><ul><li>@example </li></ul><ul><li>// Before: <div><p><span id=&quot;mySpan&quot;>Hello</span></p></div> </li></ul><ul><li>// unwrap the given element </li></ul><ul><li>glow(&quot;#mySpan&quot;).unwrap(); </li></ul><ul><li>// After: <div><span id=&quot;mySpan&quot;>Hello</span></div> </li></ul>
  15. 16. In JSDoc… <ul><li>@name glow.NodeList# unwrap </li></ul><ul><li>@ function </li></ul><ul><li>@description Removes the parent of each item in the list </li></ul><ul><li>@returns { glow.NodeList } The now unwrapped elements </li></ul><ul><li>@ example </li></ul><ul><li>// Before: <div><p><span id=&quot;mySpan&quot;>Hello</span></p></div> </li></ul><ul><li>// unwrap the given element </li></ul><ul><li>glow(&quot;#mySpan&quot;).unwrap(); </li></ul><ul><li>// After: <div><span id=&quot;mySpan&quot;>Hello</span></div> </li></ul>
  16. 17. The bun-fight
  17. 18. Free documentation
  18. 19. Problem 2: Checking what we’ve made actually works
  19. 20. Qunit
  20. 21. unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul>
  21. 22. unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul><ul><li>test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() { </li></ul><ul><li>}); </li></ul>
  22. 23. unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul><ul><li>test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() { </li></ul><ul><li>var myNodeList = new glow.NodeList( byId('elmWithMixedNodes').childNodes ), </li></ul><ul><li>returnNodeList; </li></ul><ul><li>equal(typeof myNodeList.unwrap, 'function', 'glow.NodeList#unwrap is a function'); </li></ul><ul><li>}); </li></ul>
  23. 24. unwrap() test example <ul><li>module('glow.NodeList#unwrap', {setup:setup, teardown:teardown}); </li></ul><ul><li>test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() { </li></ul><ul><li>var myNodeList = new glow.NodeList( byId('elmWithMixedNodes').childNodes ), </li></ul><ul><li>returnNodeList; </li></ul><ul><li>equal(typeof myNodeList.unwrap, 'function', 'glow.NodeList#unwrap is a function'); </li></ul><ul><li>returnNodeList = myNodeList.unwrap(); </li></ul><ul><li>strictEqual(returnNodeList, myNodeList, 'Same nodelist returned'); </li></ul><ul><li>myNodeList.each(function() { </li></ul><ul><li>equal(this.parentNode.id, 'testElmsContainer', 'Node moved to parent'); </li></ul><ul><li>}); </li></ul><ul><li>equal(myNodeList.item(0).prev()[0].id, 'elmWithTextNodes', 'Node inserted in correct position'); </li></ul><ul><li>}); </li></ul>
  24. 25. Sanity checking & code reviews
  25. 26. Conflict resolution
  26. 27. Problem 3: Checking what we’ve made is fast
  27. 28. Why Woosh?
  28. 29. Creating tests
  29. 30. Run time <ul><li>How long does it take for this method to run 1000 times? </li></ul><ul><li>woosh.addTests('glow2-src', { </li></ul><ul><li>'unwrap': new woosh.Test(1000, function() </li></ul><ul><li>{ </li></ul><ul><li>// unwrap and keep count of unwraps performed </li></ul><ul><li>}), </li></ul><ul><li>} </li></ul>
  30. 31. Over time <ul><li>How many times does this method run in a second? </li></ul><ul><li>woosh.addTests('glow2-src', { </li></ul><ul><li>'unwrap': new woosh.TimeTest(1, function() { </li></ul><ul><li>// unwrap and keep count of unwraps performed </li></ul><ul><li>}), </li></ul><ul><li>} </li></ul>
  31. 32. Live demo
  32. 36. The headlines <ul><li>Treat documentation like code </li></ul><ul><li>There's no such thing as too many unit tests </li></ul><ul><li>Benchmark regularly if you want to get fast </li></ul>
  33. 37. And the rest
  34. 38. Roll credits <ul><li>Frances Berriman / @phae </li></ul><ul><li>fberriman.com </li></ul><ul><li>github.com/glow/glow2 </li></ul><ul><li>Additional photos courtesy of: </li></ul><ul><li>flickr.com/photos/stevec77/3870451388 </li></ul><ul><li>flickr.com/photos/willsisti/4037142479 </li></ul><ul><li>flickr.com/photos/jaffathecake/2835837370 </li></ul><ul><li>flickr.com/photos/elson/3555981445 </li></ul>

×