Productive JavaScript workflow

Krzysztof Szafranek

Happy beginnings

Happy beginnings

11 years later...

2 years> 80 000 lines of JavaScript4 major redesigns15 front-end developers

× ×

Do you test every change in each browser?Before each commit?

Are you sure you didn’t break any page in the application?

Do you know if you didn’t break somebody else’s code?

You don’t know

Krzysztof Szafranek

How to stay sane while working on a large JS project?

e basics

Part I

jslint will hurt your feelingsEarly

Unit testing

“But we don’t have time to write tests!”

“My manager didn’t want unit tests”

How do you know your code works, when you don’t have a

test for it?

How do you know your code still works aer each commit, when you don’t have a test for

it?

You don’t know

Refactorings are a breeze

Added bonus:

Refactoring without tests

Which framework?

DOHJSUnitQUnitCrosscheckJ3Unit JSNUnitYUITest JSSpecUnitTesting JSpec

Jasminescrew-unit Test.SimpleTest.MoreTestCase TestItjsUnitTest JSTestJSTest.NET jsUnity

RhinoUnitJasUnitFireUnitJs-test-driverSinon.jsSOAtestVowsNodeunitTyrtle

Doesn’t matter(As long as you use it)

(And is easy to automate)

JS Test Driver

How about testing layouts?

Putting it all together

Part II

People make mistakes

Running tests in every browser takes time

Automation to the rescue!

Martin Fowler

Continuous Integration is a soware development practice where members of a team integrate their work frequently . . . leading to multiple integrations per day. Each integration is verified by an automated build (including test) to detect integration errors as quickly as possible.

jslint

CI for front-endpush

tests

deploy

Early bug detectionEarly fixesNo more FTP uploadsApplication is always shippable

Warning!

Humans are useful, too

Part III

Pair programming

Best debugging tool ever

Code reviews

Steve McConnell Code Complete

.. soware testing alone has limited effectiveness – the average defect detection rate is only 25 percent for unit testing, 35 percent for function testing, and 45 percent for integration testing. In contrast, the average effectiveness of design and code inspections are 55 and 60 percent.

A little help from the process

Not Started

Checked Out

Code Review

Design Review

QAReview

Are there unit tests?

1. Use jslint and unit tests to get feedback early

Before we part

2. Use CI to have shippable soware all the time

3. Don’t be afraid of your peers (and ducks)

Links

http://www.jslint.com/http://code.google.com/p/js-test-driver/ http://jenkins-ci.org/http://sinonjs.org/

Photo credits:

SpoiltCat, RemixDave, activeside, kate.gardiner, Jiheffe

krzysztof@szafranek.net