###### tags: `前端`,`2022`

# SVELTE 簡介

> 一個為響應式網頁而產生的**編譯器**，從來源去產生最小且高度優化的Javascript。

2022年熱門竄起的新興框架，適用於中小型專案的開發，支援NOTE、NPM來安裝建置應用程式，算是滿好上手的。打包後的程式碼也比較小，執行速度也快得多。

和Vue、React框架最大差異點為，前者是在Browser端處理要做的事，Svelte則是在編譯階段處理，因此可以產生高度優化的Javascript。也因為它本身是一個編譯器，所以不需要掛載額外的程式庫。

現在也正式支援typescript。

長相:

import { onMount } from 'svelte'
let name = 'Hello World';
let count = 1;
let loading = true;

onMount(() => {
    setTimeout(() => name = 'Estrella',1000);
    count++;
})

fetch('/test').then(() => { loading = false})

{#if loading}
    <h1>Loading...</h1>
{:else}
    <h1>Hi {name}</h1>
    <h2>{count}</h2>
{/if}

## 優點

* 語法簡單 :

一看就懂它在幹嘛，也更貼近傳統的網站開發模型（HTML、CSS、JS），只對HTML、JS做擴充的寫法，有利於新手學習。

* 中小型專案有較小的Bundle size :

在Runtime能解決掉的就會先解決掉，依賴追蹤機制會在靜態時期分析好。 (vue和react 用 virtual dom 做資料比對, 資料有變動才渲染. svelte 是純粹的 javascript)

* 具備元件化、現代前端框架基本要素

* 開發體驗良好: 學習成本小(但台灣社群相對較小)

## 缺點

* 社群資源較Vue、React少
* 較不利開發大型專案(缺少單元測試)
* 沒有成熟的UI庫，需要自己刻
* 不支持 less/scss，需要自己單獨的配置 webpack loader

## 使用情境

* 讓網站應用程式更適用於低功耗裝置 -> 執行快速
* 應付需頻繁互動的頁面或複雜的視覺化需求 -> 內建Transition, animation

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

* Reactivity 機制
* 生命週期方法
* 狀態管理機制(ex: context,store.....)
* 其他

## 安裝

npx degit sveltejs/template moz-todo-svelte
cd moz-todo-svelte
npm install
npm run dev

##### Reference

[Svelte入門](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)

[iThome 鐵人賽:前端框架新選擇 - 30 天從 0 到 1 學 Svelte系列](https://ithelp.ithome.com.tw/articles/10235364)

[新興前端框架 Svelte 從入門到原理](https://www.readfog.com/a/1630735829881163776)

{%hackmd BJrTq20hE %}