Navigating Codebase: How to Read a Production-Grade Repository

You need a Map, a Compass and a Guide

Dependency Graph of XlSheets Side Project with max-depth=2

Why Reading Code

🤔 Understand Core Business

  • Why: Help users to solve complex mathematical equations
  • What: It has a dynamic size and calculates equations
  • How: Using Recoil, React and MathJs

🗺 Draw a Map

XlSheets application files directory
Dependency Graph using `dot` Graphviz engine
Dependency Graph using `neato` Graphviz engine
// Install the dev dependency
yarn add -D dependency-cruiser
// Generate dependency-cruiser config file
yarn depcruise --init yes
// Generate the dependency graph and export it to Graphviz to
// transform the output to SVG image
yarn -s depcruise -T dot -x node_modules src/index.tsx | dot -T svg > dependency_graph.svg

👀 Have a Compass

✅ Read Tests

🛠 Use Debuggers

📜 Read Git History

— Final Thoughts

That is the same with writing better code. You have to read a lot of code to get better at writing code!

--

--

Web Application Developer. Knowledge hungry always learning. Aspiring to become a Web Unicorn. Find me @abduvik on social platforms.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdu Tawfik

Web Application Developer. Knowledge hungry always learning. Aspiring to become a Web Unicorn. Find me @abduvik on social platforms.