When I first learned about the graph data structure, I was confused that it looked like this: Image from Virgina Tech When I was used to graphs that looked like this: Thank you for the image ! Ms. Parker According to the dictionary.com, a graph is a diagram representing a system of connections or interrelations among two or more things by a number of distinctive dots, lines, bars, etc. In computer science, a graph is simply a collection of (also called vertices) connected by Does this sound similar to a data structure we already know? If you thought of a tree, you are correct! Trees are a type of graph, but with stricter rules! don’t need a root node, and rather than nodes that are connected by child-parent relationships, connected nodes in a graph are called . nodes edges. Graphs siblings So where can we find graphs in our everyday developer lives? is an incredibly useful tool for front-end developers who want to use require and module.exports (or import and export in ES2015!) to connect files together. Webpack creates a graph whose edges link dependencies together in order to create one file, bundle.js, that you can plug into your index.html file. Easy peasy! Webpack Here’s an example! Let’s say I want to create a Mammal object and use prototypal inheritance to link it to a dog object. I’ll export my Mammal and import it into my Dog file. Notice I’m export my Dog component, so that I can import it and create a new Dachshund object with a prototypal link to Dog! And finally, my dog Tulsi who is a Chiweenie should definitely have a link to the dachshund object. So I’ll import Dachshund into the Tulsi file. Webpack will now create a graph, starting at index.js, that represents how these files connect to one another. A dog-pendency graph And now you know the greatness of graphs! Here is a from Webpack’s Github page that allows you to create a dependency graph of your Webpack project! For bigger projects, the results are pretty trippy. Here is a graph from one of my recent projects which you can visit at bkstreetview.com. cool tool A dependency graph of one of my recent projects! Happy graph making!
