InfoQ 重磅内容产品《中国卓越技术团队访谈录》上新啦! 了解详情
写点什么

6 年 React Native 深度用户,怎么看 RN、跨端及大前端的未来的?

  • 2022 年 4 月 14 日
  • 本文字数:3956 字

    阅读完需:约 13 分钟

6 年React Native 深度用户,怎么看RN、跨端及大前端的未来的?

嘉宾 | 李祎

编辑 | 李慧文

 

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 技术】,分享交流你的技术心得。


2022 年 4 月 14 日 14:234411

评论

发布
暂无评论
发现更多内容

要搞清楚什么是同步,异步,串行,并行,并发,进程,线程,协程

乌龟哥哥

6月月更

云厂商为什么都在冲这个KPI?

脑极体

声网 VQA:将实时互动中未知的视频画质用户主观体验变可知

声网

人工智能 音视频

云原生运维文章计划

boaker

运维 云原生

攻防演练中蓝队针对攻击方式复盘总结

穿过生命散发芬芳

6月月更 攻防演练

【使用Python实现算法】02 原生类型与内置函数

★忆先★

Python 算法题

SpringBoot-入门

zarmnosaj

6月月更

为什么 Vue2 this 能够直接获取到 data 和 methods,源码揭秘

若川

JavaScript Vue 前端 前端开发 源码解析

深入理解 Jetpack Compose SlotTable 系统

fundroid

android Compose android jetpack SlotTable gap buffer

不得利用算法从事垄断行为:防范利用算法和大数据进行杀熟

石头IT视角

面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的

若川

JavaScript Vue 前端 前端开发 vuex

怎样能低成本构建一个电商平台

Geek_99967b

小程序 电商

模块化开发

Jason199

js 模块化 6月月更

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

若川

JavaScript Vue 前端 前端开发

剑指 Offer 65. 不用加减乘除做加法

未见花闻

6月月更

面试官问:JS的this指向

若川

JavaScript 前端 前端开发

面试官问:能否模拟实现JS的new操作符

若川

JavaScript 前端 前端开发

Java Core「18」JCF 及常见问题

Samson

学习笔记 Java core 6月月更

从小到大为何一谈学习就愁眉苦脸

宇宙之一粟

学习 6月月更

去哪儿网(Qunar) DevOps 实践分享

laofo

DevOps cicd 研发效能 持续交付 工程效率

Prometheus 2.35.0 新特性

耳东@Erdong

release Prometheus 6月月更

每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100行源码揭秘!

若川

JavaScript 前端 前端开发 Node

K8S学习笔记--《容器化的应用:会了这些你就是Docker高手》

IT蜗壳-Tango

IT蜗壳教学 6月月更

JavaScript 对象所有API解析

若川

JavaScript 前端 前端开发

50行代码串行Promise,koa洋葱模型原来是这么实现?

若川

JavaScript 前端 Node Jest koa2

【使用Python实现算法】01 语言特性

★忆先★

Python 算法 算法题

面试官问:JS的继承

若川

JavaScript 前端 前端开发

Scala 基础 (三):运算符和流程控制

百思不得小赵

scala 大数据 6月月更

COSCon'22 讲师征集令

开源社

开源

Java中数组参考指南

okokabcd

Java’

Flutter SliverAppBar全解析,你要的效果都在这了!

yechaoa

flutter android 6月月更 SliverAppBar

6 年React Native 深度用户,怎么看RN、跨端及大前端的未来的?_前端_李慧文_InfoQ精选文章