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.

Introducing RequireJS into Large Codebases. Delicately.

We're going to talk about how Yammer's JavaScript codebase grew to over 100k lines without any notion of Dependency Management, and how we were recently able to introduce Dependency Management into that codebase in a safe and iterative way.

  • Login to see the comments

Introducing RequireJS into Large Codebases. Delicately.

  1. 1. Dan Lee & Chris Chen
  2. 2. 2008 TechCrunch 50 Source: http://techcrunch.com/2008/09/10/yammer-takes-techcrunch50s-top-prize
  3. 3. get_it_done.js - nested erb partials - deferred JS - variable interpolation - global jQuery
  4. 4. @polotek @techwraith @mde @foobarfighter @peterbraden @mattkauffman They made us better.
  5. 5. Modular components
  6. 6. build.json or manifest.yml or scripts.json…
  7. 7. Build and Deployment build.json Asset Pipeline application.js CDN
  8. 8. Bob wants more.
  9. 9. Popout Chat
  10. 10. “Programming out of Anger”
  11. 11. The Chat Bundle ChatBundle ChatManager ContactList ChatSession ChatSessionNotifications ChatMessageList ChatMessageListItem Avatar ChatPublisher ChatAggregator ChatBridge
  12. 12. AMD‟ing ChatManager
  13. 13. But chat also loads on yammer.com…
  14. 14. define() doesn‟t exist
  15. 15. We needed a version of define() that ignored dependencies. So we shimmed it.
  16. 16. Wait, don‟t get up… Think about the possibilities.
  17. 17. Feature flags that aren‟t used for features…
  18. 18. The results Before: Compressed: 531kb Uncompressed: 2048kb After: Compressed: 216kb Uncompressed: 715kb A60% reduction! build.json Asset Pipeline Way too much JS CDN ChatBundle r.js optimizer popout_chat.js CDN
  19. 19. The dream is real. Yammer is saved!
  20. 20. But, we didn‟t really save Yammer. - AMD‟ed a small percentage of files - Dev environment setup - Two worlds - Global namespaces
  21. 21. How we moved forward. And there is still more to do.
  22. 22. - Big - Deployed often - Many, globally distributed contributors Codebase challenges
  23. 23. 1. Isolation
  24. 24. 2. Iteration
  25. 25. 3. Minimize Disruption
  26. 26. „Code in Transition‟ is OK
  27. 27. Transition or Stagnation: Choose One.

×