# How Modern Web Frameworks Boost Your Efficiency - 蔣豪群 (soda)

{%hackmd yEJ_rTxzTWa2K450RqmT8w %}

工作職責：
- Vue cli
- Vue Loader

從工具和效率的視角理解前端框架的設計

## 針對程式碼撰寫的設計

### 撰寫 UI 程式碼

傳統 HTML + Javascript
> JQuery ? [name=debbyji]
> Yes [name=DanSnow]
> vanilla js 也會阿，泛指傳統開發吧 [name=moshihuang]

問題：
- HTML 反應不出實際的 DOM 結構
- JS 裡產生 DOM，很容易寫成麵條代碼

- 編碼邏輯常常用到清空然後生成，這容易？what is noodle code

<div class="form-field">
  some content
</div>

if (isEditing) {
  $('div.form-field).replaceWith(()=>
  `<input value=${$(this).text()} />`
  )
}

#### 在 Javascirpt 中做邏輯判斷

- 邏輯分散在各處，不一目瞭然
- 只給前端一個螢幕是不夠用的!

解決思路：

- 往 Markup 裡加邏輯

<template>
 <input v-if="isEditing" />
 <div v-else>{{ content }}</div>
</template>

- 往邏輯程式碼裡加 Markup(React)

if (isEditing) {
  return <input />
}else {
  return <div>{{content}}</div>
}



- attribute 上實作邏輯判斷

#### 程式展 Markup Language

思路一：Mustache 風格

{{#if isEditing}}
 <input />
{{#else}}
  <div>{{ content }} </div>
{{/if}}

> 他不是 HTML，需要解析模板
> 當成字串，用在後端更多

思路二：attach directives to HTML

<template>
 <input v-if="isEditing">
 <div v-else>{{ content }}</div>
</template>

> 是合法的 HTML
> 實踐成本較低，主流之一

#### 編譯帶邏輯的 Markup

思路一：編譯成操作 DOM 的指令

insertFramgment () {
  if (isEditable) {
  insert()
  }
}

思路二：編譯成聲明式的 DOM 的結構描述

> 性能不如思路一
> 可讀性較好
>

#### 在邏輯程式碼裡寫 Markup: UI as Code

- React
- Flutter
- Android Jetpack Compose
- Swift UI

### UI as Code Ergonomics

#### 實用至上的方案： JSX

JSX 編譯後 → HyperScript

> JSX is merely a very thin layer over JS
> (maybe too thin)
> 擴展性有限
> 不能使用邏輯（沒有 for，只能 map）

> 加上 babel plugin 的話 [jsx-control-statements](https://www.npmjs.com/package/jsx-control-statements) [name=DanSnow]

#### 保守的方案： Flutter

Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
    for (var section in sections)
      HeadingAction(section.heading),
    ]
  );
}

只在傳統編程語言語法之上做非常有限的改進
UI as Code = UI as Function

逗號、分號、children、child...

體驗優化：Editor UI Guidelines

寫代碼的效率還是沒有改進

#### 激進的方式: SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Turtle Rock")
        .font(.title)
      Text("Joshua Tree National Park")
        .font(.subheadline)
    }
  }
}

專為 UI as Code 服務的新語法：
- opaque Result Types
- Trailing Closure
- Function Builders

> 不需要分號

> kotlin 的 anko 也挺像的 [name=DanSnow]

#### Takeaways

- UI 代碼最高效的寫法是聲明式
- 使用模版書寫一般的介面邏輯
- 使用 JSX 書寫抽象的高階元件
- JSX 不會取代模板，但新的語言可能會

## 針對 debug 的設計

### 前端元件 debug
- 例子：multiSelect

問題
1. 下拉內容不對，是調用它時給錯資料還是內部處理錯了？
2. 網頁上有多個同類元件，......

解決：Custom DevTools

為什麼 custom DevTools 在 Angular 之後才出現？
- 前端元件化
- 元件資料

### 更快的 debug

#### Hot Module Replacement

如何實作
- Modules => 前端模組化
- Replacement

#### Hot Module Replacement 優化

Q: 被替換的元件會影響痊癒操作
方案：單檔案元件 (vue)

Q: 如何保證被替換後的渲染結果仍然可用
- 可重入性
- 方案1: 狀態外置 (狀態提升) 放在放部 props
- 方案2：React Hooks

### 鬆散的資料系統
單向資料流

### Time Travel Debugging

snapshot
結論：可被 snapshot ＋ 不被干擾的資料

## 針對相容性的設計

### 相容性難題 -> 難在哪？

最難的是 IE

1. DOM 操作
1. IE SVG 沒 classList 和 innerHTML
2. firefox video can't set mute by default

聲明式 UI 解決了

2. 事件處理的不一致

Q: formfield 的 change/input event
Q: KeyName 名稱不一樣

方案一：封裝事件

- 事件都是通過 .addEventListen....
- v-on

方案二： 把相容性的處理流程往前移

- change vs input
- v-model 幫你寫好

方案三：重頭設計事件系統

實現成本：6000行代碼
認知成本
- Event pooling

## 回顧

### 代碼組織問題

不再維護自主 DOM
使用 template / UI as code

### 除錯效率

前端元件化、模組化

### 兼容性問題

使用單向資料流、讓框架維護事件

> 框架的價值不在於它提供了什麼，而在於它限制了什麼

> 自律給我自由

###### tags: `MW19`