preface
YY is a well-known live chat software of YY, which integrates entertainment, making friends, games and education, and includes mobile terminal, Web terminal and PC terminal.
In order to be able to let the user get better experience in product, discard outdated technology at the same time, keep the exploration of cutting-edge technology, advancing with The Times, the company decided to YY PC client (hereinafter referred to as PC) some main existing template web renovation, himself, head of the whole journey to participate in the transformation, the main technical research status to share with you the content of this article, The reasons, process and results of the transformation will be described below.
1. Reasons for transformation
1.1 Native app release iteration is inefficient
Before the transformation, the PC application was written and implemented by C++ as the application development language. At this time, the update of the application can be divided into the following steps:
- Installation package Construction
- Installation Package Release
- The user downloads the installation package
- The user installs the installation package
As a result, the above steps must be repeated in order to update or fix the application even with minor changes or major problems, resulting in a poor user experience.
1.2 Replacing the Flash Video Player Technology
On June 19, 2020, Adobe officially announced on its website that Flash Player will be discontinued as of December 31, 2020 and users are advised to stop using it. In PC, most of the video playback technology depends on Flash, so the transformation is urgent.
Based on the above two reasons, and by comparing the current cutting-edge technology, the company decided to transform the PC terminal through The Web, but it is not completely rewritten by the Web technology, but several important modules in the application (entertainment, making friends, etc.) are realized through the Web.
Second, the transformation process
2.1 Basic channel template modification 1.0
Initially, after discussion, we decided to start with the basic Channel template, the simplest and most basic of all templates, and React as the main stack, in order to set an example for other templates and enhance confidence in transformation. Use its official scaffolding create-React-app for development (1.08 million words omitted).
After about four months of efforts, our first version of the template was successfully online!
2.2 Thoughts on other template modification and birth of Basic Channel template Modification 2.0
2.2.1 thinking
After the basic template is successfully modified, other templates are also ready to be modified, which leads to a series of questions: how to develop the same functionality between templates? Can you reuse it directly? In what ways can reuse reduce maintenance costs, speed up iteration, or be both?
2.2.2 Foundation Channel template transformation 2.0 was born
In response to the above considerations, we discussed three solutions
- Each module completely independent development, independent maintenance
- Each moduleDifferent functionIndependent development, independent maintenance, the same part to
NPMForm sharing, separate maintenance - Based on the open source micro front-end solution EMP developed by the company, different functions of each module are independently developed and maintained, and the same part is shared in the form of base station
After comparing, we found the EMP can also achieve the purpose of reducing maintenance cost and speed up the iterative, and prior to version 1.0 does not use EMP, so we have new version again, fortunately, from the cra will be migrated to EMP renovation project, almost zero cost, only time spent nearly half of the time, Version 2.0 was born.
Through above you can see, micro EMP front-end solutions maintenance cost is the lowest, the iteration speed is the fastest, if have not understand what is EMP, and want to quickly understand its advantages and comparison with other technology, refer to help you to compare a variety of micro front-end solutions, or have a friend want to start to understand from the front end, See what a micro front end is and what benefits it can bring.
2.3 Remove the public components and the beginning of the entertainment template transformation
2.3.1 Remove common components from the EMP base station
For readers of our previous articles, the term base station will be familiar. It is a core component of EMP and the basis for common component sharing. The principle is implemented through Module Federation of WebPackage 5. This principle was discussed earlier in the Module Federation principle Anatomy article, so I won’t go over it here.
After the transformation of Channel template 2.0, we migrated all the components common to other templates (such as message function, input device, user list, mic sequence, top and header, etc.) to a new EMP application for independent deployment, paving the way for the transformation of other templates.
2.3.2 Web-based Transformation of Entertainment Template After generalizing the components, we applied them to the basic channel template and entertainment template, and the transformation results are as follows (the left is the basic channel template, and the right is the entertainment template) :
Two templates of a component are shared through EMP
This way, instead of rebuilding other applications, you can update the application that uses that part by updating the content of the base station that publishes the component, with a speed of iteration that is virtually irreplaceable and impeccable.
3. Transformation results
After the transformation of channel template by using EMP micro-front-end solution, the online iteration speed has a qualitative leap, greatly reducing the cost of maintenance, and realizing users to update most of the content they see without perception. The transformation based on The Web is only applied in the basic channel template and entertainment template, and the transformation plan of the friend template has been put on the agenda, I believe that there will be more and more templates to be transformed, and the benefits from EMP will be huge!
So much for today’s sharing. If you have a harvest, please give me a thumbs-up
Related references:
- EMP Micro front-end solution code repository: github.com/efoxTeam/em…
- What is a micro front end and what benefits it can bring: juejin.cn/post/689330…
- Module Federation: juejin.cn/post/689532…
- To help you compare various micro front-end solutions: juejin.cn/post/689826…