Introducing RequireJS into Large Codebases. Delicately.
29
Introducing RequireJS Into a Large Codebase. Delicately. Dan Lee & Chris Chen
-
Upload
danielericlee -
Category
Technology
-
view
402 -
download
2
description
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.
Transcript of Introducing RequireJS into Large Codebases. Delicately.
Introducing RequireJS Into a Large Codebase. Delicately.Dan Lee & Chris Chen
2008 TechCrunch 50
Source: http://techcrunch.com/2008/09/10/yammer-takes-techcrunch50s-top-prize/
get_it_done.js- nested erb partials- deferred JS- variable interpolation- global jQuery
@polotek @techwraith @mde
@foobarfighter @peterbraden @mattkauffman
They made us better.
Modular components
build.jsonor manifest.ymlor scripts.json…
Build and Deployment
build.json Asset Pipeline
application.js CDN
Bob wants more.
Popout Chat
“Programming out of Anger”
The Chat Bundle ChatBundle
ChatManager
ContactList ChatSession
ChatSessionNotifications ChatMessageList
ChatMessageListItem
Avatar
ChatPublisher
ChatAggregator ChatBridge
AMD’ing ChatManager
But chat also loads on yammer.com…
define() doesn’t exist
We needed a version of define() that ignored dependencies.
So we shimmed it.
Wait, don’t get up…Think about the possibilities.
Feature flags that aren’t used for features…
The resultsBefore:Compressed: 531kbUncompressed: 2048kb
After:Compressed: 216kbUncompressed: 715kbA 60% reduction!
build.json Asset Pipeline
Way too much JS CDN
ChatBundle r.js optimizer popout_chat.js CDN
The dream is real.Yammer is saved!
But, we didn’t really save Yammer.- AMD’ed a small percentage of files- Dev environment setup- Two worlds- Global namespaces
How we moved forward.And there is still more to do.
Reflection
- Big- Deployed often- Many, globally distributed contributors
Codebase challenges
1. Isolation
2. Iteration
3. Minimize Disruption
‘Code in Transition’ is OK
Transition or Stagnation:Choose One.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
