The document discusses the evolution of Wayfair's web performance architecture, emphasizing the shift from a PHP-based system with jQuery to a more abstracted system using Mustache templates and C++ for server-side rendering. It highlights performance challenges faced due to scalability issues and the need for reusable components, moving towards a more cohesive client-server model. The ongoing goals include improving encapsulation, security, and clarity in contracts between client and server, underscoring that performance optimization is an iterative process.

1. #BosWebPerf
Boston Web Performance Group, December 2015
UI Rendering
at Wayfair
Architecting for
Performance at Scale

2. #BosWebPerf
Who Are We
Adam Baratz
@adambaratz
Andrew Rota
@andrewrota
Matt DeGennaro
@thedeeg

3. #BosWebPerf
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 eCommerce platform
2,000+ JavaScript modules

4. #BosWebPerf
Web UI rendering
Server
Build up HTML for
views
Flush HTML to
browser
Client
Update HTML on
user interactions

5. #BosWebPerf
Performance that Scales
In general, faster code has less abstraction
More scalable code has more abstractions

6. #BosWebPerf
Performance that Scales
In general, faster code has less abstraction
More scalable code has more abstractions
­
Make it correct, make it clear, make it concise, make
it fast. In that order.“
Wes Dyer

7. #BosWebPerf
Where We Started
jQuery and other DOM manipulation libraries on the
client
Serving HTML straight from PHP scripts

8. #BosWebPerf
This was a problem for growth
Global conflicts were a problem
Was not scalable
Reusable components were difficult to create

9. #BosWebPerf
...also a problem for performance
Relied on developer knowledge for speed
Code was as fast as its slowest functionality

10. #BosWebPerf
First Steps
Towards
Abstraction

11. #BosWebPerf
On the server

12. #BosWebPerf
PHP MVC
Instigated by burgeoning mobile business
Controllers curated data, PHP views presented
View Classes introduced to further separate
concerns

13. #BosWebPerf
On the client...

14. #BosWebPerf
Unopinionated Unimplemented framework
Reusable Views and Models
DOM updates were done with jQuery
­
Backbone is an unopinionated framework that
provides structure to your code.“
Thomas Boyt

15. #BosWebPerf
Performance was still lacking
JS read from DOM to determine state
Mutations at startup were common
Markup was maintained both in PHP view and JS
mutations
Lack of framework knowledge and capability meant
low­level code was still being used

16. #BosWebPerf
Abstraction scalability was still a problem
Without strict framework guidelines developers
wrote multiple ad­hoc abstractions, especially on
the JS side
Components written for one section didn't
necessarily work elsewhere

17. #BosWebPerf
Bridging the
Client/Server
Gap

18. #BosWebPerf
Templates
Templating language that ran on server and client
Mustache was chosen
Stack support
One source of markup runs on all environments

19. #BosWebPerf
Mustache ­ Pure PHP Pain Points
Partial loading
{{#products}}
{{>product}}
{{/products

20. #BosWebPerf
Mustache ­ Pure PHP Pain Points
Context resolution
{{inner}}
{{#outer}}{{inner}}{{/outer}}
{
"inner": 1,
"outer": {
"inner": 2
}
}

21. #BosWebPerf
Mustache ­ C++ Performance

22. #BosWebPerf
Mustache ­ Client
Precompiled hogan.js templates

23. #BosWebPerf
Where we are
now

24. #BosWebPerf
Today's UI Rendering Stack
Mustache Templates
C++ on server, precompiled for client
Server Client

25. #BosWebPerf
On the client...

26. #BosWebPerf
Tungsten.js

27. #BosWebPerf
Application Logic
DOM Updates
Templates

28. #BosWebPerf
App
Logic
DOM
Updates
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': 'handleClickClearComple
}
});

29. #BosWebPerf
App
Logic
DOM
Updates
Templates
Handles taking the output from template and
updating the page
Uses the library for updating the
DOM
...but could use any DOM updating library
( , etc.)
virtual­dom
Incremental DOM

30. #BosWebPerf
App
Logic
DOM
Updates
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>

31. #BosWebPerf
On the
server...

32. #BosWebPerf
Mustache_Data
Next iteration of view classes
Better encapsulation
Stronger schema and security
Clearer client contract

33. #BosWebPerf
Mustache_Data
class 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';
}
}

34. #BosWebPerf
What's Next?

35. #BosWebPerf
Where we're going
Mustache_Data <=> Component
Increasing Cohesion
Sharing validation and other data across client­server
Lambdas in php­mustache

36. #BosWebPerf
Takeaways

37. #BosWebPerf
Abstraction isn't a zero­sum game

38. #BosWebPerf
Abstraction isn't a zero­sum game
­ Edsger W. Dijkstra
The purpose of abstraction is [...] to create
a new semantic level in which one can be
absolutely precise.
“

39. #BosWebPerf
The problem of "rendering" can't be isolated
to client or server

40. #BosWebPerf
"We're never done"
Performance + abstraction is an iterative
process

41. #BosWebPerf
Performance is a means to an end

42. #BosWebPerf
Tungsten.js at
Mustache extension at
github.com/wayfair/tungstenjs
github.com/jbboehr/php­mustache

43. #BosWebPerf
Questions?