第二次参加铁人赛

今天要来分享我第二年参加铁人赛的故事!这时故事的时间线已经来到去年暑假。

进入正题

去年暑假，除了做实验室专案、上班、准备研究所的申请资料外，好像也没有什麽事情可做，所以我就开始构思铁人赛要以什麽主题参赛。

选题

这几年 TypeScript 越来越夯 (毕竟强型别很方便)，再加上这两年又有一个名叫 Deno 的技术快速的发展了起来，我当时就看准了 Deno 的先天优势，所以就以它加上 TypeScript 作为我的参赛主题。
我想，对一般开发者来说，Deno 的优势有以下这些:

• 没有集中的 package manager
• url import
  使用 url 载入第三方模组是很方便的功能，然後也会有 Local cache 的机制。
• sandbox 机制
  保护执行 Server 端电脑的安全性，使用网路、本地资料读取都是需要经过许可的。
• 内建测试平台
  内建单元测试以及断言库，算是很不错的功能。

组队

去年与第一年参赛的队伍不是原班人马，原因是我推坑了很多实验室的朋友跟我一起参赛，完赛後我们还收到了 IThome 寄来的团体布条:

北科大计算机实属牛逼嗷嗷。

最酷的是，在组队的过程还有北科大毕业的学长 (Dean) 跑来加入我们，Dean 的作品最後也顺利得奖然後出书ㄌ\洒花/

可恶，我也好想出书啦 QwQ

Deno 的後续发展

前面讲了这麽多干话，如果你很有耐心地看到这边，我就来分享一下我最近在 Deno 上面看到的酷东西吧!

• Deno Deploy

Deno Deploy 是一个分散式的 JS VM，只要办个帐号，就能在上面 Deploy 自己的 JS / TS / WASM 程序码。
它标榜 1 秒部属、0 维护、0 配置，随插随用(?)
我想 Deno Deploy 绝对是很有机会在开发者社群窜红的，因为在国外已经有开发者将 React APP 部属到这个服务上，而且产出的网站就是 Server-Side render 的特性了。
这也就代表 Deno 是有机会参与前端生态圈的，配上 url import 以及先天支援 TypeScript 的特别，用一句话形容他就是: 舒服= =

• WebGPU API

WebGPU API 算是这几个 release 以来我看到会有 WoW 感的东西，它让我们可以透过 JS 程序使用本地端的 GPU 资源去渲染出图片:

/* Source: https://github.com/crowlKats/webgpu-examples */
import {
  copyToBuffer,
  createCapture,
  createPng,
  Dimensions,
} from "../utils.ts";

const dimensions: Dimensions = {
  width: 200,
  height: 200,
};

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter?.requestDevice();

if (!device) {
  console.error("no suitable adapter found");
  Deno.exit(0);
}

const shaderCode = `
[[builtin(vertex_index)]]
var<in> in_vertex_index: u32;
[[builtin(position)]]
var<out> out_pos: vec4<f32>;

[[stage(vertex)]]
fn vs_main() {
    var x: f32 = f32(i32(in_vertex_index) - 1);
    var y: f32 = f32(i32(in_vertex_index & 1) * 2 - 1);
    out_pos = vec4<f32>(x, y, 0.0, 1.0);
}

[[location(0)]]
var<out> out_color: vec4<f32>;

[[stage(fragment)]]
fn fs_main() {
    out_color = vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`;

const shaderModule = device.createShaderModule({
  code: shaderCode,
});

const pipelineLayout = device.createPipelineLayout({
  bindGroupLayouts: [],
});

const renderPipeline = device.createRenderPipeline({
  layout: pipelineLayout,
  vertex: {
    module: shaderModule,
    entryPoint: "vs_main",
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fs_main",
    targets: [
      {
        format: "rgba8unorm-srgb",
      },
    ],
  },
});

const { texture, outputBuffer } = createCapture(device, dimensions);

const encoder = device.createCommandEncoder();
const renderPass = encoder.beginRenderPass({
  colorAttachments: [
    {
      view: texture.createView(),
      storeOp: "store",
      loadValue: [0, 1, 0, 1],
    },
  ],
});
renderPass.setPipeline(renderPipeline);
renderPass.draw(3, 1);
renderPass.endPass();

copyToBuffer(encoder, texture, outputBuffer, dimensions);

device.queue.submit([encoder.finish()]);

await createPng(outputBuffer, dimensions);

Command:

deno run --unstable --allow-write=output.png https://raw.githubusercontent.com/crowlKats/webgpu-examples/f3b979f57fd471b11a28c5b0c91d0447221ba77b/hello-triangle/mod.ts

输入以上命令後就会成功渲染出图片。
而 Deno 开发者的大目标就是让 WebGPU Api 能够增强 ML 运算的效能，让 TS / JS 能被 ML 开发者接受。

总结

到铁人赛完结後，我也有使用 gitbook 维护这份文件，甚至 Google: Deno 入门指南就会马上看到它 XD
如果有志在贡献 Deno 社群的技术好手，可以直接发 Pull Request 到 Deno 入门指南 (不然一个人维护是真的蛮累的)。

• 专案网址
• Deno 入门指南
• Deno 台湾
  而且台湾在碰 Deno 的人真的不多，目前比较活跃的还是简体社群。
  一般来说，要贡献到一个技术社群是有难度的，因为社群内都有上千位优秀的开发者，要跟上大家的脚步再提交贡献是非常耗时的。
  如果有人觉得没有在 Node.js 社群发展的早期就在地扎根，我想 Deno 真的是一个还不错的机会，大家可以赌赌看 XD

至少我相信这东西不会像 PWA 一样变成弃婴 (X