https://blog.mitsuruog.info/2019/12/pair-programming-vscode-live-share
2019-12-08
Introduction to remote pair programming using VS Code's LiveShare
vscode
This article is day 8 of Visual Studio Code Advent Calendar 2019 - Qiita.
I will introduce remote pair programming using VS Code's LiveShare, which I am currently using in my work.
By the way, the technology stack we are using is an example of a "React+TypeScript" front-end team.
Background
The reasons why we are currently using this method are as follows
Junior front-enders have joined the team, and we need to train them.
We tried to adopt the traditional method of reviewing PullRequests, but soon realized that it was not very effective for training.
There is a lot of remote work
Why didn't reviewing PullRequests work for junior development?
The main reason is that there are many unspoken specifications (*) in front-end UI that are difficult to document, and pointing them out in a single PullRequest tends to be a bit like whack-a-mole.
In this case, the pull request is not a good way to point out the contents of the site, such as responsiveness and how the site behaves when the width of the contents is changed.
I was worried that this kind of pointing out would not be enjoyable for me, and would lower Junior's motivation.
After a while, I changed the whack-a-mole method and changed to a policy of teaching while showing them how to do it themselves. In other words, pair programming.
Exploring the form of pair programming that I want to do
There were aspects of the pair programming I had done in the past that I personally disliked, and I needed to think of a way to solve these problems when I took the lead in pair programming.
These are the aspects of pair programming that I have disliked in the past.
The teacher and the taught are separated (this is especially likely to happen between seniors and juniors this time around).
One side is on the navigator's side, which makes it very boring for the navigator to just watch the screen
A hierarchical relationship is created between the navigator and the driver (incompatibility may lead to a bad working relationship in the future).
The main goal tends to be the transfer and sharing of skills and knowledge
In other words, we felt that pair programming to date has been psychologically taxing and stressful for both parties. Therefore, I thought this would be a good opportunity to seriously consider what I wanted to do in my own way.
What I felt was that the best part of pair programming (or rather, pair work) is "enjoying the process of completing one thing in cooperation with each other and deepening mutual trust through the sense of accomplishment that is created in the process.
Therefore, in order to realize the kind of pair programming I wanted to do, I needed a tool that would allow both navigators and drivers to work simultaneously on the same PC screen and eliminate the barriers between them.
That is when I came across "Live Share.
What is Live Share?
To summarize Live Share in a few words, it is "collaborative editing of code.
It is a tool that allows multiple people to edit the same code at the same time, as you can imagine if you have experienced the collaborative editing of a Google Doc.
With Live Share, you can see at a glance where others are editing on VS Code, as shown below.
(Image from the original site) https://visualstudio.microsoft.com/services/live-share/
Live Share is a plugin for VS Code, so please install it from here.
Live Share - Visual Studio Marketplace
For detailed information on settings and usage, please refer to the various information you can find on the Web.
Actual Remote Pair Programming Method
The following tools are used for remote pair programming.
VS Code + Live Share
Slack (for video chat. Other tools can be substituted if screen sharing is possible.)
In addition to VS Code, we use video chat tools for real-time conversation.
Although Live Share has powerful functions to share the other party's environment, such as Shared servers and Shared terminals, it is better to be able to share the screen for video chatting because it is better to be able to have light exchanges such as "Let me see your screen.
First, remote pair programming begins by connecting to either local environment via VS Code (Collaborative Session).
Basically, you work with VS Code as two panes, left and right.
In the example below, Junior is on the left and Senior is on the right. Junior creates a small React UI component, and Senior writes code to validate the component. In this way, two people can work in parallel at the same time.
In this case, we used a small UI component as our subject matter. The senior will add various variations of the UI component to a style guide (React Styleguidist), and the junior will implement this.
If Junior got stuck, we would teach him via video chat or directly show him the steps of implementation in turn, making changes to the code as we went.
The goal is for the two of you to work together to complete a single UI component.
A style guide (React Styleguidist) is like a sample catalog of UI components. Another well-known example is Storybook.
From my personal experience, I have found that it is very important to improve the quality of the terminal UI components in order to improve the quality of the front end these days. For this reason, we place great importance on using such style guides to create UI components for various states (responsive, internalized content, etc.).
The components created by the two of us end up looking like the beautiful style guide below, so we enjoy working as a pair and watching the style guide approach completion in turn, or adding examples of variations that break the style (such as long text) to the style guide and showing them to Junior, and making him waiver. It is fun to work in pairs throughout the process.
I also feel that it is easier to teach the parts that have been difficult to teach, such as the steps to make a nested structure component responsive, by showing the seniors how to complete the component from their perspective in sequence.
Although not shown here, Figma is used for design. The design work is also completely remote.
Above all, by working together, we are able to grasp Junior's skill level and think about what kind of challenges he needs to tackle next.
Junior also feels more confident now that he has a clearer picture of the steps involved in front-end implementation, which had been a mystery to him until now.
This may be due to the unique freedom of the front-end, but I feel that by showing Junior the process as well as the results, he will certainly improve his skills.
Conclusion
This was an introduction to remote pair programming using VS Code's LiveShare.
The impetus for this project came from the fact that we had a junior member join our team, and we wanted to break away from the traditional whack-a-mole style of PullRequest reviews and stressful pair programming, and create an environment where the junior member could really grow in a relaxed and enjoyable way within the team.
It is still a process of trial and error, but I will continue to strive for what I consider to be the best environment possible.
Older Articles
Customizing onRight in react-native-router-flux (part 2)
0 コメント:
コメントを投稿