How to stop reading code and start delivering
•Download as PPTX, PDF•
0 likes•93 views
John was frustrated by his inefficiency in writing code for projects. His manager was disappointed that projects took longer than expected. John struggled to navigate the "code maze" of large projects due to too much noise and not seeing patterns or the big picture. The document proposes a solution called "codecrumbs" which would help developers cut off unnecessary paths, see an overview of the entire codebase, and leave notes to help navigate complex code like leaving breadcrumbs in a maze.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
How to stop reading code and start delivering
- 1. How to stop reading code and start delivering
- 3. Story about John *he knows how to write code
- 6. 2 - 3 Efficiency over time t, E, m f 6 12
- 7. In conclusion John * frustration His manager * disappointment * acceptance
- 9. code maze
- 10. - generalize - recognise patterns - see big picture - make assumption We can’t...
- 11. too much noise
- 12. Reading code
- 13. We need help to navigate the maze
- 14. - cut off paths leading nowhere - see entire maze from top view - leave breadcrumbs in maze - … What if we can...
- 17. DEMO TIME!
- 18. Follow me @bliashenko to not miss any updates ;) Thanks!
Editor's Notes
- Hi. My name is Bohan. I work at 0 plus X. Today I wanna give some attention to the problem of reading code.
- To describe the problem, let me tell you little story about an average good developer, his name is “John”. He knows how to write code.
- When he joins small size project it’s super easy. He understands code fast and he develops features fast.
- Large project with a lot of legacy code. He is not delivering anymore. He is trying to ‘get familiar’ with code.
- Let’s have a look at his progression with time. (1st click) After few months he starts to understand code style and architecture. (2nd click) After half of a year on the project he kind of can see big picture. But, John is super tired already, a year later (3rd click) John leaves the project. шрифт больше на графике
- So.. what we have in the end John: John blames developers who wrote that code before him, he couldn’t understand it. But also he realises that his approach of reading code simply doesn’t scale. John’s manager: well, delivering efficiency has direct impact on business. So manager’s dream is if developers can start delivering features right away, without spending first few months on ‘getting familiar’ with codebase, but he believes it’s just how things work, so he should accept that. шрифты
- So why in large codebase we never that efficient as in a small one?
- Well, stepping into big code base, It’s like stepping into a huge code maze. Approaches you use to understand small codebase simply doesn’t apply anymore.
- We can’t generalize, see patterns, simply can’t grasp “big picture”. (click) It’s just too much noise.
- So entire ‘code reading’ process comes to a blind running in circles, jumping back-and-forth from file to file in full chaos.
- So, obvious we need some help to navigate in a maze. And I think that code editor with one file opened is not enough anymore. And that something I was thinking a lot recently.
- What if we can have a tool that allows to: leave bread crumbs in a code maze, that you always have a trail to find your way back; and, maybe, based on where are you going we can remove all false paths from the beginning; and, imagine you are not inside a maze, but you are looking at it from the top - so it’s not a maze anymore
- So.. I started new project.
- so ‘codecrumbs’ is the tool I am working on right now. The idea is that you just run it from the directory with you project, it scans you code and it gives you new perspective on your source code. It’s far not ready yet but I have something to show you. :) font
- I took and ‘Todo app built with React, Redux, and Firebase’ as simple example. https://github.com/r-park/todo-react-redux. It allows you to login with Github and add ‘todos’. Ok, let’s run codecrumbs for it. The idea is that you have you code editor in one window and code-crumbs running in another. Scenario: First thing there is source tree, you can navigate through it (open ‘src’ folder, open ‘notifications’ folder, enable ‘sidebar’, select ‘reducer, show ‘flowchart’, back to code, select index.js). Ok. let’s close all (click ‘close all’) and say we want to have “active only” (click ‘active only’). Here is the point we start “cutting off paths leading nowhere” I will enable ‘Dependencies tree’ (click ‘Dependencies’). Alright, now you can see that some folders were opened. Basically you can see connections from files which are imported to our entry point. Let me select dependencies tab in sidebar (click dependencies tab) and I can choose connection between files (click index -> register-service-worker) and now you can see what exactly imported and its implementation - highlighted. Also, there is a ‘two dots’ icon near opened folder. Basically folder can be in 3 states now: opened - showing only active items, fully opened, closed. So based on dependencies graph we can assume that files can filtered. (click src/views/app). Let’s select app. (click src/views/app/app.js) and this this small scope. You can see it’s quite easy to cut off wrong paths in a code maze and reduce redundant noise. Ok. Let’s enable codecrumbs tab (click ‘codecrumbs’) this is the most fun. Back to our code. (search c0c) I will put breadcrumb in src/views/app/app.js, to do so I just write comment “//cc:here” (“cc” stands for “codecrumb”), and one more, in src/views/components/task-item/task-item.js. So in quite easy way we “marked” important points in code, so we will not lose that code, and what’s more we can see where it’s in big picture. Let me show you one more thing. A trail of codecrumbs which leads somewhere. Ok, I just will fix my prepared mocks (search for c1c). This a flow for sign in with github. (click on trail). And I will select Crums tab in sidebar (select Crumbs, go through crumbs). You can see highlighted steps of the trail. And the last one how taks page is built (search c2c). Nice. (switch between trails). So these trails point how data flows inside code. And this is a proper perspective on code. Not files structure, but this is. So, that’s just a beginning! There is much more coming, stay tuned!
- Thanks.