人人金服前端架构演变之路

未分类

2016年是前端技术井喷的一年，大量框架规范逐渐落地，渐渐的推动整个平台格局变化，使整个前端的生态获得了新的发展。人人金服前端团队，也跟随着整个前端的技术发展方向，在今年5月进行了整个前端项目的重构，意在用新技术解决日益增加历史包袱与性能问题。

1.披荆斩棘，开天辟地

在过去的项目中，使用的是比较传统的Jquery + requireJs + gsp 的技术栈，在过去的开发环境下有着 易于上手、兼容性强、开发规范完备等一些优点，在项目的开拓时期，为整个项目的高速迭代勇敢试错提供了简单高效的解决方案。也同时奠定了整个项目的基础，在对兼容性的踩坑过程中，整个团队积累了很多的经验，也有对组件化的需求和尝试。

但是在业务日渐庞大的过程中，曾经的技术选型渐渐与新的业务环境有了不兼容性，最明显的就是性能的瓶颈。金融项目的前端页面作为进行数据可视化的桥梁，有着数据来源多，数据量大，巨额的渲染性能耗费，交互复杂等特点。

团队在业务开发的过程中发现，业务逻辑异常复杂臃肿，模块颗粒度大，复用程度差的种种问题，以及为了IE8兼容所作出的针对各平台“使用共性而放弃特性”的做法都在进一步加剧上述问题的优化难度，种种的历史包袱与性能瓶颈让前端团队意识到重构的必要性。

2.凤凰涅槃，锐意革新

此时，谷歌出品Angular风头正盛，有着脸书做信任背书的React也逐步进入我们的视野，主打轻量的Vue也非常有吸引力。最后，在React与Vue的选择中，团队选择了React，主要是因为：1.React本身的虚拟DOM对高性能的有力支持，单一数据流对数据交互的友好 2.React本身的跨端能力、更方便的组件化 3.丰富的polyfil能达到对IE8兼容的需要。

在今年5月，整个团队对前端项目进行了重构，采用了ES6 + React + webpack的技术栈。使用新技术对整个团队是编程方式上的革新，首先是从传统的面对对象向函数式编程过渡，在新的框架中，因为采用单一数据流，从而对状态的设计关乎整个组件的质量，关注点从业务逻辑分离，而是关注于数据的变化，摆脱了Jquery时代复杂的交互管理与DOM操作，从而提升了性能；其次，是编程思维的转变，对于每个组件力求抽象化构建而是不是采用暴力算法进行开发，完备的组件文档，数据设计，从而让复用的小伙伴减少学习成本，提高了整个项目的组价复用率，缩短了项目开发时间。

选择了React，也就是选择了React全家桶，在对性能的优化中，逐步试水Redux框架来进行进一步mvc分离，统一管理state；弃用臃肿缓慢的npm而改用更加轻量快速的yarn来管理依赖；使用eslint来规范团队代码风格，开发中进行review机制，降低新人的学习成本。在对项目进行逐步的工程化、规范化、模块化。

3.批隙导窾，竿头日进

在这一年中我们对项目进行了凤凰涅槃般的革新，取得了丰厚的硕果，也发现了自身的不足，在开发过程渐渐步入稳健之时，我们也对自己提出了新的要求，自动化测试、打包优化、自动化部署、前后端进一步分离，都是整个团队着力解决的问题。以在接下来的一年为人人金服提供更稳定、高效的技术支持。