Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Surviving Big JavaScript Projects

1,250 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
  • Be the first to comment

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

×