EMP微前端实战之YY语音PC客户端模板重构

前言

YY语音是欢聚时代旗下一款知名的集娱乐，交友，游戏，教育等于一身，并包含移动端、web端，PC端三端的国内聊天直播软件。

为了能够让用户在产品中得到更好的体验，同时摒弃过时技术，保持对前沿技术的探索，与时俱进，公司决定对YY PC客户端（以下简称PC端）现有一些主要模板进行web改造，本人以全程参与改造、主要技术调研负责人的身份来与大家分享本文的内容，下面将围绕改造的原因、过程及结果三方面进行阐述。

YY客户端

一、改造原因

1.1 原生应用发布迭代效率低下

在未改造前，PC端应用由C++作为应用开发语言来编写实现，这时，应用的更新可分为以下几步：

安装包构建
安装包发布
用户下载安装包
用户安装安装包这样，即使是一点点小改动，又或者是产生了一些重大问题的时候，都必须重复以上的步骤才能更新或修复应用，导致用户体验感下降。

1.2 替换现有视频播放技术（flash）

2020年6月19日，Adobe正式在官网宣布Flash Player终止服务日期为2020年12月31日，并建议用户停止使用。而PC端中，大部分的视频播放技术都依赖于flash，因此改造刻不容缓。

基于以上两种原因，并通过对比时下前沿技术，公司决定通过web对PC端进行改造，但并不是完全改为由web技术重写，而是将应用中的几大较为重要的模块（娱乐，交友等）改为通过web实现。

在娱乐模板中直播的主播

二、改造过程

2.1 基础频道模板改造1.0

最初，经讨论后决定，秉着为其他模板树立榜样，增强改造信心的理念，我们选择了从模板中最简单的，也是所有模板中最基础的基础频道模板开始，以React作为主要技术栈，使用其官方脚手架create-react-app进行开发（此处省略108万个字）。

经过大约四个月时间的努力，我们第一版改造的模板成功上线!

web化的基础频道模板

2.2 对其他模板改造的思考与基础频道模板改造2.0的诞生

2.2.1 思考

在基础模板改造成功后，其他模板的改造也在跃跃欲试，这时便产生了一连串的问题：各个模板间相同的功能如何开发？是否能直接复用？以什么样的方式进行复用能降低维护成本，又以什么方式才能加快迭代速度，又或者二者可以兼得？

2.2.2 础频道模板改造2.0的诞生

对上面的思考，我们讨论出了三种解决方案

各模块完全独立开发，独立维护
各模块不同功能独立开发，独立维护，相同部分以NPM形式共享，单独维护
以公司自研的开源微前端解决方案EMP为基础，各模块不同功能独立开发，独立维护，相同部分以基站的形式共享

经过比对，我们发现使用EMP可以同时实现降低维护成本及加快迭代速度的目的，而之前的1.0版本并未使用EMP，因此我们对新的版本再次进行了改造，庆幸的是，从cra中将项目迁移至EMP的改造，几乎0成本，时间上只花了将近半日的功夫，2.0版本便诞生了。

通过上图可以看出，EMP微前端解决方案的维护成本是最低的，迭代速度是最快的，若有还未了解EMP究竟是什么，又想快速了解其优点及与其他实现技术的对比，可参考帮你对比多种微前端方案一文,又或者有小伙伴想从微前端开始了解，那么请参阅微前端究竟是什么，可以带来什么收益一文。

2.3 抽离公共组件及娱乐模板改造的开始

2.3.1 抽离公共组件至EMP基站

对于看过我们往期文章的读者来说，基站这个词汇并不会陌生，他是EMP的核心组成部分，也是实现通用组件共享的基础，其原理是通过Webpack5的Module Federation实现的，之前已在另一篇文章Module Federation原理剖析中探讨过其原理，此处便不再赘述。

础频道模板2.0改造完成后，我们便将其与其他模板通用部分的组件（如消息功能、输入装置、用户列表、麦序、顶部及头部等等）全部迁移至一个新的EMP应用中单独部署，为其他模板改造做好铺垫。

2.3.2 娱乐模板web化改造将组件通用化之后，我们便将其应用在了基础频道模板及娱乐模板当中，改造结果如下（左侧为基础频道模板，右侧为娱乐模板）：

通过EMP共享组件的两个模板

如此一来，无需重新构建其他应用，只需更新发布组件基站的内容，便可更新使用了该部分的应用，迭代速度基本无可替代，也无可挑剔。

三、改造结果

频道模板通过使用EMP微前端解决方案改造后，线上迭代速度有质的飞跃，极大地减少了维护的成本，实现用户无感知地更新其所看到的大部分内容。基于web的改造现在只应用在了基础频道模板及娱乐模板中，并且交友模板的改造计划已经提上了日程，相信后续会有越来越多的模板需要改造，而从EMP中获取的利益将会是巨大的！

今日分享到此为止，有收获的小伙伴顺便帮忙点个赞吧~