七年大前端技术之路：我的九点心得体会

嘉宾 | 李祎

编辑 | 李慧文

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

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

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

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

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

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

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

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

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

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

InfoQ：这些平台解决了什么问题呢？带来了什么收益呢？

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

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

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

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

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

李祎：目前 58 集团内部主流的跨端方案都有涉及，比如 Hybrid、Flutter、React Native、Taro。

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

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

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

InfoQ：您在主导 58 React Native 平台搭建时有什么踩坑经验吗？

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

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

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

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

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

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

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

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

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

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

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

InfoQ：您认为跨端技术的目前亟待突破的技术瓶颈是什么？

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

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

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

InfoQ：您有什么话想给进入这个行业的新人说吗？

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

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

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

嘉宾介绍

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

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

活动推荐

李祎老师也是 QCon+ 案例研习社【跨端深度实践】专题的出品人，如果你在这个专题下有想分享的议题，欢迎您提交议题，我们一起共同促进技术交流：
https://jinshuju.net/f/NgKzEV

如果你对 58 集团最新技术感兴趣，欢迎关注 58 官方技术号【58 技术】，分享交流你的技术心得。