Visual Studio Live Share (7 Part Series)
Collaboration is critical for any successful development team. That's a fairly uncontroversial opinion, and definitely not novel. Whether you're mentoring someone, providing a code review, lending a helping hand with a difficult bug, or just doing regular pairing, it's important to encourage continuous knowledge transfer (in all directions!), and support a culture of shared ownership/team cohesion. That said, there are plenty of
existing tools and processes to help developers collaborate, so why create yet another one?
When we set out to build Visual Studio Live Share, we learned that teams collaborate in very diverse ways, with unique and meaningful perspectives about how it works most effectively for them (e.g. frequency of collaboration, session duration, whether it happens ad-hoc vs. scheduled). We didn't intend to ask teams to change how they already work, but we were interested in complementing it. In particular, we discovered a few ways that developer collaboration could potentially become more enjoyable, and ultimately, more productive, regardless if your team is fully remote, partially distributed, or entirely co-located.
As developers, we spend countless hours customizing our environment, tuning it to be more ergonomic and visually appealing. Everything from your OS preference, default shell, editor theme, keybindings, window layouts, and font size contribute to an experience that makes your workflow feel "just right". So the idea of sacrificing (or inflicting 😊) those personalizations, in order to do something as fundamental as collaboration, seems...kind of silly.
With Live Share, participants can collaboratively edit and debug a shared codebase in real-time, while retaining their individual machine setup (from either Visual Studio or Visual Studio Code). Prefer a light theme, while everyone else on your team favors dark? Great! Does your pair use Vim keybindings, and you'd...rather not? No problem! Do you prefer to align the file explorer on the right-side of your IDE, increase your font size, hide the status bar, render whitespace and/or display the minimap (among many other decisions)? Keep doing that! And let the rest of your team keep all of their preferences as well. Everybody wins 👍
This experience works because Live Share is simply synchronizing the project context (e.g. files, edits, debugging state, localhost servers) and user positions (e.g. cursor, highlights), while leaving everything else intact. Each “guest” in a collaboration session is leveraging the runtime environment of the developer who shared, but viewed through the lens of their own world. This may seem like a subtle win at first, but when collaboration happens daily or weekly, it quickly adds up.
Besides decoupling screens, Live Share also enables everyone in a session to have entirely different keyboard layouts, which is important for geo-distributed teams. So you could have developer’s collaborating, using a combination of QWERTZ, QWERTY and/or AZERTY keyboards, and everyone can edit freely, without any unexpected behavior. This works because everyone is actually editing locally (unlike screen sharing), which allows their keystrokes to be handled properly, before being synchronized with the group.
Focus together, but think different
Two (or more!) minds are often greater than one, because diverse perspectives can help break down problems more quickly, and produce better results (e.g. less “clever” abstractions). Collaborating via a shared screen/projector has the benefit of keeping everyone focused on the exact same thing (e.g. a method implementation), but it also has a potential downside: it limits participant's ability to explore independent ideas, without disrupting the entire group. Even if you're using a solution that supports multiple cursors, everyone is still fundamentally locked to the same screen, and therefore, limited in their ability to think on their own, or at their own pace.
Cody Covey@ccovey14@kylewelch Definitely agree. Only thing I don't like about doing pairing is I always want to drive and letting go of that is something I struggle with.04:12 AM - 16 Feb 2019
With Live Share, participants are collaborating on a shared codebase and runtime environment, but are able to seamlessly transition between focusing on the exact same thing, and working independently. Furthermore, Live Share even supports a hybrid model, where you can temporarily edit separate files (or sections of the same file), while continuing to observe each other at the same time.
Whether you want to parallelize a task (e.g. you write a test and your pair writes the associated code), look at different stack frames while debugging, or simply peek the definition of a method you’re not familiar with, Live Share enables a form of collaboration that isn’t mentally serialized. You can choose whether to focus together, divide and conquer, or somewhere in between. The decision about which model works best is up to you and your team, and Live Share is simply there to enable it 👍
Developers often refer to Visual Studio Live Share as being like “Google Docs for Code”, which is understandable, since it provides a real-time collaborative editing experience, with shared cursors and highlights. However, in order to enable developer collaboration, that can scale from the simplest situations (e.g. a quick code review), to the most complex (e.g. group debugging a site incident), we found that we needed to support much more collaborative context than simply files and edits. We needed to enable collaboration that was truly end-to-end, and didn’t require developers to turn to another tool or service in order to progress a collaboration session forward.
With Live Share, developers start by sharing their entire project context (just click the
Live Share button!). This gives participants access to the entire codebase, as opposed to needing to exchange code snippets back and forth (which is a painful way to collaborate!). From there, it enables you to share as much or as little as needed, in order to satisfy the requirements of your specific collaboration session. That way simple situations are simple, and complex situations are...simple as well. Humor me as I illustrate this via a parade of tweets:
Need to debug through some code? Cool! Just press F5 and everyone will be automatically attached to a shared debugging session (that's running on the host's machine!).
Need to illustrate a failing test or run a diagnostic command? Great! Open up a shared terminal, and everyone in the session will automatically see it.
Jonathan Carter@lostintangentIf you're running your builds, tests, etc. via VS Code workspace tasks, then the output of those tasks will now be automatically shared with all guests in your Live Share session. That way everyone can stay on the same page when automating common dev actions 🔥 🎉18:50 PM - 24 Jul 2018
- Do guests need to see a running web app in order to understand a bug or validate a fix? Simply share the localhost server on your machine, and everyone can immediately access it, using the secure SSH channel that Live Share already establishes.
Jonathan Carter@lostintangentWhen collaborating on a web frontend, it's important for everyone to actually see the app. Now, sharing localhost servers via Live Share is as easy as starting them from the @code terminal. Simply run "npm start", "flask run", etc. and guests will automatically get secure access!17:49 PM - 26 Dec 2018
- Want to chat with everyone in the Live Share session, without needing to coordinate on a specific service to use? Start up a fully-integrated audio or text chat.
Jonathan Carter@lostintangent📣 Live Share sessions work best with a real-time chat going alongside @code. If you want something simple to start collaborating, you can grab the Live Share extension pack (aka.ms/vsls-pack) and get integrated text and audio chat, without _any_ extra tools or sign-ins 🙌22:28 PM - 18 Dec 2018
- Want to do a code review, but in real-time? Guests can access the state of the Git repo, and if you're using the GitLens and/or GitHub Pull Request extensions, they are fully shared as well!
Jonathan Carter@lostintangent📣 Want to do a real-time code review of a GitHub PR inside of @code? You can now checkout a PR using the GitHub Pull Request extension, start a Live Share session, and take peer feedback entirely collaboratively (including co-editing, debugging, sharing servers, etc.) 🔥 🥳19:11 PM - 08 Feb 2019
- Want to explain something visually? Check out the collaborative whiteboard and start drawing together.
Jonathan Carter@lostintangentOver the holiday, I wanted to explore fun uses of the Live Share API, so I created an experimental collaborative whiteboard for @code. Just share, click "Whiteboard", then draw using an integrated canvas! Could be useful for mentoring/interviews/etc. 🤔 aka.ms/vsls-whiteboard21:06 PM - 31 Dec 2018
- Want to make sure everyone you collaborate with gets proper Git attribution? Live Share will automatically generate your commit message trailers.
Jonathan Carter@lostintangentWhen you pair with someone, it's important that subsequent commits are properly attributed. Not just for accurate version history, but also to support a culture of collaboration. Now when you pair using Live Share + @code, Git co-authors can be auto-populated to make this easy 🙌21:51 PM - 08 Dec 2018
Jonathan Carter@lostintangentLooking to add a little time management to your Live Share sessions? (e.g. take scheduled breaks while pairing). We created a collaborative pomodoro, that allows participants to code together in real-time, with a fully synchronized timer 🍅⏲️👍 aka.ms/vsls-pomodoro05:23 AM - 10 Apr 2019
Need to browse documentation together, such as looking up code samples, or following along with a tutorial? Grab the Browser Preview extension and begin collaboratively browsing together.Kenneth Auchenberg@auchenberg🛰 One more thing for Browser Preview 🛰
Browser Preview is now integrated with Live Share 🎉💥
You can now share, collaborate and co-browse on previews directly inside @code 🤯🤯🤯🤯🤯 A big thanks to @LostInTangent for the amazing work!
Details 👉 github.com/auchenberg/vsc…15:29 PM - 11 Apr 2019
And that's only the tip of the iceberg. While Live Share comes with a bunch of functionality out of the box, it's also fully extensible, and has a growing ecosystem of extensions that are building on top of its collaborative platform (e.g. time tracking, shared test runners). We're constantly looking for new opportunities to engage the community, since that's the only way to to sustain a collaboration experience that accommodates the moving target that is "modern" development.
So in summary: Visual Studio Live Share enables developers to collaborate in real-time, using their own personalized environments, working together and/or fully independently, all while being able to share the holistic set of project context (you can whiteboard for heaven's sake!). We've found that this combination of experiences can enable a pretty useful form a collaboration, and may actually mitigate some of the frustrations that some devs have with traditional tools and processes.
That said, we're only just getting started, and so we look forward to continuing to learn more about developer collaboration, and in particular, how we can contribute to making it a more enjoyable experience. Considering how critical collaboration is, that seems like a pretty worthy pursuit.
If you've had a chance to try out Live Share, and would be open to providing feedback via a quick survey, it would be immensely helpful to our team. Thanks!