# Surviving ❤️‍🩹, Diving 🤿 and Thriving 🌱 #### Working on a large code base --- ## Who am I? </br> - My name is Oli, I'm from FAC23 - I work at a biotech software startup called Opvia 👋🏽 - I'm here to talk about large codebases - Then we should have 5-10 mins dive into a large github project --- FAC Final project (50 files, 3000 lines)  <p style="color:lightgreen">2 Weeks later</p>...Opvia project (1300 files, 100K lines)  --- |Size |Lines of code (est) |-----|--------| |Small|1k - 5k | |Medium |5k - 20k| |Large |20k - 50k| |Very Large|50 - 250k| |Huge | 250k - 1M | |Massive | 1M+ | --- Any guesses for which company has largest codebase? 🤔 --- <img src="https://i.imgur.com/f8Gpt07.png" alt="drawing" width="500"/> 500 Million lines of code 🤯 --- ## Challenges - Feels overwhelming - Impossible to *fully* comprehend - Easy to get lost --- ## ...more challenges! - Difficult to map UI behaviour to code - Harder to keep track of state - Code is new or unfamiliar *most* of the time --- <img src="https://i.imgur.com/qJ1QcBF.jpg" alt="drawing" width="400"/> --- ## What can we do? --- ##### What helps? + Understanding how different coding activities require <span style="color:lightgreen">different mental models </span> and approaches to navigation + Making the most of developer <span style="color:lightblue">tooling, guidance and tips</span> --- # Coding activities 1) <span style="color:lightgreen">**Identifying**</span> - locating relevant code 2) <span style="color:lightgreen">**Exploring**</span> - broadly understanding how code relates to other code 4) <span style="color:lightblue">**Building**</span> - completing a feature or task 5) <span style="color:lightblue">**Observing**</span> - investigating a bug or writing a test --- # Identifying ##### locating relevant code - Finding out <span style="color:lightgreen">where</span> (not how) the problem is likely to be solved - Finding the most <span style="color:lightgreen">immediately</span> relevant components and functions - Requires trying to map UI (or an effect) to code --- ### Identifying tips - Use code search functionality, guess related words and function names - Use the inspector tool to find component names, classes, identifying css - Find nearby components or related functions - Make use of folder structure as a guide - Ask someone! --- ### Exploring - Finding out how code is related and linked, what is calling what? - Tree climbing, function unpackaging, component unnesting, mapping out the territory - Looking for good examples to pattern match against - When exporing it's ok to cross domains and boundaries - You're not overly concerned by the inputs and outputs, the names of functions suffice --- #### Exploring tips - Gitlens, readme and comments - Keep a note of important function names - VS code: Navigating back and forward with ctrl +/- - VS code:Find all references, Find all implementations, Go to type defintion, Go - VS code: Pins and bookmarks --- ### Building - Creating or improving a feature/function that solves a problem - Possible once you have a clear idea on what the inputs and outputs need to be, and where your code fits into the system --- #### Building tips - Trust your inputs initially - Create a Diagram of inputs and outputs - Stay focused on your task - The longer you work with what you have the more obvious it will be that you are missing a crucial input - Make use of the pull requests to document your work and help yourself in the future - Pair if possible --- ### Observing - Observing involves having hyperfocus on input and outputs - You have expectations about what the inputs and outputs should be - useful for debugging and testing --- #### Observing tips - console.log with descriptive messages - delete code and see what still works - write/modify unit tests - learn how to use debugger --- # Let's dive! https://github.com/kentcdodds/kentcdodds.com # Conclusion - Challenging but best learning experience You can find me on: - GitHub: duckRabbitPy