opticon 2015-experience optimization in modern web architecture
TRANSCRIPT
#opticon2015
Experience Optimization in Modern Web ArchitectureJoe CassonOptimizely
Jordan GarciaOptimizely
• Recent trends in modern web architecture
• Opportunities and challenges
• On the ground knowledge from panelists
Single Page Applications Overview
“What is a single page application?”
– Joe Casson, Opticon 2015
Traditional Web Architecture
• Webpage rendered server-side
• Little client-side logic
• User interaction reloads the page
Server
Initial Payload html / css / javascript
Browser
Single Page Applications
• User interaction doesn't reload
• More client-side logic
• Scripts and stylesheets aren’t re-downloaded
Server
Browser
Initial Payload html / css / javascript API
User InteractionNew Content
Performance
• Scripts and styles are not re-downloaded
• Increase in perceived performance
Distribution
• Companies building for more platforms
• Single API powers all platforms
• Easier to build for new channelsWeb
API
iOS Android
Optimizely with Traditional Web Architecture
• In the past, server rendered pages were the norm
• Optimizely javascript snippet served on every page
• Every page load activates Optimizely and runs experiments
Server
Initial Payload html / css / javascript
Browser
+
Optimizely with Single Page Applications
• User interaction doesn't reload
• Analogous “page load” event
• Manual or Conditional Activation
Server
Browser
Initial Payload html / css / javascript
API
User InteractionNew Content
+
• Calls Optimizely javascript in the page
• Requires access to source code
Manual Activation
• Set up entirely in visual editor
• One-time setup
Conditional Activation
Option 2: Callback
Option 1: Polling
Single Page Application Frameworks
• Router controls page navigations
• Need a hook or event to set up conditional activation
• Integration with frameworks: AngularJS, Ember, Backbone
Product Page
Checkout Page
Home Page
RouterUser clicks link
Conditional Activation in AngularJS
• Hook into router location change event
• Set up once in visual editor
• Good convention — route changes always go through router
• “Hookable" — an event or callback that can be used with conditional activation
• Access to application state
Building Your Own Router
#opticon2015
Panel
Jordan GarciaFront-end Lead, Optimizely
Case Van ArkelSenior Optimization Specialist, Rocket Lawyer
Dave KingFront-end Lead, Tilt
@tildedave
Justin KnollSenior Director of Product Management, BitTorrent@jordanjgarcia
Data Flow with Flux Architecture
Stores
React Views
“A” variation “B” variation
Optimizely Experiment
On window load, customJavaScript updates the experiment store and the page automatically updates
Testing Different Signup FormsConditional in source codechecks experiment store
Testing Different Signup Forms
If flag not set in experimentstore, render “A” variation
Testing Different Signup Forms
If flag is set in experimentstore, render “B” variation