I’m working on a tool that allows developers to record and playback interactive, guided walkthroughs of a codebase, directly from their editor. It’s called CodeTour, and it’s currently available as a VS Code extension: https://aka.ms/codetour.
I built it because I frequently find myself looking to onboard (or “reboard”) to a project, and not knowing exactly where to start. After speaking to a bunch of other developers, I didn’t seem to be alone, so it felt like this problem was deserving of some attention.
While documentation can help mitigate this problem, I wanted to explore ways that the codebase itself could become more explainable, without requiring unnecessary context switches. Almost like if every repo had a table of contents. To make it easier to produce these “code tours” I built a tour recorder, that tries to be as simple, and dare I say, fun to use as possible.
I’ve since found that this experience has value in a number of other use cases (e.g. simplifying PR reviews, doing feature hand offs, facilitating team brown bags, etc.), and I’m excited to keep getting feedback from folks as they try it out. It’s also fully OSS, so I’d love any and all contributions: https://github.com/vsls-contrib/codetour.
It takes time to derive the high-level from the codebase. I guess, your walk-throughs would be similar to how I'd explore it myself - without the mistakes.
EDIT it's documentation, so can get stale/out of sync as the codebase evolves (not a problem for PRs). Though high-level architecture/APIs rarely change.
BTW In github, I keep expecting the text next to files/dir to be a comment explaining the high-level (instead of the most recent commit message).
Trying to codify the “tour” that a developer would have to otherwise discover themselves, is exactly what I’m trying to help with. This just seems like such an important phase of learning, that is currently way too manual.
Regarding the comment about tours becoming stale: when you record the tour, you can choose to associate it with a specific commit/tag/branch. That way, when someone plays it back, it will continue to make sense, even in the midst of minor code changes/refactorings.
I’ve also been working on making the tour editing experience as simple as possible, so that as you need to revise the tour over time, it’s not too difficult to do.
That said, any artifact that’s a derivative/compliment of code (e.g. documentation, tests), represents an additional “burden” to maintain. So I’m focused on trying to keep the tours “stable” enough to support learning, and reduce the cost to editing them, to hopefully support the continued investment.
I’m semi-hopeful that there’s a nice balance here, that provides an enjoyable enough DX, coupled with the team’s motivation/benefits to retain and transfer such important knowledge. We’ll see how it goes!
I’d love to hear more about your thoughts on draft tours! Currently, you can record as many tours as you want per codebase, and so you could record one that was scoped to just key API calls, and have n-number of other ones with more detail, alternate flows.
Would that satisfy what you’re thinking? Or were you thinking about being able to record a tour, and mark certain steps as being more important than others? Any feedback here is unbelievably valuable!
I meant a way to make up-to-date drafts: base it on an automatic execution trace, like from a debugger running the code.
You get this 100% up-to-date trace for free. It's crazy verbose, so apply filtering (e.g. to only key apis) to make it manageable. Then edit that draft manually. Like an annotated, abbreviated, step-into debugger.
My thinking is that this makes it easier to get an initial draft. But maybe that basic trace is easy and natural to do manually?
Also, I'm not sure how similar this "execution trace" would be to a tour based on explaining it... I suppose you could find out, by examining your best tours to see how closely they actually follow execution order (if at all).
When I try to understand a codebase, I do trace calls manually, so there's probably some similarity.
Ah OK cool, apologies for misunderstanding you. Now that I’ve got the core record/playback experience, I’m keen to explore ways to simplify the authoring and maintenance experience even further. Enabling a “code profiler” for recording/updating tours could definitely be really useful. Thanks for the feedback!
No worries, think your interpretation of just api calls is a good one, a bit like "tests as documentation". Could then have another tour for each module (api implementation). This approach would tend to confine the effect of changes (as in Parnas' On the Criteria To Be Used in Decomposing Systems into Moduleshttps://www.win.tue.nl/~wstomv/edu/2ip30/references/criteria...)
Awesome. Please create it for Jetbrains IntelliJ platform. Software tools are trending, you can charge money for it. I'd like to use VSCode but Webstorm is just so much more ahead. Most people and companies (who use them) already pay for Jetbrain tools.
Thanks for the feedback! In addition to CodeTour, I’m in the process of building out a couple of other tools (see below) to support better team collaboration, onboarding and knowledge retention. So I’m focusing on VS Code first, and iterating on feedback, before tackling other editors. That said, any thoughts on the usefulness of these solutions is extremely helpful, as I prioritize my backlog.
Note: Other side-projects on my journey to improve the holistic developer experience:
1. GistPad - Developer library for managing code snippets, documentation and interactive CodePen-like playgrounds. All built on top of GitHub Gists (https://aka.ms/gistpad)
2. Live Share Spaces - A virtual team room for connecting with other developers, and being able to seek and provide in-editor assistance in real-time (https://aka.ms/vsls-spaces)
Thanks! If you get a chance to check it out, please don’t hesitate to send any feedback my way. I need all the help I can get in order to ensure this experience is awesome :)
Going to second the request to bring this to IntelliJ. Everyone I know at my current and previous jobs would use the hell out of this, but so much of JVM development is on IntelliJ now.
Thanks! Out of curiosity: in the interim of having an IntelliJ client, do you think your team would use a browser-based client and/or integration that was built into GitHub? I’m working on this right now, and I just wanted to check with you on the applicability of that for your specific team.
For my work it's PHP support is far behind intellijs and I say that as a massive fan and user of both vscode and intellij (in fact I use both in the same codebase because vscode does typescript better as well as I prefer it's git support and plugins).
Also intellijs support for databases and symfony is vastly far out ahead.
The only limitation is that it's VS Code only. But, the JSON output means I could easily write a script to produce HTML that could be hosted for other devs to view.
Thanks! I’m keen to explore integration with GitHub in the near future (https://github.com/vsls-contrib/codetour/issues/10), in order to provide a browser-based “player”. That way, the knowledge in the tour isn’t limited to any one editor.
That said, I wanted to record the tours in a simple JSON file, specifically to enable interop with other tools. I’d love to hear any feedback you have on the experience and/or the format!
Thanks! I took inspiration from the way I’ve seen some devs “document” their PRs: submit the PR, add a description, and then seed the PR with a handful of comments that call out the most relevant “markers” for reviewers to look at.
I’ve always liked that approach, and thought it could be cool if you could do the same thing for any body of code (not just PRs!), and also enable the comments to be ordered, so that the “tour” itself is entirely guided.
So awesome! Actually, working on something somewhat similar called Codeflow (https://usecodeflow.com/). Right now, we have a web app where people can create these walkthroughs/tours but wanted to ultimately create an IDE extension. Love what you've done thus far.
Oh cool! Yeah, we are definitely kindred spirits :) I wanted to start with VS Code (in order to scratch my own itch), but I’m now working on a browser “player” and looking into GitHub integration (https://github.com/vsls-contrib/codetour/issues/10).
I love seeing other folks investing in this space. Thanks for sharing!
Love the idea! Maybe a suggestion with the "bit rot" problem (getting out of sync with code). Code tours will likely cover the most important parts of the codebase, which should be well tested in large projects (and large projects are the ones that need the tours). You could link the comments to those tests, and if any of those tests are changed, you will be advised to take a look at the tour comment. These tests can be also discovered automatically, as there exist code coverage tools.
Ah I really like this idea! Currently, a tour can be associated with a specific commit or tag, to enable it to be resilient to code changes over time (e.g. minor refactorings that don’t fundamentally change the value of the tour).
That said, there isn’t a way to automatically know when a tour should be updated, after a significant enough code has changed. Being able to bind a tour to one or more tests is a really interesting idea, and something that I’ll try to explore this upcoming week. Thanks so much for the feedback here!
Great question! I’m not currently sure :) I’ve been fairly deliberate about building CodeTour in a language agnostic way, in order to ensure it could be applied to any file type within a codebase. This is partly why I haven’t based the tour definition experience on code comments: https://github.com/vsls-contrib/codetour/issues/38.
That said, I’m trying to keep an open-mind when it comes to increasing tour resiliency, since it may require language/platform-specific solutions. I’m not sure. If you had any thoughts, I’d love to hear them!
Another potential solution is to have a CI task, that could check to see how far the code has deviated from the original commit that the tour was recorded on, and notify you when the deviation crosses some threshold. Maybe that’s a terrible idea, but something like that would have the benefit of being language-agnostic.
I’d love to hear more about “engineering team rescue” :) Are you referring to being suddenly dropped into a project that needs help (e.g. because it’s behind s schedule), and having to quickly ramp up?
The analogy of a museum tour was exactly what inspired the name! When you want to really learn about something, it’s hard to beat the value of a guided walkthrough, that can provide you with just enough focus, while still allowing you to explore ideas on your own.
That’s my hope! I read a lot of OSS code, and so I constantly struggle with understanding how to get started. Assuming folks find something like CodeTour helpful, I’d love to get support for advocating it and bootstrapping the ecosystem with tours for popular OSS projects.
Me too! I started this discussion with Nat Friedman (GitHub CEO), and I’m excited to see what can be done here. Any feedback/interest from the community might help make this a reality :)
I built it because I frequently find myself looking to onboard (or “reboard”) to a project, and not knowing exactly where to start. After speaking to a bunch of other developers, I didn’t seem to be alone, so it felt like this problem was deserving of some attention.
While documentation can help mitigate this problem, I wanted to explore ways that the codebase itself could become more explainable, without requiring unnecessary context switches. Almost like if every repo had a table of contents. To make it easier to produce these “code tours” I built a tour recorder, that tries to be as simple, and dare I say, fun to use as possible.
I’ve since found that this experience has value in a number of other use cases (e.g. simplifying PR reviews, doing feature hand offs, facilitating team brown bags, etc.), and I’m excited to keep getting feedback from folks as they try it out. It’s also fully OSS, so I’d love any and all contributions: https://github.com/vsls-contrib/codetour.