Semi Design 發(fā)布，前端同學(xué)的福音

大家好，我是魚皮。

最近，字節(jié)跳動(dòng)的抖音前端技術(shù)團(tuán)隊(duì)開源了一款企業(yè)級(jí)應(yīng)用設(shè)計(jì)系統(tǒng) Semi Design ?。這也是他們團(tuán)隊(duì)在 GitHub 上首次公開的項(xiàng)目，短短幾天，就收獲了 3.6 k 個(gè) star。

老實(shí)說，看到這個(gè)開源項(xiàng)目的那一刻，我真的非常激動(dòng)！因?yàn)槲覐牡谝淮瘟私獾阶止?jié)跳動(dòng)開始，就非常喜歡他家的設(shè)計(jì)風(fēng)格，既簡(jiǎn)約又有現(xiàn)代感。

這次他們開源的 Semi Design，不僅是一套精美的設(shè)計(jì)系統(tǒng)，還是一套開箱即用的 React 組件庫，對(duì)于我這種喜歡用 React 來寫前端的開發(fā)者，真的是福音了。

下面我?guī)Т蠹襾砜匆幌?，這個(gè) Semi Design 到底香不香！

體驗(yàn)

打開 Semi Design 的官方文檔，可以看到官方對(duì) Semi Design 的介紹：

Semi Design 是由抖音前端團(tuán)隊(duì)，MED 產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)、開發(fā)并維護(hù)的設(shè)計(jì)系統(tǒng)。它作為全面、易用、優(yōu)質(zhì)的現(xiàn)代企業(yè)級(jí)應(yīng)用 UI 解決方案，從字節(jié)跳動(dòng)各業(yè)務(wù)線的復(fù)雜場(chǎng)景提煉而來，支撐近千計(jì)平臺(tái)產(chǎn)品，服務(wù)內(nèi)外部 10 萬+ 用戶。

他有以下幾大特點(diǎn)：

• 遵循簡(jiǎn)潔輕量、現(xiàn)代化的設(shè)計(jì)風(fēng)格，開放自定義，讓設(shè)計(jì) “活” 起來

• 提供主題編輯器和主題商店，可以輕松切換視覺風(fēng)格

  

• 完備的國際化，默認(rèn)支持十幾種語言

  

• 采用跨前端框架技術(shù)方案實(shí)現(xiàn)、F/A 分層設(shè)計(jì)，通過重構(gòu)，可以快速支持除 React 外的通用組件庫，比如 Vue、Svelte 等：

  

當(dāng)然，光有這些并不能讓我眼前一亮。畢竟現(xiàn)在前端的組件庫實(shí)在太多了，像 “國際化” 這種很多組件庫都具備的東西已經(jīng)像是不成文的標(biāo)準(zhǔn)，不再是 “你有它讓人很新鮮”，而是 “你沒有它反而讓人覺得垃圾” 。

然后打開 Semi Design 的組件文檔，可以看到頁面比較精簡(jiǎn)、組件也很豐富。但是左側(cè)組件菜單的小圖標(biāo)給我一種不太舒服的感覺，好像色彩太過豐富了一些。

此外，整個(gè)文檔給我的感覺也是似曾相識(shí)，好像和螞蟻的 React 組件庫 Ant Design 神似。

然而，點(diǎn)擊查看一個(gè)組件后，我發(fā)現(xiàn)了一些小驚喜。

首先是每個(gè)組件上方都多了一個(gè) 版本對(duì)比 的按鈕：

有了這個(gè)東西，我們可以快速了解每個(gè)組件隨版本的更新和變化，從而減少一些版本不一致導(dǎo)致的 Bug。

還有就是提供了 代碼實(shí)時(shí)編輯 的能力，我們想要使用哪個(gè)組件，都可以直接實(shí)時(shí)修改代碼并查看效果?？梢缘日{(diào)試出自己想要的界面時(shí)，再把代碼復(fù)制到自己的項(xiàng)目中，從而大大提高開發(fā)效率。

此外呢，Semi Design 還計(jì)劃上線物料市場(chǎng)，可以理解為一個(gè)組件社區(qū)。之后會(huì)提供更多開箱即用的組件，幫助大家更快地開發(fā)出精美的前端界面。

總之，整體來說，我還是很看好 Semi Design 的。

雜談

雖然網(wǎng)上都在說 Semi Design 是抄襲了 Ant Design，但也許這不是什么壞事。

首先，螞蟻的 Ant Design 本身就已經(jīng)開源了，開源的理念之一就是希望讓大家更好的參與項(xiàng)目的建設(shè)、共同促進(jìn)技術(shù)的發(fā)展。螞蟻團(tuán)隊(duì)為國內(nèi)的前端生態(tài)做出了不可磨滅的貢獻(xiàn)，也有很多成熟的、值得學(xué)習(xí)的理念和技術(shù)，其他組件庫去借鑒和學(xué)習(xí)他們，自然也是對(duì)他們的肯定。

當(dāng)然，我本身很討厭抄襲，但借鑒和抄襲是兩碼事。

換個(gè)思路想想，假設(shè) Ant Design 做的并不好，字節(jié)抖音那么大的團(tuán)隊(duì)，難道還會(huì)去借鑒他們么？難道他們團(tuán)隊(duì)沒有實(shí)力去做一個(gè)又新又好的么？

而且，仔細(xì)看 Semi Design 就會(huì)發(fā)現(xiàn)，他的語法風(fēng)格和屬性名稱和 Ant Design 的也很類似。你當(dāng)然可以說他是抄襲，但仔細(xì)想想，對(duì)于用戶來說，使用不同的組件庫時(shí)不需要去區(qū)分語法，可以保持之前的使用習(xí)慣，難道不是一件天大的好事么？

比如很多編程語言的取子字符串函數(shù)名都是 substring，已經(jīng)成為了一種不成文的標(biāo)準(zhǔn)。

當(dāng)我們做一個(gè)新產(chǎn)品、造個(gè)新輪子時(shí)，能讓用戶自然平滑地遷移和切換，是一種很機(jī)智的策略。

再說了，字節(jié)開源了 Semi Design，不僅對(duì)我們開發(fā)者來說是多了一套選擇，而且還變向地給 Ant Design 施加了壓力，也許能促進(jìn)他們更好地進(jìn)步和完善呢？

當(dāng)然，以上只代表我個(gè)人看法~ 無論如何，希望前端組件庫能發(fā)展的更好，造福更多的開發(fā)者。

以上就是本期分享，我是魚皮，最后求個(gè) 點(diǎn)贊 + 在看 ，這將是我持續(xù)創(chuàng)作的最大動(dòng)力，謝謝 ??