這篇文章故意具有挑戰性、兩極化和發人深省的特點。它涵蓋了很多你很可能不知道的新鮮內容和想法。

[[423076]]

1. 緒論

我將盡力創造一個連貫的邏輯論證鏈，你可以按照它來了解前端開發應該如何運作。

我也會盡量保持這篇博文的簡單性，以便 "非開發人員 "大多能夠跟上。

2. 一臺電腦或智能手機上有多少個內核?

你們都見過像這樣的CPU的圖片。

例如，如果你使用的是Mac，你可以點擊左上角的蘋果圖標，然后點擊 "About This Mac"，它將顯示類似的內容。

處理器 3,2 GHz 8核英特爾至強W處理器

一部iPhone有6個內核。

每臺電腦或智能手機都有幾個核心可用。

這意味著你可以并行地運行多個線程。

你會只用一個發動機氣缸來跑一輛車嗎?

如果你的答案是："當然不是!"。這將是非常緩慢的!"，那么你應該仔細閱讀這篇文章。

3. 一個瀏覽器使用多少個內核?

就其本身而言，瀏覽器將在每個標簽/窗口中只使用一個內核。

意思是：你的Angular或React應用程序看起來像這樣。

你的應用程序中運行的JavaScript任務越多，它的速度就越慢。最糟糕的情況是UI完全凍結，你的一個核心處于100%的狀態，而其他所有的核心都完全閑置。

這根本就不具有可擴展性。

[題外話】如果你正在創建簡單、小型和相當靜態的網站或應用程序，這種設置就足夠了。

4. Web Worker API

Web Workers API - Web APIs | MDN

Web Workers使得在獨立于主執行線程的后臺線程中運行腳本操作成為可能... developer.mozilla.org

Web Workers 使得在一個獨立于 Web 應用程序的主執行線程的后臺線程中運行腳本操作成為可能。這樣做的好處是，可以在一個單獨的線程中進行費力的處理，使主線程(通常是 UI)的運行不會被阻塞/減慢。 Web Worker - 維基百科 zh.wikipedia.org

W3C和WHATWG設想Web工作者是長期運行的腳本，不會被響應點擊或其他用戶交互的腳本所打斷。讓這樣的工作者不被用戶活動打斷，應該可以讓網頁在后臺運行長任務的同時保持響應性。

Worker 最簡單的用途是在不中斷用戶界面的情況下執行一項計算量大的任務。

因此，使用工作者，我們實際上可以并行使用多個核心，結束這種可擴展性的噩夢。

讓下面這段話真正沉淀下來。

Worker最簡單的用途是在不中斷用戶界面的情況下執行一項計算量大的任務。

這導致了一個問題。

"什么是最昂貴的任務?”

答案很簡單：UI框架或庫本身，以及我們用它構建的應用程序。

這就引出了一個想法。讓我們把所有能移出主線程的東西都移出來，這樣這個線程就能純粹地專注于它要做的事情：操作DOM。

如果你的應用程序不再在主系統中運行，那么就沒有什么東西可以減緩或阻止你的用戶界面或產生內存泄漏。

這種想法正導致以下概念。

5. 一個應用Worker是主要的行為者范式

為了解決這個性能瓶頸，我們希望讓主線程盡可能地空閑下來，這樣它們就可以完全專注于渲染/動態操作DOM。

現在可能發生的最壞情況是，你的應用程序工作者會放慢速度，而這個核心以100%的速度運行。然而，這不會影響你的用戶界面(渲染線程→主線程)。

對于單頁應用程序(SPA)來說，可能是最好的解決方案，看起來像這樣。

為了防止應用程序Worker處理過多的邏輯，我們可以選擇使用虛擬 DOM 工作器，在那里計算狀態轉換之間的延遲更新。對于具有相當空閑的應用Worker的應用程序，你可以選擇直接在應用Worker內部運行虛擬DOM引擎來代替。

我們還可以使用一個數據Worker。如果我們有一個遠程數據存儲，并希望在本地對數據進行排序/分組/過濾，這些計算可以在那里進行。

這篇博文介紹了如何在保持相同的 API 的情況下使Worker的使用成為可有可無的。

JavaScript開發。制作一個可供選擇的Web Worker。

如果你有很多與JavaScript相關的邏輯在主線程或Web Worker內運行，這就很有意義了。

6. Worker可以訪問DOM嗎?

在WorkerGlobalScope里面，window和window.document是未定義的。

意思是：你根本無法直接訪問真正的DOM。

因此，我們在這里基本上有兩個選擇。

選項 1 是在Worker內部重新創建整個 DOM API。在我看來，這是個壞主意。Worker不了解 DOM 是有原因的，而且有大量的邏輯在頻繁變化。DOM OPs 變得不同步，如果你依次觸發了很多，就會導致大量的 Worker postMessages。唯一的好處是，你可以像以前一樣繼續寫你的應用程序，這是值得懷疑的。我將在后面介紹如何做得更好。

實際上，有一個項目正是這樣做的。

GitHub - ampproject/worker-dom: 你所知道的相同的DOM API和框架，但在一個Web Worker中。

更聰明的做法是選項2：堅持Worker不應該知道真正的DOM的概念。

這使得使用虛擬DOM成為絕對必要的。

在社交媒體上閱讀時，我經常看到類似 "vdom is bad!"這樣的帖子，很頻繁。

這根本不是真的。這在很大程度上取決于它是如何被實施的。

Angular和React的主要障礙是基于xml或JSX的模板。這些家伙需要被轉換為我們可以使用的數據結構。

JavaScript既不快，也不是為解析字符串而生。

解析模板的成本很高，甚至服務器端渲染(SSR)又開始流行。我在20年前就去過那里，創建了一個基于PHP的CMS，生成html輸出文件。

你可以說，今天有了云，可以處理更多的客戶端連接，但富/胖/厚客戶端的概念仍然完全有意義。

7. 是否有一個例外，Worker可以訪問DOM?

實際上有一個。

OffscreenCanvas - Web APIs | MDN OffscreenCanvas接口提供了一個可以在屏幕外渲染的畫布。它在窗口和屏幕外都可以使用。

Worker可以接收 Canvas DOM節點的所有權。

這在Chromium中已經運行得很好了，Safari(Webkit)和Firefox正在積極實施。這可能還需要6個月的時間，所以這是2022年的一個話題。

8. 如何以一種聰明的方式創建虛擬DOM?

雖然JavaScript不擅長解析字符串，但它擅長處理嵌套的對象/陣列結構。這種格式有一個名字，你肯定很熟悉。JSON。

如果我們堅持使用基于JSON的vdom語法，就不需要在你的用戶界面中反復進行昂貴的模板解析，甚至不需要將這部分移到構建步驟中。

這無疑在某種程度上類似于直接使用JSX輸出的工作。

做得好的話，虛擬DOM里面沒有變量、if/else語句、綁定、方法、循環或任何形式的邏輯。你永遠不會看到有1000多行代碼的模板(看Angular)。

使用程序化的方法，你將在屬于它的地方使用邏輯：在JavaScript內部。例如，在創建一個列表時，你可以先創建一個骨架的Vdom，一旦數據存儲被加載，就在記錄上進行迭代，并在運行中創建新的虛擬DOM節點。

這個概念允許我們在運行時從根本上改變一個組件的Vdom。是的，在一個組件被安裝之前和之后，改變它的vdom的工作方式是完全一樣的。

• 實現無限滾動或其他高級功能變得很容易。
• 你可以在這里找到更多的投入。
• 您使用基于JSON的虛擬DOM的好處。
• 基于JSON的虛擬DOM的新格式化概念。

雖然程序化的方法對低級別的vdom OPs來說是有意義的，但我們肯定更喜歡用聲明式的方法來創建我們的應用程序。

為了實現這兩點，我們唯一需要做的就是在vdom上面增加一個聲明性的抽象層：組件樹。

意思是：你只在創建你的組件類時使用vdom。對于創建應用程序，你可以只堅持使用組件樹。

9. UI開發可以直接在瀏覽器中進行嗎?

當React在5到8年前開始流行的時候，瀏覽器在支持最新的ECMAScript功能方面的狀況很糟糕。

例如，沒有對類(ES6)或JS模塊的支持。

在這一點上，將UI開發轉移到node中是完全合理的。

意思是：你可以使用最新的語言功能，并以一個構建步驟為代價，將你的代碼編譯/轉譯成瀏覽器能夠理解的Javascript。

瀏覽器供應商在追趕方面做得很好。今天，許多閃亮的新功能都可以直接使用，而且大多數第三階段的建議確實可以立即實施。

在Worker范圍內，JS模塊在Chromium內工作正常。Webkit(Safari)也完成了實現，但它仍然限于Safari技術預覽版。Mozilla(火狐)正在積極地推動它。

我們可以肯定地認為，全面支持在2022年準備就緒。

構建步驟很昂貴，對于UI庫或框架的開發模式來說，應該不再需要。

其優勢是顯而易見的。

• JavaScript是為了成為唯一能被瀏覽器引擎理解的編程語言。
• 以瀏覽器無法理解的方式編寫JS，感覺就是錯誤的。
• 通過將UI開發帶回瀏覽器，我們可以調試我們的真實代碼，而不需要任何形式的構建/轉譯或使用源代碼地圖。
• 我們不需要熱模塊的替換。

特別是創建和調試代碼將再次成為一種樂趣，因為我們可以確保沒有外部因素導致的錯誤。

像webpack這樣的工具肯定還是需要的，以創造地區/生產的輸出。然而，它們將是構建工具，而不是運行時環境。

從node到deno的轉換將進一步促進這一點。CommonJS將遲早消亡。一旦deno有了一個包管理器，越來越多的包將使用可以在瀏覽器中運行的語法(例如，不使用裸模塊指定符→導入無效的路徑和沒有文件名擴展)。

10. TypeScript有前途嗎?

這一條可能是本文中最有爭議的部分。JS社區一分為二：有些人喜歡使用TS，而有些人則拒絕碰它。期待大家的討論。

我的意見。

現在，當在node中開發UI，并且有一個必要的構建/轉譯步驟時，使用TS就可以了。

一旦UI開發重新進入瀏覽器，這種情況將發生根本性的改變。

你會為使用TS而設置一個完整的構建步驟嗎?

在這一點上，它變得太昂貴了。

問題是。TS不是一個網絡標準。目前還沒有計劃在瀏覽器中實施它。

歷史已經多次告訴我們，不基于網絡標準的網絡技術會發生什么：它們會在某個時刻消失。MS Silverlight就是一個完美的例子。

一般來說，類型檢查是個好東西。主要問題是Angular和React沒有使用基于JSDoc的注釋，而JSDoc可以讓IDE在寫代碼時給你發出警告。

實際上，甚至有可能使用基于JSDoc的評論來 "偽造 "TS。

如何在JSDoc注釋中編寫TypeScript接口

這絕對是一個選擇，我們可以討論。

如果你真的想在你的編程語言中直接進行類型檢查，并且不關心構建步驟，那么Dart2是不是更適合?

Dart2完全支持Worker，所以我們也可以讓Worker的設置在那里運行。在移動方面的優勢包括AOT編譯。

11. React有什么問題?

公平地說：在React之前，有JQuery。當React開始流行時，這是一個很大的改進，React是第一個使虛擬DOM流行的庫。

那么，為什么我們不應該在2022年使用React呢?

• React在主線程內運行。
• React的代碼庫是基于CommonJS的→沒有構建步驟，它不能在瀏覽器內運行。
• 沒有JSDoc的評論。
• JSX模板的解析成本很高。甚至還有像Svelte這樣的編譯器來把它移到服務器端。
• React并沒有暴露出一個核心。所有的東西都擴展了Component，這一點都沒有意義。
• 狀態管理無緣無故地太難了。
• render()方法無疑是有問題的。

讓我更深入地解釋一下這個問題：要防止狀態變化觸發渲染，肯定是很復雜的。如果一個React組件包含子組件(render()里面的自定義標簽)，在你沒有仔細使用key的情況下，新的實例會被創建。

重新創建Component實例使函數式編程流行起來，因為創建類實例的頻率超過了必要的范圍，而且在你自己的Component實現中的內存泄漏會造成傷害。

如果你有很多狀態道具，例如影響項目的位置，你將需要在你的JSX中添加相當多的邏輯。

React只是一個庫，而不是一個框架。意思是說。組件幾乎是里面的全部內容。沒有邏輯上的層次鏈，比如。

core.Base -> component.Base -> button.Base -> tab.header.Button

一旦解決了render()的瘋狂，你就可以為你想創建的東西挑選最合適的基類。例如，一個容器有一個vdom對象，它包含對其子項的vdom對象的引用。然后，我們可以改變子組件的vdom，而不需要重新創建它們基于JS的實例。

在這一點上，狀態管理變得微不足道，我們甚至不需要鉤子。特別是在確保對vdom引擎最多有一次調用的情況下，并行改變許多配置是關鍵。

12. 多窗口應用程序

將Worker的設置換成使用SharedWorkers，可以選擇性地增強這一概念。

這使我們能夠在不同的瀏覽器窗口中移動整個組件樹，同時保持其JS實例的位置。

多窗口狀態管理，不需要后臺。

可以進行跨窗口拖放。

13. 我們是否需要自己實現工人的設置?

獨自實施所有提到的想法簡直要花上幾年時間。

你很幸運，我已經為你做了。生態系統內有超過12,000個提交，完全由MIT授權。

GitHub - neomjs/neo：應用工作者驅動的前端框架。

這包括一個遠程方法訪問API，使你能夠通過承諾(消息傳遞之上的抽象層)直接調用不同工作者或主的方法。

大量的組件已經到位，還有控制器、視圖模型、應用程序和其他實用類。

你不需要任何第三方庫來支持像MVVM、Observable和其他許多架構設計模式。

尤其是狀態管理是非常容易的(提示：一個類的配置系統)。

CLI是先進的：你可以用一個單行字創建一個新的應用程序(工作區)：npx neo-app 。我們甚至可以得到跨應用的分割塊，所以在把多個應用放在一個頁面上時，幾乎沒有開銷。

14. 最后的想法

其實你不必等到2022年，你現在就可以使用這些想法，讓你的前端開發更上一層樓。一些公司和開發人員已經在做了，并且正在利用他們的先機將新技術轉化為商業優勢。

neo.mjs被提名為 "最令人興奮的技術應用"。

大多數開發者仍然不知道neo.mjs項目的存在，這讓人很無奈。

我很想看到有人在這些概念上證明我是錯的。

要做到這一點，你將需要創建你的第一個基于neo的PoC應用。

在這種情況下，我希望能審查你的代碼。

對于在運行時的動態DOM操作，neo是最快的選擇。特別是當它涉及到大型和復雜的應用程序時。

15. 如何開始?

我剛剛創建了一個關于如何使用這項技術實際建立一個應用程序的教程。

定義一個web4.0應用為多線程的應用。