Building a Fully-Extensible Developer Collaboration Platform
Tags: productivity, webdev, javascript, vscode
Published: 2019-07-14 02:07:36

---
title: Building a Fully-Extensible Developer Collaboration Platform
published: true
description: 
tags: productivity, webdev, javascript, vscode
series: Visual Studio Live Share
cover_image: https://miro.medium.com/max/7200/1*xxKgPqB6Hkmx6y3gJS8LwA.jpeg
---

*Note: I’m a member of the [Visual Studio Live Share](https://aka.ms/vsls) team, and this post is part of a series explaining why we built the product and the ideas we’re exploring.*

Real-world development involves more complexity than just writing code, which is why collaboration tools need to evolve beyond the basic real-time editor. When we built [Visual Studio Live Share](https://aka.ms/vsls), we wanted to support *end-to-end developer collaboration*, that not only provided real-time editing, but also, remote language support (auto-completion, go-to-definition, etc.), [project-wide navigation/search](https://dev.to/lostintangent/collaboration-doesn-t-come-in-one-size-fits-all-33ai), shared build, debugging, terminals, localhost servers, [source control](https://aka.ms/vsls), [integrated chat & code comments](https://aka.ms/vsls-chat), and much more. This *collaborative breadth* is what enables Live Share to be used for such a diverse set of [usecases](https://aka.ms/vsls-usecases) (pair programming, merge conflicts, live site diagnostics, hack-a-thons, education, etc.), and represent a viable alternative to screen sharing. In fact, if you're curious which parts of Visual Studio Code are shared with guests during a Live Share session, the following screenshot should help illustrate that (hint: it's everything 🚀).

![E2E](https://user-images.githubusercontent.com/116461/60688281-173ae080-9e69-11e9-8147-4136a75c190b.png)

Out-of-the-box, Live Share enhances every feature of Visual Studio Code with collaborative superpowers, while allowing everyone to *retain their personalized environment* (e.g. themes, keybindings). That way, developers can leverage their favorite workflows and IDE configurations, regardless if they're working alone or together. The only difference is whether you’ve clicked the “Share” button or not 👩‍💻

While Visual Studio Code provides a compelling set of capabilities on its own (e.g. integrated debugging, version control), one of it's greatest strengths lies within it's [ecosystem of 3rd-party extensions](https://marketplace.visualstudio.com/vscode), many of which are fundamental to developer's workflow (e.g. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens), [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)). As a result, Live Share couldn't actually achieve it's promise of *end-to-end collaboration*, unless it also provided a mechanism for extensions to become collaborative as well, and contribute their unique capabilities to the experience. So we had no choice but to build a [Live Share SDK](https://npmjs.com/vsls) 🔥 

## An Ecosystem of Collaboration

At a high-level, Live Share works by establishing an E2E-encrypted peer-to-peer network, and then uses a set of built-in [RPC services](https://en.m.wikipedia.org/wiki/Remote_procedure_call) to expose remote actions from the "host" (e.g. go to definition, step the debugger), and synchronize editor state amongst participants in real-time (e.g. text edits, cursor position, terminal output). Live Share ships with enough services to make the core Visual Studio Code experience fully collaborative (e.g. debugging, editing, terminals), but by means of the [Live Share SDK](https://npmjs.com/vsls), it also enables extensions to contribute custom services as well, which can then exchange messages on top of the same secure channel. Additionally, the Live Share SDK enables extensions to contribute custom UI to its “Session Details” view, which supports improved discoverability and an integration that feels native with the core Live Share feature set.

![Counter](https://user-images.githubusercontent.com/116461/59561482-b771b800-8fd5-11e9-9bcb-7b77ce0207f6.gif)

<figcaption>A sample collaborative counter, exposed via a custom Live Share service</figcaption>

With this, Live Share acts as both a product you can use, as well as a **developer collaboration platform** you can extend, which enables some really compelling scenarios! For example:

* [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) exposes a Live Share service for “guests” to remotely browse the project’s Git commit history as if it were locally available ([example](https://twitter.com/LostInTangent/status/1085919402954874883))

* [Test Explorer](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer-liveshare) exposes a service for viewing and executing unit tests, and synchronizing their pass/failure status

* [Browser Preview](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview) exposes a service for collaboratively browsing web pages, and synchronizing mouse and keyboard input. Additionally it adds the concept of “Shared Browsers” to the Live Share tree view ([example](https://twitter.com/auchenberg/status/1116362646784102400))

* [Team Chat](https://marketplace.visualstudio.com/items?itemName=karigari.chat) exposes a service for sending and receiving text chat messages. Additionally, it adds a “Chat Channel” entrypoint to the Live Share tree view ([example](https://twitter.com/lostintangent/status/1075155769870307329))

* [Whiteboard](https://aka.ms/vsls-whiteboard) exposes a service for collaborative drawing, and synchronizing shapes and edit operations (e.g. undo, change background color) ([example](https://twitter.com/lostintangent/status/1079846355290415104))

* [Pomodoro](https://aka.ms/vsls-pomodoro) exposes a service for a collaborative timer, and synchronizing stoping and starting it. The timer itself is displayed  as a node in the Live Share tree view ([example](https://twitter.com/lostintangent/status/1115847842453762049))

Having these kinds of integrations allows Live Share itself to remain lean, while at the same time, enabling extensions to enhance it with new and interesting “light up” experiences (e.g. browsing documentation, whiteboarding, collaborative TDD). Additionally, it allows us to partner with the community, and explore how developer collaboration can continue to evolve and mature over time. 

Besides building custom services, extensions can also subscribe to Live Share-specific events, and enhance their behavior when the end-user is within a collaboration session. This way, Live Share represents a “mode” that extensions can use, so that collaboration becomes a fundamental dimension of the way you work. For example:

* [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) allows you to specify a custom workbench color when you’re hosting a Live Share session, so that it’s visually clear you’re sharing

* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) detects that you’re in a Live Share session, and automatically shares its HTTP server with guests ([example](https://twitter.com/LostInTangent/status/1063445225140568065))

* [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode) automatically tracks the time spent collaborating with others as a key metric in your overall time report ([example](https://twitter.com/brettmstevens/status/1103809321702313984))

* [Profile Switcher](https://marketplace.visualstudio.com/items?itemName=aaronpowell.vscode-profile-switcher) allows you to set a custom profile for Live Share, so that you can easily turn off setting that your pairs might not prefer (e.g. format on save) ([example](https://user-images.githubusercontent.com/116461/60541846-4dd8f580-9cc7-11e9-8b57-b8aca0252fb4.gif))

## Live Share All The Things

At any point, you can view the list of extensions that enhance Live Share by checking out the [Awesome Live Share](aka.ms/vsls-awesome) GitHub repo, as well as keeping an eye out for extensions that wear the “Live Share Enabled” badge on their readme. Additionally, you can track and upvote the planned and in-progress integrations on the [Live Share Enabled Extensions](https://trello.com/b/CLfMhSgq/live-share-enabled-extensions) Trello board. There’s still a lot more left we can do, and we need feedback on where to prioritize our efforts 👍

![Badge](https://aka.ms/vsls-badge)

<figcaption>The sign of a truly awesome VS Code extension</figcaption>

If you’ve built a Visual Studio Code extension and think it would benefit from Live Share integration, check out the [SDK’s documentation](https://npmjs.com/vsls), as well as the simple [counter sample](https://github.com/vsls-contrib/counter) in order to get started. Additionally, reach out to me to discuss adding the extension to our allow list, since only approved extensions can make use of the Live Share RPC channel (for privacy and security purposes). We’re extremely excited to continue working with the community, and learning about new ways to make developer collaboration more enjoyable! 🙌