SlideShare a Scribd company logo
Splitting the Check on
Compliance and Security
Dan Morel @dpmorel
Director of TechOps
Michael Branch @michaelwrote
Senior Software Engineer
The Delight and Difficulties of Universal
Javascript with React
The Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with React
We had a common problem…
two separate sites—mobile and desktop
www.warbyparker.com
m.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
The Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with React
• 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 metrics
2. Get some datar to monitor those metrics
3. Improve stuff
4. Review that data weekly, monthly
5. 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%!!!
The Delight and Difficulties of Universal Java Script with React

More Related Content

PDF
Step one in our quest for dev ops
PDF
On a Journey from Forensic Operations to 99.99 Uptime
PDF
Building a System That Never Stops New Relic at Scale
PDF
New Relic + Apprenda Webinar
PPTX
Oracle EBS R12.2 - The Upgrade Know-How Factory
PDF
How Oceanwide Accelerated its DevOps Adoption Journey with AppDynamics - AppS...
PDF
How Q2 eBanking Maximizes Customer Experience for a Hyper-Growth SaaS Platfor...
PPTX
Panaya oatug r12.2-upgrade
Step one in our quest for dev ops
On a Journey from Forensic Operations to 99.99 Uptime
Building a System That Never Stops New Relic at Scale
New Relic + Apprenda Webinar
Oracle EBS R12.2 - The Upgrade Know-How Factory
How Oceanwide Accelerated its DevOps Adoption Journey with AppDynamics - AppS...
How Q2 eBanking Maximizes Customer Experience for a Hyper-Growth SaaS Platfor...
Panaya oatug r12.2-upgrade

What's hot (19)

PPT
App Dynamics
PPTX
Oracle Upgrade Project Big Rocks - Done Right!
PPTX
Oracle Planning and Budgeting Cloud Service
PDF
AppSphere 15 - How AppDynamics is Shaking up the Synthetic Monitoring Product...
PPTX
Neev Application Performance Management Services
PPTX
Troubleshooting App Health and Performance with PCF Metrics 1.2
PDF
AppSphere 15 - Deep Dive into AppDynamics Application Analytics
PDF
IW14 Session: webMethods World
PPTX
Location-independent SharePoint
PDF
Application Migration: How to Start, Scale and Succeed
PDF
How Accenture's IT Organization Drives Performance Monitoring Globally - AppS...
PDF
Application Modernisation with PKS
PDF
What Product Leaders need to know about DevOps
PPTX
Radial | SOASTA IR Webinar
PDF
Click to Disk Troubleshooting with AppDynamics and OpsDataStore - AppSphere16
PDF
Preparing the Gap Inc. Ecommerce Platform for Traffic Surge During the Holida...
PDF
Under the Hood: Monitoring Azure and .NET - AppSphere16
PDF
Appboy: Operating in the Cloud for 850 Million Monthly Active Users, FutureSt...
PDF
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
App Dynamics
Oracle Upgrade Project Big Rocks - Done Right!
Oracle Planning and Budgeting Cloud Service
AppSphere 15 - How AppDynamics is Shaking up the Synthetic Monitoring Product...
Neev Application Performance Management Services
Troubleshooting App Health and Performance with PCF Metrics 1.2
AppSphere 15 - Deep Dive into AppDynamics Application Analytics
IW14 Session: webMethods World
Location-independent SharePoint
Application Migration: How to Start, Scale and Succeed
How Accenture's IT Organization Drives Performance Monitoring Globally - AppS...
Application Modernisation with PKS
What Product Leaders need to know about DevOps
Radial | SOASTA IR Webinar
Click to Disk Troubleshooting with AppDynamics and OpsDataStore - AppSphere16
Preparing the Gap Inc. Ecommerce Platform for Traffic Surge During the Holida...
Under the Hood: Monitoring Azure and .NET - AppSphere16
Appboy: Operating in the Cloud for 850 Million Monthly Active Users, FutureSt...
Microservices and the Modern IT Stack: Trends of Tomorrow - AppSphere16
Ad

Viewers also liked (17)

PDF
Proyectos y foros para colaborar
PPTX
Il manager che vorresti essere nicola renzi (1)
PDF
José de Ballivian: A mis compatriotas por Jose de Ballivian. 1840.
PPTX
e-Plan Conecta Novas Mídias com Sérgio Denicoli
PPTX
Environmental consequences and how long will the resources last us
PDF
TT100_AwardCert
PPT
Hoy hacemos educación física con el teacher
PPT
Unit 5.food
PPTX
Ten clear indicators our climate is changing
PPT
CLIMATE CHANGE - THE POSSIBLE CONSEQUENCES
PDF
Peddy paper no cre 2016
PPTX
Session 1 introduction of demography (as of 3-1-2017)
PDF
Arturo Borda. El Loco.
PDF
Benjamin Vicuña Mackenna: Guerra del Pacífico. Historia de la Campaña de Tara...
PDF
Florencio del Mármol: Recuerdos de viajes y guerras. 1880.
PPTX
DEMOGRAPHY
PPTX
Idioms from sports
Proyectos y foros para colaborar
Il manager che vorresti essere nicola renzi (1)
José de Ballivian: A mis compatriotas por Jose de Ballivian. 1840.
e-Plan Conecta Novas Mídias com Sérgio Denicoli
Environmental consequences and how long will the resources last us
TT100_AwardCert
Hoy hacemos educación física con el teacher
Unit 5.food
Ten clear indicators our climate is changing
CLIMATE CHANGE - THE POSSIBLE CONSEQUENCES
Peddy paper no cre 2016
Session 1 introduction of demography (as of 3-1-2017)
Arturo Borda. El Loco.
Benjamin Vicuña Mackenna: Guerra del Pacífico. Historia de la Campaña de Tara...
Florencio del Mármol: Recuerdos de viajes y guerras. 1880.
DEMOGRAPHY
Idioms from sports
Ad

Similar to The Delight and Difficulties of Universal Java Script with React (20)

PPTX
Benefits of developing single page web applications using angular js
PPTX
React js
PPTX
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
PDF
Rise and Fall of the Frontend Developer
DOC
Bhavesh_Shukla_Resume
PPTX
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
PDF
React Tech Salon
PDF
Building front-end apps that Scale - FOSDEM 2014
PDF
Curriculum vitae of nguyen hai quy
PPTX
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
PPTX
Rapid Application Development with MEAN Stack
PDF
How to Build Front-End Web Apps that Scale - FutureJS
PPTX
Deploy Faster Without Failing Faster - Metrics-Driven - Dynatrace User Groups...
PDF
Performance and Scalability Art of Isomorphic React Applications
PDF
React Native App Development.
PPTX
The Power of Single-Page Applications (SPAs) - Volga Tigris
PDF
Learning React - I
PPTX
STP 2014 - Lets Learn from the Top Performance Mistakes in 2013
PPTX
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
PDF
Comparison Between React Vs Angular.pdf
Benefits of developing single page web applications using angular js
React js
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
Rise and Fall of the Frontend Developer
Bhavesh_Shukla_Resume
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
React Tech Salon
Building front-end apps that Scale - FOSDEM 2014
Curriculum vitae of nguyen hai quy
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
Rapid Application Development with MEAN Stack
How to Build Front-End Web Apps that Scale - FutureJS
Deploy Faster Without Failing Faster - Metrics-Driven - Dynatrace User Groups...
Performance and Scalability Art of Isomorphic React Applications
React Native App Development.
The Power of Single-Page Applications (SPAs) - Volga Tigris
Learning React - I
STP 2014 - Lets Learn from the Top Performance Mistakes in 2013
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Comparison Between React Vs Angular.pdf

More from New Relic (20)

PPTX
7 Tips & Tricks to Having Happy Customers at Scale
PPTX
7 Tips & Tricks to Having Happy Customers at Scale
PDF
New Relic University at Future Stack Tokyo 2019
PDF
FutureStack Tokyo 19 -[事例講演]株式会社リクルートライフスタイル:年間9300万件以上のサロン予約を支えるホットペッパービューティ...
PDF
FutureStack Tokyo 19 -[New Relic テクニカル講演]モニタリングと可視化がデジタルトランスフォーメーションを救う! - サ...
PDF
FutureStack Tokyo 19 -[特別講演]システム開発によろこびと驚きの連鎖を
PDF
FutureStack Tokyo 19 -[パートナー講演]アマゾン ウェブ サービス ジャパン株式会社: New Relicを活用したAWSへのアプリ...
PDF
FutureStack Tokyo 19_インサイトとデータを組織の力にする_株式会社ドワンゴ 池田 明啓 氏
PPTX
Three Monitoring Mistakes and How to Avoid Them
PPTX
Intro to Multidimensional Kubernetes Monitoring
PDF
FS18 Chicago Keynote
PDF
SRE-iously
PDF
10 Things You Can Do With New Relic - Number 9 Will Shock You
PDF
Ground Rules for Code Reviews
PPTX
Understanding Microservice Latency for DevOps Teams: An Introduction to New R...
PPTX
Monitor all your Kubernetes and EKS stack with New Relic
PPTX
Host for the Most: Cloud Cost Optimization
PPTX
New Relic Infrastructure in the Real World: AWS
PPTX
Best Practices for Measuring your Code Pipeline
PPTX
Top Three Mistakes People Make with Monitoring
7 Tips & Tricks to Having Happy Customers at Scale
7 Tips & Tricks to Having Happy Customers at Scale
New Relic University at Future Stack Tokyo 2019
FutureStack Tokyo 19 -[事例講演]株式会社リクルートライフスタイル:年間9300万件以上のサロン予約を支えるホットペッパービューティ...
FutureStack Tokyo 19 -[New Relic テクニカル講演]モニタリングと可視化がデジタルトランスフォーメーションを救う! - サ...
FutureStack Tokyo 19 -[特別講演]システム開発によろこびと驚きの連鎖を
FutureStack Tokyo 19 -[パートナー講演]アマゾン ウェブ サービス ジャパン株式会社: New Relicを活用したAWSへのアプリ...
FutureStack Tokyo 19_インサイトとデータを組織の力にする_株式会社ドワンゴ 池田 明啓 氏
Three Monitoring Mistakes and How to Avoid Them
Intro to Multidimensional Kubernetes Monitoring
FS18 Chicago Keynote
SRE-iously
10 Things You Can Do With New Relic - Number 9 Will Shock You
Ground Rules for Code Reviews
Understanding Microservice Latency for DevOps Teams: An Introduction to New R...
Monitor all your Kubernetes and EKS stack with New Relic
Host for the Most: Cloud Cost Optimization
New Relic Infrastructure in the Real World: AWS
Best Practices for Measuring your Code Pipeline
Top Three Mistakes People Make with Monitoring

Recently uploaded (20)

PPTX
oil_refinery_comprehensive_20250804084928 (1).pptx
PDF
annual-report-2024-2025 original latest.
PPTX
IBA_Chapter_11_Slides_Final_Accessible.pptx
PPTX
01_intro xxxxxxxxxxfffffffffffaaaaaaaaaaafg
PDF
Introduction to Data Science and Data Analysis
PPT
Quality review (1)_presentation of this 21
PPTX
STERILIZATION AND DISINFECTION-1.ppthhhbx
PPT
Miokarditis (Inflamasi pada Otot Jantung)
PPTX
Supervised vs unsupervised machine learning algorithms
PPT
Reliability_Chapter_ presentation 1221.5784
PPTX
ALIMENTARY AND BILIARY CONDITIONS 3-1.pptx
PPTX
iec ppt-1 pptx icmr ppt on rehabilitation.pptx
PDF
Recruitment and Placement PPT.pdfbjfibjdfbjfobj
PPTX
IB Computer Science - Internal Assessment.pptx
PDF
Galatica Smart Energy Infrastructure Startup Pitch Deck
PPTX
Acceptance and paychological effects of mandatory extra coach I classes.pptx
PDF
[EN] Industrial Machine Downtime Prediction
PPTX
Computer network topology notes for revision
PDF
Fluorescence-microscope_Botany_detailed content
PPTX
Introduction to Knowledge Engineering Part 1
oil_refinery_comprehensive_20250804084928 (1).pptx
annual-report-2024-2025 original latest.
IBA_Chapter_11_Slides_Final_Accessible.pptx
01_intro xxxxxxxxxxfffffffffffaaaaaaaaaaafg
Introduction to Data Science and Data Analysis
Quality review (1)_presentation of this 21
STERILIZATION AND DISINFECTION-1.ppthhhbx
Miokarditis (Inflamasi pada Otot Jantung)
Supervised vs unsupervised machine learning algorithms
Reliability_Chapter_ presentation 1221.5784
ALIMENTARY AND BILIARY CONDITIONS 3-1.pptx
iec ppt-1 pptx icmr ppt on rehabilitation.pptx
Recruitment and Placement PPT.pdfbjfibjdfbjfobj
IB Computer Science - Internal Assessment.pptx
Galatica Smart Energy Infrastructure Startup Pitch Deck
Acceptance and paychological effects of mandatory extra coach I classes.pptx
[EN] Industrial Machine Downtime Prediction
Computer network topology notes for revision
Fluorescence-microscope_Botany_detailed content
Introduction to Knowledge Engineering Part 1

The Delight and Difficulties of Universal Java Script with React

  • 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
  • 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?
  • 32. Tying it all together—The Monthly Report
  • 33. Sooo… how did we do? Conversion up 6%!!!