Score! Superior Digital Experiences with MLS
-
Upload
phase2 -
Category
Technology
-
view
196 -
download
3
Transcript of Score! Superior Digital Experiences with MLS
![Page 1: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/1.jpg)
SCORE!SUPERIOR DIGITAL EXPERIENCES WITH MLS
MAY 10, 2016
Brian Aznar(Director of Engineering, MLS Digital)
Steven Merrill (Director of DevOps, Phase2)
![Page 2: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/2.jpg)
BACKGROUND MLS & DIGITAL PRODUCTS
![Page 3: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/3.jpg)
MAJOR LEAGUE SOCCER STATE OF THE LEAGUE
‣ 20 current teams with plans to expand to 24 by 2020 ‣ Adding state of the art soccer-specific stadiums around the US -
average in stadium audience exceeds NHL and NBA ‣ Expanding our reach in the US and around the world with great new
TV distribution deals ‣ Young and multicultural fan base that is hungry for digital
![Page 4: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/4.jpg)
MLS FANBASE
‣ Avids ‣ Regularly watches and
attends MLS matches ‣ Consume soccer related
content ‣ Regularly visits
MLSsoccer.com and other soccer specific sites
‣ Casuals ‣ Occasionally
watches and attends MLS Matches
![Page 5: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/5.jpg)
MLS DIGITAL PRODUCT ECOSYSTEM
‣ Web: 20 club websites + 1 league web site using Drupal 7 ‣ Mobile Apps: iOS, Android ‣ Connected TV: Roku, Chomecast, Apple TV ‣ Services: Content API, Video & Stats ingest pipelines,
Content delivery, etc … ‣ Infrastructure: AWS
![Page 6: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/6.jpg)
2015 CASE STUDY
![Page 7: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/7.jpg)
GOAL
‣ Modernize and stabilize MLS’ web platform (backend and frontend) and successfully migrate 21 sites by the end of 2015 to AWS and D7.
![Page 8: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/8.jpg)
THE TEAM
![Page 9: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/9.jpg)
PHASE2
‣ Founded in 2001 ‣ Offices in DC, NYC, San Francisco, and Portland ‣ Committed to open source technology ‣ Focus on how content is delivered, how
teams collaborate, and how audiencesexperience information
![Page 10: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/10.jpg)
PHASE2 & MLS
‣ Long-term partnership over 3 years ‣ Helped with D7 platform build ‣ March 2015 - we kicked off their migration to
MP7 Drupal platform and into AWS
![Page 11: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/11.jpg)
PHASE2 & MLS TECHNOLOGY TEAM
‣ Drupal Developers (Phase 2) ‣ Fullstack Javascript Developers: React, Backbone, Node.js & Go (MLS) ‣ DevOps (Phase 2) ‣ Process = Scrumban
‣ Maximize development velocity, agility and responsiveness to business needs.
‣ Centralized Development Team ‣ Moving from segmented teams towards a single cross disciplinary team.
![Page 12: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/12.jpg)
CHALLENGES & SOLUTIONS
![Page 13: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/13.jpg)
CHALLENGES WE NEEDED TO ADDRESS
1. Outdated UX originally built for desktop viewing only
2. Inflexible Authoring - Needed an efficient and scalable way to give clubs more control to build out their own content
3. Wasted Server Capacity - High variability in traffic patterns means planning for the worst
![Page 14: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/14.jpg)
CHALLENGES WE NEEDED TO ADDRESS
4. High Fixed infrastructure costs
5. Poor Performance
6. Technology Soup - Go, node, CoreOS/Fleet, Docker,PHP/Drupal (Multiple Versions) and Salt all managed with a lean team
7. Aggressive Migration - 21 websites and No downtime
a. Avoiding major tent pole events that varied across clubs
![Page 15: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/15.jpg)
1. MODERN UI EXPERIENCE
![Page 16: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/16.jpg)
‣ Building blocks that editors can put together ‣ All features were designed to be responsive ‣ Video highlights are pushed from MLS’s video providers ‣ Import of MLS entities (teams/players/seasons) from MLS’s pipeline
2. EDITORIAL FLEXIBILITY
![Page 17: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/17.jpg)
3. SPIKEY TRAFFIC
‣ Traffic Spikes (avg 4x) centered around games and events ‣ League represented about half the traffic on average ‣ Great candidate for autoscaling
![Page 18: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/18.jpg)
4.a HIGH INFRASTRUCTURE COST
‣ 2 Infrastructures (One foot in the cloud) ‣ Drupal running in Rackspace Servers ‣ Services Running in AWS
‣ Drupal running on fixed set of large servers configured to handle the average amount of traffic plus physical devices (firewalls, NetApp storage…)
‣ Paying for unnecessary resources needs during off peak and off season traffic
![Page 19: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/19.jpg)
4.b MOVING INTO AWS
‣ Rackspace => AWS - everything in one cloud infrastructure ‣ Autoscaled Instances ‣ Additional operational benefits by using:
‣ Amazon RDS, ElastiCache, S3
![Page 20: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/20.jpg)
AUTOSCALING‣ Reduces stress ‣ Automatic healing ‣ Performance benefits
‣ Manual adjustment up and down ‣ Automatic scaling based on metrics
‣ Cost benefits
![Page 21: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/21.jpg)
‣ For autoscaling, you should build cattle, not pets ‣ Previous MLS autoscaling provisioned from scratch
‣ Phase2 built “fat” AMIs with all software + code ‣ Far faster deployment time ‣ An AMI can come up if everything else is down
‣ See Steven’s DevOps track session tomorrow for more info!
AUTOSCALING BACKGROUND
![Page 22: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/22.jpg)
A USUAL MONTH
![Page 23: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/23.jpg)
THE OVERALL RESULT
![Page 24: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/24.jpg)
5. POOR PERFORMANCE
‣ Unsuccessful attempt at cloud multi region architecture ‣ Caching anomalies between Drupal in 2
datacenters ‣ Slow cache clearing bottlenecks
‣ Slow server response times > 1000 ms
![Page 25: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/25.jpg)
‣ Right-sized AWS instances to their workloads ‣ Upgraded to PHP 5.5 for a performance boost ‣ Optimal instance size + PHP 5.5 = 40% increased throughput ‣ Added stability fixes
PERFORMANCE TUNING: QUICK WINS
![Page 26: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/26.jpg)
‣ Load Testing & Application Monitoring to find and remove bottlenecks ‣ Disabled DB read/write split for a massive speed increase ‣ Doubled the size of memcache instance ‣ Killed legacy code that cleared all of Drupal’s caches ‣ Results:
‣ Instance sizes reduced by half ‣ Massive decrease in average page render time
PERFORMANCE TUNING
![Page 27: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/27.jpg)
![Page 28: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/28.jpg)
6. TECH COMPLEXITY
‣ Clubs and League Content Sites ‣ Drupal (6/7) ‣ PHP (5.1/5.3) ‣ Jenkins / Salt for Deployment
& Configuration Management
‣ Web Services / Stats & Video Ingest Pipeline / Misc Web Apps ‣ Node.js & Go ‣ CoreOS/Fleet/Docker & Teamcity for
Deployment & Configuration Management
‣ Server Configuration Drift
![Page 29: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/29.jpg)
7. MIGRATION
‣ Seattle, Orlando, NYCFC were in place ‣ Large project management lift
‣ Coordination with stakeholders ‣ Training schedule ‣ Working with club schedules /
game schedules
‣ Central Digital Club Services team played a huge role by managing coordination w/ clubs and drupal editors
![Page 30: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/30.jpg)
‣ Drupal multisite ‣ Saved server resources ‣ Made deploys smaller ‣ Worked for MLS Digital specifically because of
the integrated nature of their Drupal platform ‣ No bespoke development per-club ‣ Centralized feature development ‣ Far lower support burden (6 people)
MULTI-TENANT SETUP
![Page 31: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/31.jpg)
PROJECT MILESTONES
‣ April 2015: Migrated first team site (NY Red Bulls)
‣ July: Turned on autoscaling ‣ April - November: Migrated MP7 ‣ October: League site launched! ‣ October: Decision Day
‣ December: Turned off Rackspace hosting ‣ January 2016: Helped hire in-house
DevOps Engineer ‣ March: Successful 2016 Season Kickoff
![Page 32: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/32.jpg)
TOOLS
![Page 33: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/33.jpg)
TOOLS
‣ New Relic for Application Performance Management / Instrumentation
‣ Blaze meter for Load testing ‣ Datadog for Infrastructure Metrics
![Page 34: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/34.jpg)
NEW RELIC
‣ Table Stakes Tooling for the Modern Technology Team
‣ Real Time End to End Client & Server metrics and performance measurement ‣ Introspection of everything from end
page rendering on a user’s browser to PHP & DB bottlenecks on the server
‣ Tiers: ‣ Free - 1 day retention -
good enough for load tests ‣ Pro - 90 day retention
![Page 35: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/35.jpg)
REALTIME FULL STACK METRICS: CLIENT TO SERVER TO REPO
![Page 36: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/36.jpg)
CLUB ROLLUPS
REALTIME FULL STACK METRICS: CLIENT TO SERVER TO REPO
![Page 37: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/37.jpg)
CLUB ROLLUPS
MODULE, HOOK & VIEW PERFORMANCE
![Page 38: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/38.jpg)
GLOBAL ROLLUPS
MULTI SITE TOP LEVEL METRICS: AGGREGATE
![Page 39: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/39.jpg)
CLUB ROLLUPS
MULTI SITE TOP LEVEL METRICS: INDIVIDUAL SITE
![Page 40: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/40.jpg)
SUMMARY
![Page 41: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/41.jpg)
OUTCOMES
‣ Migrated fully onto AWS ‣ Lowered hosting bill significantly by leveraging AWS features ‣ Helped reduce support load through policy changes
and new MLS hires ‣ Go see Steven’s session for more info
on immutable infra!
![Page 42: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/42.jpg)
PROBLEMS ADDRESSED IN 2015
1. Outdated front-end UI experience originally built for desktop viewing only
2. Club editorial teams needed more control and flexibility to build content that met their needs but we needed it all to fit within the same brand ecosystem
3. High variability in traffic patterns resulting wasted capacity
![Page 43: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/43.jpg)
PROBLEMS ADDRESSED IN 2015
4. High fixed infrastructure costs
5. Managing multiple technologies (CoreOS/Fleet,Salt, PHP, Go, node) and versions (PHP, Drupal) with a small team
6. Migrating 21 websites without any down time and avoiding major tent pole events that varied across clubs
![Page 44: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/44.jpg)
THE FUTURE
![Page 45: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/45.jpg)
THE FUTURE
‣ Improving performance ‣ Improving editorial usability ‣ Further consolidation & simplification
of tech stack ‣ #docker!
‣ Preparing for omnichannel
![Page 46: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/46.jpg)
CHECK US OUT!
labs.mlssoccer.com
mlssoccer.com
phase2technology.com
SOCCER STADIUMSNEAR YOU!
![Page 47: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/47.jpg)
QUESTIONS
![Page 48: Score! Superior Digital Experiences with MLS](https://reader031.fdocuments.net/reader031/viewer/2022030313/58d0cb911a28ab866c8b6315/html5/thumbnails/48.jpg)
So How Was It? - Tell Us What You ThinkEvaluate th is session - ht tps: / /events.drupal .org/neworleans2016/schedule
Thanks!