从一个todo应用来学习deno

2023-03-07 11:29:25 浏览数 (3)

什么是deno

Deno 是一个简单、现代且安全的 JavaScript 和 TypeScript 运行时,它使用 V8 并内置于 Rust,它是由 NodeJS 创始人 开发的一个新的 JS 运行库。

它的主要特性是:

  • 权限管理严格,非常安全
  • 支持 TypeScript
  • 一个可执行文件即可运行
  • 内置很多实用工具
  • 提供了很多标准模块

Deno 内置的工具

  • deno run 用于类型检查和运行
  • deno lint 检查代码
  • deno test 运行代码测试
  • deno lsp 提供语言服务,支持编辑器进行集成
  • deno fmt 内置格式化工具
  • deno task 执行任务脚本
  • deno compile 构建独立运行的应用程序

代码结构

代码语言:javascript复制
deno-todos/
	  deno.json
	  import_map.json
	  mod.ts     <-- command line interface
	  client/    <-- client sources
	  server/    <-- server sources
	  shared/    <-- shared client/server sources
	  public/    <-- static assets

deno.json 是配置文件,用来配置变量参数 import_map.json 导入映射,用来配置导入的依赖

客户端

客户端是一个标准的 React 应用程序。App 组件包含一个 Input 组件和一个 TodoItems 列表。一个client/mod.ts文件作为客户端的入口点,包含渲染应用程序并将其附加到 DOM 的 ReactDOM 调用。

代码语言:javascript复制
 ReactDOM.hydrate(
   <App initialState={globalThis.__INITIAL_STATE__} />,
   document.getElementById("root"),
 );

 delete globalThis.__INITIAL_STATE__;

__INTIAL_STATE__该数据将由服务器以全局变量的形式呈现到页面上。客户端将使用它进行初始化,然后删除全局以允许对其进行垃圾收集。

客户端和服务器之间显式共享的代码相对较少,只有shared/types.ts. 但是,整个客户端应用程序隐式与服务器共享,因为服务器直接执行客户端代码来进行服务器端渲染。

服务端

服务器使用Oak作为 HTTP 接口,使用deno-sqlite作为数据库。deno-sqlite 不绑定外部 sqlite 库——它使用编译为 WebAssembly 的 SQLite 版本,可以直接由 Deno 的运行时使用。

测试

Deno 的集成测试运行器速度快,API 简单,并提供了一套很好的编写测试的基本工具。示例应用程序包括使用 Deno 的测试运行器和一些支持库(例如@testing-library/react )对客户端和服务器代码的多个测试。

与 Deno 的其他部分一样,测试系统相当灵活,测试文件 client/App.tsx 在 client/App.test.tsx.Deno.test 函数用于注册测试。Deno 标准库中的testing/asserts.ts包包含各种测试断言。

代码语言:javascript复制
test("adds a todo", testConfig, async ({ step }) => {
        let resetFetch: () => void;

        await step('test', async () => {
                resetDom();
                resetFetch = mockFetch({ ... });

                const { findByRole, getAllByTestId } = render(<App />);
                assertThrows(() => getAllByTestId("todo-item"), Error, 'Unable to');
                userEvent.type(await findByRole("textbox"), "Clean house{enter}");
                await waitFor(() => {
                        const items = getAllByTestId("todo-item-label"); 
                        assertEquals(items.length, 1);
                        assertEquals(items[0].textContent, "Clean house");
                        });
                });

        await step('cleanup', () => resetFetch());
        }

热加载

Deno 运行命令有一个监视模式,通过一个--watch选项启用,如果检测到更改,它将重新启动正在运行的应用程序。默认情况下,此命令将监视正在运行的脚本的项目中所有源文件,但它也可以指定监视任意文件和目录。如果开发服务器在禁用类型检查的情况下运行(通过--no-check选项),应用程序重新启动非常快。

该--watch选项只会重新加载服务器,而不是客户端。为了更接近实时重新加载,您可以使用 Deno 的内置 WebSocket 支持。在server/routes.ts中,根路由将一段实时重载代码插入客户端,“/livereload”端点处理 websocket 连接。每当服务器重新启动时,客户端将断开连接并尝试重新连接。一旦这样做,服务器就会告诉它重新加载,以确保客户端正在运行最新的代码。

部署

通过通过 deno task 可以非常方便地执行部署任务,当然也可以通过 deno compile 打包生成独立可执行的二进制文件。

总结

deno 得益于它内置的大量工具,你可以非常容易地开发出高性能应用,而且现在很多框架或者语言都在做这样的事情,通过内置命令为开发者提供最好的开发体验。

如果你喜欢 JS,并且想要远离 nodejs 的复杂包依赖,那么 deno 是一个可以尝试的选择。

0 人点赞