Tungsten.js: Building a Modular Framework
-
Upload
andrew-rota -
Category
Software
-
view
179 -
download
1
Transcript of Tungsten.js: Building a Modular Framework
![Page 1: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/1.jpg)
Tungsten.jsBuilding a Modular Framework
![Page 2: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/2.jpg)
Who Are We
Andrew Rota@andrewrota
Matt DeGennaro@thedeeg
![Page 3: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/3.jpg)
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 customerfacing pages
2,000,000+ lines of code for custom ecommerce platform2,000+ JavaScript modules
![Page 4: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/4.jpg)
Why we did
For a large codebase, overhauls are rarelypossible a good ideaWe needed a framework that we could upgradeas technologies shifted
![Page 5: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/5.jpg)
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
“
![Page 6: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/6.jpg)
Systems Need toAdapt
![Page 7: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/7.jpg)
Lavaflow
![Page 8: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/8.jpg)
ModularityRequires Choices
![Page 9: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/9.jpg)
Choices are yourInterfaces
![Page 10: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/10.jpg)
![Page 11: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/11.jpg)
Application Logic
DOM Manipulation
Templates
![Page 12: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/12.jpg)
Backbone
virtualdom
Mustache
![Page 13: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/13.jpg)
Backbone
virtualdom
Mustache
Familiar API for developersUses 'change' events to handle rerendersDelegates 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' );
![Page 14: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/14.jpg)
Backbone
virtualdom
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 "
![Page 15: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/15.jpg)
Backbone
virtualdom
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>
![Page 16: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/16.jpg)
Templates?!
![Page 17: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/17.jpg)
Separatingtechnologies not
concerns?
![Page 18: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/18.jpg)
Differentenvironments havedifferent concerns.
![Page 19: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/19.jpg)
![Page 20: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/20.jpg)
Server choice shouldnot be dictated byclientside choices
![Page 21: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/21.jpg)
Implementations
FluxFlux
ReactReact
HandlebarsHandlebars
![Page 22: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/22.jpg)
Implementations
BackboneBackbone
ReactReact
HtmlBarsHtmlBars
![Page 23: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/23.jpg)
Implementations
FluxFlux
ReactReact
UnderscoreUnderscore
![Page 24: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/24.jpg)
Implementations
FluxFlux
virtualdomvirtualdom
HtmlBarsHtmlBars
![Page 25: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/25.jpg)
Implementations
AmpersandAmpersand
ReactReact
JadeJade
![Page 26: Tungsten.js: Building a Modular Framework](https://reader031.fdocuments.net/reader031/viewer/2022032619/55c020bdbb61ebc3248b45df/html5/thumbnails/26.jpg)
Implementations
BackboneBackbone
Reactvirtualdom
JadeJade