DEV Community

Jonathan Carter
Jonathan Carter

Posted on • Updated on


Collaborative Development Requires a Shared Web Browser

In a previous post, I illustrated how we optimized Visual Studio Live Share for web development, by allowing you to share localhost servers with everyone in the session. This enables guests to view and interact with the running app—while editing and debugging it in real-time—which can make for a really efficient collaboration experience. However, it does have one potential limitation: while everyone is working against the same codebase and server(s), any browser interactions (e.g. scrolling, form input, button clicks) are still performed independently, since the front-end code is downloaded and executed locally on each machine. That's just the nature of client app distribution.


A Live Share guest (left) browsing a shared server, and immediately seeing server-side state updates made by the host (right). However, each participant is still controlling their own local state

This behavior can be ideal in many cases (e.g. your pair wants to explore the app without interrupting you), and is a key benefit of the independence that Live Share enables, as compared to screen sharing. However, there are also situations where it’s useful to browse a web app together (e.g. you want to demonstrate a bug repro or show off the completion of a feature). For this, you could use screen sharing, but that has a downside of its own: all app interactions execute on the host’s machine, and are then shared as bitmaps. As a result, it has higher bandwidth requirements, and can result in poor latency and image quality, depending on how far apart you are, and your network topology/conditions.

So we wondered: what if you could view and interact with a local browser, and have the option of synchronizing your actions with everyone you're collaborating with? That way, interactions happen immediately (and your inner loop is tight), but they’re shared with the group. Kind of like a distributed, eventually-consistent web application. This kind of experience seems useful, and it actually represents one of our longest-standing feature requests. So we decided to experiment with how it might look, via an integration with an existing Visual Studio Code extension.

Don't just share, browse!

If you download the Browser Preview extension, and open a new preview while hosting a Live Share session, that window will automatically open on every guest’s machine as well (assuming they have the Browser Preview extension installed). From there, if you (or any guest) navigate to another URL, refresh the page, go back/forward, scroll, click buttons, enter in form fields, emulate a device, etc. those actions will be synchronized with everyone. As soon as you’re done with that window, you can simply close it, and it will close on everyone’s machine as well.


A Live Share guest (left) is able to collaboratively browse a website with the host (right)

It feels like screen sharing, only snappier, and with everyone retaining their own cursor. This is because everyone is actually running their own local copy of the web app, and communicating just the metadata necessary to synchronize their individual interactions (e.g. mouse click on this x/y co-ordinate). This keeps the network requirements extremely low, and ensures that the results of each participant's actions are immediately visible, just like when you're editing a shared document.

We think this capability can help address a few key scenarios, such as being able to browse documentation while pairing, or collaboratively search for code samples. You can also use it to walk through (and debug!) the web app you're developing together, so that everyone in the session can stay on the exact same page. Literally...That said, this is a very early experiment, and therefore, we'd love to hear whether it's useful or not, and if so, what's missing 👍

Top comments (3)

jbosse profile image
Jimmy Bosse

This Extension is fantastic!

lostintangent profile image
Jonathan Carter

Thanks! Let me know if you have any feedback or issues 👍

jbosse profile image
Jimmy Bosse

I. Chrome I use a livereload extension. Building that it would be awesome. I’d like to dive into the repo at some point to see if it is possible


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!