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.
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.
@LostInTangent @Surfly ... screen sharing is a performance-hogging, low-latency bazooka and quite honestly it would be great to have a tab inside vs code that showed what docs the navigator was looking at. Just seeing the title update of the tab in the interface next to your open files would be gold.13:47 PM - 03 Sep 2018
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.
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)
This Extension is fantastic!
Thanks! Let me know if you have any feedback or issues 👍
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