Island.js

#新一代全栈框架 Fresh

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

#测试

#框架定位

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

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

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

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

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

#上手体验

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

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

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

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

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

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

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

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

ts
.
├── 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

你可以关注 routes 和 islands 两个目录，[name].tsx、api/joke.ts 和 index.tsx 分别对应三个路由，而 islands 目录下的每个文件则对应一个 island 组件。

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

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

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

ts
// 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 两个文件，第一个文件对应根路由即/，访问效果如下:

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

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

访问效果如下:

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

ts
// 修改 [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中:

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:

ts
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 组件渲染、静态资源加载等等逻辑，我们可以把目光集中在路由组件渲染中，主要是这段逻辑:

ts
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 的默认实现为:

ts
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 函数是如何被创建的:

ts
// 简化后的代码
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 函数的实现:

ts
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

ts
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)，代码不多，相当于%EF%BC%8C%E4%BB%A3%E7%A0%81%E4%B8%8D%E5%A4%9A%EF%BC%8C%E7%9B%B8%E5%BD%93%E4%BA%8E) Fresh 的简化版，感兴趣的小伙伴可以拉下来看看~