Warby Parker recently launched a new responsive site built from the ground up using React, Node, and an entirely API-driven architecture. Building a "Universal JavaScript" app is a dream for front-end engineers thanks to reusable components that work on the client/server, but what are the performance, monitoring and infrastructure challenges? In this session you’ll learn about: -Building a performant, responsive front-end -The benefits of using React on your site -How to monitor and alert for performance issues

1. Splitting the Check on
Compliance and Security

2. Dan Morel @dpmorel
Director of TechOps
Michael Branch @michaelwrote
Senior Software Engineer
The Delight and Difficulties of Universal
Javascript with React

5. We had a common problem…
two separate sites—mobile and desktop
www.warbyparker.com
m.warbyparker.com

6. And uhh… visual and feature inconsistency

7. And our site, especially mobile, was
slooooowww...

8. Yes… that’s a 10 And these are 15’s
Average page load—m.warbyparker.com
Yes… this is in seconds

9. So we decided to rebuild our front-end...

10. • More and more traffic coming from mobile
• A great and consistent experience for our customers, no
matter what device they use
• Harder to optimize and maintain two essentially different
sites
Going responsive

11. • API-driven features with Backbone
• Templating
• Server
– jinja2
– jade
• Client
– jQuery DOM manipulation
– HandleBars
– React
Legacy front-end technologies

12. • API-driven features with Backbone
• React on the client and server
• Templating
– Server
• jinja2
• jade
– Client
• jQuery DOM manipulation
• HandleBars
• React
Responsive front-end technologies

13. A new front-end architecture

14. Legacy architecture

15. I render stuff
server-side!
Responsive architecture

16. • Phase 1
– Customer center
• Phase 2
– Checkout
• Phase 3
– Core shopping (home, gallery, products, cart)
• Phase 4
– Peripheral pages
Project phases

17. • Decouples your core business logic from your views
• Easier to implement performance/caching strategies
• An accessible approach for a lot of organizations
• APIs can power more than just front-ends
A fully API-powered front-end

18. • “A JavaScript library for building user interfaces”
• React with server-side rendering is a front-end dream
• An async approach with progressive enhancement for
speed
• Pure React views, no jQuery or other DOM
manipulation
All-in with React

19. • Gives design and development a visual language
• Consistency and reusability
• Component Lab
– Living style guide of our visual and functional user
interface patterns
– components.warbyparker.com
Components

24. • React can enable you to depend less on JavaScript in
the browser with sensible markup approaches
• Immutable objects please
• Older mobile devices can struggle with large DOMs
• Consider ways of coupling CSS with components
Post-project learnings

25. So How Do We Operationalize It and Make Sure
It’s Fast?

26. Wow—we just added a whole new layer of fun
Thanks Michael!

27. A continuous improvement framework
1. Choose goals and metrics
2. Get some datar to monitor those metrics
3. Improve stuff
4. Review that data weekly, monthly
5. Rinse, wash, repeat

28. App performance via New Relic

29. “Is it working” Dashboard?

30. Simulated traffic

31. Real user monitoring

32. Tying it all together—The Monthly Report

33. Sooo… how did we do? Conversion up 6%!!!