Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stories From a Music-Fueled Distributed Streaming Bender

Stories From a Music-Fueled Distributed Streaming Bender

So we built an employee-driven, geographically-distributed, multi-client, HTML5-based, API-centric, bathroom-enabled, buzzword-embracing music server for the GitHub offices. It's been a fun project to explore company culture, CSS frameworks, JavaScript methodologies, native clients, outside contributions, and to discover who gets really angry when Garth Brooks starts singing on the speakers. It's one of those projects that ended up far more nutty than the original idea. Come steal some ideas for your own projects.

Zach Holman

April 22, 2012
Tweet

More Decks by Zach Holman

Other Decks in Programming

Transcript

  1. stories from a
    music-fueled distributed
    streaming bender
    PLAY

    View full-size slide

  2. music keeps your
    RIGHT
    BRAIN
    happy
    LEFT
    BRAIN
    works
    while your

    View full-size slide

  3. my company is a pretty musical company

    View full-size slide

  4. WE BUILT
    an employee-driven,
    geographically-distributed,
    multi-client, HTML5-based,
    API-centric, bathroom-
    enabled, buzzword-
    embracing music server

    View full-size slide

  5. THIS ISN’T AN AD
    i hate talks like that

    View full-size slide

  6. THIS IS ABOUT
    building open source

    View full-size slide

  7. THIS IS ABOUT
    improving your company

    View full-size slide

  8. TODAY:
    what is play
    company side project culture
    doing open source real good
    structured experimentation
    stealing shit

    View full-size slide

  9. we talkin’ about
    WHAT

    View full-size slide

  10. PLAY
    a shared music server at github’s office
    GITHUB.COM/PLAY/PLAY

    View full-size slide

  11. MAC MINI
    all of our music
    QUEUE
    songs, artists,
    albums, stars
    >

    View full-size slide

  12. STEP ONE
    get a potentially empty office
    MARCH 2010

    View full-size slide

  13. STEP TWO
    get some big speakers
    MAY 2010

    View full-size slide

  14. STEP THREE
    get work done
    MAY 2010

    View full-size slide

  15. MUSIC LEADS TO STORIES!
    LIKE...

    View full-size slide

  16. WHEN OUR
    OFFICE GOT
    MISTAKEN FOR
    A NIGHTCLUB
    BECAUSE YOU
    CAN HEAR THE
    SPEAKERS
    THREE BLOCKS
    AWAY
    our neighbors hate us

    View full-size slide

  17. WHEN NINE OF
    US GOT TO CALL
    MC HAMMER...
    how did we get fired up?
    by blasting hammertime in the
    office all morning.
    true story.

    View full-size slide

  18. WHEN THE FIRE
    DEPARTMENT
    RUSHED TO THE
    OFFICE BECAUSE
    OUR SMOKE
    MACHINE WENT
    CRAZY...
    what were we playing?
    i don’t know but it
    must have been one
    hell of a song ARTIST’S RENDITION

    View full-size slide

  19. WHEN THE FIRE
    DEPARTMENT
    RUSHED TO THE
    OFFICE BECAUSE
    OUR SMOKE
    MACHINE WENT
    CRAZY...
    we don’t try to use
    the smoke machine
    anymore
    ARTIST’S RENDITION

    View full-size slide

  20. WHEN THE FIRE
    DEPARTMENT
    RUSHED TO THE
    OFFICE BECAUSE
    OUR SMOKE
    MACHINE WENT
    CRAZY...
    also, are these kids dead?
    ARTIST’S RENDITION

    View full-size slide

  21. WHEN THE FIRE
    DEPARTMENT
    RUSHED TO THE
    OFFICE BECAUSE
    OUR SMOKE
    MACHINE WENT
    CRAZY...
    also this kid definitely
    set the place on fire
    ARTIST’S RENDITION

    View full-size slide

  22. WHEN THE FIRE
    DEPARTMENT
    RUSHED TO THE
    OFFICE BECAUSE
    OUR SMOKE
    MACHINE WENT
    CRAZY...
    no seriously he
    was like, laughing
    last frame
    ARTIST’S RENDITION
    kid creeps me out

    View full-size slide

  23. i was going somewhere with
    this, i forget

    View full-size slide

  24. ANYWAY,
    MUSIC HAS BEEN
    A FUN PART OF
    GITHUB

    View full-size slide

  25. WE’VE SINCE EXPANDED IT.

    View full-size slide



  26. ̇
    ̇

    ̇
    APRIL 2012

    View full-size slide

  27. WEB
    queuing and searching

    View full-size slide

  28. WEB BACKEND
    itunes, applescript, sinatra, redis, pusher

    View full-size slide

  29. WEB FRONTEND
    coffeescript, mustache, scss, pusher, html5

    View full-size slide

  30. API
    the web is just another client

    View full-size slide

  31. SPEAKERS
    airport express, music everywhere
    >

    View full-size slide

  32. 60’S ROOM
    >

    View full-size slide

  33. ⽄ ̇
    POOL TABLE
    >

    View full-size slide


  34. ̇
    SITUATION ROOM
    >

    View full-size slide


  35. ̇
    MEN’S ROOM
    >

    View full-size slide

  36. DON’T WANT MUSIC?
    - we have private, quiet offices, too
    - you have headphones
    - or just don’t go to work today

    View full-size slide

  37. STREAMING
    music really everywhere

    View full-size slide

  38. consume everywhere
    CLIENTS
    f

    View full-size slide

  39. hubot play daft punk
    hubot play next
    hubot volume 75
    hubot play something i’d like
    f HUBOT CLIENT
    hubot i like this song

    View full-size slide

  40. f OS X CLIENT

    View full-size slide

  41. f IPHONE CLIENT

    View full-size slide

  42. f IPAD CLIENT

    View full-size slide

  43. f WINDOWS CLIENT

    View full-size slide

  44. f ANDROID CLIENT

    View full-size slide

  45. LIVE DJ BOOTH
    dj! spin that shit
    ~

    View full-size slide

  46. ~ LIVE DJ BOOTH

    View full-size slide

  47. PAUSE PLAY
    DJ
    SWITCH STREAM TO CONTROLLER
    AUTO-RECORD DJ SET
    TIMESTAMP & LABEL SET
    IMPORT BACK INTO PLAY

    View full-size slide

  48. MOST OF US HAVEN’T DJED BEFORE
    IT’S LIKE PROGRAMMING BUT FRESH
    AND NEW
    EVERYONE FEELS LIKE A GENIUS FOR MIXING
    “ALL MY FRIENDS” AND “WE ARE YOUR
    FRIENDS” FOR THE 462TH TIME
    guise it’s like two songs about friends whoaaa

    View full-size slide

  49. ECOSYSTEM
    lots got built, lots to build

    View full-size slide

  50. together, right now
    COME

    View full-size slide

  51. PLAY
    builds culture

    View full-size slide

  52. KEEP YOUR
    EMPLOYEES
    HAPPY

    View full-size slide

  53. A SOURCE OF UNHAPPINESS?
    BEING EXCLUSIONARY

    View full-size slide

  54. THIS IS ESPECIALLY DIFFICULT FOR
    REMOTE WORKERS

    View full-size slide

  55. PLAY IS ONE WAY WE GET GITHUBBERS
    SHARING EXPERIENCES

    View full-size slide

  56. PLAY HAS BEEN STREAMED:
    ON SAN FRANCISCO MUNI
    IN SOUTH AFRICA OVER MOBILE TETHERING
    IN VIRGINIA IN A CAR OVER BLUETOOTH
    IN JAPAN ON A HIGH-SPEED TRAIN

    View full-size slide

  57. THIS IS HOW WE KNOW WHO
    LOVES GARTH BROOKS
    (scott)

    View full-size slide

  58. THIS IS HOW WE KNOW WHO
    HATES GARTH BROOKS
    (everyone else)

    View full-size slide

  59. THIS IS HOW WE
    SHARE COMMON EXPERIENCES

    View full-size slide

  60. SHARED SIDE PROJECT
    build clients, learn new techniques, work
    with coworkers you wouldn’t normally
    work with

    View full-size slide

  61. GITHUB SIDE PROJECTS
    we build things like play and hubot to
    keep everyone excited
    sometimes even “fun” work blows
    encourage a culture of building

    View full-size slide

  62. FIND
    SOMETHING
    YOU CAN ALL
    HACK ON
    TOGETHER

    View full-size slide

  63. collaborate and listen
    STOP

    View full-size slide

  64. BUILD
    SOCIALLY
    that means be a good teammate

    View full-size slide

  65. ZOMG TELL
    EVERYONE
    EVERYTHING
    README
    INLINE
    DOCUMENTATION
    CLEAN TESTS
    LONG-FORM
    DOCUMENTATION
    OPEN ISSUES

    View full-size slide

  66. PLAY WAS DISCOVERED
    months before it shipped

    View full-size slide

  67. USE GITHUB
    to find free slave labor
    open new issues
    add todos
    detail your plans

    View full-size slide

  68. PEOPLE WILL SURPRISE YOU
    and build things you didn’t expect. it’s awesome.

    View full-size slide

  69. CONTRIBUTORS
    helped shape play without being asked

    View full-size slide

  70. detail your setup
    BUILD A
    KILLER
    README
    readme-driven development
    explain your plans

    View full-size slide

  71. setup development fixtures
    BUILD A
    KILLER
    BOOTSTRAP
    install with a one-liner
    dependency management

    View full-size slide

  72. say thanks, help them redirect
    BUILD A
    NON-KILLER
    ATTITUDE
    sometimes weird features happen
    don’t fret, don’t shoot down

    View full-size slide

  73. MAKE A PROJECT
    specifically to fuck around with new things

    View full-size slide

  74. HERE’S WHAT ISN’T IN PLAY
    foundation
    backbone.js
    ember.js
    WE GAINED A LOT
    FROM TRYING A LOT
    macruby

    View full-size slide

  75. GO OUT OF YOUR WAY TO
    TRY NEW TECHNIQUES

    View full-size slide

  76. HERE’S WHAT’S NEW IN PLAY:
    WEB AS API CLIENT
    “twitter-style”
    all clients use the endpoints same as web
    more stable, more dogfooding

    View full-size slide

  77. HERE’S WHAT’S NEW IN PLAY:
    COCOA/RUBY BRIDGES
    subscribe to itunes in cocoa
    push over pusher
    realtime clients (including web)

    View full-size slide

  78. HERE’S WHAT’S NEW IN PLAY:
    LIVE DJ SETS
    applescript agains gets us around GUIs

    View full-size slide

  79. HERE’S WHAT’S NEW IN PLAY:
    NATIVE OS TECHNIQUES
    data-first UI design on windows, mac
    ios/mac library sharing

    View full-size slide

  80. WHEN THE WHOLE PURPOSE IS
    EXPERIMENTATION,
    YOU CAN TAKE RISKS

    View full-size slide

  81. WHAT WERE RISKS THEN BECOME
    NORMAL PRACTICES
    AND YOU’RE BETTER OFF

    View full-size slide

  82. PLAY HAS
    LOTS OF MOVING PARTS

    View full-size slide

  83. PLAY
    ( MAC MINI )
    AIRFOIL
    NICECAST
    PUSHER
    >
    RESTROOMS
    >
    POOL TABLE
    f
    OS X CLIENT
    WINDOWS CLIENT
    IPHONE CLIENT
    c
    CONTROLLED BY CAMPFIRE
    ( CHAT ROOM )
    IPAD CLIENT
    TV SCREENS
    ANDROID CLIENT
    >
    60’S ROOM
    >
    DESKS
    ~ LIVE DJ BOOTH

    View full-size slide

  84. GO LEVERAGE EXISTING THINGS

    View full-size slide

  85. INTERNET STREAMING
    AIRPORT STREAMING
    MUSIC STATE
    nicecast
    airfoil
    itunes
    DJ SOFTWARE
    traktor

    View full-size slide

  86. BUILDING ALL THAT
    OURSELVES WOULD
    HAVE SUCKED

    View full-size slide

  87. PLAY 1.0 MANAGED PLAY STATE
    TURNS OUT, DIFFICULT PROBLEM
    reliability, simplicity
    PLAY-NEXT LETS ITUNES DJ HANDLE IT
    free itunes client browsing, remote.app, queueing
    redis, separate player process

    View full-size slide

  88. GUIs ARE HORRIBLE TO MANAGE
    completely breaks the bootstrap goal
    they’re great until we can replace them
    BUT:

    View full-size slide

  89. EMBRACE HACKY SOLUTIONS
    THEY’RE THE PINNACLE OF PROGRAMMING

    View full-size slide

  90. PLAY
    NOT WITH MY PROJECT,
    PLAY WITH YOUR PROJECT

    View full-size slide

  91. PLAY EXPERIMENT COLLABORATE

    View full-size slide

  92. PLAY
    GITHUB.COM/PLAY

    View full-size slide

  93. ZACH HOLMAN
    @HOLMAN

    View full-size slide