better code through tdd

Better Code through TDD

Wolfram KriesingCTO, uxebu

@wolframkriesing

Freitag, 12. April 13

http://140byt.es

Warming up: shorten please!

Freitag, 12. April 13

Try it out!

Browser

node.jsFreitag, 12. April 13

uxebu

100%Technology

Company- since 2008- remote team

Freitag, 12. April 13

TDD using Jasmine

Freitag, 12. April 13

Why TDD?

• Better tool than Debugging

• Verifies Refactoring

• Sustainable

Freitag, 12. April 13

Jasmine

• JavaScript quasi standard

• For nodejs+browser (server+client)

• Built-in Spies

• Custom Matchers make awesome errors!!!

http://pivotal.github.com/jasmine/

Freitag, 12. April 13

Jasmine - Matchers

Freitag, 12. April 13

Jasmine - Matchers, watch out!

Freitag, 12. April 13

Matchers - toContain, not

Freitag, 12. April 13

Custom Matchers - toBeInstanceOf

Freitag, 12. April 13

Custom Matchers - toBeInstanceOf

Freitag, 12. April 13

Custom Matchers

Freitag, 12. April 13

Spies

• Decoupled Testing

• Fast Tests (Removes waits, Removes timings)

• Better Architecture

• Async Testing

Freitag, 12. April 13

Spies

Freitag, 12. April 13

Spies

Freitag, 12. April 13

Spies

Freitag, 12. April 13

TDD is just the start...

Freitag, 12. April 13

Our Process

Repo

Dev CI

Flowdock

All Devs

Freitag, 12. April 13

CI - Continuous Integration

• All projects

• Automated Test runs (multiple browsers/devices)

• Build

• Code coverage

• On Linux!

Freitag, 12. April 13

CI - Continuous Integration

http://siliconforks.com/jscoverage/

Freitag, 12. April 13

CI - Continuous Integration

Freitag, 12. April 13

Embedded Jasmine Test Runner

Test

ResultTest Platforms

Freitag, 12. April 13

Better code?

Freitag, 12. April 13

The problem

Freitag, 12. April 13

S3

UploadHTML5 files to Amazon S3 (bucket)

Freitag, 12. April 13

Assets

index.html

movie.js

Freitag, 12. April 13

• it‘s a prototype ....... +1

• is actually async (ignored) ......... -1

• runs all uploads in parallel ........ +1

• no error handling ........ -1

• NEEDS WORK

Freitag, 12. April 13

• still a prototype ....... +1

• is actually async ......... +1

• does NOT run uploads in parallel ........ -1

• partly error handling ........ 0

• NEEDS WORK

Freitag, 12. April 13

Freitag, 12. April 13

HTTP PUT

hard codedhidden

S3Uploader!!!!!

Freitag, 12. April 13

• S3Uploader.js

• uploads from a buffer

• needs to take S3 config

Freitag, 12. April 13

TDD please....

Freitag, 12. April 13

Freitag, 12. April 13

Freitag, 12. April 13

S3Put.js

upload from filename

upload from buffer

S3Uploader.js HTTP PUT

Freitag, 12. April 13

Freitag, 12. April 13

S3Uploader

Freitag, 12. April 13

S3Put.js

upload from filename

upload from buffer

S3Uploader.js HTTP PUT

:-(

Freitag, 12. April 13

Uploader.js

S3Put.js

from filename

upload from buffer

S3Uploader.js

HTTP PUT

from buffer

Freitag, 12. April 13

ClassMethods

Freitag, 12. April 13

All tests green? Refactor!

Freitag, 12. April 13

Freitag, 12. April 13

S3Put.js

upload from buffer

S3Uploader.js

HTTP PUT

Uploader.js

from filename

from buffer

Freitag, 12. April 13

S3Put.js

upload from buffer

S3Uploader.js

HTTP PUT

Uploader.js

from filename

from buffer

FileUploader.js

from filename

from buffer

Freitag, 12. April 13

Looking at the big picture again ...

Freitag, 12. April 13

• is actually async ......... +1

• runs all uploads in parallel ........ -1

• error handling ........ 0

• NEEDS WORK

Freitag, 12. April 13

FileUploader.uploadFromFilesNames

Freitag, 12. April 13

Freitag, 12. April 13

• is actually async ......... +1

• runs all uploads in parallel ........ +1

• error handling ........ +1

• upload multiple files :)

New requirement

Freitag, 12. April 13

Freitag, 12. April 13

FileUploader.js

S3Put.js

from filename

upload from buffer

S3Uploader.js

HTTP PUT

from buffer

from filenames

Freitag, 12. April 13

• Get to know what you really need

• Just as much as necessary

• It‘s a proof of concept

• Reveals the API

Prototyping

Freitag, 12. April 13

• Let the architecture come by itself

• Don‘t turn off the brain

• Have clear interfaces - so you can mock them

• Use explicit names and the API modules evolve

TDD

Freitag, 12. April 13

Thank you

@wolframkriesing

Wolfram Kriesing, CTOuxebu

Freitag, 12. April 13