阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!

到今天為止,我開源 SolidJS 已經 7 年了。這並不是出於高尚的理由。我並不是想給人們指路。我並沒有試圖改變世界。我只是想抓癢而已。我在網路上看到的一些關於細微反應性的對話讓我很惱火(當時沒有人這麼稱呼它)。有些事情讓我感覺不對勁,雖然我可以坐在扶手椅上,繼續做那個對著雲朵大喊大叫的老人,但我決定進入一個基準測試來證明事實並非如此。

感謝它,我們今天有了 SolidJS。嗯,這和我以及其他幾個人未來 7 年的生活有關。但故事要從那之前幾年才說起。


開源之旅

SolidJS 不是我的第一個開源專案。我在 13 年前工作過的公司( Vidigami )的指導下開始了我的職業生涯。他們在戶外維護和建造圖書館,我承認我不太在意。多年來,我一直使用 Visual Studio 中的 .NET 工作,因此,如果程式碼沒有 IntelliSense 並直接連結到文件,我會覺得很乏味。不是。早在 2012 年,Sublime Text Editor 還沒有該功能。

很早以前,我非常有耐心的老闆(也是Knockback的創造者)就讓我坐下來,然後對我說:「你知道 Ryan,如果你不知道某些東西是如何工作的,你可以直接進入模組並查看原始碼。」明顯的。我知道。但突然間,一個全新的世界向我敞開了大門。我回想起 90 年代末我第一次學習透過點擊「查看原始碼」來製作網站時的情景。

儘管如此,我並沒有急於建立 PR。直到我被要求更新我們的應用程式以使用 Web 元件時,我才感受到任何主人翁精神。就在那時,我終於讓開源為我所用。我找到了包含我需要的 polyfill 的函式庫。我在內部做了一些我自己的。我利用這些經驗建立了我的第一個庫: component-register是一種使用功能組合而不是類別來編寫 Web 元件的方法,而webcomponent-router是一種使用光/影 DOM 投影的嵌套路由器。


React 的巨大崛起

時間快轉幾年,現在已經是 2015 年秋季了。最近看了 Ryan Florence 的 React Hype 演講:

https://www.youtube.com/watch?v=z5e7kWSHWTg

我看了股票行情演示,我一直在想,“誰會從伺服器一遍又一遍地發送整頁資料?React 在這裡速度非常快,但你已經輸了。”

我不知道如何使用我心愛的 KnockoutJS 來解決這個問題。我知道這不重要,但我就是放不下。我看了 Pete Hunt 和他的團隊早期關於 React 的演講,然後我就想「這怎麼可能是我們能做的最好的事情?」然而 Knockout 卻是一個失敗的專案,而我看到到處都有人湧向 React。


卑微的出身

2015 年夏天,我的女兒出生後不久,我開始嘗試建立後來成為 SolidJS 的反應式函式庫。我發現自己整夜未眠,思緒不斷回到這個問題。大多數情況下,這只是我在一天工作結束時偶爾會擺弄的東西,直到假期我才最終將其鞏固下來。

又花了幾個月的時間才完成一個基本的渲染器。我提交了一個名為「框架」的私人 BitBucket,SolidJS 就是在這裡找到它的第一個家。老實說,它看起來很像 Vue(帶有類似“s-if”綁定),除了像 Knockout 一樣我使用可組合信號而不是配置物件。它也沒有 VDOM。我使用與 Knockout 相同的方法進行細粒度資料綁定。

我尋找了每一個我能找到的基準。在某些情況下它很快,但在其他情況下(包括 Ryan 的),它很慢,或者寫起來很複雜。在接下來的兩年裡,我嘗試了許多方法來了解什麼是高效率的,什麼是低效率的。我不斷改進 API(包括切換到 JSX),直到 2018 年初的某個時候,Solid 達到了在我所能找到的每個基準測試中超越所有流行解決方案的程度。我終於準備好正式提交它了。為此,我需要發布該庫,我於 2018 年 4 月 24 日發布了該庫。

果然,SolidJS 的初始版本直接躍居 JS Framework Benchmark 的前列。當然,維護人員很禮貌地告訴我,我作弊了。因此,需要多嘗試幾次才能解決一般常見問題。直到2019 年我的生日,SolidJS 花了將近一年的時間才真正躋身前列


認真對待事情

現在我可能會把它扔掉,然後回到椅子上抱怨 Knockout 的美好時光。但是在開源專案和實現我的目標之間發生了一些事情。 Dan Abramov 於 2018 年 10 月 26 日登台向世界揭開了 Hooks 的面紗:

https://www.youtube.com/watch?v=dpw9EHDh2bM

我從來沒想過 React 會推廣可組合原語。它看起來就像 SolidJS。我最終選擇 JSX 作為我們的模板語言,因為它具有可移植性,非常適合我們的功能元件。固體元件只是執行一次且沒有內部狀態的函數,因此與 React 不同,類別對我們來說沒有任何意義。

現在,丹正在舞台上展示一件看起來幾乎一模一樣的東西。現在我有了一個新的任務:證明這個細粒度模型能夠完成使用 VDOM 可以做的所有事情,而無需 VDOM。我知道性能不是障礙,所以問題是模型是否足夠強大。我可能是在受到 Web 元件啟發之後開始這段旅程的,並被效能演示所吸引,但現在我有了一些真實的東西可以展示。

因此,我在接下來的兩年實現了 Suspense、Transitions、HMR、SSR、Hydration 和 Streaming。這些問題類似,但需要與 VDOM 完全不同的解決方案。雖然我們沒有發明任何這些概念,但也沒有人在細粒度模型中解決它們。


傳播訊息

不可否認,我沒有做過任何行銷。我寫過一些技術部落格文章,但我不知道如何推銷這個專案。自從 2008 年停止使用 Facebook 以來,我甚至沒有加入任何社群媒體平台。因此,當我在 2019 年 12 月加入 Twitter 時,我完全不知道自己會遇到什麼。

我嘗試在 Twitter 上與人們互動,但很快就發現人們根本不知道我在說什麼。他們對我就像我是個瘋子一樣。就好像他們會對我進行事實查,並請專家一樣。我嘗試向其他框架作者提出想法,但大多都立刻被拒絕。也有一些例外,例如 Dominic Gannaway(Inferno 的創造者),但我很清楚,每個解決方案都對他們為自己開闢的空間感到非常滿意。更重要的是 Solid 威脅到這一點。

我感受到的敵意並不像來自 React 開發者那麼多,而是來自小型函式庫。他們認為,他們所能做的事情是 JSX 無法做到的,你需要在 DX 體驗之間做出明確的決定。 React 以某種方式教育了生態系統,而其他所有方式都強化了這些界限,我試圖打破它們。我們沒有理由不能實現上述所有目標,而且做得比現在更好。

普通開發人員已經經歷了幾年的 JavaScript 疲勞,這在當時仍然是一個新鮮的話題,因此新的框架是人們最不想要的。人們很憤怒。我被指責這樣做是為了在我工作的大公司中晉升。當時這是 eBay,諷刺的是,我的日常工作是開發另一個 JS 框架 Marko。

是的,我遇到了一些摩擦,而且我對社群媒體不太熟悉,無法理解 HTMX 所知道的事情。無論你是否有實質內容要說,迷因都會獲勝。

https://dev.to/this-is-learning/of-chickens-and-pigs-the-dilemma-of-creator-self-promotion-51ea

公平地說,我並不認為我所做的是在自我推銷。我在公共場合建造和學習。我會寫文章並進行長時間的、不具備市場價值的直播。我並不覺得我創造了什麼,而是我發現了一些顯而易見的東西,如果你把所有的東西都擺在你面前的話。

訊號和細粒度渲染能夠完成使用具有類似甚至更好的 DX 的 VDOM 所能做的所有事情。可以透過差異化解決的問題,可能透過不進行差異化就能得到更好的解決。每個人都一心想開闢自己的空間,以至於他們沒有停下來問這些界限是否是我們人為設定的。


尋找盟友

我完全靠自己創立了 SolidJS。我加入了 Spectrum 和 Gitter 聊天並透過分享我的想法獲得了支持,但直到 David Di Biase 聯繫我時,我才找到願意花時間讓專案成功的人。隨著時間的推移,我們引入了其他人,因為他們有空參與專案。首先是亞歷山大、米洛、瑞安、丹、尼基爾,後來還有很多其他人。

我們利用 OpenCollective 贊助了兩次黑客馬拉松(SolidHack),以引入生態系統中缺少的部分,例如元件庫。我們將捐款投入 Solid Fellowship 計劃,以支持開發工具和文件等重要措施。我們在內容創作者中找到了願意接受新想法的朋友。像是 Jason Lengstorf、Theo Browne、Jack Herrington 這樣的人。我開始在會議上發言,並會見來自世界各地的像 Daniel 和 Atila 一樣支持 Solid 的人。

https://www.youtube.com/watch?v=O6xtMrDEhcE&list=PL16vUvov3c5D1\_KlYevpriA9QMkVkY32l

但最重要的是,我們只是繼續做我們正在做的事情。我們在 2021 年夏天發布了 1.0 版。這將引發一場我剛開始時從未預料到的革命。

https://dev.to/ryansolid/solidjs-official-release-the-long-road-to-1-0-4ldd


無所不在的訊號

到了 2015 年,絕對不會有人說「Knockout 總是正確的」。見鬼,在 2018 年甚至 2020 年很少人會這麼說。這是因為除了啟發 SolidJS 的建立之外,這與 Knockout 幾乎沒有關係。到 2025 年,您將很難找到一個無法工作或正在遷移到像 SolidJS 那樣工作的流行前端庫。 2018 年這一數字為零,而現在除了 React 之外,幾乎所有值得關注的框架都加入了。那麼發生了什麼事?

這不是一夜之間發生的。我對著虛空的大聲呼喊引起了一群觀眾的特別注意。框架作者。正是我關於 SolidJS 的文章讓我被 eBay 聘用,正是這些透過主要 Angular 出版物(感謝@layzee)偶然發布的文章讓我的作品出現在 Angular 團隊的面前。這將引發與 Pawel Kozlowski 多年的對話,並最終促成 Angular Signals 的誕生。

我說服了 Misko Hevery,訊號正是他在 Qwik 中實現真正的可恢復性所缺少的東西。我們曾與 Jason Miller (Preact) 和他的團隊討論過使用 Signals 所獲得的一些表現。在早期的反對之後,他們說服了 Evan You (Vue) 和 Rich Harris (Svelte),細粒度渲染是未來的趨勢,因此他們繼續建立了 Svelte Runes 和 Vue Vapor。 Vue 正在放棄其虛擬 DOM,而 Svelte 正在放棄其全編譯器方法來實現執行時反應性。現在,兩者在 SolidJS 的輸出上幾乎沒有差異。哎呀,現在甚至還有針對瀏覽器訊號的 TC-39 提案。

唯一不相信的觀眾是 React,但公平地說,這個解決方案從來都不適合他們。它的誕生源於不接受他們所得出的所有結論。這些年來,我從 React 中學到了很多東西,但如果不挑戰基準假設,你就無法進步。

https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71


SolidJS 的另一個十年

開源是一件有趣的事。在過去的 5 年裡,我很幸運地得到了 eBay、Netlify 和 Sentry 等公司的支持,可以全職從事這項工作,但對我來說,一開始並不是這樣的,而且並不是每個人都能做到。這需要時間,需要耐心,而且往往得不到回報。人們對它的批評就像對付費產品的批評一樣,卻沒有意識到大多數人的努力並沒有得到任何經濟補償。這意味著不能以同樣的方式判斷專案的健康狀況或人們對這些專案的奉獻精神。

到目前為止,這個計畫已經成為我生活中很重要的一部分。當我讀到 Hacker News 上的評論(它們從未改變)時,我幾乎覺得很有趣,這些評論讓我擔心自己會決定放棄這個專案。他們等了多久才在 2015 年加入 React 的潮流......不到 2 年?作為一個產業,我們是否已經老化了?那些鼓吹變革的人現在就這麼害怕改變嗎?

至於 SolidJS 的未來,有討論說現在 Svelte 和 Vue 已經變得幾乎相同,我們就此完蛋了嗎?我們是否成功完成了我最初計劃要做的事情?

我們確實成功了。但對我來說,我六年前就達成了這個目標。其餘的都是慣性追趕不可避免的結果。在過去的幾年裡,我的整個觀點都在不斷成長和改變。我們並非生活在真空中,而是不斷地從周遭的事物中學習。我們並沒有坐著等待大家趕上來。

SolidJS 發布與其他解決方案發布之間的時間差異與 jQuery 和 React 首次發布之間的時間差異相同。這趟旅程還為時過早。想像一下,如果我們擁有 React 多年來所擁有的相同資源來探索這個方向。我必須努力證明我們可以做到其他解決方案所能做到的一切。如果我們把精力放在解鎖其他解決方案甚至無法想像的模型獨有的功能上,結果會怎麼樣?

這讓我很忙碌,並為專案指明了方向。仍然有方法可以讓 Web 開發變得更好,這給了我動力。如果我們作為一支小部隊在惡劣環境中取得的成就令人印象深刻,那麼想像一下,如果有更多的人生活和工作在這個空間,我們能取得什麼成就。這只是旅程的開始。

確實,大多數選擇前端框架的開發人員並不知道建立前端框架需要什麼。他們甚至可能認為語法是最具決定性的特徵。在某些時候,某人必須創造實際的技術,這是值得探索和投資的努力。


原文出處:https://dev.to/this-is-learning/a-decade-of-solidjs-32f4


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!