Opticon 2017 Experimenting in Modern Web Applications
Download as PPTX, PDF0 likes638 views
Optimizely announced new features to support experimentation on dynamic web applications. These include indefinite element detection using mutation observers, parallel execution of changes, and smarter page activation/deactivation. This allows experiments to work seamlessly across single page applications and sites with dynamic content updates, without requiring custom code. It also improves performance by reducing polling and timeouts. The new features are currently in beta testing and will make Optimizely better suited for modern web development without extra work from developers.
Opticon 2017 Experimenting in Modern Web Applications
- 1. Experimenting on Modern Web Applications Whelan Boyd Product Manager, Optimizely James Fox Software Engineer, Optimizely opticon2017
- 2. Agenda Here 1. Dynamic Websites 2. Experimentation Challenges 3. Announcing “Support for Dynamic Websites” 4. Technology Behind Solution 5. Get Started 6. Q&A opticon2017
- 4. Our Ambition • Optimizely X Web product “just works” • Developers focus on higher complexity experiments • Modernize your stack without concern opticon2017
- 5. What is a Dynamic Website? opticon2017
- 6. Dynamic Websites Here 1. Interactive 2. Single Page Applications 3. Infinite Scroll 4. Lazy Loaded Content 5. AJAX-heavy 6. Responsive opticon2017
- 7. EVOLUTION OF THE MODERN WEBPAGE opticon2017
- 9. Evolution of the Modern Webpage opticon2017 199 1 First Website Simple HTML Text
- 11. Evolution of the Modern Webpage opticon2017 First Website Simple HTML Text 199 1 Table Based Layouts Still mostly text Mid 90’s
- 13. Evolution of the Modern Webpage opticon2017 First Website Simple HTML 199 1 Table Based Layouts Still mostly text Mid 90’s Late 90’s Flash :/
- 15. Evolution of the Modern Webpage opticon2017 First Website Simple HTML Text 199 1 Table Based Layouts Still mostly text Mid 90’s Late 90’s Flash :/ Increased CSS Support Early 00’s
- 17. opticon2017
- 18. Evolution of the Modern Webpage opticon2017 First Website Simple HTML Text 199 1 Table Based Layouts Still mostly text Mid 90’s Late 90’s Flash :/ Increased CSS Support Early 00’s Mid 00s Web 2.0 AJAX and early JavaScript frameworks
- 22. Evolution of the Modern Webpage opticon2017 First Website Simple HTML Text 1991 Table Based Layouts Still mostly text Mid 90’s Late 90’s Flash :/ Increased CSS Support Early 00’s Mid 2000s Web 2.0 AJAX and early JavaScript frameworks User Expectations Sky High Performance is King Navigation - fast and intuitive 2010’s
- 24. What are Single-Page Applications? opticon2017 <HEAD> <script src=cdn.optimizely.com/js/opticon.js></script> <BODY><BODY> <BODY> HOMEPAGE CATEGORY PRODUCT Single HTTP Document
- 25. opticon2017
- 27. opticon2017
- 28. opticon2017
- 29. opticon2017
- 30. Rest of the stack opticon2017
- 31. Why are they so popular? opticon2017
- 32. Benefits of Modern Single-Page Apps • User Experience opticon2017 Fast Performance Easy navigation
- 33. • Developer Happiness Benefits of Modern Single-Page Apps opticon2017 Modular components Maintainable, flexible
- 34. TL;DR: Webpages are only getting more dynamic opticon2017
- 38. What went wrong? • “Additional Cards” not modified • Experiments don’t activate when navigating opticon2017
- 39. What could go wrong? • Changes don’t apply at all • Changes overwritten • Changes don’t go away opticon2017
- 40. Experimentation Challenges • Team loses confidence • Dependent on developers opticon2017
- 41. Optimizely X – Current Tooling opticon2017
- 42. Optimizely X – Page Activation opticon2017
- 43. Optimizely X – Full Client Activation opticon2017
- 44. Optimizely X – Extensions opticon2017
- 45. Optimizely X – Node SDK opticon2017
- 46. Optimizely X - Node SDK demo app opticon2017
- 47. Key takeaway opticon2017 They’re all code interfaces
- 48. Our Ambition • Optimizely “just works” • Developers focus on higher impact experiments • Modernize your stack without concern opticon2017
- 50. DEMO - Support for Dynamic Websites opticon2017
- 52. 3 Core updates to Optimizely X • Indefinite Element Detection via MutationObserver API • Change Dependency Configuration Serial vs Parallel • Smart(er) Pages Activate & Deactivate Triggers & Conditions opticon2017 In Beta Available Now Coming Soon
- 56. Element Detection – Optimizely Classic
- 57. SAV E 20% opticon2017 Element Detection – Optimizely Classic Polling…. (50ms) 50ms . . . 100ms 125ms 150ms 200ms 250ms 1 sec . . . 2 sec 2.125s
- 58. Element Detection – Optimizely X
- 59. SAV E 20% opticon2017 Polling… (20ms) 20ms . . . 40ms 50ms 60ms 200ms 1 sec . . . 2 sec 2.125s . . . SAVE 10% Element Detection – Optimizely X . . . .
- 60. With Indefinite Observation using MutationObserver API opticon2017
- 61. SAV E 20% SAV E 15% opticon2017 SAVE 10% SAV E 20% SAV E 15% Observing DOM…. 20ms . . . 30ms 60ms 358ms . . . . . . 402ms 34ms . . . 1.2 sec . . . . . . . . . Element Detection – MutationObservers
- 62. What about performance? • Observing all DOM changes without timeout? • Actually more performant on most sites Fewer invocations than polling • Native Browser API • Easy to throttle as an option
- 64. Change Dependencies - Classic opticon2017 Custom Code Footer Change Buy Button Change Navbar Change Polling…. Polling…. Wait DOM Ready Timeout (fail) Applied Applied
- 65. Change Dependencies (X) opticon2017 Change 1 Change 2 Change 3 Change 4 Custom Code Footer Change Buy Button Change Navbar Change Execute Immediately Polling…. Polling… Timeout (fail) Applied Timeout (fail)
- 66. Change Dependencies (X - parallel) opticon2017 Footer ChangeCustom Code Navbar Change Buy Button Change Observing… . Observing… . Execute Immediately Observing… Applied AppliedApplied Nav List Change Observing… . Applied
- 69. Pages Lifecycle - Current opticon2017 Setup Page Trigger Client Activation Page Activation Experiment Decision Observe & Apply Changes <HEAD> <script src=cdn.optimizely.com/js/123.js /> <BODY> Category <BODY> Homepage <BODY> Product Page De-Activation Cancel Observation Undo/Revert Changes Page Load User Clic k
- 70. Pages Lifecycle – Smart Pages opticon2017 Setup Page Triggers Client Activation Page Activation Experiment Decision Observe & Apply Changes <HEAD> <script src=cdn.optimizely.com/js/123.js /> <BODY> Category <BODY> Homepage <BODY> Product Page De-Activation Cancel Observation Undo/Revert Changes Page Load User Clic k Page Activation Experiment Decision Observe & Apply Changes Page De-Activation Cancel Observation Undo/Revert Changes Page Activation Experiment Decision Observe & Apply Changes
- 71. Benefits • Non-developers are self-sufficient • Framework agnostic • Eliminates flashing effect opticon2017
- 72. Coming Soon • Indefinite Element Detection – ask CSM about private beta • Smart Pages – early 2018 opticon2017
- 73. opticon2017 Q& A