Tungsten.js is a modular JavaScript framework created by Wayfair to handle their large codebase of over 2 million lines of code and 2,000 JavaScript modules. It aims to provide modularity as technologies shift by separating concerns into interchangeable implementations like using Backbone for application logic, virtual-dom for DOM manipulation, and Mustache for templates.

1. Tungsten.js
Building a Modular Framework

2. Who Are We
Andrew Rota
@andrewrota
Matt DeGennaro
@thedeeg

3. Wayfair
Wayfair.com is an online destination for all things
home
Selection of more than seven million home items from 7,000
suppliers
Ecommerce company since 2002
Several large websites running a shared
codebase
PHP backend for customer­facing pages
2,000,000+ lines of code for custom e­commerce platform
2,000+ JavaScript modules

4. Why we did
For a large codebase, overhauls are rarely
possible a good idea
We needed a framework that we could upgrade
as technologies shifted

5. Let's Talk About Modularity
­ Edsger W. Dijkstra, Notes on Structured Programming, 1970
Large systems should be constructed out
of smaller components; each component
should be defined only by its interface and
not by its implementation
“

6. Systems Need to
Adapt

7. Lavaflow

8. Modularity
Requires Choices

9. Choices are your
Interfaces

11. Application Logic
DOM Manipulation
Templates

12. Backbone
virtual­dom
Mustache

13. Backbone
virtual­dom
Mustache
Familiar API for developers
Uses 'change' events to handle re­
renders
Delegates events using Tungsten's
Event interface
var AppView = View.extend({
childViews: {
'js‐new‐todo': NewItemView,
'js‐todo‐item': TodoItemView
},
events: {
'click .js‐toggle‐all': 'handleClickToggleAll'
'click .js‐clear‐completed': 'handleClickClearCompleted
}
});

14. Backbone
virtual­dom
Mustache
Handles taking the output from template and
updating the page
Creates patch operations from VirtualDOM
tree diffing and applies them to the DOM
[
{
"0": {
"type": "PROPS",
"vNode": {
"tagName": "LI",
"properties": {
"className": "js‐todo‐item "
},
"count": 13,
"children": "[5 children]"
},
"patch": {
"className": "js‐todo‐item completed "
}

15. Backbone
virtual­dom
Mustache
Declarative descriptors of markup
Uses data to create the current state of
the app
Rendered on both Client and Server
<div id="main">
<input id="toggle‐all" class="js‐toggle‐all"
<ul id="todo‐list">
{{#todoItems}}
{{> todo_item}}
{{/todoItems}}
</ul>
</div>

16. Templates?!

17. Separating
technologies not
concerns?

18. Different
environments have
different concerns.

20. Server choice should
not be dictated by
client­side choices

21. Implementations
FluxFlux
ReactReact
HandlebarsHandlebars

22. Implementations
BackboneBackbone
ReactReact
HtmlBarsHtmlBars

23. Implementations
FluxFlux
ReactReact
UnderscoreUnderscore

24. Implementations
FluxFlux
virtual­domvirtual­dom
HtmlBarsHtmlBars

25. Implementations
AmpersandAmpersand
ReactReact
JadeJade

26. Implementations
BackboneBackbone
Reactvirtual­dom
JadeJade

27. github.com/wayfair/tungstenjs