半熟前端

軟體工程師 / 台灣人 / 在前端的路上一邊探索其他領域的可能性

Tag: svelte

前端

深入理解 Svelte(2)— 分析 Svelte 生成程式碼

前言 從 Svelte 的核心理念 可以得知,Svelte 希望從編譯過程中盡可能地獲取必要資訊,減少在動態的 overhead。上一篇文章中說明了 Svelte 從編譯到生成程式碼是如何運作的,今天要來觀察一下 Svelte 生成的程式碼是怎麼運作的。 先觀察一個簡單的 Svelte 元件: Svelte 元件語法跟一般 HTML 相同,除了會加上類似樣板語法之外(if, await)基本上可以完全相容 HTML,但是生成的元件又是 JavaScript…

(繼續閱讀...)#svelte
前端

2021 年值得學習 Svelte 的四個理由

1. 關注度持續上升 根據 State of JS 的調查,Svelte 在 2019 年納入問卷選項,當時的滿意度就有 88%(React 89%, Vue 87%),今年變成 89% 變成滿意度第一名的前端框架。 另外原本使用率在 2019 年為 8% 排名為第六,在 2020 年變為 15% 晉升為第四名。代表越來越多人在關注這個前端框架了。 2. 入門門檻低,容易上手 Svelte 的語法幾乎與 HTML 完全相容,另外像是 {#if} {#each…

(繼續閱讀...)#svelte
前端

深入理解 Svelte(1)— Svelte 編譯過程

深入理解 Svelte(1)— Svelte 編譯過程 在閱讀本篇文章之前,預期讀者已有 Svelte 或其他前端框架使用經驗,並且對實作原理有興趣。 如果還沒有看過「 Svelte 如何編譯(0)— 什麼是抽象語法樹? 」,建議先閱讀後再來閱讀本篇 今天這篇文章想要回答幾個問題: 為什麼 Svelte 可以將程式碼編譯為 JavaScript 為什麼在 Svelte 中可以使用類似模板引擎的語法({#if} {#await…

(繼續閱讀...)#svelte
前端

深入理解 Svelte(0)— 什麼是抽象語法樹?

前言 這一系列的文章以探討 Svelte 原理實作為主,希望能讓讀者對於 Svelte 的編譯機制與程式碼生成有更深入的理解。由於 Svelte 編譯過程涉及程式碼解析,因此這一篇文章主要會先討論抽象語法樹是什麼,並進一步說明抽象語法樹扮演的角色與重要性。 什麼是抽象語法樹(AST)? 我們先以維基百科的說明作為開頭: 在電腦科學中,抽象語法樹(abstract syntax tree 或者縮寫為 AST),或者語法樹(syntax tree…

(繼續閱讀...)#svelte
前端

Vue ref 語法糖與 Svelte

前言 在 10/28 時尤雨溪提出了一個 RFC ,是關於 ref 宣告的語法中,可以用 JavaScript 的 label statement 來進一步做簡化。 這個語法跟 Svelte 如出一徹,在這邊紀錄一下自己的想法。 先來看看範例當中的程式碼: 在 Vue 3 當中透過 Composition API ,可以透過 ref 將變數變成具有 reactive 的效果。宣告方式像這樣:(程式碼為文件範例) 經過 ref 宣告之後會有 reactive…

(繼續閱讀...)#svelte
前端

Svelte Summit 2020 筆記與心得

前言 The Zen of Svelte Prototyping with Svelte How does Svelte's crossfade function work Svelte Animation Unlocking The Power of Svelte action Demystifying Svelte Transitions Futuristic Web Development 後記 前言 Svelte…

(繼續閱讀...)#svelte
前端

Svelte 筆記(2):編譯器比你聰明多惹

今天跑去看 Svelte 原始碼,摸熟架構的同時順便看看有沒有什麼簡單的 issue 可以拿來練手。然後看到了 這個 — emits warning 。 雖然我覺得以這個 issue 的描述來看,沒有 href 的 a tag 應該是不合法的才對(至少不符合 a11y),後來我去查了一下,在 StackOverflow 上有提到目前的規範有些不統一的地方。 但基本上 href 可以是空的,只是在這種情況下就不要用 a 而是考慮用 button 之類的標籤取代,這樣對 screen…

(繼續閱讀...)#svelte
前端

Svelte 搭配 apollo-boost 時遇到的 rollup 錯誤

原本想用 svelte 搭配 graphQL 玩玩看是什麼感覺的,apollo 本身提供的 Observable Query 非常容易搭配 Reactive 的場景。 我在 svelte 裡頭引入 ApolloClient 沒想到都裝好了發現 rollup 編譯沒辦法過: 查了一下 issue ,發現其他地方也有類似問題。目前懶得繼續找解法,因為有其他想法想先完成,所以只好回到舒適圈繼續用 React 了。先筆記一下之後再慢慢瞧。

(繼續閱讀...)#svelte
前端

Svelte 筆記(1)- 沒有銀彈

在前面的章節有提到,Svelte 讓我愛不釋手。Svelte 的核心概念在於「透過靜態分析+編譯減少 runtime 做的事」,來減少 Virtual DOM 做 diff 的時間和一大包的 runtime。 但是 Svelte 走的路也註定會遇到一些問題,最主要的就是 Svelte 沒辦法在 runtime 當中幫你做太多事情。 像是這個 issue (Render slot fallback content when there's no content) ,svelte 在 slot…

(繼續閱讀...)#svelte
前端

Svelte — 是什麼讓我遇見這樣的你

前言 第一次看到 Svelte 時,心中想著「恩...又是一個新的前端框架了嗎?」,抱持著這樣的心情沒有在意太多。直到後來看到越來越多部落格文章介紹以及很多網站都在用之後,開始引起了我的好奇心。 看了官方網站的教學跟文件,才發現這跟一般的「前端框架」做法不太一樣,是從語法層面下手,搭配 compiler 來寫出簡潔又高效的程式碼。 這句話吸引了我: Svelte compiles your code to tiny, framework-less vanilla JS — your app…

(繼續閱讀...)#svelte