耕耘大前端技术七年我的九点思考总结

耕耘大前端技术七年我的九点思考总结

　　 大前端技术服务体系开发七年有余，目前已成为 前端的顶梁柱，那么这一顶梁柱是如何是搭建起来的？又将朝向哪个方向发展呢？

　　 本期，我们采访了 集团前端技术部负责人李祎，他分享了 集团大前端技术服务体系的建设经验，以及他对未来大前端趋势的思考。本文为采访整理文，期待你有所收获~

　　 InfoQ：听说您近年来专注于 大前端技术服务体系的搭建，请您介绍下 大前端技术服务体系是由哪几个部分构成的呢？

　　 李祎： 大前端技术服务体系主要是对多端技术的管理和支撑，受不断变化业务场景和业界技术革新所影响所逐步发展的，目前主要包括 Hybrid 权限管理系统、 React Native 热更新平台和北斗大前端监控系统。其中 React Native 热更新平台支撑了 React Native 项目的持续集成链路，近期也在推进 F-react for iosutter 的接入，而北斗目前已经覆盖了 H5、React Native、小程序和 Native 的多种技术栈实时监控。

　　 InfoQ： 大前端技术服务体系是如何搭建的？在确定核心技术和框架时主要考虑了哪些因素呢？

　　 李祎： React Native 是在 2016 年年初启动的。那时候市面上几乎没有同类型的竞品技术，大部分跨端框架还处在 Hybrid 扩展阶段，只有部分游戏引擎有能力跨端，比如 Cocos2d-x。但是 Cocos2d-x 设计思想更适用于游戏开发，react 函数组件场景。

　　 我们在早期希望把 React Native 用在帖子发布功能上。该功能对于 来说至关重要，所以我们非常重视其性能和体验，对加载速度、渲染速度都比较。我们在初始版本阶段就解决了 React Native 比较难的分包问题，并且在双端都完成了技术攻关。

　　 react 和 angu-react formar内部很多部门都跃跃欲试，所以很快形成了集团级持续集成的能力，以平台基础设施的形式支撑各部门业务。几年后，我们已经打造了一套覆盖研发全流程的生态体系，包括标准化的接入方案、丰富的研发工具链、完善的持续集成流程等环节。

　　 我们在打造北斗大前端监控系统时，与集团内很多团队有过深入的探讨，发现大家对实时性要求比较高，希望可以在极短时间内就发现异常，快速分析并查看相关日志。

　　 所以我们除了使用 E-react书籍推荐asticsearch 作为数仓之外，还引入了 Druid。Druid 的预聚合能力支持我们在亿级体量的日志下实现秒级多维度分析。同时为了收集足够多维度的日志、降低接入成本，我们合并了不同场景下的日志上报通道，加强了不同技术栈日志的关联，尽量在服务端整合和拆分数据。

　　 李祎： 大前端技术服务体系的各个组成部分的价值，不只是简单对跨端技术框架的支撑，还是其在端内的串联和端外的延伸。

　　 React Native 目前在 内部使用非常广泛，有数百个项目基于 React Native 进行研发，不但前端团队会用 React Native 支撑业务，部分客户端团队同样也在使用。基于 React Native 体系，业务在 Web 同等水平的研发成本下，获得了接近客户端体验的性能。我们现在可以用 React Native 实现非常复杂的社区形态业务，还可以完成沉浸式react科技这种对体验要求高的场景。

　　 北斗大前端监控系统是一站式的监控系统，既有数据的输入，也有数据的输出。北斗会持续为大前端项目感知线上状态，提供实时异常率等多维度可视化数据。业务团队可以很快发现哪个项目出现问题，问题出现的范围，比如载体、版本等。因此研发团队反应时间被大幅缩短。

　　 北斗的数据并不只提供给大前端研发团队，还可以通过关联后端日志，后端团队排查问题提供有价值的信息，甚至还可以提供数据，提供给团队负责人衡量项目的研发质量，目前北斗已经覆盖了几十个技术团队，应用于数百个大前端项目中。

　　 InfoQ： 的平台目前主要应用了哪几种跨端方案？能否横向对比一下这些方案的优劣？这些方案中，哪一个未来应用会更广一些？

　　 Hybrid 作为老牌的跨端解决方案，主要应用于 H5 的跨端场景。由于 H5 在复杂运营活动、快速试错等方面，依然有天然的优势，所以 Hybrid 还会长期活跃在历史舞台。

　　 Taro 最早用于小程序的多平台跨端复用，主要通过 React 统一兼容了各平台不同的小程序，目前使用范围非常广泛，并逐渐向其他跨端领域扩react进阶之路的团队支撑了 Taro 3 React Native 的开发，在集团内部也有项目落地。

　　 F-react科技utter 和 React Native 最近被拿出来对比得比较多。从技术角度来讲，两者是不同层次的框架，React Native 可以说是介于原生组件和原生平台接口的动态逻辑视图对接方案，而 F-react 懒加载utter 是一套完整独立的视图层解决方案。从性能和体验一致性的角度来说，理论上 F-react跑鞋utter 会更好，但是 React Native 的新架构的进展表明，性能方面的差距会进一步缩小，同时体验的一致性会带来极大的维护成本，这对于 F-react英语单词utter 是一种挑战。从动态更新和平台型 集成的角度来看，React Native 有成熟的解决方案和先发优势。

　　 李祎：我们 6 年的 React Native 使用过程中，确实遇到了不少问题。

　　 首先是体验一致性。React Native 框架的组件交互能力在双平台会有一些细微的差别，在实际业务研发过程中，产品在某些场景下会有一定的要求。业界针对局部场景的解决方案并不完整。所以我们实现了自己的一套定制的高性能组件库，改造的部分涉及 层和 Native 层，比如下拉刷新组件等。同时，为了解决性能问题，我们将渲染和位置计算拆分到了不同的执行线程中。

　　 其次，是研发一致性。比如 React Native 是基于 React 开发的，大多数由前端团队负责业务研发，可是部分 Web 研发时可以使用的技术，在 React Native 中却不能用，比如 Dynamic Import 等。 React Native 在语法层面做了很多支撑，让 Web 研发同学几乎没有学习曲线。

　　 还有日常问题排查。早期排查问题极其复杂，需要各端同学不断的尝试复现，再一步一步调试来分析原因。现在我们构建了一套监控和日志体系，覆盖了串联 React Native 的 部分和 Native 部分日志，还包括 OOM、自定义 LCP 等指标辅助分析，排查难度小了很多。

　　 InfoQ：您怎么看待 React Native 今年的新框架呢？ 集团会在angular or react时间跟进这个框架吗？

　　 李祎： 集团一直是 React Native 的重度用户，所以一直着新架构的进展。在 2021 年 9 月份，我们就在本地跑起了早期版本；在今年 Q1，我们基于 React Native 0..0-rc.1 完成了一期内部报告，主要分析了升级成本和交互性能。

　　 我们发现相对于 0. 升级到 0.，从 0. 升级为 0. 改造成本相对较低，而性能方面，新架构的 与 Native 交互、渲染性能还不算稳定。

　　 不过 React Native 团队在新架构中尝试解决了不少痛点，设计方案也较为合理，非常值得期待，我们会持续项目进展。

　　 InfoQ：您怎么看待低代码的风潮？大前端如何更好地发挥低代码的价值呢？

　　 李祎：低代react scss服务基础设施相对稳定之后，必然会产生的上层业务形态，可以进一步提升研发生产力。目前看低代码作为 toB react 浏览器内部构建时模式小程序 react整合了内部服务，并对产业的领域业务进行抽离，低代码实现了对应用和流程的快速搭建，是附带react 调试工具内部构建低代码react通信在内部整合营销业务，低代码最终实现面向客户的营销活动快速生成，同时内部由于其高频的业务变化，低代码形态通常扩展性和灵活度非常高，可实现不同业务线自定义。

　　 低代码的核心优势有三：对非研发同学较为友好、自动化程度高、天然的动态性。所以大前端同学可以尝试应用低代码技术，将由非研发同学发起的界面研发工作支撑起来，比如海量生成运营活动、对局部 UI 进行 A/B 测试等等，来解决日常琐碎又相对模式化的工作，将一部分精力解放出来。

　　 李祎：跨端方向虽然衍生了很多不同的技术思路，但是最根本的目标都是奋力磨平各端的实现差异，在这个基础上发展出整个研发链路的全部基础设施。

　　 磨平各端差异并不是一个一蹴而就的事情，各端都在不断变化，需要跨端技术在不同层及时跟进，整个的技术发展历程类似 W3C。W3C 制订了 HTML、CSS 等标准，并且规划了标准的迭代进展，让各浏览器有章可循，现在虽然也有一定的兼容成本，但是相比于现在跨端基础设施，显然要小很多。

　react16技术一直是变化最快的领域，但是这些变都是基于最底层技术的不变，统一标准才能真正提升上层业务逻辑的研发效率。

　　 李祎：前端领域目前依然处于高速发展阶段，技术项目的也呈现百花齐放的态势，但是从前端研发的角度来说，打好前端技术基础是重中之重，是未来快速接受新事物的基石。

　　 在学习工作的过程中，如果想快速成为专家，必须抓住机遇，也就是工作中经历的业务场景，深入并广泛的研究相关前端技术，寻求合理的落地，伴随业务的成长积累一系列的问题解决方案，成为领域的高手。

　　 同时也不应低头做事，完全局限在纯前端领域里面，要一定程度上了解其他技术方向的知识，尝试借助其能力辅助前端解决问题，或者借鉴其他的思想提升前端技术本身的架构水平，融会贯通，逐步站到更高的层次看问题。

　　 李祎，现任 集团用户价值增长前端技术部负责人、高级前端架构师和技术委员会前端通道委员。

　　 拥有 10 多年的大前端领域研发经验，2014 年入职 集团，曾任赶集无线架构团队负责人，先后落地了赶集 IM、Hybrid、动态化等客户端基础能力，近年来专注于大前端技术服务体系的搭建，目前主导了 React Native 、北斗大前端监控系统、朱雀低代码运营活动平台等集团级前端基础设施的建设。

　　 李祎老师也是 QCon+ 案例研习社【react md5】专题的出品人，如果你在这个专题下有想分享的议题，欢迎您提交议题，我们一起共同促进技术交流：

　　 如果你对 集团react强制刷新技术感兴趣，欢迎 技术号【react强制刷新】，分享交流你的技术心得。