---
tags: jsdc2021
---

# #Session 3 選擇 Svelte 的三個理由

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %}

> 從這開始
> 可以直接打字做共筆囉 :point_down:

[簡報連結](https://speakerdeck.com/kjj6198/xuan-ze-svelte-de-san-ge-li-you-jsdc)

也可以參考 ModernWeb'21 的[簡報](https://svelte-intro.kalan.dev/)

## 講者介紹

Kalan 愷開


## What's Svelte


- 一門前端框架 (50K+ :star:)
- Rich Harris
- 事先編譯
- 減少 Runtime 體積
- 400+ contributors
- You're welcome :)

## Agenda


## Too many frameworks!

- 框架的出現代表開發者對現況的不滿
- 人們對於最佳實踐的探索
- 早期的 jQuery
- HTML / CSS / JS 分開寫
- React -> JSX
- 元件化
- CSS in JS
- 更靈活

## 簡介 Svelte

### 現代前端框架的基本要素




- 每一個檔案都是單獨元件
- Vue 3 的 `ref()`
- 修改變數 -> 觸發更新
- 不需要手動呼叫 DOM 的 API
- 減少開發者的認知負擔

### 問題點

- 需要在 runtime 做 diff 演算
- 增加 bundle size
- 需要時做一套響應機制
- 犧牲一部分效能

## 選擇 Svelte 的三個理由

### 語法容易、容易上手



- 一個 HTML 程式碼
- Svelte 特殊處理
- 對變數的計算就有響應效果
-

<!-- macOS ㄉ OCR 真好用 -->
<!-- 喔喔！ -->
<!-- 升級到 12，用 safari 就可以用了 -->
<!-- Wish use in Edge Chrome -->

twitter.com/AdamRackis/status/1438221959029039108

#### 響應式語法


- 開發者不需要手動加入變數依賴

#### 樣板語法

- For 迴圈
- 
- 不是回傳 HTML Code 回來
- [線上 REPL 與互動式教學](https://svelte.dev/repl/hello-world?version=3)
- 
- 

### Bundle size 體積小




- 涉及畫面更新會 Compile 出 invalidate

#### Showcase




#### 關於 Bundle size


### 關注度持續提升

開發者與社群的反應可當作指標參考

- 越受關注，越令人好奇

#### State of JS 2020

- 滿意度第一名
- 使用情形：第四名
- (8% -> 15% 變化不大)
- 有慢慢在成長

#### SO Survey 2021

最受喜愛的框架？

#### 有用 Svelte 的公司

<!-- 厲害 一個畫面馬上截 還有陰影-->



### 缺點


- 大部分的處理都在編譯時期
- 相對其他框架資源較少
- 使用率仍然偏低
- 其實也不低了

# final

加入 FB 社團「[Svelte.js Taiwan](https://www.facebook.com/groups/sveltejs.taiwan/)」！