半熟前端

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

Tag: 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