Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/169SiDX. Anton Kovalyov provides an inside look into a large JavaScript project, presenting techniques for maintaining code quality while allowing the team to push lots of changes every day. Filmed at qconnewyork.com. Anton Kovalyov.

1. Surviving Big JavaScript
Projects

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/firefox-large-javascript-project

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. Anton Kovalyov
Firefox Developer Tools,
JSHint, Third-party JavaScript.
@valueof

5. DISCLAIMER
NOT EVERYTHING BBBBB
PRESENTED BBB HERE IS
BASED BB ON PERSONAL
EXPERIENCE. BBB I ALSO
BB CHATTED WITH A FEW
OLD-TIMERS AT MOZILLA.
SOMEONE IS B WATCHING
US. THEY B ARE HERE. OH
NO, ZOMBIES! RUN! ALL IS
LOŚ͖̩͇̗̪̏̈́T ALL I S LOST. BB MY
FACE MY FACE ᵒh NOOOO
BBBBB
BBB
BB
BBB
BB
B
B
BB

7. TESTS
REVIEWS
DATA

8. IF IT’S NOT TESTED,
IT’S BROKEN. —Bruce Eckel

9. Tinderboxpushlog

10. Intermittent failures :-(

11. TESTS
DEFINE AND GUARANTEE THE
CORRECTNESS OF YOUR PROGRAM
ACT AS API DOCUMENTATION
GIVES CONTRIBUTORS CONFIDENCE
THAT THEY’RE NOT BREAKING
STUFF

12. TESTS
DEFINE AND GUARANTEE THE
CORRECTNESS OF YOUR PROGRAM
ACT AS API DOCUMENTATION
GIVES CONTRIBUTORS CONFIDENCE
THAT THEY’RE NOT BREAKING
STUFF

13. TESTS
DEFINE AND GUARANTEE THE
CORRECTNESS OF YOUR PROGRAM
ACT AS API DOCUMENTATION
GIVES CONTRIBUTORS CONFIDENCE
THAT THEY’RE NOT BREAKING
STUFF

14. SOVIET UNION
COLLAPSED
BECAUSE THEY
DIDN’T WRITE
ENOUGH TESTS.*
* This statement doesn’t necessarily reflect the actual history of the world.

15. FUZZ TESTING
THROW RANDOM DATA AT YOUR
PROGRAM AND WAIT UNTIL IT
BREAKS SEE HOW IT RESPONDS.

16. Bugs in our JavaScript
engine found by jsfunfuzz
and langfuzz = ~3175

17. BugBuster
Not an endorsement. Haven’t tried it yet, just saw their talk at JSConf and thought it was an interesting
product.

18. TESTS
REVIEWS
DATA

19. PEER CODE
REVIEWS ARE THE
SINGLE BIGGEST
THING YOU CAN DO
TO IMPROVE YOUR
CODE. —Jeff Atwood

20. Mozilla Policies

21. CODE REVIEW
EXAMPLE: Adding
console.profile(End)
support to Firefox.

22. Splitting big change
into smaller patches.
Uploading patches
early and often.

23. Getting constant
feedback.

24. Using tools to help
with reviews.

25. Reviewers showing
examples of similar
solutions in other
modules.

26. Landing!

27. Backing out. :-( But
re-landing shortly
after.

28. REVIEW FAIL: My
reviewer noticed this
and was going to
make fun of me in
the review but then
forgot about it.

29. Use tools to review less

30. HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATCH DOES?
MERGE!

31. Build passed: no need to manually
check for style errors or simple bugs.

32. HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATCH DOES?
MERGE!

33. HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATCH DOES?
MERGE!

34. I DON’T EVEN HAVE A
PREFERRED CODE STYLE
ANYMORE. I JUST USE
WHATEVER STYLE IS IN
THE FILE I’M EDITING.
—A module owner at Mozilla

35. HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE AN OVERALL PICTURE OF
WHAT THE PATCH DOES?
MERGE!

36. HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATCH DOES?
MERGE!

37. CODE READING IS HARD,
EVEN FOR EXPERIENCED
PROGRAMMERS I
RESPECT. IT’S ANOTHER
REASON TO DO CODE
REVIEWS. BUILD THAT
IMPORTANT SKILL.
—Jason Orendorff

38. TESTS
REVIEWS
DATA

39. Evolution of the Firefox Codebase

40. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

41. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

42. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

43. complexityReport.js

44. complexityReport.js

45. JSHint

46. JSHint

47. JSHint
Line 3: function test(a, b, c) {
This function’s cyclomatic complexity is too high.

48. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

49. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

50. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

51. LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size

52. Bug Prediction at Google

53. Thanks.Feedback: anton@mozilla.com

54. TESTS
Strong Typing vs. Strong Testing (Bruce Eckel, Best Software Writing I)
JavaScript Fuzz Testing
Introducing jsfunfuzz
Bug 349611: Jesse’s JavaScript compiler/decompiler fuzzer
Bug 676763: LangFuzz (grammar-based mutation fuzzer)
BugBuster
REVIEWS
Code Reviews: Just Do It
Official Mozilla Policies
Mozilla Super-Review Policy
Bug 817836: Hook up console.profile and console.profileEnd to the Profiler
Issue 1109: Parse yield expressions
Twitter / jorendorff: Code reading is hard...
DATA
Evolution of the Firefox Codebase
JSHint, a JavaScript Code Quality Tool
complexityReport.js
Development at the Speed and Scale of Google
Bug Prediction At Google
Bug Cache for inspections: hit or miss? (Rahman et al.)
Cover: The Confusion of Tongues by Gustave Doré (1865)
All other photos are mine.
SLIDES
http://goo.gl/XnZ8m

55. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/firefox-
large-javascript-project