BuzzFeed 

Front End


Dev Stackup Talk




Joe Stanco
6/10/14

Dev Teams at BuzzFeed


  • Web App: Website, CMS
  • Mobile: Mobile Web, iOS/Android App
  • Discotech: "Social Discovery" Ads
  • Data Science: Analytics, Infographics, etc.
  • Mission Control: Post Promotion Tools 
  • Games: Custom Interactives

  • Plus.. remote developers across most teams 

Legacy Tech


  • Prototype
  • Scriptaculous (Drag/Drop, Effects, etc)
  • YUI (Image Cropper)

Modern Javascript


jQuery

  • Mobile Web
  • Games / Interactives

Backbone

  • "Mission Control"
  • "Megaphone"

Node / SockJS

  • "Pugopticon"

UI Tools & Techniques


Alphabet Soup


SASS = Syntactically Awesome Style Sheets

SMACSS = Scalable Modular Architecture CSS

BEM = Block Element Module

SVG = Scalable Vector Graphics


Real-Time Messaging

AKA "Pugopticon"

Image: Adrian Fraiha

Test All The Things


  • Selenium 2: Integration Testing
  • Jasmine: Unit Testing
  • Jenkins: Build Server
  • SiteSpeed: Performance Metrics

Communication


  • Bootcamp for new hires
  • Weekly tech talks
  • Code reviews
  • Slack + Wiki + Google Docs

Long-Term Strategies


  • Reduce tech debt
  • Better automation
  • Performance optimization
  • Scaling the tech team

Thank you!

BuzzFeed Front End Stack

By Joe Stanco

Made with Slides.com

BuzzFeed Front End Stack

Overview of the BuzzFeed Front End stack, team structure and tech strategies

  • 1,351

More from Joe Stanco