技術期刊 · 路塵終見泰山平 | 微前端及外掛化架構在 Wix 的實踐;編輯器架構的第二路徑;業務中的前端元件化體系……

凹凸實驗室發表於2021-12-25

HEADER

蒲公英 · JELLY技術期刊 Vol.47

不想當架構師的程式設計師不是“合格”的程式設計師?這一類的言論在很多文章中應該很常見吧,我們需要架構思維,要有抽象能力,要學會分層……需要的太多太多,可很少有合適的專案能夠幫助我們養成這些思考的習慣,比如業務元件體系的設計,又比如編輯器等等,需要權衡技術與業務之間的平衡,架構設計穩定性與擴充能力,面對業務保持思考,泰山如砥平。

觀海志

登山則情滿於山,觀海則意溢於海

微前端及外掛化架構在 Wix 的實踐

梗概:微前端的概念已經出現了相當一段時間。我們從 2013 年左右就開始在 Wix 中使用這種架構,甚至早在它被命名為 Wix 之前。這也是我們在 2016 年逐漸從 AngularJS 遷移到 React 的關鍵因素。多年來,我們一直在改進它,並積累了大量的經驗。在本文中,我想與大家分享一些我們為了發展大規模微前端開發概念所做的工作(在撰寫本文時,我們有 700名 開發人員在這個體系架構上工作)。

推薦語:作為世界上最優秀的建站產品之一,Wix 的建站編輯器功能和擴充性都非常強大。他們很早就採用微前端作為可插拔系統的解決方案,並一直在這個體系上進行迭代。這篇文章詳細介紹了他們可插拔式微前端架構的誕生背景及技術實踐,包括一整套的開發/測試、構建/釋出、監控等的工作流,對應的可插拔的微前端架構的 IoC 庫已開源:https://github.com/wix/replug...

編輯器架構的第二路徑

梗概:Slate 讓你構建像 Medium, Dropbox Paper 或者是 Google Docs 這樣豐富,直觀的編輯器,而不會讓你在程式碼實現上深陷複雜度的泥潭。

推薦語:編輯器應用的複雜度堪稱是 Web 應用中數一數二的,業內知名的多人協同編輯器難度更是堪稱業內標杆,但是編輯器真的就只能設計的無比複雜麼?值得一提的是 Slate 整體設計優雅且靈活,各個模組設計精巧卻十分易懂,值得細細品味。高效穩健的程式碼有時候和設計複雜度並沒有很高的關聯性,這很值得我們在組織各個模組能力時思考。

業務中的前端元件化體系

梗概:元件化已經是一個老生常談,但是又經久不衰的話題。隨著技術的更迭,業務複雜度的增加,元件化被反覆拿出來重新審視,可以說元件化之路一定程度上體現了程式開發的發展歷程。

推薦語:本文從實際業務場景出發,針對元件實現上的常見問題,深入淺出的剖析了元件設計思路,以及業務中的前端元件化體系的搭建,可以瞭解到元件狀態的可組合性、分層複用以及跨技術棧整合等知識點,具備很強的實操性,非常值得一讀。

構建網站的 Spotlight 外掛

梗概:考慮實現類似 MacOS 的 Spotlight 和 Linear 的 command+k 體驗?使用 kbar 可以為您的站點新增一個快速的、可擴充套件的 command + k 選單。

推薦語:提升使用者體驗是一個很巨集大的命題,但是有的時候卻只需要簡單的幾步,例如你可以使用 kbar 就能夠為您的網站加入媲美 Spotlight 的 command + k 體驗,相信這對於很多個人開發者會很有幫助~

流觴亭

因山卜地心機巧,望水如天眼力窮

Theia 技術揭祕之外掛擴充

梗概:Theia 的外掛化設計十分有趣,在保證功能穩定的同時賦予了系統極強的擴充能力,本文從名詞開始解析,敘述在 Cloud IDE 設計的過程中,需要一個怎樣的外掛系統,深入淺出的講解不同系統模組之間的架構,教你快速上手編寫 Theia 外掛。

推薦語:Theia 外掛系統功能非常強大,如此龐大的工程,同時還耦合了繁複的能力模組,卻依然能保持高質量的程式碼和清晰的架構,這是很多業務專案都難以做到的,這樣的專案架構可能很多時候並不需要,但一定值得我們思考和學習。

Theia 技術揭祕之 Theme

梗概:Theia 的主題設計遵循了 VS Code 的 Theme 規範,本文從型別開始,詳細說明了實現需要考慮的問題,以及 Theia 應用具體實現 VS Code 規範下的 Theme 外掛的細節。

推薦語:對於編輯器來說,從零開始實現是不現實的,那麼如果可以相容現有的設計就是一個很棒的選擇,VS Code 各種意義上來說,都是一個極好的參考物件,通過相容 VS Code 的主題就能夠極大減少使用者的遷移成本。

「蒲公英」期刊,每週更新,我們專注於挖掘「基礎技術工程化跨端框架技術圖形程式設計服務端開發桌面開發人工智慧設計哲學前端框架」等多個大方向的業界熱點,並加以專業的解讀;不僅如此,我們還會推介精選凹凸技術文章,向大家呈現團隊內的研究技術方向。

抬頭仰望,蒲公英的種子會生根發芽,如夏花絢爛;格物致知,我們登高遠眺、滄海拾遺,以求積矽步而至千里。

蒲公英 · JELLY技術期刊貢獻指南

FOOTER

歡迎關注凹凸實驗室部落格:aotu.io

或者關注凹凸實驗室公眾號(AOTULabs),不定時推送文章。

相關文章