【徐順發】 低成本、跨技術棧與無框架：重新構想前端組件.pdf

《【徐順發】 低成本、跨技術棧與無框架：重新構想前端組件.pdf》由會員分享，可在線閱讀，更多相關《【徐順發】 低成本、跨技術棧與無框架：重新構想前端組件.pdf（65頁珍藏版）》請在三個皮匠報告上搜索。

1、低低成成本本、跨跨技技術術棧棧與與無無框框架架：重重新新構構想想前前端端組組件件自我介紹：徐順發哈啰出行 前端開發ReactRedux 前端開發實戰作者。熱衷于使用前沿技術提升前端生產力，近一年專注于 Web Components 的跨技術棧解決方案，目前致力于 Quark 技術生態建設。開篇/講師介紹目錄1.聊聊當下主流前端組件的“傷”2.初識 Web Components3.利用 Quarkc 高效構建 Web 組件4.面向未來的無框架瀏覽器原生組件探索與實踐開篇/目錄一、聊聊當下主流前端組件的“傷”目錄一/組件痛點通通用用組組件件 e e.g g.基基礎礎組組件件 /表表單單 /反反饋饋

2、 /展展示示 /導導航航組組件件業業務務組組件件 e e.g g.抽抽獎獎轉轉盤盤 /省省市市區區選選擇擇 /優優惠惠券券等等依賴技術棧（eg.Vue、React等）運行時關聯技術棧版本(eg.Vue2.x、Vue3.x)v va an nt t /a an nt td d 等等第第三三方方n np pmm包包開開發發者者自自行行封封裝裝，私私有有n np pmm托托管管生命周期短&頻繁迭代&維護成本大不能跨技術框架/技術棧使用CSS樣式全局相互影響組件痛點/組件分類組件痛點/場景舉例業務中臺：需要提供業務組件給上層業務方使用，但因為一些歷史問題，不同業務線使用框架不統一，包括 React、V

3、ue2、Vue3、jQuery 等。此時會面臨問題：每種選型框架都需要開發一次，費時費力組件升級，需要業務方同步發版升級，溝通成本高、迭代效率低組件痛點/場景舉例組件其實可以不用依賴技術框架而存在。如果能做到這點，那么這個組件庫可以穿越沉浮，歷經長久!不用隨著技術棧的更新而更新。我們認為組件痛點/我們認為二、初識 Web Components目錄二/WC你以為 Web components 離我們很遠？WCs/介紹在過去的很長一段時間里，瀏覽器用它來封裝一些元素的內部結構，比如 i in np pu ut t、s se el le ec ct t、v vi id de eo oWCs/介紹通通

4、過過一一個個小小示示例例來來看看如如何何寫寫一一個個wwe eb b組組件件WCs/演示H He ea ad de er rB Bo od dy yF Fo oo ot te er r哈啰租車的訂單卡片WCs/演示WCs/演示T Te emmp pl la at te eS Sh ha ad do oww D Do omm自自定定義義元元素素WCs/演示Custom elements（自定義元素）：一組 JavaScript API，允許您定義 custom elements 及其行為，然后可以在您的用戶界面中按照需要使用它們。Shadow DOM（影子 DOM）：一組 JavaScript

5、API，用于將封裝的“影子”DOM 樹附加到元素（與主文檔 DOM 分開呈現）并控制其關聯的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔心與文檔的其他部分發生沖突。HTML templates（HTML 模板）：和 元素使您可以編寫不在呈現頁面中顯示的標記模板。然后它們可以作為自定義元素結構的基礎被多次重用。Web Components 組成三劍客WCs/W3C 規范Shadow DOM獨立沙盒 與外部DOM元素互不干擾D Do oc cu umme en nt tN No od de eN No od de eS Sh ha ad do owwR R

6、o oo ot tS Sh ha ad do owwD Do ommS Sh ha ad do owwD Do ommShadow Tree宿主元素WCs/核心API優化一下代碼WCs/示例展示內容如何動態生成？WCs/示例講解屬性傳遞WCs/示例講解Vue.jsReact.jsWCs/示例講解內部事件如何定？WCs/示例講解WCs/示例講解在 Vue.js 使用示例：WCs/示例講解至至此此，小小示示例例演演示示完完畢畢結論：WCs 可以用來構建任意web組件WCs/示例講解現有WCs開發方式面臨的“痛痛點點”有哪些？為什么要自研一個WCs的開發工具？WCs/開發痛點大量 DOM 操作純 D

7、OM 操作，回到了 jquery時代，不符合現代開發方式兼容代碼多針對 property!=attribute 的兼容分散在各個組件內部，沒法收斂可維護性差沒有類型約束、代碼質量無法保證，易出錯沒有代碼高亮Html template 和樣式都是字符串方式拼接在代碼內，無法高亮提示構構建建一一個個WWe eb b組組件件，你你會會遇遇到到無法修改內部 CSS 樣式由于影子 DOM 的存在，開發者無法從外部修改組件內部樣式樣式單位自適應如果使用 rem/em 單位，不同前端工程中單位存在問題其它問題 使用原生語法去編寫 Web Components 相當繁瑣，因此我們需要一個框架幫助我們提高開發效

8、率和開發體驗。WCs/開發遇到的問題陌陌生生的的 A AP PI I +原原生生寫寫法法增增加加了了學學習習成成本本 +未未知知的的問問題題 +性性能能問問題題WCs/問題總結導致三、利用Quarkc高效構建Web組件目錄二/Q-Vue、React（依賴運行時、前置工作耗時、包體積大、不能跨技術棧）-Vanilla Web Component（語法原始、開發體驗差、各類技術棧兼容問題）-Lit（學習成本高，變化多）-Omi（GitHub 100多issue，處于半維護狀態）-Svelte（組件越多優勢越不明顯）-Stencil.js（學習成本高，有一定不確定性，如在 Vue 框架下是否兼容復雜

9、配置和多種回調事件。開發體驗不好+400多個issue未處理?。嫿ㄒ粋€通用型業務組件，你有如下選擇：Quarkc/技術選型Quarkc,為跨技術棧而生！詳情訪問：https:/Quarkc/最佳選項Quarkc/官網展示Quarkc/官網展示三步驟，開發一個跨技術棧/瀏覽器原生組件Quarkc/快速上手1、安裝Quarkc/安裝2、創建Quarkc/組件創建3、使用Quarkc/組件使用Quarkc/官方示例c co on ns st tr ru uc ct to or rd di is sc co on nn ne ec ct te ed dC Ca al ll lb ba ac ck k

10、a at tt tr ri ib bu ut te eC Ch ha an ng ge ed dC Ca al ll lb ba ac ck kc co on nn ne ec ct te ed dC Ca al ll lb ba ac ck kc co ommp po on ne en nt tD Di id dMMo ou un nt ts sh ho ou ul ld dC Co ommp po on ne en nt tU Up pd da at te ec co ommp po on ne en nt tD Di id dU Up pd da at te ec co ommp po

11、on ne en nt tWWi il ll lU Un nmmo ou un nt tInitializationUnmountUpdateMountedc co on ns st tr ru uc ct to or r與 React 生命周期對齊生命周期再定義Quarkc/做了什么quarkcHtmlElement(瀏覽器內置的類)ReactiveElementInherits fromInherits from-對 tsx/jsx語法支持-虛擬Dom的實現&變更節點的Diff算法-最底層繼承了HTMLElement的類-利用其原生Shadow Dom接口、自定義標簽等-生命周期再定義-P

12、roperty/Attribute等兼容問題轉換-裝飾器實現-組件樣式外部引入Quarkc/底層原理【研發提效，降本】跨框架的業務組件，只維護一套代碼！實現：低成本、高效構建跨技術棧組件！(e.g.營銷彈窗，抽獎大轉盤)【面向未來，穩定】前端框架會繼續迭代/發展，會有新的版本，新的框架出現。用 Quarkc 開發“通用型組件”，不會隨著“前端框架浪潮”而更新迭代?！網3C標準，極致】高性能、極小的體積使用 Quarkc 的收益Quarkc/使用者收益Quarkc/性能展示Maybe,you do not need React or Vue所有創新都發生在事物邊緣，所有的顛覆都來自邊緣。四、面向

13、未來的無框架瀏覽器原生組件探索與實踐目錄四/Q詳情訪問：https:/ Design縮寫）是一套基于 Web Components 的跨框架 UI 組件庫，輸出標準的 Custom Element。所有組件可以同時在 React、Vue、Preact、Angular 或原生 JS 等任意框架或無框架中使用。不同于“主流其它的組件庫”，Quarkd 沒有在“前人”組件建設能力上做復制/粘貼！我們有自己的思考，移除了一些不必要或者我們認為不合理的設計點，同時減輕了代碼量/代碼邏輯。讓這個組件庫變得更輕盈，貼近原生（設計上也是）。Quarkd/介紹組件設計：貼近原生、與主流組件庫相比 quarkd

14、在不斷做減法Quarkd 特性跨前端技術棧/前端框架性能極佳，體積小(組件平均體積小于 2KB，甚至小于 1KB)目前近50個組件，覆蓋日常開發所需各類組件支持按需加載支持 TypeScript支持主題修改單元測試全覆蓋Quarkd/特性三大天然優勢非侵入式依托 Shadow Dom：它能夠很好的組織好自身的 HTML/CSS/JS（結構/行為/樣式），不會干擾到頁面中的其他代碼即插即用無論新老項目，無論什么框架/無框架：安裝！引入！使用！標 準 化迎合 W3C Web 標準，瀏覽器（主流）都能跑，原生，穩定Quarkd/優勢Quarkd/線上示例Quarkd/面臨挑戰1)如何修改自定義組件內

15、部CSS樣式2)如何抹平React自身事件限制3)如何處理Vue2.6+Componsition API+JSX場景下不能使用原生slot問題4)不同項目使用不同樣式單位怎么辦5)字體圖標如何按需引入6)如何按需引入自定義組件7)不同技術棧屬性傳遞有差異怎么處理8)如何實現一個文檔支持所有技術棧9)要么不干，要干就往死里干，把事情做到極致！總結：1.技術領域新，缺少參考資料2.國內沉淀少且中文資料少3.國內沒有成熟經驗可供參考等問題面臨各種開創性問題過程中遇到哪些“問問題題”？舉3個例子Quarkd/舉幾個例子簡單理解：this.props=this.propsReact 中屬性傳遞是 Att

16、ribute，Vue 中屬性傳遞是 Property，如果傳遞布爾值，在Web組件內部拿到的結果會不一樣！1 1、不不同同技技術術棧棧之之間間屬屬性性傳傳遞遞布布爾爾值值Quarkd/攻克問題舉例參考原生標簽設計（e.g.Radio、Checkbox等）布爾值：統一為一個空字符串（表現也更優雅）簡單理解Quarkd/攻克問題舉例 2 2、如如何何重重新新定定義義組組件件內內部部樣樣式式使用 CSS 自定義屬性（變量），可以穿透到Shadow DOM中！一共探索出了 9 種可以修改組件內部樣式的方式，兼容性最好，書寫方式最優雅的是使用CSS變量Quarkd/攻克問題舉例利用 CSS 變量，還能借

17、此實現主題自定義組件源碼內部使用者可以在項目中重新定義CSSQuarkd/攻克問題舉例 3 3、如如何何抹抹平平 R Re ea ac ct t 事事件件差差異異？Quarkd/攻克問題舉例遍歷標簽所有屬性，遇到 onXX 前綴的屬性就識別為事件，內部做轉化原生事件處理抹平技術棧事件上的差異，獲得一致的開發體驗Quarkd/攻克問題舉例對比對比【維護成本】今后技術棧的升級換代，與你的組件庫無關【體驗一致】不同技術棧的前端工程擁有一致的交互體驗【0學習成本】對開發者來說沒有任何心智負擔【文檔友好】沒有各種版本的文檔及斷檔的APIe.g.前端工程從Vue2.x升級到Vue3.x，組件庫不用去單獨處理使用 Quarkd 的收益是其它主流第三方組件庫如何用，quarkd就怎么用e.g.彈窗/按鈕/loading等視覺/動效都一樣一套文檔，沒有“套路”Quarkd/結語Quarkc,跨技術棧組件構建工具下一代瀏覽器原生組件庫結語/Quark 技術生態低低成成本本、跨跨技技術術棧棧與與無無框框架架：重重新新構構想想前前端端組組件件2022-09 開源2023-06 開源T TH HA AN NK KS S