What Facebook's Front End Code Looks Like

You don't have to be a techie to appreciate the artistic qualities of diagrams showing interdependencies between different sets of computer code on Facebook's front end.

You don’t have to be a techie to appreciate the artistic qualities of this diagram showing interdependencies between different sets of computer code on Facebook’s front end.

But if you do understand the computer lingo PHP, then you’ll especially dig this Hackathon project showing how over 10,000 different modules of front-end code depend on one another. Note that a couple of blocks are cut off from the right-hand side of this screenshot that went up on the Facebook Engineering page — the images come from an interactive application that shows details each colored block when you mouse over it.



Like Facebook Software Engineer Greg Schechter says in his blog post about the visualization:

  • This diagram is divided into layers, where each row represents a layer, and a layer’s modules are dependent only on modules in the rows below it, and are depended upon only by modules in the rows above it. Thus, a module sinks to the lowest possible layer it can.
  • A system with more layers generally represents more interdependencies between modules (both direct and indirect/transitive dependencies).
  • The visualization provided here colors modules darker if they have more dependencies, and moves them towards the left of their row.
  • The 10% of modules with the greatest number of dependencies across the entire grid are the darkest, the next 10% are the next darkest, and so forth.
  • The magenta colored cell is the one the mouse is currently over, and the information box is associated with that cell. fbx/home/navigation is the selected module in this diagram.
  • The cells below fbx/home/navigation that are colored green are those the module is dependent upon, and the cells colored cyan are the modules that depend on fbx/home/navigation.
  • These dependencies are only “direct” dependencies — modules that explicitly specify their dependence upon or are explicitly depended upon by the currently selected module.
  • Looking at indirect, or transitive, dependencies can also be very interesting and fruitful. The diagram below includes (in more muted colors) the indirect dependents/dependencies of the selected module.
  • Readers, how might such a diagram streamline coding on the Facebook platform in the future?