Featuring speakers from Tilt, BitTorrent, RocketLawyer, Optimizely Dave King, Frontend Lead, Tilt Justin Knoll, Senior Director of Product Management, BitTorrent Case Van Arkel, Senior Optimization Specialist, RocketLawyer Jordan Garcia, Frontend Tech Lead, Optimizely Joe Casson, Sales Engineer, Optimizely AngularJS, Backbone, React—like it or not, modern web architecture is shifting into the world of the single-page application. Learn what to look for in JS frameworks so you can run powerful A/B tests with Optimizely and how to integrate Optimizely into your current single-page application architecture. The first half of the session, Jordan Garcia, Frontend Tech Lead at Optimizely, will overview single-page application frameworks. The second half will showcase customers who have implemented great A/B testing strategies developed for their single-page applications.

1. #opticon2015
Experience Optimization in
Modern Web Architecture
Joe Casson
Optimizely
@mrcasson
joe@optimizely.com
Jordan Garcia
Optimizely
@jordanjgarcia
jordan@optimizely.com

2. • Recent trends in modern web architecture
• Opportunities and challenges
• On the ground knowledge from panelists
Single Page Applications Overview

3. “What is a single page
application?”
– Joe Casson, Opticon 2015

4. Traditional Web Architecture
• Webpage rendered server-side
• Little client-side logic
• User interaction reloads the page
Server
Initial Payload
html / css / javascript
Browser

5. 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

6. Performance
• Scripts and styles are not re-downloaded
• Increase in perceived performance

7. Distribution
• Companies building for more
platforms
• Single API powers all platforms
• Easier to build for new channels
Web
API
iOS Android

8. 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
+

9. 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
+

10. • Calls Optimizely javascript in the page
• Requires access to source code
Manual Activation

11. • Set up entirely in visual editor
• One-time setup
Conditional Activation
Option 2: Callback
Option 1: Polling

12. 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
Router
User clicks link

13. Conditional Activation in AngularJS
• Hook into router location change event
• Set up once in visual editor

14. • 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

15. #opticon2015
Panel
Jordan Garcia
Front-end Lead, Optimizely
Case Van Arkel
Senior Optimization
Specialist, Rocket Lawyer
Dave King
Front-end Lead, Tilt
@tildedave
Justin Knoll
Senior Director of Product
Management, BitTorrent
@jordanjgarcia

16. Data Flow with Flux Architecture
Stores
React Views
“A” variation “B” variation
Optimizely Experiment
On window load, custom
JavaScript updates the
experiment store and the
page automatically updates

17. Testing Different Signup Forms
Conditional in source code
checks experiment store

18. Testing Different Signup Forms
If flag not set in experiment
store, render “A” variation

19. Testing Different Signup Forms
If flag is set in experiment
store, render “B” variation