JavaScript Weekly #468 (下)

• Vue 3.0 的設計概念
• TypeScript 的 const assertion
• Preact 華麗復活
• 阿 Svelte 不是很邱？

Vue 3.0 的設計概念

好上手 vs 可延展性

• CDN build -> 菜雞
• Vue CLI -> 狠角色

• Options API -> 菜雞
• Composition API -> 狠角色

• JavaScript -> 菜雞
• TypeScript -> 狠角色
• cons: learning cost
• cons: slower initial development

• Template -> 菜雞
• JSX -> 狠角色

Templates allows us to get better performance

力量越大、包越大

• ES module export + tree shaking
• 連 template 寫法裡用上的內建 component，也是透過 complier 自動 import

• 起始概念少
• 選擇很多 -> 生態蓬勃/造成困擾
• 從維護角度看，React 開發團隊只需要專注於 library 本體

• 需要自己想辦法解決較複雜的問題
• 約定成俗的規矩沒有寫在官方文件 (e.g. Redux)
• 生態系動得太快，third-party library 容易被丟包 (open source 萬歲)

• 大部分問題的解法都內建
• 整個生態系不太會有丟包的問題，大家是一起動的

• 起手門檻高
• 內建的問題解法不適用的時候，做得不夠有彈性的話，會無法解決特殊問題
• 因為包太多東西，想要做大改動比較困難 (e.g. 像 Angular 1 想要大改就掛了)

• 分層的功能設計
• 低起手門檻
• 官方(文件)有提供常見問題解法

開放 low-level API 帶來更多彈性

• 自定 renderer
• 開放 compiler 使用

TypeScript 的 const assertion

const HTTPRequestMethod = {
  DELETE: "DELETE",  // type: string
  GET: "GET",
  POST: "POST",
  PUT: "PUT"
};

// 此動作不會有 type error
HTTPRequestMethod.DELETE = "TIMON";  // type: string

// 正因為可以進行這個操作，
// HTTPRequestMethod.DELETE 才沒有被推定為 "DELETE" type

const HTTPRequestMethod = {
  DELETE: "DELETE",  // type: "DELETE"
  GET: "GET",
  POST: "POST",
  PUT: "PUT"
} as const;  // <- 加在這邊

// Error: Cannot assign to 'GET'
// because it is a read-only property.
HTTPRequestMethod.DELETE = "TIMON";

const ORIGIN = [0, 0] as const;
// 等於 const ORIGIN: readonly [0, 0] = [0, 0]

var HTTPRequestMethod;
(function (HTTPRequestMethod) {
    HTTPRequestMethod["DELETE"] = "DELETE";
    HTTPRequestMethod["GET"] = "GET";
    HTTPRequestMethod["POST"] = "POST";
    HTTPRequestMethod["PUT"] = "PUT";
})(HTTPRequestMethod || (HTTPRequestMethod = {}));

Preact 華麗復活

Fast 3kB alternative to React with the same modern API.

• Fragments
• Hooks
• componentDidCatch
• createContext

阿 Svelte 不是很邱？

• React 最愛重繪了
• 根本不需要什麼 vDOM

• TypeScript 支援
• 還不夠成熟，相關 package 太少

Despite above described limitations, I think Svelte actually brings up an invaluable idea. Yes, you cannot fully express a modern app through templates without sacrificing flexibility and code reusability.

To be honest, I don’t believe Svelte in its current form can defeat React and conquer the world.