#BosWebPerf

Boston Web Performance Group, December 2015    

UI Renderingat Wayfair

Architecting forPerformance at Scale

#BosWebPerf

Who Are We

Adam Baratz@adambaratz  

Andrew Rota@andrewrota  

Matt DeGennaro@thedeeg

#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 customer­facing 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

First StepsTowards

Abstraction

#BosWebPerf

On the server

#BosWebPerf

PHP MVC

Instigated by burgeoning mobile business

Controllers curated data, PHP views presented

View Classes introduced to further separate

concerns

#BosWebPerf

On the client...

#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 meantlow­level code was still being used

#BosWebPerf

Abstraction scalability was still a problem

Without strict framework guidelines developerswrote multiple ad­hoc abstractions, especially onthe JS sideComponents written for one section didn'tnecessarily work elsewhere

#BosWebPerf

Bridging theClient/Server

Gap

#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

Partial loading

{{#products}} {{>product}} {{/products

#BosWebPerf

Mustache ­ Pure PHP Pain Points

Context resolution 

{{inner}} {{#outer}}{{inner}}{{/outer}}

{ "inner": 1, "outer": { "inner": 2 } }

#BosWebPerf

Mustache ­ C++ Performance

#BosWebPerf

Mustache ­ ClientPrecompiled hogan.js templates

#BosWebPerf

Where we arenow

#BosWebPerf

Today's UI Rendering Stack

Mustache TemplatesC++ on server, precompiled for client

Server Client

#BosWebPerf

On the client...

#BosWebPerf

Tungsten.js

#BosWebPerf

Application Logic

DOM Updates

Templates

#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.)

virtual­dom

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

On the

server...

#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

What's Next?

#BosWebPerf

Where we're goingMustache_Data <=> ComponentIncreasing Cohesion

Sharing validation and other data across client­server

Lambdas in php­mustache

#BosWebPerf

Takeaways

#BosWebPerf

Abstraction isn't a zero­sum game

#BosWebPerf

Abstraction isn't a zero­sum game

­ Edsger W. Dijkstra

The purpose of abstraction is [...] to createa new semantic level in which one can beabsolutely precise.

“

#BosWebPerf

The problem of "rendering" can't be isolatedto client or server

#BosWebPerf

"We're never done"

Performance + abstraction is an iterativeprocess

#BosWebPerf

Performance is a means to an end

#BosWebPerf

Tungsten.js at Mustache extension at

github.com/wayfair/tungstenjs

github.com/jbboehr/php­mustache

#BosWebPerf

Questions?