tungsten.js: building a modular framework

Tungsten.jsBuilding a Modular Framework

Who Are We

Andrew Rota@andrewrota

Matt DeGennaro@thedeeg

Wayfair

Wayfair.com is an online destination for all thingshome

Selection of more than seven million home items from 7,000suppliers

Ecommerce company since 2002Several large websites running a sharedcodebasePHP backend for customer­facing pages

2,000,000+ lines of code for custom e­commerce platform2,000+ JavaScript modules

Why we did

For a large codebase, overhauls are rarelypossible a good ideaWe needed a framework that we could upgradeas technologies shifted

Let's Talk About Modularity

­ Edsger W. Dijkstra, Notes on Structured Programming, 1970

Large systems should be constructed outof smaller components; each componentshould be defined only by its interface andnot by its implementation

“

Systems Need toAdapt

Lavaflow

ModularityRequires Choices

Choices are yourInterfaces

Application Logic

DOM Manipulation

Templates

Backbone

virtual­dom

Mustache

Backbone

virtual­dom

Mustache

Familiar API for developersUses 'change' events to handle re­rendersDelegates events using Tungsten'sEvent 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' );

Backbone

virtual­dom

Mustache

Handles taking the output from template andupdating the pageCreates patch operations from VirtualDOMtree 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 "

Backbone

virtual­dom

Mustache

Declarative descriptors of markupUses data to create the current state ofthe appRendered 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>

Templates?!

Separatingtechnologies not

concerns?

Differentenvironments havedifferent concerns.

Server choice shouldnot be dictated byclient­side choices

Implementations

FluxFlux

ReactReact

HandlebarsHandlebars

Implementations

BackboneBackbone

ReactReact

HtmlBarsHtmlBars

Implementations

FluxFlux

ReactReact

UnderscoreUnderscore

Implementations

FluxFlux

virtual­domvirtual­dom

HtmlBarsHtmlBars

Implementations

AmpersandAmpersand

ReactReact

JadeJade

Implementations

BackboneBackbone

Reactvirtual­dom

JadeJade

github.com/wayfair/tungstenjs