Surviving Big JavaScript
Projects
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese an...
Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Anton Kovalyov
Firefox Developer Tools,
JSHint, Third-party JavaScript.
@valueof
DISCLAIMER
NOT EVERYTHING BBBBB
PRESENTED BBB HERE IS
BASED BB ON PERSONAL
EXPERIENCE. BBB I ALSO
BB CHATTED WITH A FEW
OL...
TESTS
REVIEWS
DATA
IF IT’S NOT TESTED,
IT’S BROKEN. —Bruce Eckel
Tinderboxpushlog
Intermittent failures :-(
TESTS
DEFINE AND GUARANTEE THE
CORRECTNESS OF YOUR PROGRAM
ACT AS API DOCUMENTATION
GIVES CONTRIBUTORS CONFIDENCE
THAT THE...
TESTS
DEFINE AND GUARANTEE THE
CORRECTNESS OF YOUR PROGRAM
ACT AS API DOCUMENTATION
GIVES CONTRIBUTORS CONFIDENCE
THAT THE...
TESTS
DEFINE AND GUARANTEE THE
CORRECTNESS OF YOUR PROGRAM
ACT AS API DOCUMENTATION
GIVES CONTRIBUTORS CONFIDENCE
THAT THE...
SOVIET UNION
COLLAPSED
BECAUSE THEY
DIDN’T WRITE
ENOUGH TESTS.*
* This statement doesn’t necessarily reflect the actual his...
FUZZ TESTING
THROW RANDOM DATA AT YOUR
PROGRAM AND WAIT UNTIL IT
BREAKS SEE HOW IT RESPONDS.
Bugs in our JavaScript
engine found by jsfunfuzz
and langfuzz = ~3175
BugBuster
Not an endorsement. Haven’t tried it yet, just saw their talk at JSConf and thought it was an interesting
produc...
TESTS
REVIEWS
DATA
PEER CODE
REVIEWS ARE THE
SINGLE BIGGEST
THING YOU CAN DO
TO IMPROVE YOUR
CODE. —Jeff Atwood
Mozilla Policies
CODE REVIEW
EXAMPLE: Adding
console.profile(End)
support to Firefox.
Splitting big change
into smaller patches.
Uploading patches
early and often.
Getting constant
feedback.
Using tools to help
with reviews.
Reviewers showing
examples of similar
solutions in other
modules.
Landing!
Backing out. :-( But
re-landing shortly
after.
REVIEW FAIL: My
reviewer noticed this
and was going to
make fun of me in
the review but then
forgot about it.
Use tools to review less
HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATC...
Build passed: no need to manually
check for style errors or simple bugs.
HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATC...
HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATC...
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...
HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE AN OVERALL PICTURE OF
WHAT THE P...
HOW I REVIEW CODE FOR JSHINT
TESTS PASS?
TESTS COVER EVERYTHING?
STYLE IS OKAY?
DO I HAVE OVERALL PICTURE OF
WHAT THE PATC...
CODE READING IS HARD,
EVEN FOR EXPERIENCED
PROGRAMMERS I
RESPECT. IT’S ANOTHER
REASON TO DO CODE
REVIEWS. BUILD THAT
IMPOR...
TESTS
REVIEWS
DATA
Evolution of the Firefox Codebase
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
complexityReport.js
complexityReport.js
JSHint
JSHint
JSHint
Line 3: function test(a, b, c) {
This function’s cyclomatic complexity is too high.
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
LOC
Cyclomatic complexity
DATA
First-order density
Propagation cost
Hot code
Core size
Bug Prediction at Google
Thanks.Feedback: anton@mozilla.com
TESTS
Strong Typing vs. Strong Testing (Bruce Eckel, Best Software Writing I)
JavaScript Fuzz Testing
Introducing jsfunfuz...
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/firefox-
large-javascript-proj...
Surviving Big JavaScript Projects
Upcoming SlideShare
Loading in …5
×

Surviving Big JavaScript Projects

1,165 views

Published on

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.

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

No Downloads
Views
Total views
1,165
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Surviving Big JavaScript Projects

  1. 1. Surviving Big JavaScript Projects
  2. 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. 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. 4. Anton Kovalyov Firefox Developer Tools, JSHint, Third-party JavaScript. @valueof
  5. 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
  6. 6. TESTS REVIEWS DATA
  7. 7. IF IT’S NOT TESTED, IT’S BROKEN. —Bruce Eckel
  8. 8. Tinderboxpushlog
  9. 9. Intermittent failures :-(
  10. 10. TESTS DEFINE AND GUARANTEE THE CORRECTNESS OF YOUR PROGRAM ACT AS API DOCUMENTATION GIVES CONTRIBUTORS CONFIDENCE THAT THEY’RE NOT BREAKING STUFF
  11. 11. TESTS DEFINE AND GUARANTEE THE CORRECTNESS OF YOUR PROGRAM ACT AS API DOCUMENTATION GIVES CONTRIBUTORS CONFIDENCE THAT THEY’RE NOT BREAKING STUFF
  12. 12. TESTS DEFINE AND GUARANTEE THE CORRECTNESS OF YOUR PROGRAM ACT AS API DOCUMENTATION GIVES CONTRIBUTORS CONFIDENCE THAT THEY’RE NOT BREAKING STUFF
  13. 13. SOVIET UNION COLLAPSED BECAUSE THEY DIDN’T WRITE ENOUGH TESTS.* * This statement doesn’t necessarily reflect the actual history of the world.
  14. 14. FUZZ TESTING THROW RANDOM DATA AT YOUR PROGRAM AND WAIT UNTIL IT BREAKS SEE HOW IT RESPONDS.
  15. 15. Bugs in our JavaScript engine found by jsfunfuzz and langfuzz = ~3175
  16. 16. BugBuster Not an endorsement. Haven’t tried it yet, just saw their talk at JSConf and thought it was an interesting product.
  17. 17. TESTS REVIEWS DATA
  18. 18. PEER CODE REVIEWS ARE THE SINGLE BIGGEST THING YOU CAN DO TO IMPROVE YOUR CODE. —Jeff Atwood
  19. 19. Mozilla Policies
  20. 20. CODE REVIEW EXAMPLE: Adding console.profile(End) support to Firefox.
  21. 21. Splitting big change into smaller patches. Uploading patches early and often.
  22. 22. Getting constant feedback.
  23. 23. Using tools to help with reviews.
  24. 24. Reviewers showing examples of similar solutions in other modules.
  25. 25. Landing!
  26. 26. Backing out. :-( But re-landing shortly after.
  27. 27. REVIEW FAIL: My reviewer noticed this and was going to make fun of me in the review but then forgot about it.
  28. 28. Use tools to review less
  29. 29. 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!
  30. 30. Build passed: no need to manually check for style errors or simple bugs.
  31. 31. 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!
  32. 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. 33. 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
  34. 34. 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!
  35. 35. 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!
  36. 36. CODE READING IS HARD, EVEN FOR EXPERIENCED PROGRAMMERS I RESPECT. IT’S ANOTHER REASON TO DO CODE REVIEWS. BUILD THAT IMPORTANT SKILL. —Jason Orendorff
  37. 37. TESTS REVIEWS DATA
  38. 38. Evolution of the Firefox Codebase
  39. 39. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  40. 40. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  41. 41. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  42. 42. complexityReport.js
  43. 43. complexityReport.js
  44. 44. JSHint
  45. 45. JSHint
  46. 46. JSHint Line 3: function test(a, b, c) { This function’s cyclomatic complexity is too high.
  47. 47. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  48. 48. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  49. 49. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  50. 50. LOC Cyclomatic complexity DATA First-order density Propagation cost Hot code Core size
  51. 51. Bug Prediction at Google
  52. 52. Thanks.Feedback: anton@mozilla.com
  53. 53. 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
  54. 54. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/firefox- large-javascript-project

×