Your SlideShare is downloading. ×
0
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 breakany page in the application?
Do you know if you didn’tbreak somebody else’s code?
You don’t know
How to stay sane whileworking on a large JS project?          Krzysztof Szafranek
Part Ie basics
jslint will hurt your feelings                       Early
Unit testing
“But we don’t have time to       write tests!”“My manager didn’t want unit          tests”
How do you know your codeworks, when you don’t have a         test for it?
How do you know your codestill works aer each commit,when you don’t have a test for              it?
You don’t know
Added bonus:Refactorings are a breeze
Refactoringwithout tests
Which framework?DOH           Jasmine       RhinoUnitJSUnit        screw-unit    JasUnitQUnit         Test.Simple   FireUn...
Doesn’t matter (As long as you use it)(And is easy to automate)
JS Test Driver
How about testing layouts?
Part IIPutting it all together
Running tests in every browser takes timePeople make mistakes
Automation to the rescue!
Continuous Integration is a soware development practicewhere members of a team integrate their work frequently . . .leadi...
CI for front-end          pushjslint              deploy           tests
Early bug detectionEarly fixesNo more FTP uploadsApplication is always shippable
Warning!
Part IIIHumans are useful, too
Pair programming
Best debugging tool ever
Code reviews
.. soware testing alone has limited effectiveness – the averagedefect detection rate is only 25 percent for unit testing, ...
A little help from the process  Not     Checked    Code    Design    QAStarted     Out     Review   Review   Review       ...
Before we part1. Use jslint and unit tests to get feedback early2. Use CI to have shippable soware all the time3. Don’t b...
Linkshttp://www.jslint.com/http://code.google.com/p/js-test-driver/http://jenkins-ci.org/http://sinonjs.org/
krzysztof@szafranek.net                 Photo credits: SpoiltCat, RemixDave, activeside, kate.gardiner, Jiheffe
Productive JavaScript Workflow
Productive JavaScript Workflow
Productive JavaScript Workflow
Productive JavaScript Workflow
Upcoming SlideShare
Loading in...5
×

Productive JavaScript Workflow

2,017

Published on

Presentation about best development practices for JavaScript teams.

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

No Downloads
Views
Total Views
2,017
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Productive JavaScript Workflow"

  1. 1. Productive JavaScript workflow Krzysztof Szafranek
  2. 2. Happy beginnings
  3. 3. Happy beginnings
  4. 4. 11 years later...
  5. 5. 2 years> 80 000 lines of JavaScript4 major redesigns15 front-end developers
  6. 6. Do you test every change in each browser? Before each commit? × ×
  7. 7. Are you sure you didn’t breakany page in the application?
  8. 8. Do you know if you didn’tbreak somebody else’s code?
  9. 9. You don’t know
  10. 10. How to stay sane whileworking on a large JS project? Krzysztof Szafranek
  11. 11. Part Ie basics
  12. 12. jslint will hurt your feelings Early
  13. 13. Unit testing
  14. 14. “But we don’t have time to write tests!”“My manager didn’t want unit tests”
  15. 15. How do you know your codeworks, when you don’t have a test for it?
  16. 16. How do you know your codestill works aer each commit,when you don’t have a test for it?
  17. 17. You don’t know
  18. 18. Added bonus:Refactorings are a breeze
  19. 19. Refactoringwithout tests
  20. 20. Which framework?DOH Jasmine RhinoUnitJSUnit screw-unit JasUnitQUnit Test.Simple FireUnitCrosscheck Test.More Js-test-driverJ3Unit TestCase Sinon.jsJSNUnit TestIt SOAtestYUITest jsUnitTest VowsJSSpec JSTest NodeunitUnitTesting JSTest.NET TyrtleJSpec jsUnity
  21. 21. Doesn’t matter (As long as you use it)(And is easy to automate)
  22. 22. JS Test Driver
  23. 23. How about testing layouts?
  24. 24. Part IIPutting it all together
  25. 25. Running tests in every browser takes timePeople make mistakes
  26. 26. Automation to the rescue!
  27. 27. Continuous Integration is a soware development practicewhere members of a team integrate their work frequently . . .leading to multiple integrations per day. Each integration isverified by an automated build (including test) to detectintegration errors as quickly as possible.Martin Fowler
  28. 28. CI for front-end pushjslint deploy tests
  29. 29. Early bug detectionEarly fixesNo more FTP uploadsApplication is always shippable
  30. 30. Warning!
  31. 31. Part IIIHumans are useful, too
  32. 32. Pair programming
  33. 33. Best debugging tool ever
  34. 34. Code reviews
  35. 35. .. soware testing alone has limited effectiveness – the averagedefect detection rate is only 25 percent for unit testing, 35percent for function testing, and 45 percent for integrationtesting. In contrast, the average effectiveness of design andcode inspections are 55 and 60 percent.Steve McConnellCode Complete
  36. 36. A little help from the process Not Checked Code Design QAStarted Out Review Review Review Are there unit tests?
  37. 37. Before we part1. Use jslint and unit tests to get feedback early2. Use CI to have shippable soware all the time3. Don’t be afraid of your peers (and ducks)
  38. 38. Linkshttp://www.jslint.com/http://code.google.com/p/js-test-driver/http://jenkins-ci.org/http://sinonjs.org/
  39. 39. krzysztof@szafranek.net Photo credits: SpoiltCat, RemixDave, activeside, kate.gardiner, Jiheffe
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×