UI Rendering at Wayfair
-
Upload
andrew-rota -
Category
Software
-
view
353 -
download
0
Transcript of UI Rendering at Wayfair
#BosWebPerf
Boston Web Performance Group, December 2015
UI Renderingat Wayfair
Architecting forPerformance at Scale
#BosWebPerf
Wayfair
Wayfair.com is an online destination for all things
home
Selection of more than seven million home items from7,000+ suppliers
eCommerce company since 2002
Several large websites running a shared codebase
PHP backend for customerfacing pages
2,000,000+ lines of code for custom eCommerce platform2,000+ JavaScript modules
#BosWebPerf
Web UI rendering
ServerBuild up HTML for
views
Flush HTML to
browser
ClientUpdate HTML on
user interactions
#BosWebPerf
Performance that ScalesIn general, faster code has less abstractionMore scalable code has more abstractions
#BosWebPerf
Performance that ScalesIn general, faster code has less abstractionMore scalable code has more abstractions
Make it correct, make it clear, make it concise, makeit fast. In that order.“
Wes Dyer
#BosWebPerf
Where We StartedjQuery and other DOM manipulation libraries on theclientServing HTML straight from PHP scripts
#BosWebPerf
This was a problem for growthGlobal conflicts were a problemWas not scalableReusable components were difficult to create
#BosWebPerf
...also a problem for performanceRelied on developer knowledge for speedCode was as fast as its slowest functionality
#BosWebPerf
PHP MVC
Instigated by burgeoning mobile business
Controllers curated data, PHP views presented
View Classes introduced to further separate
concerns
#BosWebPerf
Unopinionated Unimplemented framework
Reusable Views and Models
DOM updates were done with jQuery
Backbone is an unopinionated framework thatprovides structure to your code.“
Thomas Boyt
#BosWebPerf
Performance was still lackingJS read from DOM to determine stateMutations at startup were commonMarkup was maintained both in PHP view and JSmutationsLack of framework knowledge and capability meantlowlevel code was still being used
#BosWebPerf
Abstraction scalability was still a problem
Without strict framework guidelines developerswrote multiple adhoc abstractions, especially onthe JS sideComponents written for one section didn'tnecessarily work elsewhere
#BosWebPerf
TemplatesTemplating language that ran on server and clientMustache was chosen
Stack support
One source of markup runs on all environments
#BosWebPerf
Mustache Pure PHP Pain Points
Context resolution
{{inner}} {{#outer}}{{inner}}{{/outer}}
{ "inner": 1, "outer": { "inner": 2 } }
#BosWebPerf
Today's UI Rendering Stack
Mustache TemplatesC++ on server, precompiled for client
Server Client
#BosWebPerf
AppLogic
DOMUpdates
Templates
Retained API for developers
...but no more DOM manipulation
Added more powerful "framework" features
Backbone.js
var AppView = View.extend({ childViews: { 'js-new-todo': NewItemView, 'js-todo-item': TodoItemView }, events: { 'click .js-toggle-all': 'handleClickToggleAll' 'click .js-clear-completed': 'handleClickClearCompleted' } });
#BosWebPerf
AppLogic
DOMUpdates
Templates
Handles taking the output from template andupdating the pageUses the library for updating theDOM...but could use any DOM updating library( , etc.)
virtualdom
Incremental DOM
#BosWebPerf
AppLogic
DOMUpdates
Templates
Uses templates
Data + Template → DOM
Rendered on both client and server
Mustache
<div id="main"> <input class="js-toggle-all" type="checkbox"> <ul id="todo-list"> {{#todoItems}} {{> todo_item}} {{/todoItems}} </ul> </div>
#BosWebPerf
Mustache_DataNext iteration of view classesBetter encapsulationStronger schema and securityClearer client contract
#BosWebPerf
Mustache_Dataclass Simple_View extends Mustache_Data { public $product_model;
public function product_name() { return $this->product_model->name; }
protected function template_name() { return 'path/to/template'; } }
#BosWebPerf
Where we're goingMustache_Data <=> ComponentIncreasing Cohesion
Sharing validation and other data across clientserver
Lambdas in phpmustache
#BosWebPerf
Abstraction isn't a zerosum game
Edsger W. Dijkstra
The purpose of abstraction is [...] to createa new semantic level in which one can beabsolutely precise.
“
#BosWebPerf
Tungsten.js at Mustache extension at
github.com/wayfair/tungstenjs
github.com/jbboehr/phpmustache