On the development of large PWA and Spa applications, our exploration in project engineering and architecture

[hawx1993]

Summary

Towards the end of the year, it's time to write a summary of the project and the team. Last March, I joined the team and began to participate in the selection and R & D of team technology. Our project has been developed for nearly two years, and the first GA version on the inside was released last week.

What we developed is an instant messaging application on the to B end, similar to slack, which is a PWA application and also a spa application， which can be used offline, offline local data search, while using an electron to develop cross-platform applications, while supporting Mac and windows platforms.

At present, our R & D team has more than 40 people. We have done a lot of exploration in engineering, agile development, and automation, including the extreme requirements for performance and the strict requirements for code, so that we can always maintain a high standard and rapid iteration of products.

Workflow

We have also made many explorations in the development process, including the two-week review meeting in the early stage of the project. We will summarize the problems encountered by each member of the team and propose corresponding improvement measures and solutions.
Development process:
In terms of development process, we have made many explorations, including code review, using tools to submit commit information to keep the format of commit information consistent, as shown in the following figure:
There are also strict code specification issues. We have code review and eslint to ensure the code specification issues. We use prettier + eslint to make everyone's code style consistent. In a word, the code written by dozens of people's development teams looks like that written by one person. We seldom comment on the code, because we think good code can be represented by naming And the maintenance of documents can't keep up with the pace of code update.

Tech solution

At present, we are a four week release. Before each feature, we need to draw a flowchart or class diagram to clarify your technical point of view. We need to discuss each technical detail with the team members:

Automation

We have made many explorations in automation, including CI / CD, UI unit test with enzyme + jet, and view model unit test with jet.

Test Strategy

• Unit Test
• Integration Test
• E2E Automation Test
• Puppeteer Test
• Manual Test

CI/CD

continuous delivery

Git flow

we should conform to the standard git flow because we are developing a large project with hundreds of people working together

Architecture

pal is just an abstract layer that provides the underlying capabilities of the system.

In terms of architecture, we use lerna for package management. We self maintain a set of UI components based on material UI, and use story book to demonstrate the components. We divide the components into component, foundation, assets, hoc and pattern. Common basic components are placed under component, such as button, avatar, etc. foundation is to put some common things, such as utils, typegrowth, icon, layout, etc. Hoc is to put some high-level components, such as with loading, which deals with loaded animation and so on. Pattern is a combination of UI components closely related to the business. We use styled components to process the material UI twice.

The exploration of agile practice

DoR

DoR means Done of Ready. In RingCentral, before you start development, there is a series of tasks that need to be done, that is DoR. DoR includes test strategy, dependency or risk assessment, task splitting, technical solution review