云谦:前端框架的趋势与实践

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。

这是 2022.11.05 云谦在《渝 FE 2022》上的分享。

介绍

dbb4e2a6ba32466b985e4bac1a1ecfa0.jpeg

大家好,我是来自蚂蚁集团的云谦。很高兴能有这个机会来和大家来分享,我今天的分享主题是「前端框架的趋势与实践」,是我这段时间对前端框架领域的理解,分趋势和实践两个维度。趋势比较主观,可能和你的理解不同;实践主要基于 Umi 框架在蚂蚁的应用得出。

30879539cae1df6efdb0e6c7c67b7633.jpeg

关于我。BALABALA。。。

8a254d9534c266770001df0ebdb3b514.jpeg

关于前端框架的趋势,其实有很多可以讲的点。比如框架设计、构建、bundless、Native 语言、Islands 架构、数据流、请求方案、工程化、Headless 组件、文档方案、Monorepo、Node Runtime、React 18 等,在这段时间都发生了很多变化。但 30 分钟时间有限,我会挑 5 个点来分享我的看法,每个点 5-6 分钟。

框架设计

7362452b7595b53daefbe8bdc7dbeb86.jpeg

元框架(Meta Framework)领域近一年出现了不少新成员,比如 Remix、Svelte Kit、Solid Start、Qwik City、Fresh、Astro 等。同时不少老牌框架也做了迭代,比如 Next.js 13、Nuxt 3、Umi 4、ICE 3、Storybook 7 等。

64f68c11b11cfea856f243f4f63245d9.jpeg

我观察到的趋势是,

1、功能趋同
2、新框架大部分基于 Vite
3、基于路由的声明式数据获取方案

趋同指的是功能。不同的元框架 80% 的功能是类似的,剩下 20% 是有差异有亮点的。那 80% 趋同的功能,比如大家通常都有约定式路由、api 路由、ssr+ssg+isr、通过编译时的临时文件扩展框架能力、插件和扩展机制。剩下 20% 就是不同框架的卖点了,举一些例子,比如 Remix 的卖点是 loader + action 的数据加载机制、Fresh 的卖点是 0JS + deno + 真 bundless。

新出的 80% 框架都基于 Vite,上面列出的应该就只有 Fresh 是直接用 esbuild 打包。老框架升级除了 Next.js,大家都有提供 Vite 模式的支持,有些默认,有些提供配置项切换到 Vite 构建模式。选择 Vite 而非 webpack 看起来是这个阶段更合适的选择,为什么大家会选择 Vite 呢?我觉得,1)除了 Vite 的速度之外,2)易集成和 3)生态也是大家考虑的因素。(注:但是,写完这段后发现 Vercel 发布了 Turbopack,可能过个半年又要有变化了)

尽管有 useEffect、swr、react-query 等社区和官方的请求方案,以及 react 官方计划提供的 use,但大部分元框架都提供了框架层的数据获取方案,并且大部分是基于路由的声明式的。原因是,当追求极致的请求速度时,只有运行时库并不够用,只有和框架结合,尤其是路由和编译态的结合,才能达到最快最完美的请求状态:「尽快发起、并行执行」。比如,Remix 是 export loader 方法,Umi 是 export clientLoader 方法,Qwik City 是 export onGet 方法,Fresh 是 export 包含 GET 方法的 hander 对象,Solid Start 是 export routeData 方法。

36298ae69a543a6f204d4f780283798d.png

再看 Umi 在这块的实践。

1、不能免俗,由于呼声比较大,Umi 也提供了 Vite 模式。但并没有在蚂蚁内推广,蚂蚁内还是用的 webpack + 我们自研的 MFSU 提速方案,够用。Umi 的 Vite 模式在快手公司的项目里倒是有大量应用。

2、Umi 提供了 clientLoader 请求方案,实现的时候有参考 Remix 的实现。Remix 基于 loader 达到 SSR 模式下的最快请求,但不支持 CSR,Umi 的 clientLoader 方案可实现 CSR 模式下的最快请求。

cfe10c1f4c84c3082308de00844b2407.png

构建和 Bundless

构建一直是前端开发者关注的焦点。项目越来越大,依赖越来越大,构建越来很慢。

51c149b93aee46222eff8da91422e433.png

我观察到的趋势是,

1、情理之中的 Turbopack
2、Vite 大热
3、Webpack 依旧是生产构建的主力
4、真 Bundless 只存于企业内

Turbopack 是临时加的。前几天 Next.js 13 发布时出的消息,出自 webpack 作者之手,是基于 Rust 重写的类 webpack 方案,计划实现 80% 的 webpack 功能。时间原因,具体不展开了,前几天我有在公众号里写过一篇介绍。为啥说是情理之中?因为 webpack 已经 4 个月没更新了,webpack 作者一直在提私有库的 commit。前几天还在和同事闲聊,要么是被 Vite 逼躺平了,要么就是在憋大招。果然!目前还非常 alpha,可以等个半年再来看进展。

Vite 大热有多方因素,其一是因为有大量新兴框架采用,这在上一章节「框架设计」里有过介绍。另外,也可以从 npm 下载量看出,vite 周下载有 200W,已经快接近 webpack 的 1/10 了。这不是反话!

Webpack 依旧是生产构建的主力。尽管 Vite 大热,但据观察,包括使用 Umi 的 Vite 模式的用户来看,很多人用 Vite 的同学会把 Vite 只用于 dev,build 阶段依旧是用 Webpack。可能有几方面的考虑,1)Vite 的 build 也是 bundle,并不能少做什么,所以速度并没有优势,2)上生产时通常比较谨慎,大家觉得 Webpack 的 build 更可靠,3)Webpack 支持文件系统的持久缓存,合理利用对于 build 速度来说简直是神器。

真 bundless 只存于企业内。什么是真 bundless?就是比如我们要依赖 antd,只要 import 即可,无需在本地的任何时机做打包这件事。为啥 vite 不是?因为 vite 会在 optmize 阶段用 esbuild 打包依赖。为啥说只存于企业内?因为这依赖内部基建,现在的前端体系不打包是不可能的,本地不做打包这件事,总得有个地方做打包吧。那就是云端。蚂蚁内部今年依旧在推进这块的建设。

4740f09d237eb3b780d9cbfdb895675a.png

我们在这块的实践是,

1、ESMi 2
2、MFSU 3 和 4
3、基于持久缓存的 CI/CD 提速

ESMi 是我们内部的真 bundless 方案。本来计划搞个简单的 DEMO 来演示下 ESMi 2,但由于要提前录视频,相比计划提前了一周,目前 ESMi 2 还在联调阶段。大家可以关注我的公众号,如果有消息,我可以后续补一篇。前面说打包不再本地,总得有个地方做吧?那 ESMi 是在什么阶段做?简单来说,80% 的 npm 包会在我们将其 sync 到内网源的时候就做掉,然后使用时只管 import 即可。

MFSU 是关于基于 Webpack 的提速方案,已经迭代了好几个大版本,今年分别更新了 V3 和 V4,V4 可以将冷启动时间提升 25% 到 50%,根据项目类型效果不同。展开讲来不及,感兴趣的可以搜下我之前在 SEE Conf 的分享。

7efbeaab5d8726ded5b5bcbfbd455adf.png

基于持久缓存的 CI/CD 提速是内部做的一个优化,基于 webpack 5 的持久缓存能力。效果是,在缓存生效的场景下,可以做到从 106s 到 10s 的十倍提速。实现比较简单,见图,在构建前置阶段下载缓存,然后构建,然后上传缓存。需要注意的是,1)缓存失效的控制非常重要,2)涉及缓存和 CD 环境,遇到问题是比较难排查的。但是这个方案上了近半年,还是比较稳定的。

原生语言

基于原生语言的前端工具大家不一定写过,但多少都有直接或间接地用过,因为大家在用的 Vite、Remix、Next.js、Umi 等框架和工具的背后,都有基于这些工具的使用。

a4cf97ba8d059ef0175befd5358ef5b1.png

我观察到的趋势是,

1、新工具不断涌现,全面占领前端工具领域
2、元框架大量应用基于原生语言的工具

除了之前就有的 esbuild、swc、es-module-lexer、sucrase、deno_lint、dprint,近期也涌现了一批新的这一类的工具,比如 bun、@parcel/css、rome format、turborepo、turbopack、stc 等,分别覆盖 javascript runtime、css、lint、monorepo、bundle、TypeScript 类型校验 等子领域。有一种 Native 语言全面占领前端工具领域的感觉。大家也可以考虑下,还有哪些领域可以有原生语言的发挥空间?

新出的元框架出于性能考虑,要么基于 Vite(间接使用 Native 语言工具),要么直接基于 esbuild 或 esbuild-wasm,已经不会纯用 JS 工具来实现。举一些例子,Umi 用了 esbuild、es-module-lexer、swc、@parcel/css;Fresh 用了 esbuild-wasm;remix 用了 esbuild;Astro Parser 用了 go 编译成 wasm;Next.js 用了 swc 和 turbopack。

e45033d48399c373951ea5a0096bed19.png

我们在这块的实践是,

1、Umi 大量应用基于原生语言的工具。我们把 esbuild 用到了 JS 压缩、CSS 压缩、MFSU 依赖编译、SSR 编译、Jest 的 JS Transformer;把 swc 用到了 JS 编译、JS 压缩、Jest 的 JS Transformer;把 @parcel/css 用到了 CSS 压缩。

2、前面提到的 bundless 方案 ESMi。把 esbuild 用到了依赖编译、把 es-module-lexer 用到了依赖解析。

数据流

4d3c0ecf618b859582d73fa5f2aa8493.png

说到数据流,大家可能会想到老牌的 Redux、Dva、Mobx、RxJS、XState,也可能会想到新一代的 Recoil、Jotai、Zustand、Valtio、React Tracked、Redux Toolkit,以及还有很多使用度没那么广的方案 use-context-selector、react-easy-state、hox、useModel in umi、icestore、kylva、overmind 等,同时很多简单场景可能会直接裸用 hooks 组织。

48ccc08822bdccfff2969f92dc226a5b.png

我观察到的趋势是。

1、请求方案即数据流满足大量 CURD 场景
2、原子化数据流方案呈上升趋势

请求方案比如 SWR、React Query、Apollo、Relay、RTK Query、use-request 等算数据流方案吗?广义上看我觉得算,这属于直接把 client 的 ui 和 server 的数据串起来,省去了中间客户端数据处理的环节,解远程状态同步的问题,是另一种形式的数据流方案。随着以上这些库的流行,很多 CURD 项目其实已不需要传统的数据流方案,优点是用法简单,缺点是功能有限,扩展性有限。虽然有些库已经开始往传统数据流的功能上靠,增加了比如乐观更新、缓存等能力,但如果要加传统数据流的比如 redu/undo 之类的功能,大概率就不行了。

数据流领域个人感觉已经挖地差不多,较少有看到新出的眼前一亮的方案。除了原子化数据流,比如 Recoil、Jotai。最近新出的 Preact Signals 也是这一类型。这一类数据流是用原子化的方式,在 React 内部组织数据流,感觉是一种趋势,但我个人用起来心智上不太习惯。同时,他们有个缺点是 React 内部的数据流,有些方案会不允许在外部访问相应的 Store。

97ecbf6ac2bcc1059c697127f403ba0b.png

关于数据流,蚂蚁的实践是「确定了中后台新的数据流方案为 valtio」。光看结论比较简单,相比之下推导过程会更有意思一些,就是我们是怎么做出这个决定,怎么从数十个数据流方案里选择 valtio 的。

46d0ff14cfc73e278a52e665ca638b50.png

数据流方案有很多考量,比如心智模型、读取数据、写入数据、数据推导、异步 Action、渲染性能优化、Suspense 并发模式支持、SSR 支持、React 之外访问、组件封装、瞬时更新、插件中间件扩展、Redux DevTools 支持、兼容性、多实例和单实例、数据序列化能力、同步/异步更新、内存管理、测试、包尺寸等。具体不展开,感兴趣的可以去我的公众号搜「数据流2022」,有详细介绍。

我们的选择过程是这样。首先,从心智模型上考虑,我们有大量初级程序员,所以沿袭传统的数据流心智,用外部 Store 的方式会比较好,所以就淘汰了大量用原子化从下而上组织的数据流方案。然后做选择要基于业务场景,我们的场景是中后台业务,兼容性要求比较宽松,可以用基于 proxy 的数据流方案。最后对比了基于 proxy 的数据流方案,发现 valtio 相比下能满足各种需求,并且容易扩展,DX(开发体验)也很好。

Islands 架构

Islands 是新出的架构方案,可能不少同学没了解过,先花一些篇幅做下科普。

37101770e791c6e173d8e401993962fe.png

Islands 架构是 preact 作者提出的,解性能、JavaScript 尺寸、注水效率、SEO 等问题。比如图中的渲染,最右的是 Islands 架构的渲染方式,页面大部分是通过 HTML 做静态渲染,剩下一些包含交互的部分就是这个架构里的 Island(岛),会对他们产出单独的 JavaScript,做单独的渲染。据 Astro 的统计来看,基于 Islands 架构相比传统的 CSR/SSR 架构,能减少 83% 的 JavaScript 代码。

Islands 架构的实现不挑技术栈,现有实现有 Marko、Eleventy、Astro、Fresh、Island.js 等。Marko 和 Eleventy 甚至是在 Islands 架构提出之前就有的实现。但这些实现通常是基于 SSR/SSG + MPA 的。注意是「MPA」。所以虽然性能非常好,但我个人理解有个缺点是,在大家用习惯了 SPA 的时代,回归到 MPA,没有路由,切换页面从 HTML 开始,可能在交互上可能会带来一些不适应。

ae3c1b8acfb34c8b284f0d467c30695d.png

Islands 架构我理解的趋势是,框架大热但应用不多。比如头部的 astro 和 marko,star 数很高,但周下载分别只有 3w 和 1w 不到。那 Islands 架构适用于哪类应用呢?基于 SSR/SSG + MPA 的特点,我觉得潜在的场景比如:1、文档站,2、官网类应用,3、交互少的页面比如只有添加到购物车的宝贝详情页、4、天生就是 MPA 的 Hybrid 应用,等等。

Islands 架构我们还在观望,没有具体实践,有计划会在 Umi 中考虑增加一类应用类型做探索,同时在蚂蚁的业务中找到适合落地的应用。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274480.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element-ui表单_每日UI挑战强加-登录表单(分步教程)

element-ui表单A step by step journey to create a good design from the daily UI challenge一步步走,从日常的UI挑战中创建出色的设计 内容 (Content) Introduction 介绍 Result demo 结果演示 Prerequisite 先决条件 Step by step guide 逐步指南 Conclusion 结…

GitHub 搜索技巧:如何更有效地搜索 issue、repo 和更多信息

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

js 绘画js 绘画路径_绘画是一种技能,而不是才能

js 绘画js 绘画路径重点 (Top highlight)November 2019… some decided to start rocking a moustache, others were obsessed with baby Yoda. I decided to commit to drawing something every single day. As a way to keep myself accountable I started posting daily on …

点击页面元素跳转IDE对应代码,试试这几个工具!

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

shields 徽标_徽标不够用时如何设计应用程序图标

shields 徽标What’s the first thing that comes to mind when you think about a particular app? Chances are, it’s the icon. And it’s certainly the first thing a user notices when deciding what app to install — similar to studying the supermarket shelves.…

基于Sentry高效治理前端异常

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

zoom 用户被锁定_重新考虑Zoom的用户体验

zoom 用户被锁定Zoom is a household name now. It’s weird, but a new reality for 2020. I’ve been able to reliably stay in touch with so many people and even throw surprise birthday parties! It has been one of the products that has kept me busy through this…

或许是我们学错了方向?

大家好,我是若川。最近来了一些新朋友,感谢大家关注~相比于原生 JS 等源码。我们或许更应该学习正在使用的组件库的源码(如:element、antd、vant、semi、arco、tdesign 等),先从简单的看起,Butt…

Android 默认Tab标签大小及间距修改

一般来说,我都是用Android默认的Tab,但此时Android会根据你增加的Tab页面平均分配Tab标签,假如你只有两个Tab,那么长度将会很长,并且其高度略微过高,并不好看,网上解决这个问题有些是自定义Tab。…

ui设计看的书_5本关于UI设计的书

ui设计看的书Want to develop a better eye and vocabulary for judging layouts, type choices and imagery?是否想开发一种更好的眼神和词汇来判断布局,类型选择和图像? According to performance experts, the best way to learn is to gain lots o…

GitHub 这8大超实用小技巧,99.9%的人都不知道!

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究

案例研究设计与方法-罗伯Asahi Imports is a Japanese grocery store located in central Austin, Texas. It has a passionate following, over fifty years’ history, and strong business growth. But its website is showing its age, and not hitting its full potential…

Taro v3.6 代号为「Reach」,已发布 canary 版本

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

axure rp 创建弹框_如何在Axure RP 9中创建交换机

axure rp 创建弹框Axure is a well-known prototyping tool with a lot of history, it has been around for years. You can create almost any kind of prototypes from simple ones to more complex ones with variables and logic without writing a single line of code (…

用 Vue3 手撕了个企业级项目,真香!

最近几年,随着短视频、小程序、直播带货的火爆,前端开发工程师越来越热门,薪资待遇也快接近后端开发工程师了,前端领域进化为内卷重灾区。然而伴随着 Vue 3.0 的发布,前端技术也迎来了一次大革新,像是字节跳…

界面设计语言_使用任何语言设计界面的提示

界面设计语言Designing for international audiences is challenging. I spent most of my career in Australia designing exclusively in English. Australian English is ‘unique’ in the sense that we are really into slang, puns, idioms.为国际观众设计是具有挑战性的…

托管代码和非托管代码

托管代码和非托管代码有什么区别呢?从字面上理解,只是一个是被托管的,另一个是没有被托管的。但是,被托管的托管代码是被谁管着呢?让我们先来看看它们的定义。 托管代码:由公共语言运行库环境(而…

如何实现前端新手引导功能?

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

hp-ux锁定用户密码_UX设计101:提出正确的问题-规划和促进用户访谈

hp-ux锁定用户密码这是什么? (What is this?) This session is part of a learning curriculum that I designed to incrementally skill up and empower a team of Designers and Researchers whose skillset and ways of working needed to evolve to keep up wi…

我与掘金合作出了源码共读第一期,首发超400人报名,快来参与~

大家好,我是若川。最近有不少新朋友关注我。对我不是很了解的,或许可以读我的2021年度总结。诚邀各位新老读者朋友参加源码共读活动。同时我和掘金合作,共同出了源码共读第一期,11月25日——12月25日,奖品丰厚。我是前…