View
100
Download
0
Category
Tags:
Preview:
Citation preview
#opticon2015
Experience Optimization in Modern Web ArchitectureJoe CassonOptimizely
@mrcassonjoe@optimizely.com
Jordan GarciaOptimizely
@jordanjgarciajordan@optimizely.com
• Recent trends in modern web architecture
• Opportunities and challenges
• On the ground knowledge from panelists
Single Page Applications Overview
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
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
+
• 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
Recommended