Angularjs 产品重构一

Angularjs 产品重构一

本公司有两个使用 Angularjs 开发的产品，由于 Angularjs 已被官方放弃维护，存在安全攻击风险，于是我打算重构它们，避免安全威胁和解决一些原框架难以解决的兼容、版本差异报错等实际问题。

AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement. Visit angular.io for the actively supported Angular.

背景

接手这两个产品的第一天，我好奇怎么还在使用 Angularjs 这种产品，他本就该早就被升级到 Angular 了，可是过了这么多年了还没升级，是上面领导不同意升级还是技术人员不愿意修改老旧问题？在体验越来越差的框架上继续添加新功能，每天都会产生新的问题，难以彻底解决。让项目组团队对这两个产品丧失了好感，降低了认可度，用户满意度大打折扣，领导关注度也减少了。

为了改变这个局面，我先找到了产品经理说我想重构的想法，他表示支持。但想要真正立项，还得领导同意。在迭代了 3 个版本后，我第二次找到领导说明利害，假如这个框架受到攻击，我们根本没法处理，且官方已经放弃维护了，用户数据面临泄漏，我们还无法短时间内解决，我们只能眼睁睁看着用户流失。

立项

领导听到上面我的建议后，他同意了重构，让我们制定计划升级。我将未来几个月我们需要做的任务列了一个清单：

• 产品 A 重构
• 产品 B 重构
• 原产品版本迭代
• 原产品性能优化、用户体验优化

在公司内部会议上，特意邀请了领导参与讨论，并且让他拍板任务的优先级，让我们有了方向。这样产品 B 由于体量较小，一个月后开始了重构任务。

准备工作

1. 产品经理整理原型，把原有的页面截图便可以了。
2. 整理业务逻辑，只需要给我们讲清楚就可以了，不需要全部写出来，全部参考原来的业务逻辑，换框架不换功能。说得简单点相当于做了一次翻译工作，将 AngularJS 框架写法翻译为 VUE3 框架的写法。
3. 前后端架构设计、原来不友好的实现方式直接替换，做到未来以逸待劳，提高用户满意度。
4. 前端技术选型。

前端技术选型

截至 2022 年 09 月 01 日，前端生态整理：

序号	JavaScript框架和版本	UI 组件库和版本	构建工具和版本	路由管理和版本	状态管理
1	Vue.js(v3.2.37)	PC端：Element Plus(v2.2.15) / 移动端：Vant 3(v3.6.1)	vite(v3.0.9)	Vue Router(v4.1.5)	pinia(v2.0.21)
2	React(v18.2.0)	PC端：Ant-Design(v4.22.8) / 移动端：Ant Design Mobile(v5.22.0)	webpack(v5.74.0)	react-router-dom(v4.1.5)	mobx(v7.5.2)
3	Angular(v14.1.0)	PC端：NG-ZORRO(v14.0.0) / 移动端：NG-ZORRO-MOBILE(v6.0.0)	webpack(v5.74.0)	Angular Router(v14.1.0)	RxJS(v7.5.3)

经过和其他部门前端负责人沟通，以及结合公司、本团队实际情况，本着简单、实用、稳定的原则，选用 VUE3 框架，Vant3 UI 组件库，并选定了模板 vite-vue3-h5 。我最熟悉 Angular 框架，但是不能仅凭自己喜好就做出选择，需要综合公司、团队的其他成员的实际情况选择，选择 Vue 是因为它简单，且大多数人会使用，假如以后某一人请假或离职了，不影响产品继续迭代。

目前模板 vite-vue3-h5 支持浏览器和系统是：Chrome >= 51、iOS >= 10.0。