At Pinterest, we've begun experimenting in production with Web Components. This talk will discuss some challenges of implementing Web Components in a large scale production environment such as SEO concerns, reasonable fallbacks for browsers not supported by Platform.js, migrating a large code base component-by-component to mitigate risk, and optimizing page load and scroll performance.

2. Web Components at Scale
2014-10-20
Chris Danford, @chrisdanford
Pinterest Web Team

3. Topic Covered
Pinterest’s evaluation of Web Components
• Migrating from our existing component framework
• SEO impact
• Page load perf
• Polyfill gotchas
• Browser compatibility

4. Background Learnings Conclusion TODO

5. Background
2 years since major design decisions made

6. Background
Pinterest has grown
Then
7 engineers touching web
Now
70 engineers touching web

7. Background
Architecture
Web iOS
Android
API
Search Datalayer
Graph Service
Client Apps
Back-end
Services ...

8. Background
Web architecture
Web server
Routing
Templates
Render a component tree
Behavior (event handlers)
Duplication

9. Background
Existing component system
• Backbone View
• Backbone Model
• templates render to an HTML string, then innerHTML to
load
• re-rendering a subtree throws away the old subtree
entirely

10. Style (.scss)
Structure (.html)
Behavior (.js)

11. from a template
from JS

12. Background
Web Components score card
• Migrate gradually
• Compatible with existing tooling
• Content Security Policy
• Page load performance (too much)
• Don’t hurt SEO
• Encapsulation of DOM and styles
• Don’t cut off too many browser versions

13. Background Learnings Conclusion TODO

14. Migrate Gradually
Custom Elements lifecycle functions
Pinterest
onCreated
onAddedToDom
onContentReady
onRemovedFromDom
Custom Elements
createdCallback
attachedCallback
—
detachedCallback
Polymer
created
attached
domReady
detached

15. Quick prototype
Each component renders itself in attachedCallback

16. Migrate Gradually

17. Preserve Existing Tools
Can work with existing tooling
• SASS
• ESLint
• Closure Compiler
• Syntax-highlighting editors

18. Preserve Existing Tools
External scripts and stylesheets are no problem
• Polymer docs: Separating scripts from markup

19. Works with Existing Tooling

20. Don’t break Content Security Policy
Polyfill problems
• The HTML Imports polyfill loads imports using
XMLHttpRequest then evals script

21. Requirements
Content Security Policy
• If you keep your styles and
scripts external, there’s no
action needed.
• If you write inline styles or
inline scripts, use the “csp”
flag and Vulcanize will
extract them to separate
files.
grunt.initConfig({
vulcanize: {
options: {
csp: true,
...
},
files: {
'out.html': 'comps/**.html'
},
},
});

22. Content Security Policy

23. Server-side Rendering
• No story at all for Web Components/Polymer
• If we can get away with it, we’d rather eliminate the Python
code path for templates/rendering
• What is the impact on
• Page load times?
• SEO?

24. Page Load Performance
Nice to have
• Not critical, but don’t want to regress more than 10-20%.
• The median user has < 2 page refreshes per visit. Almost
every interaction is a pushState.
• Indirectly affects SEO (speed is a factor in scoring).

25. Page Load Performance
Experiment
• Control: Render the initial content sever-side in Python and
send it as HTML in the page load
• Treatment: Serve meta tags and correct HTTP response
codes, but render all of the visible content in JS.
• Measure using Web Page Test’s SpeedIndex - a measure of
how early the final pixels are painted. Lower is better.
• An explanation of SpeedIndex

26. Page Load Performance
SpeedIndex, San Jose, DSL, Chrome
Server-rendered JS-rendered Difference
First View 5073 5236 3%
Repeat View 2571 3114 20%

27. Page Load Performance
A pleasant surprise!

28. SEO
Important to not regress
• Web doesn’t have the most active users of all the Pinterest
client apps.
• Web is the largest source of acquisition.

29. SEO
Organic search traffic by source
In practice, we are targeting Google crawler.

30. SEO
Does Google’s crawler understand JS?
Historically: “No”
May 23, 2014:
“we decided to try to (better)
understand pages by executing
JavaScript”
-Google

31. SEO
A/B test JS-rendered page
• 10% of “Board” pages will render all of their components
client-side
• Takes Google roughly 1 week to re-index all content and for
us to see the true impact

32. SEO
5% decline in traffic vs. control group after only 1.5 days

33. SEO
“Fetch as Google”
• A tool in Google Webmaster Tools that
shows what the crawler sees.
Rendering pages with Fetch as Google
post

34. • Crawler is seeing some
client-rendered
components. (yay!)
• Content area of the
page was blank. (boo)
• An XHRs was needed
to render the content,
but the crawler
blocked it. Eliminate
the need for the XHR.

35. SEO
Next experiment
• Inline the data into the page to eliminate the XHR.

36. SEO
But I’m optimistic!

37. DOM Encapsulation
Shadow DOM
It’s a heroic (crazy?) effort to make this
work as a polyfill.
Overrides
• 20 methods on HTMLElement
• 44 methods on Document
• 69 element contructors

38. DOM Encapsulation
Shadow DOM, continued
Quirks
• document, window, document.body, document.head
can’t be wrapped by the polyfill, and you need to manually
wrap:
• wrap(document.body)
• Console shortcuts to grab elements return the unwrapped
element and need to be wrapped.
• wrap($0)

39. Style Encapsulation
Shadow CSS
A style shimmer: re-writes CSS text with
a bunch of regexes

40. Style Encapsulation
Shadow CSS - what works
• Replace :host with element selector
• Add upper-bound encapsulation by prepending element
selector

41. Style Encapsulation
Easy with a CSS preprocessor too

42. Style Encapsulation
Shadow CSS - limitations
“For browsers that lack native support, Polymer’s polyfills
attempt to shim some of the scoping behavior.”
-Polyfill Details

43. Chrome 38 (native) Firefox 32 (polyfill)

44. Style Encapsulation
Shadow CSS - limitations galore
Can’t polyfill lower-bound encapsulation
• Platform.ShadowCSS.strictStyling = true;
• Requires that you add custom element’s name as an attribute
on all DOM nodes in the shadowRoot e.g. <span x-foo>
• Nobody is going to do that without a build step, so why bother
polyfilling this at all?

46. Unless you like testing in different browsers
• Force the Shadow DOM polyfill to be enabled.

47. Shadow DOM
Shadow CSS

48. Browser Compatibility
Polymer-stated support
IE < 10 is hopeless
Safari < 6 is hopeless
https://www.polymer-project.org/resources/compatibility.html

49. Browser Compatibility
Pinterest browsers by visitor
5.05%+ of visitors incompatible

50. Browser Compatibility
Pinterest browsers by visitor
5.05%+ of visitors incompatible 9.25%+

51. Browser Compatibility
Anecdotes
• Android Browser 4.1 and 4.3 not
working with any of the demos

52. Browser Compatibility
Anecdotes
• Chrome 37 crashes frequently
with dev tools open making
tweaks to the Polymer tutorial
• iOS8 was broken well after the
GM shipped and didn’t work until
just before public launch

53. Browser Compat
Anecdotes - IE10
• the renderer process locks up on
an unpatched IE10 (e.g. modern.ie
image that has updates turned off)

54. Browser Compat
Anecdotes - IE10
10.0.10 10.0.20

55. Browser Compat
Anecdotes - IE10
• Can’t tell how many users this might impact because build #
isn’t in the UA string.

56. Browser Compatibility

57. Background Learnings Conclusion TODO

58. Conclusion
Migrate Gradually
Works with Existing Tooling
Content Security Policy
Page Load Performance
SEO
Shadow DOM
Shadow CSS
Browser Compatibility

59. Polymer architecture
Polymer.js
• TemplateBinding
• syntactic sugar
(polymer-element
tag, on-*event*
attribute binding)
• tooling (Vulcanize,
Polymer Designer)
core-elements
paper-elements
Platform.js
“Prollyfills”
• ShadowDOM
• HTMLImports
• Custom Elements
• MutationObserver
• Object.observe
• menus
• drawers
• panels
• animation
framework

60. Background Learnings Conclusion TODO

61. Next Steps
• SEO
• eliminate the XHR, reset the experiment
• Browser compatibility
• try to measure impact on IE10
• Pieces of platform.js that work on more browsers (Custom
Elements?)
• Finish evaluating other framework options

63. engineering.pinterest.com
@chrisdanford