今天要來分享我第二年參加鐵人賽的故事!這時故事的時間線已經來到去年暑假。

進入正題

去年暑假，除了做實驗室專案、上班、準備研究所的申請資料外，好像也沒有什麼事情可做，所以我就開始構思鐵人賽要以什麼主題參賽。

選題

這幾年 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