zagat.com case study (drupalcon denver 2012)

40

Upload: phase2

Post on 18-Dec-2014

1.059 views

Category:

Technology


2 download

DESCRIPTION

A look behind the scenes of the 2011 Drupal relaunch of Zagat.com. Includes interactive charting with RaphaelJS and multi-layered performance optimization techniques. Presented by Steven Merrill and Brian McMurray.

TRANSCRIPT

Page 1: Zagat.com Case Study (DrupalCon Denver 2012)
Page 2: Zagat.com Case Study (DrupalCon Denver 2012)

ZAGAT.COM CASE STUDYZAGAT.COM CASE STUDY

Page 3: Zagat.com Case Study (DrupalCon Denver 2012)
Page 4: Zagat.com Case Study (DrupalCon Denver 2012)

WHO ARE WE?WHO ARE WE?Steven Merrill

Director of Engineering, Phase2 Technology @stevenmerrill

Brian McMurray

Developer, Phase2 Technology @bmcmurray

Page 5: Zagat.com Case Study (DrupalCon Denver 2012)

, the quick history, the quick history

Founded in 1979 by Tim and Nina Zagat

User-Generated Content before “User-Generated Content”

“The Gastronomic Bible”- The Wall Street Journal

We worked with Zagat from June 2010 -November 2011

Page 6: Zagat.com Case Study (DrupalCon Denver 2012)

THE PROBLEM(S)THE PROBLEM(S)Legacy ASP.NET website rapidly aging

Updates difficult

Complicated QA testing and deploymentprocess

Desire for website to be more social

Separated systems (website, blog, webstore)

Page 7: Zagat.com Case Study (DrupalCon Denver 2012)

THE SOLUTIONSTHE SOLUTIONSFight for the Users

Drupal and Friends

Robots for Better Living

It’s Dangerous To Go Alone! Take This!

Eye on the Prize

Hindsight is 20/20

Page 8: Zagat.com Case Study (DrupalCon Denver 2012)

FIGHT FOR THE USERSFIGHT FOR THE USERS

Iterate quickly and test the ideas with real users

Track goals and analytics

Page 9: Zagat.com Case Study (DrupalCon Denver 2012)

USER TESTINGUSER TESTINGFormal in-person interviews with functionalprototype

On-going user testing through usertesting.comservice

Users could be granted special permission(roles) to access beta features

Page 10: Zagat.com Case Study (DrupalCon Denver 2012)

USER TESTING (VIDEO)USER TESTING (VIDEO)

00:01 -00:34

Page 11: Zagat.com Case Study (DrupalCon Denver 2012)

TRACK GOALS AND ANALYTICSTRACK GOALS AND ANALYTICSGoogle Analytics –http://dgo.to/google_analytics

CrazyEgg analytics – http://crazyegg.com

Google Website Optimizer for multi-variatetesting

Links with anchor names (# tags) to track in-sitereferrals

Page 12: Zagat.com Case Study (DrupalCon Denver 2012)

DRUPAL AND FRIENDSDRUPAL AND FRIENDSUse complimentary technologies to augment

Contrib for the 80%, Custom for the 100%

Page 13: Zagat.com Case Study (DrupalCon Denver 2012)

DYNAMIC CHARTINGDYNAMIC CHARTING

RaphaëlJS –http://raphaeljs.com

Browser Compatibility

Mobile phonecompatibility

Page 14: Zagat.com Case Study (DrupalCon Denver 2012)

THE ZAGAT MATRIXTHE ZAGAT MATRIX

Page 15: Zagat.com Case Study (DrupalCon Denver 2012)

THE ZAGAT MATRIXTHE ZAGAT MATRIX

Page 16: Zagat.com Case Study (DrupalCon Denver 2012)

PERFORMANCE MATTERSPERFORMANCE MATTERSVarnish – http://varnish-cache.org

Front-end Performance

Page 17: Zagat.com Case Study (DrupalCon Denver 2012)

VARNISHVARNISHHTTP Caching

Caching Fragments (ESI)

Page 18: Zagat.com Case Study (DrupalCon Denver 2012)

FRONT-END PERFORMANCEFRONT-END PERFORMANCESpriting

“Spooning”

<img src="spacer.gif"data-src="actual-image.jpg" />

Page Weight Trimming

AJAX upgrades

OpenLayers build scripts

Monitoring

HARViewer -

http://www.softwareishard.com/har/viewer/

ShowSlow - http://www.showslow.com/

Page 19: Zagat.com Case Study (DrupalCon Denver 2012)

FRONT-END PERFORMANCE TUNINGFRONT-END PERFORMANCE TUNING

Run daily front-end performance tests against anumber of competitors and keep metrics

Page 20: Zagat.com Case Study (DrupalCon Denver 2012)

FRONT-END PERFORMANCE TUNINGFRONT-END PERFORMANCE TUNING

Page 21: Zagat.com Case Study (DrupalCon Denver 2012)

CONTRIB SUCCESS STORIESCONTRIB SUCCESS STORIESSocial Badges

Flag –http://dgo.to/flag

Rules –http://dgo.to/rules

Zagat “Buzz” Blog

Maps

Shop

Page 22: Zagat.com Case Study (DrupalCon Denver 2012)

CONTRIB: ZAGAT "BUZZ" BLOGCONTRIB: ZAGAT "BUZZ" BLOGMigrate – http://dgo.to/migrate

Views – http://dgo.to/views

Page 23: Zagat.com Case Study (DrupalCon Denver 2012)

CONTRIB: MAPSCONTRIB: MAPSOpenLayers – http://dgo.to/openlayers

Page 24: Zagat.com Case Study (DrupalCon Denver 2012)

CONTRIB: SHOPCONTRIB: SHOPÜbercart – http://dgo.to/ubercart

Page 25: Zagat.com Case Study (DrupalCon Denver 2012)

GOING CUSTOMGOING CUSTOMSearch

Paid Online Subscriptions

Page 26: Zagat.com Case Study (DrupalCon Denver 2012)

SEARCHSEARCHNeeded to integrate with specific Endeca setup

AJAX refreshing of results

Integration with subscription upselling

Multiple search interfaces

Custom autocomplete

Page 27: Zagat.com Case Study (DrupalCon Denver 2012)

PAID ONLINE SUBSCRIPTIONSPAID ONLINE SUBSCRIPTIONSIntegrate with specific payment handler andZagat backend

Many discrete data points:

Promo codes

Subscription offers

Bundles

Partner promotions

Page 28: Zagat.com Case Study (DrupalCon Denver 2012)

CONTRIB IN CUSTOM CODECONTRIB IN CUSTOM CODESubscription offers used CTools Export UI

Page 29: Zagat.com Case Study (DrupalCon Denver 2012)

ROBOTS FOR BETTER LIVINGROBOTS FOR BETTER LIVINGAutomate deployments

Performance monitoring

Regression testing

Page 30: Zagat.com Case Study (DrupalCon Denver 2012)

JENKINSJENKINSAutomated data imports

Automatic deployment

Run SimpleTests before eachdeploy

Empowering QA people to pushand do deploys

TortoiseHg on a Windowsserver

Cron, with historical reporting

Run daily tasks to sync between systems

Page 31: Zagat.com Case Study (DrupalCon Denver 2012)

MONITORING TOOLSMONITORING TOOLSReal-time Stats

Pingdom

GTMetrix

Page 32: Zagat.com Case Study (DrupalCon Denver 2012)

REAL-TIME STATSREAL-TIME STATSCoRadiant Appliance

Zeus Load Balancer

Page 33: Zagat.com Case Study (DrupalCon Denver 2012)

PINGDOMPINGDOMUptime

Backend response times

Page 34: Zagat.com Case Study (DrupalCon Denver 2012)

GTMETRIXGTMETRIXFront-end performance testing

Daily snapshot and performance over time

Can send custom cookies or use HTTPauthentication

Page 35: Zagat.com Case Study (DrupalCon Denver 2012)

SELENIUMSELENIUMhttp://seleniumhq.org

Automated regression testing

Run on the QA environment

ARIA-compliant autocomplete(by upgrading jQuery and jQueryUI) meant we could test with Selenium

Page 36: Zagat.com Case Study (DrupalCon Denver 2012)

IT'S DANGEROUS TO GO ALONE!IT'S DANGEROUS TO GO ALONE!TAKE THIS!TAKE THIS!Your Drupal site needs more than just Drupalers

Tips on adding team members

Page 37: Zagat.com Case Study (DrupalCon Denver 2012)

BRINGING IN NON-DRUPAL TALENTBRINGING IN NON-DRUPAL TALENTLook for folks:

Who are familiar with contributing to open-source

Interested in learning new things

Examples

Junior developer with a Linux / CSbackground who ended up contributing to alarge amount of Drupal development

Experienced contributor to a Linux distributionwith no web programming background whocame in and helped write complex Seleniumtests and automate web QA

Later went on to assume the majority of thesysops responsibilities

Page 38: Zagat.com Case Study (DrupalCon Denver 2012)

EYE ON THE PRIZEEYE ON THE PRIZEAll software has bugs

Product owners with deep experience will noticebugs that users won’t

Some features were gone, and users let us know

Page 39: Zagat.com Case Study (DrupalCon Denver 2012)

HINDSIGHT IS 20/20HINDSIGHT IS 20/20Config Management

Virtualized LAMP environments

Page 40: Zagat.com Case Study (DrupalCon Denver 2012)

CONFIGURATION MANAGEMENTCONFIGURATION MANAGEMENT

Six hosting environments