+ Follow

Pro bun-fighting - Working with JavaScript projects

by Frances Berriman

2,639 views

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

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

7 Embeds 218

http://fberriman.com	157
http://lanyrd.com	36
https://lanyrd.com	17
http://www.slideshare.net	5
http://webcache.googleusercontent.com	1
http://feeds.feedburner.com	1
http://www.linkedin.com	1

More...

Statistics

Likes: 2
Downloads: 1
Comments: 1
Embed Views: 218
Views on SlideShare: 2,421
Total Views: 2,639

Pro bun-fighting - Working with JavaScript projects Presentation Transcript

Pro bun-fighting Testing, quality and group hugs

What the who?

Frances Berriman

BBC Glow JavaScript Library

General web nerd

London based…

Jake Archibald

Michael Mathews* *not actually Michael, but an entertaining real photo could not be located

… and that’s it.

… and that’s it.

Steve Elson

… and that’s it.

Ed Scotcher

… and that’s it.

I love Glow for 1/6 th of my day! Ed Scotcher

A small and distributed problem

There’s only 3 of us.

2/3rds live in not-London.

Build, support & learn.

Problem 1: Communicating what we want to make

Why care?

The unwrap() method

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

Any objections?”

The unwrap() method

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

Any objections?”

In JSDoc…

@name glow.NodeList#unwrap

@function

@description Removes the parent of each item in the list

@returns {glow.NodeList} The now unwrapped elements

@example

// Before: <div><p><span id="mySpan">Hello</span></p></div>

// unwrap the given element

glow("#mySpan").unwrap();

// After: <div><span id="mySpan">Hello</span></div>

In JSDoc…

@name glow.NodeList# unwrap

@ function

@description Removes the parent of each item in the list

@returns { glow.NodeList } The now unwrapped elements

@ example

// Before: <div><p><span id="mySpan">Hello</span></p></div>

// unwrap the given element

glow("#mySpan").unwrap();

// After: <div><span id="mySpan">Hello</span></div>

The bun-fight

Free documentation

Problem 2: Checking what we’ve made actually works

Qunit

unwrap() test example

module('glow.NodeList#unwrap', {setup:setup, teardown:teardown});

unwrap() test example

module('glow.NodeList#unwrap', {setup:setup, teardown:teardown});

test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() {

});

unwrap() test example

module('glow.NodeList#unwrap', {setup:setup, teardown:teardown});

test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() {

var myNodeList = new glow.NodeList( byId('elmWithMixedNodes').childNodes ),

returnNodeList;

equal(typeof myNodeList.unwrap, 'function', 'glow.NodeList#unwrap is a function');

});

unwrap() test example

module('glow.NodeList#unwrap', {setup:setup, teardown:teardown});

test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() {

var myNodeList = new glow.NodeList( byId('elmWithMixedNodes').childNodes ),

returnNodeList;

equal(typeof myNodeList.unwrap, 'function', 'glow.NodeList#unwrap is a function');

returnNodeList = myNodeList.unwrap();

strictEqual(returnNodeList, myNodeList, 'Same nodelist returned');

myNodeList.each(function() {

equal(this.parentNode.id, 'testElmsContainer', 'Node moved to parent');

});

equal(myNodeList.item(0).prev()[0].id, 'elmWithTextNodes', 'Node inserted in correct position');

});

Sanity checking & code reviews

Conflict resolution

Problem 3: Checking what we’ve made is fast

Why Woosh?

Creating tests

Run time

How long does it take for this method to run 1000 times?

woosh.addTests('glow2-src', {

'unwrap': new woosh.Test(1000, function()

{

// unwrap and keep count of unwraps performed

}

Over time

How many times does this method run in a second?

woosh.addTests('glow2-src', {

'unwrap': new woosh.TimeTest(1, function() {

// unwrap and keep count of unwraps performed

}

Live demo

The headlines

Treat documentation like code

There's no such thing as too many unit tests

Benchmark regularly if you want to get fast

And the rest

Roll credits

Frances Berriman / @phae

fberriman.com

github.com/glow/glow2

Additional photos courtesy of:

flickr.com/photos/stevec77/3870451388

flickr.com/photos/willsisti/4037142479

flickr.com/photos/jaffathecake/2835837370

flickr.com/photos/elson/3555981445

Pro bun-fighting - Working with JavaScript projects

by Frances Berriman

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 218

Statistics

Pro bun-fighting - Working with JavaScript projects Presentation Transcript