查看原文
其他

深入解读新一代全栈框架 Fresh

The following article is from 三元同学 Author 三元同学

大家好,我是 ConardLi 。今天给大家介绍一个新的框架 Fresh,由 Deno 作者出品,在最近发布了 1.0 的正式版本,宣布支持了生产环境,并且在 Github 上热度也比较高,现在是时候给大家详细地介绍一下这个方案了。接下来会从框架定位上手体验优劣势评估源码实现这几个方面来给大家深入解读 Fresh 框架。

框架定位

首先,从定位上来看,Fresh 属于 Web 全栈开发框架。是不是对于这个词非常眼熟呢?相信你已经想到了,像现在大名鼎鼎的 Next.js 以及新出的 Remix 都是走的这个路线。那么作为 Next.js 和 Remix 的竞品, Fresh 有哪些值得一提的亮点,或者说有哪些差异点呢?主要包括如下的几个方面:

首先,Fresh 基于 Deno 运行时,由 Deno 原班人马开发,享有 Deno 一系列工具链和生态的优势,比如内置的测试工具、支持 http import 等等。

其次是渲染性能方面,Fresh 整体采用 Islands SSR 架构(之前介绍的 Astro 也是类似),实现了客户端按需 Hydration,有一定的渲染性能优势。

当然,还有一个比较出色的点是构建层做到了 Bundle-less,即应用代码不需要打包即可直接部署上线,后文会介绍这部分的具体实现。

最后,不同于 Next.js 和 Remix,Fresh 的前端渲染层由 Preact 完成,包括 Islands 架构的实现也是基于 Preact,且不支持其它前端框架。

上手体验

在使用 Fresh 之前,需要在机器上先安装 Deno:

如何没有安装的话可以先去 Deno 官方安装一下: https://deno.land/。

接下来可以输入如下的命令初始化项目:

deno run -A -r https://fresh.deno.dev my-project

项目的工程化脚本在 deno.json 文件中:

{
  "tasks": {
    // -A 表示允许 Deno 读取环境变量
    "start""deno run -A --watch=static/,routes/ dev.ts"
  },
  "importMap""./import_map.json"
}

接下来你可以执行deno task start 命令启动项目:

终端里面显示 Fresh 从文件目录中扫描出了 3 个路由和 1 个 island 组件,我们可以来观察一下项目的目录结构:

.
├── README.md
├── components
│   └── Button.tsx
├── deno.json
├── dev.ts
├── fresh.gen.ts
├── import_map.json
├── islands
│   └── Counter.tsx
├── main.ts
├── routes
│   ├── [name].tsx
│   ├── api
│   │   └── joke.ts
│   └── index.tsx
├── static
│   ├── favicon.ico
│   └── logo.svg
└── utils
    └── twind.ts

你可以关注 routesislands 两个目录,[name].tsxapi/joke.tsindex.tsx 分别对应三个路由,而 islands 目录下的每个文件则对应一个 island 组件。

而开发者并不需要手写路由文件,Fresh 可以自动地生成服务端的路由到文件的映射关系。很明显 Fresh 实现了约定式路由的功能,跟 Next.js 类似。

每个 island 组件需要有一个 default 导出,用来将组件暴露出去,使用比较简单,就不展开介绍了。而路由组件则更加灵活,既可以作为一个 API 服务,也可以作为一个组件进行渲染。接下来,我们以脚手架项目的几个文件示例来分析一下。

首先是 api/joke.ts 文件,这个文件的作用是提供服务端的数据接口,并不承载任何的前端渲染逻辑,你只需要在这个文件里面编写一个 handler 函数即可,如下代码所示:

// api/joke.ts
import { HandlerContext } from "$fresh/server.ts";

const JOKES = [
  // 省略具体内容
];

export const handler = (_req: Request, _ctx: HandlerContext): Response => {
  // 随机返回一个 joke 字符串
  return new Response(body);
};

当你访问/api/joke 路由时,可以拿到 handler 返回的数据:

接下来是index.tsx[name].tsx 两个文件,第一个文件对应根路由即/,访问效果如下:

后者则为动态路由,可以拿到路由传参进行渲染:

export default function Greet(props: PageProps) {
  return <div>Hello {props.params.name}</div>;
}

访问效果如下:

同时,你也可以在路由组件同时编写前端组件和 handler 函数,如下代码所示:

// 修改 [name].tsx 的内容如下
/** @jsx h */
import { h } from "preact";
import { HandlerContext, PageProps } from "$fresh/server.ts";

export function handler(req: Request, ctx: HandlerContext) {
  const title = "一些标题数据";
  return ctx.render({ title });
}

export default function Greet(props: PageProps) {
  return <div>获取数据: {props.data.title}</div>;
}

从 handler 的第二个参数(ctx 对象)中,我们可以取出 render 方法,传入组件需要的数据,手动调用完成渲染。效果如下:

以上我们就体验了 Fresh 的几个核心的功能,包括项目初始化路由组件开发服务端接口开发组件数据获取以及约定式路由,相信从中你也能体会到 Fresh 的简单与强大了。

优劣势分析

那么,就如 Fresh 官网所说,Fresh 能否成为下一代 Web 全栈框架呢?

我们不妨来盘点一下 Fresh 的优势和不足。

使用 Fresh 的优势可以总结如下:

  • 享受 Deno 带来的开发优势,从安装依赖、开发、测试、部署直接使用 Deno 的工具链,降低工程化的成本;

  • 基于 Island 架构,带来更小的客户端运行时开销,渲染性能更好;

  • 无需打包即可开发、部署应用,带来更少的构建成本,更加轻量;

而劣势也比较明显,包含如下的几个方面:

  • 仅支持 Preact 框架,不支持 React,这一点是比较致命的;

  • 由于架构的原因,开发阶段没有 HMR 的能力,只能 page reload;

  • 对于 Island 组件,必须要放到 islands 目录,对于比较复杂的应用而言,心智负担会比较重,而 Astro 在这一方面要做的更优雅一些,通过组件指令即可指定 island 组件,如<Component client:load />

一方面 Fresh 能解决的问题,如 Hydration 性能问题,其它的框架也能解决(Astro),并且比它做的更好,另一方面 Fresh 的部分劣势也比较致命,况且 Deno 如今也很难做到真正地普及,所以我认为 Fresh 并不是一个未来能够大范围流行的 Web 框架,但对于 Deno 和 Preact 的用户而言,我认为 Fresh 足以撼动 Next.js 这类框架原有的地位。

源码实现

Fresh 的内部实现并不算特别复杂,虽然说我们并一定用的上 Fresh,但我觉得 Fresh 的代码还是值得一读的,从中可以学习到不少东西。

Github 地址: https://github.com/denoland/fresh

你可以先去仓库 examples/counter 查看示例项目,通过 deno task start 命令启动。入口文件为dev.ts,其中会调用 Fresh 进行路由文件和 islands 文件的搜集,生成 Manifest 信息。

接下来进入核心环节——创建 Server,具体逻辑在server/mod.ts中:

export async function start(
  routes: Manifest,
  opts: StartOptions = {},
{
  const ctx = await ServerContext.fromManifest(routes, opts);
  await serve(ctx.handler(), opts);
}

fromManifest为一个工厂方法,目的是根据之前扫描到的 Manifest 信息生成服务端上下文对象(ServerContext),因此 Server 的实现核心也就在于 ServerContext:

class ServerContext {
  static async fromManifest(
    manifest: Manifest,
    opts: FreshOptions,
  ) {
    // 省略中间的处理逻辑
    return new ServerContext()
  }
}

fromManifest 实际上就是进一步处理(normalize) manifest 信息,生成 Route 对象和 Island 对象,以供 ServerContext 的实例初始化。

接下来,Fresh 会调用 ServerContext 的 handler 方法,交给标准库 http/server 的 serve 方法进行调用。因此,handler 方法也是整个服务端的核心实现,其中有两大主要的实现部分:

  • 中间件机制的实现,也就是实现洋葱模型,具体逻辑在私有方法#composeMiddlewares中;

  • 页面渲染逻辑的实现,在私有方法#handlers()中。

前者不是本文的重点,感兴趣的同学可以在看完文章后继续研究。这里我们主要关注页面渲染的逻辑是如何实现的,#handlers()方法中定义了几乎所有路由的处理逻辑,包括路由组件渲染404 组件渲染Error 组件渲染静态资源加载等等逻辑,我们可以把目光集中在路由组件渲染中,主要是这段逻辑:

for (const [method, handler] of Object.entries(route.handler)) {
  routes[`${method}@${route.pattern}`] = (req, ctx, params) =>
    handler(req, {
      ...ctx,
      params,
      render: createRender(req, params),
      renderNotFound: createUnknownRender(req, {}),
    });
}

而在路由对象normalize的过程(即fromManifest 方法)中,route.handler 的默认实现为:

let { handler } = (module as RouteModule);
handler ??= {};
if (
  component &&
  typeof handler === "object" && handler.GET === undefined
) {
  // 划重点!
  handler.GET = (_req, { render }) => render();
}
const route: Route = {
  pattern,
  url,
  name,
  component,
  handler,
  csp: Boolean(config?.csp ?? false),
};

因此,对于路由组件的处理最后都会进入 render 函数中,我们不妨来看看 render 函数是如何被创建的:

// 简化后的代码
const genRender = (route, status) => {
  return async (req, params, error) => {
    return async(data) => {
      // 执行渲染逻辑
      const resp = await internalRender();
      const [body] = resp;
      return new Response(body);
    }
  }
}
const createRender = genRender(route, Status.OK);

生成 render 函数这块逻辑个人认为比较抽象,需要静下心来理清各个函数的调用顺序,理解难度并不大。我们还是把关注点放到核心的渲染逻辑上,主要是 internalRender 函数的实现:

import { render as internalRender } from "./render.tsx";

你可以去 render.tsx 进一步阅读,这个文件主要做了如下的事情:

  • 记录项目中声明的所有 Islands 组件。

  • 拦截 Preact 中 vnode 的创建逻辑,目的是为了匹配之前记录的 Island 组件,如果能匹配上,则记录 Island 组件的 props 信息,并将组件用 <!--frsh-id值:数字--> 的注释标签来包裹,id 值为 Island 的 id,数字为该 Island 的 props 在全局 props 列表中的位置,方便 hydrate 的时候能够找到对应组件的 props。

  • 调用 Preact 的 renderToString 方法将组件渲染为 HTML 字符串。

  • 向 HTML 中注入客户端 hydrate 的逻辑。

  • 拼接完整的 HTML,返回给前端。

值得注意的是客户端 hydrate 方法的实现,传统的 SSR 一般都是直接对根节点调用 hydrate,而在 Islands 架构中,Fresh 对每个 Island 进行独立渲染,实现如下:

hydrate 方法名也可以叫 revive

export function revive(islands: Record<string, ComponentType>, props: any[]) {
  function walk(node: Node | null) {
    // 1. 获取注释节点信息,解析出 Island 的 id
    const tag = node!.nodeType === 8 &&
      ((node as Comment).data.match(/^\s*frsh-(.*)\s*$/) || [])[1];
    let endNode: Node | null = null;
    if (tag) {
      const startNode = node!;
      const children = [];
      const parent = node!.parentNode;
      // 拿到当前 Island 节点的所有子节点
      while ((node = node!.nextSibling) && node.nodeType !== 8) {
        children.push(node);
      }
      startNode.parentNode!.removeChild(startNode); // remove start tag node

      const [id, n] = tag.split(":");
      // 2. 单独渲染 Island 组件
      render(
        h(islands[id], props[Number(n)]),
        htmlElement
      );
      endNode = node;
    }
    // 3. 继续遍历 DOM 树,直到找到所有的 Island 节点
    const sib = node!.nextSibling;
    const fc = node!.firstChild;
    if (endNode) {
      endNode.parentNode?.removeChild(endNode); // remove end tag node
    }

    if (sib) walk(sib);
    if (fc) walk(fc);
  }
  walk(document.body);
}

至此,服务端和客户端渲染的过程都完成了,回头看整个过程,为什么说 Fresh 的构建过程是 Bundle-less 的呢?

我们不妨关注一下 Islands 组件是如何加载到客户端的。

首先,服务端通过拦截 vnode 实现可以感知到项目中用到了哪些 Island 组件,比如 Counter 组件,那么服务端就会注入对应的 import 代码,并挂在到全局,通过 <script type="module"> 的方式注入到 HTML 中。

浏览器执行这些代码时,会给服务端发起/islands/Counter的请求,服务端接收到请求,对 Counter 组件进行实时编译打包,然后将结果返回给浏览器,这样浏览器就能拿到 Esbuild 的编译产物并执行了。

所以这个过程是完全发生在运行时的,也就是说,我们不需要在一开始启动项目的时候就打包完所有的组件,而是在运行时做到按需构建,并且得益于 Esbuild 极快的构建速度,一般能达到毫秒级别的构建速度,对于服务来说运行时的压力并不大。

小结

以上就是本文的全部内容,分别从框架定位上手体验优劣势评估源码实现来介绍了如今比较火的 Fresh 框架。

最后需要跟大家说明的是,Fresh 中关于 Islands 架构的实现是基于 Preact 的,我本人也借鉴了 Fresh 的思路,通过拦截 React.createElement 方法在 React 当中也实现了 Islands 架构,代码放在了 react-islands仓库中(地址: https://github.com/sanyuan0704/react-islands),代码不多,相当于 Fresh 的简化版,感兴趣的小伙伴可以拉下来看看~

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存