現在網頁應用程式訴求美觀功能多,因此像是應用React或是Angular這類網頁開發框架,使用者動輒需要下載數MB的網頁檔案,而對於這種現況的反思,出現了編譯時開發框架(Compile-Time Framework),Svelte就是其中一種,現在集結百位貢獻者的心力釋出第三版,這個版本重點放在回應式程式設計。

簡單來說,Svelte就跟React或Vue一樣是一個元件框架,但最大的不同在於Svelte是一個編譯時框架,在建置階段會將元件轉換成高效能的執行碼以更新DOM,這跟傳統框架,讓開發者撰寫宣告式狀態驅動(State-Driven)程式碼不同,這樣的作法把工作負擔放在使用者端的瀏覽器上,瀏覽器必須進行額外的工作,把宣告式結構轉成DOM操作,相較起來,Svelte可以用來打造更大型的高效能應用程式。

Svelte歷經半年,集結百位開發人員的努力釋出了Svelte 3,更新了許多語法及功能,官方提到,這個版本的主要概念就在回應性(Reactivity)。官方舉例,在過去的Svelte,開發者可以透過呼叫this.set方法告訴電腦部分狀態已經改變,像是const { count } = this.get(); this.set({ count: count + 1 });,在React以Hooks來完成同樣的功能,官方提到,雖然用Hooks可以達到類似回應式的功能,但事實上React並非回應式的框架,有不少框架跟著開始提供類Hooks功能,但使用Hooks卻會造成垃圾回收器額外的負擔,對於嵌入式裝置或是動畫吃重的互動式操作,會有不良的影響。

而Svelte最終的考量,認為沒有API就是最好的API,Svelte要在編譯器層級處理這件事,延續剛剛的例子,他們認為更新count的數值,應該要像是count += 1;一樣簡單,因此現在開發者在Svelte 3裡,可以使用count += 1; $$invalidate('count', count);語法更新count的值,需要撰寫的程式碼量大幅縮減,而且不會增加代理或是存取器的負擔與複雜度,因為count就只是個變數。

接下來官方會發布搬遷指南,幫助開發者把原本使用Svelte 2的應用程式升級到Svelte 3,官方提醒,他們盡量讓流程能夠自動化,但Svelte 3有很大的變化,因此部份內容無法自動處理,需要開發者手動升級。而Svelte的類Next.js應用程式框架Sapper還在更新,搬遷到Svelte 3上。


Advertisement

更多 iThome相關內容