An Angular programmer's remote office experience for more than two years

The author has been working on back-end development since before the outbreak in 2020. In 2020, due to work reasons, I joined the development team of an open source project code-named Spartacus in SAP. This project is an Angular-based e-commerce Storefront framework with code contributors from all over the world.

In fact, the development of this project consists of six agile development teams, and I am the only one from APJ, the Asia Pacific region. Since then, I have started a remote working career that lasted more than two years and has continued to the present.

Through the following aspects, this article will share with you the development team where the author is located, the experience in the field of remote office and some tools used by the team in the daily remote office.

The directory is as follows:

• Code hosting and project management: Github
• Instant Messaging (Text Version): Slack
• Instant messaging (voice, video, meetings): Microsoft Teams
• Knowledge Management: Atlassian Confluence

Code hosting and project management: Github

The code for our project is hosted on this Github repository: https://github.com/SAP/spartacus

Whenever a new feature is developed, we will create a code branch named epic/XXX and merge it into the develop branch after development and testing are over.

Bug fixes for existing functions are done using branch fix/XXX . For new version releases, this is done using the release/XXX branch.

By defining naming conventions for these branches, colleagues with different types of development tasks can work on different branches without affecting each other.

The Code Review Web interface of Github Pull Request perfectly encapsulates and presents the status of the code before and after modification, the reviewer who proposed the code review opinion, and the next modification required by the applicant who proposed the code review, so that they are not in the same office. of developers, can efficiently conduct code reviews in these web interfaces.

The image below is a suggested modification by my colleague after a code review somewhere, the modification suggestion contains the modified source code, and the thinking behind the suggestion expressed in words.

Github's defect (Issue) management is also one of its highlights.

Spartacus users and code contributors from all over the world can create Issues for our code repository according to the templates prepared in advance. These Issues can be existing feature bugs or new feature requests. Each Issue can be assigned one or more labels (Label), which are used to identify the characteristics of the Issue and the domain problems that need to be solved. We currently have 7804 closed issues in our code repository and 702 open. These more than 8,000 Issues are described by a total of 534 different types of Labels.

Each Issue can be assigned to a project (Project), which is one of the models in the project progress management module provided by Github. In the Github Project Dashboard, we can clearly see the list of all Issues assigned to the same Project, as shown in the following figure:

These issues can be placed under the columns named To Do , In Progress , Code Review & Local , QA from Server After Merge 41f3b8500f9eff4--- , respectively

After the Sprint Planning Meeting of each agile development, the tasks that the development team needs to do in the current Sprint appear under the To Do column on the far left of the Project in the above figure in the form of an Issue. In the daily meeting of the team every day, everyone uses the Microsoft Teams software to dial into the meeting to participate remotely. The Scrum Master uses the shared desktop to project the Github Project Dashboard on his computer, and other team members select from the To Do list that they want to work that day. on Issue.

After an Issue is picked up by someone, it moves from the To Do column to the In Progress column. When the developer completes the functional development or bug fixes required by the Issue and completes the local testing, the Issue enters the Code Review & Local QA state from In Progress, waiting for other developers in the group to pick it up for code review and cross-testing. When the code review and cross-testing are done by another developer, the Issue enters the QA from Server After Merge state, at which point the team's Quality Engineer can start higher-level integration testing.

Through the Milestone panel associated with the Issue, we can easily monitor the completion progress of a Project:

The above describes a typical life cycle of an Issue managed through Github, and our team implements project task management in this way. Although Jira, another paid software, also provides more professional project and transaction tracking management functions, which are better in task workload recording, overall project progress control and task execution details display, but Github Project also has its highlights, that is Deep integration of Github Issues and Pull Requests, the latter is a feature that is valued by our global development team with developers from all over the world and across multiple time zones.

Instant Messaging (Text Version): Slack

In addition to writing code, submitting code, and reviewing code every day, programmers inevitably have to interact with other developers in various ways, such as discussing technical issues, posting group announcements, asking other members for help, and so on.

If it is a relatively simple problem that can be solved by text communication, members of our team tend to communicate by text in the software Slack.

In my opinion, compared with WeChat, which is used in daily life, Slack has the following significant advantages in the communication of remote team members in the field of software development:

1. All chat records (including text and files) are persisted on the server side for easy query

Many friends who use WeChat groups for work communication have complained that WeChat group chat records are only stored locally and are easily lost. And Slack does not have this problem, because a message (whether plain text or contains a file), once sent, will be saved to the server, and Slack supports a powerful query function.

The following is the query window of Slack. We can see that Slack supports the following query methods:

• Google Like query, that is, directly enter the query keyword after the icon of the magnifying glass in the figure below
• Query in the specified Slack Channel, such as Find in ec-spartacus in the figure below, which means to search only in this Channel named ec-spartacus
• Search only interaction records of the specified type, such as Messages (text interaction information), Files (files), Channels (search for Channels whose name contains the entered keyword) and People (search for Slack users whose name contains the entered keyword)

Taking the author as an example, I joined the current development team in August 2020. Using Slack search, the author can easily locate any interaction records that occurred before August 2020: just specify the start and end of the search in Range. End date:

I can quickly find the interaction records I need to find that contain a certain keyword:

2. Slack's text messages support Markdown-like syntax, which is convenient for programmers to communicate

Slack's text supports a variety of formatting options such as bold, italics, strikethrough, quotes, and code insertion. Compared with plain text, these formatting effects improve the efficiency of developers reading text information.

In addition, Slack's text editor supports a wide variety of Emoji emoticons, which can add a touch of color to the daily monotonous life of programmers:

3. Slack Thread for efficient organization of text-based discussion threads

Friends who use WeChat groups to discuss work issues have the following troubles: the information flow in WeChat groups has no concept of hierarchical structure, and all information flows are located at the same level, so it is easy to appear in the same group, and there are several different topics at the same time. In the case of simultaneous discussions, it is difficult for users of the group to read these transcripts to gain the context of the discussions on each of the different topics.

Slack introduces the concept of Thread to efficiently manage the concurrent discussion text flow of different topics within a Channel.

A Thread represents a topic and can contain one or more pieces of text information. A Thread's other text messages except the first original text message are called Reply. When the user replies to the first text message of the Thread, these reply messages are called Reply, which are automatically the same as the first text message of the Thread. messages are associated.

The figure below is an example. The area on the left side of the screen displays two Threads, including 4 and 7 Reply. Click on each Thread, select the View Thread menu item, and you can view the thread in the detail page area on the right side of the screen. Thread all Reply.

By introducing the concepts of Thread and Reply, which have similar parent-child containment relationships, Slack Channels can efficiently manage textual discussions on different topics.

4. Slack has many apps and powerful extensions out of the box

On the Slack App Marketplace https://slack.com/apps , you can find a number of out-of-the-box Slack apps that can significantly improve remote work productivity:

We can add these ready-made apps to the Slack Channel:

You can also develop new apps that meet the actual work needs of the team by yourself.

For example, a self-developed Slack App that our team is currently using, as shown in the figure below. Whenever a developer submits a new code, which causes the Central Build of the continuous integration server to fail, the App will push a message to the Slack Channel and include three links, which point to the failed build and the code submission that caused the build to fail. , and build history information.

With instant alerts like the Slack App, developers can avoid manually checking build status, allowing them to respond faster to failed builds.

Instant messaging (voice, video, meetings): Microsoft Teams

For agile development teams working remotely, Daily Scrum, Planning Meeting, Review Meeting and these meetings all need to be held online. In addition, when developers encounter high-complexity problems that are difficult to solve by purely textual information discussions, they also need to communicate through voice plus screen sharing.

Although Slack itself provides voice communication capabilities, for online meetings, our team ultimately chose Microsoft Teams. In addition to the unstable network connection environment, we have tested that Teams outperforms Slack, we can use the Recording function of Teams to record important meetings and export them in MP4 format. The recording of these meetings is very useful for colleagues who are new to the team and those who have missed the meeting for various reasons.

Knowledge Management: Atlassian Confluence

Although the text information flow in Slack is very convenient to search, it is relatively fragmented, and it is not suitable for the maintenance of the system. Therefore, we chose Atlassian Confluence to build a team Wiki and realize the knowledge sharing of the team.

Atlassian Confluence can support the writing of documents by multiple users, and can easily and efficiently create requirements documents, product architecture design documents, project management documents, technology sharing and other documents in the software development process.

Its rich page controls, multiple categories of out-of-the-box templates, rich text-based and document source-level editing enable both developers and non-technical people to write professional documents.

With its version management and difference comparison functions, even when multiple users are writing the same document, they can easily trace back the detailed information of each modification as needed:

Summarize

Through the author's actual work experience, this article shares some tools and experiences used by the author's global software development team in the field of remote office. Although the members of the development team cannot work face-to-face in the same office due to the epidemic situation and the geographical location of the team members, thanks to the modern IT technology, with the tools introduced in this article, even if we work remotely, our development efficiency can be improved. It wasn't much affected either.

It is hoped that the epidemic will end soon and all developers can return to their normal development work before the epidemic.