Splitting the Check on Compliance and Security

Dan Morel @dpmorel Director of TechOps

Michael Branch @michaelwroteSenior Software Engineer

The Delight and Difficulties of Universal Javascript with React

We had a common problem…two separate sites—mobile and desktop

www.warbyparker.comm.warbyparker.com

And uhh… visual and feature inconsistency

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

Yes… that’s a 10 And these are 15’s

Average page load—m.warbyparker.com

Yes… this is in seconds

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

• 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

• API-driven features with Backbone• Templating

• Server– jinja2– jade

• Client – jQuery DOM manipulation– HandleBars– React

Legacy front-end technologies

• 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

A new front-end architecture

Legacy architecture

I render stuff

server-side!

Responsive architecture

• Phase 1– Customer center

• Phase 2– Checkout

• Phase 3– Core shopping (home, gallery, products, cart)

• Phase 4– Peripheral pages

Project phases

• 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

• “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

• 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

23

• 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

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

Wow—we just added a whole new layer of fun

Thanks Michael!

A continuous improvement framework

1. Choose goals and metrics2. Get some datar to monitor those

metrics3. Improve stuff4. Review that data weekly, monthly5. Rinse, wash, repeat

App performance via New Relic

“Is it working” Dashboard?

Simulated traffic

Real user monitoring

Tying it all together—The Monthly Report

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