VS Code – Remote Pair Programming mit „Live Share“

Gerade in der aktuellen Situation ist ein einfach und schnell einzurichtendes Remote Pair Programming essentiell für Softwareentwickler. In diesem Artikel möchte ich die Erweiterung Live Share für Visual Studio Code im praktischen Einsatz vorstellen und zeigen, wie damit ein flexibles und leichtgewichtiges Setup für Remote Pairings geschaffen werden kann.

Beleuchtet werden auch die Vorteile gegenüber etablierter Lösungen wie beispielsweise Zoom, Slack oder Google Meet. Zudem gibt es eine kurze Einführung in die Arbeitstechnik des Pair Programmings an sich sowie Tipps und Lessons Learned, wie erfolgreiche Pairings langfristig gelingen.

Ramp Up

Um Remote Pairings mit Visual Studio Code durchzuführen, benötigt man drei Komponenten: Visual Studio Code, die Erweiterung Live Share und einen aktiven Microsoft- oder GitHub-Account.

Installation

Nach dem Starten von VS Code kann man im Menüpunkt Extensions der Sidebar nach der Erweiterung Live Share suchen und diese mit einem Klick auf den Button Install zu VS Code hinzufügen.

Sofern eine integrierte Audiounterstützung gewünscht ist, kann zudem die Erweiterung Live Share Audio oder gleich die Erweiterung Live Share Extension Pack installiert werden, die beide zuvor genannten Erweiterungen vereint.

Danach steht in der Sidebar ein neuer Menüpunkt Live Share zur Verfügung, über den sich die wichtigsten Funktionen der Erweiterung erreichen lassen. Außerdem erscheint nun in der Statusleiste am unteren Bereich der Anwendung ein neuer Button Live Share, der ebenfalls einen schnellen Zugriff auf die wichtigsten Funktionen der Erweiterung bietet.

Login

Unabhängig davon ob man eine eigene Sitzung teilen oder einer fremden Sitzung beitreten möchte, benötigt man einen GitHub- oder Microsoft-Account.

Beim ersten Login muss der Erweiterung explizit Zugriff auf Ihr Konto gewährt werden. Dies erfolgt über eine Authentifizierungsseite im Browser.

Nach dem initialen Login über den entsprechenden Account wird in der Statusleiste von VS Code angezeigt, dass man eingeloggt und mit dem Live-Share-Server verbunden sind.

Live Share Status in der Statuszeile

In der Statuszeile lässt sich einsehen, ob eine Session aktiv ist und wieviele Benutzer daran teilnehmen. Der Button Live Share bietet einen schnellen Zugriff auf alle für Ihren aktuellen Status zur Verfügung stehenden Optionen.

StatusAnzeige
Abgemeldet
Angemeldet – Session inaktiv
Angemeldet – Session aktiv

Features

Ist keine Sitzung aktiv, lässt sich unter dem Menüpunkt Live Share der Sidebar oder über den gleichlautenden Button in der Statuszeile mittels der Option Start Collaboration Session eine neue Sitzung starten. Dabei gibt es die Auswahlmöglichkeit, ob die Teilnehmer Änderungen am Code vornehmen dürfen (Read/Write) oder ob sie ausschließlich lesend an der Session teilnehmen können (Read-Only).

Es ist leider nicht möglich, im laufenden Betrieb zwischen den beiden Betriebsmodi umzuschalten. Hierfür muss die laufende Sitzung beendet und eine neue Sitzung gestartet werden. Eine bestehende Sitzung lässt sich schnell über die Option Stop Collaboration Session beenden.

Mit der Erstellung einer Session wird ein Invitation Link erstellt, der den Teilnehmern zur Verfügung gestellt werden muss. VS Code kopiert diesen Link beim Starten einer neuen Session automatisch in die Zwischenablage und weist in einer Notification darauf hin.

Sollten im Laufe einer Sitzung weitere Teilnehmer eingeladen werden, so lässt sich der Invitation Link erneut über die Option Copy Collaboration Link in die Zwischenablage kopieren. Zur Sicherheit sollte dieser Link übrigens nur an User versendet werden, denen man vertraut.

Joinen einer Session

Hat man einen Inviation Link erhalten, lässt er sich über den Menüpunkt Join Session eingeben. Auch als Teilnehmer erhält man unter dem Menüpunkt Live Share der Sidebar Zugriff auf alle wichtigen Informationen und Optionen der aktuellen Sitzung.

Zum Joinen einer Session im Read-Only Modus ist es übrigens auch möglich, als Gast beizutreten – ohne die Notwendigkeit eines Logins über einen GitHub- oder Microsoft-Account.

Live Edit (Read/Write)

Im Live-Edit-Modus können beide Teilnehmer Änderungen am Quellcode vornehmen. Die Cursor und Änderungen aller Partner werden allen Teilnehmern angezeigt.

Follow & Unfollow

In den Session Details des Sidebar-Menüpunkts Live Share lassen sich unter Participants alle Teilnehmer der Sitzung einsehen. Durch Klicken auf einen Teilnehmer kann man diesem folgen oder entfolgen. Dies wird durch einen gefüllten bzw. leeren farbigen Punkt neben dem Namen des Teilnehmers kenntlich gemacht.

Folgt man einem Teilnehmer, so bewegt sich der Code Editor automatisch analog zu dessen Cursor durch den Code. Das gilt auch für Scroll-Operationen und Dateiwechsel. Zudem wird vom gefolgtem Teilnehmer markierter Code im eigenen Code Editor markiert angezeigt. Dieses Feature ist überaus praktisch, um Diskussionen über bestimmte Codeblöcke zu erleichtern.

Focus Attention

Verwendet man den Button Focus Participants in den Session Details, werden alle Teilnehmer dem eigenen Cursor zugewiesen. Hierdurch springen alle Teilnehmer zum Cursor und folgen ihm, was mit einer Notification XY focused your attention! gemeldet wird.

Text Chat

Der Menüpunkt Chat Channels unterhalb der Session Details ermöglicht die Verwendung eines Text-Chats für den gesamten Kanal oder mit einzelnen Teilnehmern. Die Text Chats öffnen sich dabei in einem neuen Tab des Editors.

Live Audio

Ist die Erweiterung Live Share Audio oder Live Share Extension Pack installiert, bietet Live Share beim Start einer neuen Sitzung an, einen Audio Call hinzuzufügen. Dieser Zusatz kann auch nachträglich über die Option Audio Call > Start audio call… in den Session Details erfolgen.

Im Bereich Audio Call Participants sind alle Teilnehmer aufgelistet, die über diese Erweiterung verfügen und an dem Audio Call teilnehmen können. Zudem kann hier jeder Audio-Teilnehmer stumm oder aktiv geschaltet werden.

Shared Terminal

Das Terminal des Session-Hosts kann den Sitzungsteilnehmern im Read-Only- oder auch im Read/Write-Modus verfügbar gemacht werden. Somit können Teilnehmer der Sitzung beliebige Kommandos im Terminal des Sitzungs-Hosts ausführen. Da die Teilnehmer damit einen unbeschränkten Zugriff auf das System erhalten, setzt dieses Feature uneingeschränktes Vertrauen voraus.

Shared Server

Dieses Feature ermöglicht dem Session-Host die Freigabe bestimmter Server-URLs, wie beispielsweise http://localhost:80, sodass diese allen Teilnehmern der Sitzung zur Verfügung stehen. Hierdurch können die Teilnehmer den aktuellen Projektstand testen, ohne den Technologie-Stack oder den Entwicklungsserver auf ihrem lokalen System installieren und starten zu müssen.

Shared Debugging

Auch ein auf dem Host ausgeführter Debugging-Vorgang kann mit den Teilnehmern geshared werden. So kann die Debug-Sitzung gemeinsam verfolgt und analysiert werden. Die Voraussetzung dabei ist lediglich, dass die Teilnehmer dem Cursor des Session-Hosts folgen.

Alle Live-Share-Kommandos in der Command-Palette

Die Command Palette kann über den Menüpunkt View > Command Palette erreicht werden. Nach Eingabe der Zeichenkette Live Share können alle Befehle der Erweiterung auf einen Blick eingesehen und erreicht werden.

Vorteile von Live Share gegenüber anderen Remote-Pairing-Lösungen

Ein großer Vorteil von Remote Pairings mit VS Code und Live Share ist das schnell realisierbare, leichtgewichtige und ressourcenschonende Setup. Die Lösung verbraucht im Gegensatz zu kompletten Bildschirm-Remote-Lösungen wenig Arbeitsspeicher und läuft sehr performant. Auch wird weniger Bandbreite benötigt als bei kompletten Bildschirm-Share-Lösungen wie Google Meet, MS Teams oder Slack.

Der aus meiner Sicht größte Vorteil ist aber, dass ein teilnehmender Partner nicht erst das Projekt klonen und den erforderlichen Technologie-Stack aufsetzen und einrichten muss, sondern sofort an dem Projekt mitarbeiten kann. Darüber hinaus kann jeder Teilnehmer seine lokalen Einstellungen, wie beispielsweise Editoreinstellungen, Theming und Key-Shortcuts, behalten. Selbiges gilt für den eigenen Cursor und funktioniert auch über Systemgrenzen hinweg.

Dadurch entfällt die initiale Ramp-Up Phase, um mit einem neuen Pairing-Partner hinsichtlich der Arbeitsumgebung auf einen gemeinsamen Nenner zu kommen, was das Pair Programming spürbar reibungsloser macht.

Pair Programming

Beim Pair Programming arbeiten für die Erstellung des Quellcodes jeweils zwei Programmierer an einem Rechner sowie an der gleichen Aufgabe. Die beiden Entwickler nehmen hierbei zwei Rollen ein, die üblicherweise als Driver und Observer bezeichnet werden.

Der Driver übernimmt die Kontrolle über die Eingabegeräte und formuliert den Quellcode. Der Observer folgt währenddessen gedanklich, überwacht die Korrektheit des Codes sowie des Lösungsansatzes und denkt parallel über Korrekturen und mögliche Verbesserungen am Programmdesign nach.

Da diese beiden Rollen regelmäßig getauscht werden, gibt es beim Pairing keine feste Aufgabenteilung. Auch zwischen den Mitgliedern innerhalb des Teams sollten die Pairing-Partner häufig wechseln.

Welche Vorteile bietet Pair Programming?

Pair Programming sieht zunächst nach einem größeren Aufwand und Arbeitseinsatz aus. Aus Erfahrung kann ich aber sagen, dass Pairing zahlreiche Vorteile bietet, verglichen mit der Entwicklung durch einen einzelnen Programmierer. Die Gravierendsten möchte ich im Folgenden kurz vorstellen:

Erhöhung der Code-Qualität

Ein wesentlicher Vorteil von Pair Programming ist die Verbesserung der Softwarequalität. Sobald einem der beiden Entwicklern mögliche Probleme auffallen, können sie sofort angesprochen und im Zweiergespräch gelöst werden. Hierdurch wird eine Kultur der permanenten und konsequenten Durchführung von Code-Reviews zugunsten der Qualitätssicherung etabliert.

Wissensverteilung im gesamten Projektteam

Aus Firmensicht ist die Verbreitung von Projektwissen einer der wichtigsten Aspekte bei der Entwicklung im Pair Programming. Durch das regelmäßige Rotieren der Pairing-Partner können alle Teammitglieder verschiedene Teile des Quellcodes und dadurch auch des betriebsinternen Know-hows kennenlernen. Somit wird der Bildung von Wissensinseln vorgebeugt.

Verbesserung der Kommunikation im Team

Durch das häufige Wechseln der Programmierpartner kann die teaminterne Kommunikation stark verbessert werden. Mitarbeiter lernen kontinuierlich, sich individuell auf andere Mitarbeiter einzustellen und werden souveräner in der Zusammenarbeit mit anderen Entwicklern. Auch für neue Teamkollegen ist Pair Programming eine sehr gute Möglichkeit, um andere Teammitglieder und deren Arbeitsweise schneller kennenzulernen.

Lessons Learned für erfolgreiches Pair Programming

Bei Mayflower arbeite ich nun seit über sechs Jahren im Pairing. Aus der Praxis kann ich die folgenden Tipps zum Etablieren erfolgreicher Pairings geben:

Bearbeitet immer nur eine Aufgabe gleichzeitig

Beide Partner sollten stets eine klar definierte Aufgabe und somit ein gemeinsames Ziel vor Augen haben. Dieses Ziel muss beiden Entwicklern bekannt sein, bevor es in der Programmierung umgesetzt wird. Darüber hinaus sollte der Driver immer nur an einer einzigen Aufgabe arbeiten. Im Falle eines Abschweifens muss der Observer intervenieren. Zur Lösung kann der Observer Tasks, die erst später anstehen, notieren und zu einem späteren Zeitpunkt wieder vorzubringen.

Lasst euch nicht ablenken

Zahlreiche geöffnete, nicht benötigte Programme oder Tabs im Browser oder in der IDE verwässern den Arbeitsfokus und machen es für den Partner schwierig, ihn im Auge zu behalten. Durch das konsequente Schließen nicht benötigter Elemente auf der Arbeitsoberfläche lassen sich Ablenkungen leicht vermeiden. Das macht es für den Partner viel einfacher, den Überblick über die aktiven Elemente des aktuellen Vorgangs zu behalten.

Adressiert Zeilennummern

Die Identifizierung zu diskutierender Codestellen über die entsprechenden Zeilennummern erleichtert die Kommunikation in Pairings ungemein. So weiß der Partner sofort, worauf man sich bezieht.

Seid geduldig und macht Pausen

Pair Programming fordert beiden Partnern eine Menge Geduld ab. Da der Driver nicht jede seiner Ideen direkt ausprobieren kann ist es sehr wichtig, offen für andere Lösungswege zu sein und eigene Standpunkte nicht ausufernd zu diskutieren. Da diese Arbeitsweise besonders mental herausfordernd ist, empfiehlt sich das Einlegen regelmäßiger Pausen, um die für das Pairing erforderlichen geistigen Kapazitäten wieder zu regenerieren.

Kommunikation ist alles

Beim Pair Programming ist es elementar, dem Partner aufmerksam zuzuhören und sofort Feedback zu geben, damit beide Entwickler jederzeit über ein synchrones Mindset verfügen. Ein Problem oder eine Aufgabenstellung an seinen Partner zu schildern hilft dabei, die eigenen sowie die Gedankengänge des Partners zu alignen. Hierzu kann die Tastatur gelegentlich auch ad hoc zwischen den Partnern gewechselt werden, da es manchmal einfacher ist, etwas direkt im Code auszudrücken und zu zeigen, als es aufwändig zu umschreiben.

Wer alleine arbeitet, addiert.
Wer zusammen arbeitet, multipliziert.

VS Code bietet mit der Erweiterung Live Share ein schnell realisierbares Setup für effektive Remote Pair Programmings. Durch die Vielzahl an Features und der Unterstützung von Text-Chats und Audio-Sessions stellt die Erweiterung eine komplette und integrierte Lösung für Remote Pairings dar. Für mich hat sich Live Share als ein großartiges Tool für Remote Pairings und Coding Dojos herausgestellt.

Ich würde mich sehr freuen, wenn ich in diesem Artikel einen schnellen und praktischen Einstieg in die Remote Arbeit mit VS Code und der Erweiterung Live Share geben konnte. Über Feedback oder Rückfragen können Sie mich sehr gerne via christopher.stock@mayflower.de erreichen.

Für neue Blogupdates anmelden:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.