字节跨平台框架 Lynx 开源：一个 Web 开发者的原生体验 ...

近来各大厂都在开源自己的跨平台框架，前脚腾讯刚公布计划四月开源基于 Kotlin 的跨平台框架 「Kuikly」 ，后脚字节跳动旧开源了他们的跨平台框架「 Lynx」，假如说 Kuikly 是一个面向客户端的全平台框架，那么 Lynx 就是一个完全面向 Web 前端的跨平台百口桶。
为什么这么说？我们简单看官方提供的一个 Demo ，信赖你可以看到许多熟悉的身影：

• scss
  
• React
  
• useEffect
  
• react native 的 view
  

1. import "../index.scss";
2. import { useEffect, useMainThreadRef, useRef } from "@lynx-js/react";
3. import { MainThread, type ScrollEvent } from "@lynx-js/types";
4. import type { NodesRef } from "@lynx-js/types";
5. import LikeImageCard from "../Components/LikeImageCard.jsx";
6. import type { Picture } from "../Pictures/furnitures/furnituresPictures.jsx";
7. import { calculateEstimatedSize } from "../utils.jsx";
8. import { NiceScrollbar, type NiceScrollbarRef } from "./NiceScrollbar.jsx";
9. import { adjustScrollbarMTS, NiceScrollbarMTS } from "./NiceScrollbarMTS.jsx";
11. export const Gallery = (props: { pictureData: Picture[] }) => {
12.   const { pictureData } = props;
13.   const scrollbarRef = useRef<NiceScrollbarRef>(null);
14.   const scrollbarMTSRef = useMainThreadRef<MainThread.Element>(null);
15.   const galleryRef = useRef<NodesRef>(null);
17.   const onScrollMTS = (event: ScrollEvent) => {
18.     "main thread";
19.     adjustScrollbarMTS(
20.       event.detail.scrollTop,
21.       event.detail.scrollHeight,
22.       scrollbarMTSRef,
23.     );
24.   };
26.   const onScroll = (event: ScrollEvent) => {
27.     scrollbarRef.current?.adjustScrollbar(
28.       event.detail.scrollTop,
29.       event.detail.scrollHeight,
30.     );
31.   };
33.   useEffect(() => {
34.     galleryRef.current
35.       ?.invoke({
36.         method: "autoScroll",
37.         params: {
38.           rate: "60",
39.           start: true,
40.         },
41.       })
42.       .exec();
43.   }, []);
45.   return (
46.     <view className="gallery-wrapper">
47.       <NiceScrollbar ref={scrollbarRef} />
48.       <NiceScrollbarMTS main-thread:ref={scrollbarMTSRef} />
49.       <list
50.         ref={galleryRef}
51.         className="list"
52.         list-type="waterfall"
53.         column-count={2}
54.         scroll-orientation="vertical"
55.         custom-list-name="list-container"
56.         bindscroll={onScroll}
57.         main-thread:bindscroll={onScrollMTS}
58.       >
59.         {pictureData.map((picture: Picture, index: number) => (
60.           <list-item
61.             estimated-main-axis-size-px={calculateEstimatedSize(picture.width, picture.height)}
62.             item-key={"" + index}
63.             key={"" + index}
64.           >
65.             <LikeImageCard picture={picture} />
66.           </list-item>
67.         ))}
68.       </list>
69.     </view>
70.   );
71. };
73. export default Gallery;

复制代码

没错，目前 Lynx 开源的首个支持框架就是基于 React 的 ReactLynx，当然官方也表示Lynx 并不局限于 React，以是不排除后续还有 VueLynx 等其他框架支持，而 Lynx 作为焦点引擎支持，实在并不绑定任何特定前端框架，只是当前你能用的暂时只有 ReactLynx ：

对于支持平台，目前开源版本支持 Android、iOS 和 Web，而 Lynx 官方也表示实在内部已经支持了鸿蒙平台，不过由于时间的关系，暂没有开放。
   至于是否支持小程序，这个从计划上看实在应该并不会太困难。
  另外 Lynx 的另一个特点就是 CSS 友好，Lynx 原生支持了 CSS 动画和过渡、CSS 选择器，以及渐变、裁剪和遮罩等当代 CSS 视效能力，使开发者可以或许像在 Web 上一样继续使用标记语言和 CSS。
同时 Lynx 表示，在从 Web 迁移到 Lynx 的界面，普遍能缩短 2–4 倍的启动时间，并且相比同类技能，Lynx 在 iOS 上中分秋色，在安卓上则持续领先。
   性能重要体如今自己特有的排版引擎、线程模子和更新机制。
  而在实现上，源代码中的标签，会在运行时被 Lynx 引擎解析，翻译成用于渲染的 Element，嵌套的 Element 会构成的一棵树，从而构建出复杂的界面：

而 Lynx Element 是宁静台无关的统一抽象支持，它们会被 Lynx 引擎渲染为原一生台的 UI 控件，比如 iOS 与 Android 中的 Native View，或 Web 中的 HTML 元素（包括 custom_elements），从目前的 Demo 直出 App 我们也可以看到这一点：

那看到这里，你是不是想说，这不就是 react-native 吗？这里有几个不同点：

• Lynx 默认在引擎层就支持 Web
  
• Lynx 有自己特有的线程模子和布局模子
  
• Lynx 在官方宣传中可以切换到自渲染，虽然暂时没找到
  

事实上，Lynx 官方并没有避忌从其他框架里学习相应上风的情况，官方就很大方的表示，Lynx 项目就是使用了 react-native 和 Flutter 的部分上风能力，从这一点看Lynx 还是相当真诚的：

react-native 不用说，比如 JSI 等概念都可以在项目内找到，而类似 Flutter 里的 buildroot 和 Runner 也可以在项目内看到，包罗 Flutter 里的 message loop 等事件驱动的线程编程模子：

例如 Lynx 的 Virtual Thread 概念，对应 Lynx 托管的“实验线程” ，用于提供 Task 的次序实验，并且它与物理线程大概存在不是一一对应的关系，这和 Flutter 的 Task Runners 概念基本一样，支持将 Task 发布上去实验，但不关心其线程模子情况。
另外 Lynx 最大的特点之一是「双线程架构」，JavaScript 代码会在「主线程」和「配景线程」两个线程上同时运行，并且两个线程使用了不同的 JavaScript 引擎作为其运行时：

• Lynx 主线程负责处理直接处理屏幕像素渲染的任务，包括：实验主线程脚本、处理布局和渲染图形等等，比如负责渲染初始界面和应用后续的 UI 更新，让用户能尽快看到第一屏内容。
  
• Lynx 的配景线程会运行完整的 React 运行时，处理的任务不直接影响屏幕像素的显示，包括在配景运行的脚本和任务(生命周期和其他副作用)，它们与主线程分开运行，这样可以让主线程专注于处理用户交互和渲染，从而提拔团体性能。
  

比如下面这个代码，当组件 <HelloComponent/> 被渲染时，你大概会在控制台看到 “Hello” 被打印两次，因为代码运行在两个线程上：

1. const HelloComponent = () => {
2.   console.log('Hello'); // 这行会被打印两次
3.   return <text>Hello</text>;
4. };

复制代码

  在 Lynx 规则里，事件处理器、Effect、标注 background only、backgroundOnlyFunction 等只能运行在配景线程，因为配景线程才有完整的 React 运行时。
  而在 JS 运行时，主线程使用由 Lynx 团队官方维护的 PrimJS 作为运行时，它是基于 QuickJS 的轻量、高性能 JavaScript 引擎，可以为主线程提供精良的运行性能。
而 Lynx 的配景线程：

• Android：出于包体积和性能的综合考量，默认使用 PrimJS 作为运行时
  
• iOS：默认情况下使用 JavaScriptCore 作为运行时，但由于调试协议支持度的缘故原由，当需要调试的时候，需要切换到 PrimJS
  

   同时 PrimJS 提供了一种高性能的 FFI 能力，可以较低成本的将 Lynx 对象封装为 JS 对象返回给 FFI 调用者，相比传统的 FFI 性能上风显着，但是这种范例的 JS 对象并不是 Object Model，Lynx 引擎无法给该对象绑定 setter getter 方法，只能提供 FFI 将其作为参数传入，实现类似的功能。
  另外，Lynx 的布局引擎命名为 starlight，它是一个独立的布局引擎，支持各种布局算法，包括 flex、linear、grid 等，它还公开了自定义度量和自定义布局的功能，为用户提供了扩展其功能的机动性。
在 Lynx 内部，LynxView 的作用类似于原生的 WebView，用于加载渲染对应 Bundle 文件，其中 LynxView 对应的就是 Page，Page 就是 Lynx App 的 Root Element。
客户端可以给 LynxView 设置不同的大小约束，也就是给 Page 设置大小约束，Lynx 排版引擎会使用这些约束来计算 Page 节点以及所有子节点的大小位置信息：
   <page> 是页面的根节点，一个页面上只能有一个 <page>。你也可以不在页面最外层显式写 <page>，前端框架会默认天生根节点。
  最后，从 Lynx 的实现上看，后续假如想支持更多平台实在并不复杂，而官方目前也提示了：，Lynx 并不得当从零开始构建一个新的应用，你需要将 Lynx（引擎）集成自原生移动应用或 Web 应用中，通过 Lynx 视图加载 Lynx 应用 ，以是 Lynx 应该是一个混合开发友好的框架。

那么，对于你来说，Lynx 会是你跨平台开发的选择之一吗？

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。