字节前端终于开源!吹爆!

Semi Design 发布,前端同学的福音

大家好,我是鱼皮。

最近,字节跳动的抖音前端技术团队开源了一款企业级应用设计系统 Semi Design  。这也是他们团队在 GitHub 上首次公开的项目,短短几天,就收获了 3.6 k 个 star。

0775f93c12d0dff45e90a721d8a5f832.png
GitHub 开源仓库

老实说,看到这个开源项目的那一刻,我真的非常激动!因为我从第一次了解到字节跳动开始,就非常喜欢他家的设计风格,既简约又有现代感。

这次他们开源的 Semi Design,不仅是一套精美的设计系统,还是一套开箱即用的 React 组件库,对于我这种喜欢用 React 来写前端的开发者,真的是福音了。

d3751459a0ef59f7b9a1cf8b84aee767.png
semi-design 设计风格

下面我带大家来看一下,这个 Semi Design 到底香不香!

体验

打开 Semi Design 的官方文档,可以看到官方对 Semi Design 的介绍:

Semi Design 是由抖音前端团队,MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案,从字节跳动各业务线的复杂场景提炼而来,支撑近千计平台产品,服务内外部 10 万+ 用户。

他有以下几大特点:

  • 遵循简洁轻量、现代化的设计风格,开放自定义,让设计 “活” 起来

  • 提供主题编辑器和主题商店,可以轻松切换视觉风格

    c06433acd8c30e3b3617486c23fcf732.png
    主题商店
  • 完备的国际化,默认支持十几种语言

    bf4b1d8ef59f6a21ee1df301543072ef.png
  • 采用跨前端框架技术方案实现、F/A 分层设计,通过重构,可以快速支持除 React 外的通用组件库,比如 Vue、Svelte 等:

    9274d7d15941f9f61ffa8849e9106d81.png
    F/A架构

当然,光有这些并不能让我眼前一亮。毕竟现在前端的组件库实在太多了,像 “国际化” 这种很多组件库都具备的东西已经像是不成文的标准,不再是 “你有它让人很新鲜”,而是 “你没有它反而让人觉得垃圾” 。

然后打开 Semi Design 的组件文档,可以看到页面比较精简、组件也很丰富。但是左侧组件菜单的小图标给我一种不太舒服的感觉,好像色彩太过丰富了一些。

1e7fb6b9e2716e1563404e0679284b76.png
组件文档

此外,整个文档给我的感觉也是似曾相识,好像和蚂蚁的 React 组件库 Ant Design 神似。

c2f6f01ca6e44ae3993fd8c98c6feb0f.png
Ant Design 组件库

然而,点击查看一个组件后,我发现了一些小惊喜。

首先是每个组件上方都多了一个 版本对比 的按钮:

cfd1e825793c3d9ee70242a5ae6199eb.png

有了这个东西,我们可以快速了解每个组件随版本的更新和变化,从而减少一些版本不一致导致的 Bug。

6867ae163fd26f806da25ac2c473c5d5.png
版本对比

还有就是提供了 代码实时编辑 的能力,我们想要使用哪个组件,都可以直接实时修改代码并查看效果。可以等调试出自己想要的界面时,再把代码复制到自己的项目中,从而大大提高开发效率。

7dcc15ab75af4bfab7ba1d4723c98278.png
实时编辑组件

此外呢,Semi Design 还计划上线物料市场,可以理解为一个组件社区。之后会提供更多开箱即用的组件,帮助大家更快地开发出精美的前端界面。

e8c4e53db5b07cb22d027181a19036dd.png
物料市场

总之,整体来说,我还是很看好 Semi Design 的。

杂谈

虽然网上都在说 Semi Design 是抄袭了 Ant Design,但也许这不是什么坏事。

首先,蚂蚁的 Ant Design 本身就已经开源了,开源的理念之一就是希望让大家更好的参与项目的建设、共同促进技术的发展。蚂蚁团队为国内的前端生态做出了不可磨灭的贡献,也有很多成熟的、值得学习的理念和技术,其他组件库去借鉴和学习他们,自然也是对他们的肯定。

当然,我本身很讨厌抄袭,但借鉴和抄袭是两码事。

换个思路想想,假设 Ant Design 做的并不好,字节抖音那么大的团队,难道还会去借鉴他们么?难道他们团队没有实力去做一个又新又好的么?

而且,仔细看 Semi Design 就会发现,他的语法风格和属性名称和 Ant Design 的也很类似。你当然可以说他是抄袭,但仔细想想,对于用户来说,使用不同的组件库时不需要去区分语法,可以保持之前的使用习惯,难道不是一件天大的好事么?

比如很多编程语言的取子字符串函数名都是 substring,已经成为了一种不成文的标准。

当我们做一个新产品、造个新轮子时,能让用户自然平滑地迁移和切换,是一种很机智的策略。

再说了,字节开源了 Semi Design,不仅对我们开发者来说是多了一套选择,而且还变向地给 Ant Design 施加了压力,也许能促进他们更好地进步和完善呢?

7794b49717135135f43c49b64e05a900.png

当然,以上只代表我个人看法~ 无论如何,希望前端组件库能发展的更好,造福更多的开发者。



以上就是本期分享,我是鱼皮,最后求个 点赞 + 在看 ,这将是我持续创作的最大动力,谢谢 🙏

7654c09aee550df72de9ce648f759d3f.png

往期推荐

隔壁厂员工进局子了!

我的个人博客上线啦!

27万,这次事情搞大了!

汇总一波免费 Python 资源

鱼皮 Java 学习路线视频 + 网站

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/296220.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS2-3常见的demo列子总结

CSS2-3常见的demo列子总结 阅读目录 1. css超过一行或者多行后显示省略号。2. css图片未知高度垂直居中完美解决方案。3. 学习使用 :before和 :after伪元素回到顶部1. css超过一行或者多行后显示省略号。 Css实现超过一行后显示省略号&#xff1b;代码如下&#xff1a;<p st…

18张难以置信的照片,封面这张你就没见过

全世界只有3.14 % 的人关注了爆炸吧知识感谢网络&#xff0c;只要点几下鼠标&#xff0c;就能看到我们以前从未见过的东西——有些甚至是难以置信的&#xff01;鲸鱼的心脏水中的鲨鱼卵幼年的箭鱼萌萌哒世界上最高的棕榈树&#xff0c;简直以为是PS的没见过的话&#xff0c;很容…

.NET 生态系统的蜕变之 .NET 6

.NET 6 是自.NET 4 框架以来生态系统看到的最大版本更新&#xff0c;虽然.NET Core 是2014年开始非常大的一项重大战略举措&#xff0c;但是.NET 6是真正的具有强大动力的非常重要的版本。2021年11月9日即将正式发布的.NET 6, 也许你认为.NET 5才刚刚发布&#xff0c;我才刚开始…

我看你还能坚持多久?!

1 我看你还能坚持多久&#xff01;▼2 依旧是熟悉的配方▼3 到哪儿都不愁工作......▼4 请问&#xff0c;当事喵作何感想&#xff1f;▼5 池塘危险&#xff0c;请勿靠近&#xff01;&#xff08;图源网络&#xff0c;侵删&#xff09;▼6 望周知&#xff01;▼7 实在是无…

Hello Blazor:(13)查找HTML元素对应.razor文件

前言Blazor是基于组件的开发&#xff0c;每个组件都是以一个.razor文件形式存在。当应用程序变得越来越大并且.razor文件的数量和层次结构越来越多时&#xff0c;想很快弄清页面上的HTML元素是由哪个组件生成的&#xff0c;就变得不那么容易了&#xff01;FindRazorSourceFile介…

C++STL之string (转)

在学习cSTL中的string&#xff0c;在这里做个笔记&#xff0c;以供自己以后翻阅和初学者参考。 1&#xff1a;string对象的定义和初始化以及读写 string s1; 默认构造函数&#xff0c;s1为空串 string s2(s1); 将s2初始化为s1的一个副本 string s3("valuee");…

当年的毒王熊猫烧香,现在怎么样了?

全世界只有3.14 % 的人关注了爆炸吧知识放假&#xff0c;小编来到了远在73公里之外的天后宫&#xff0c;终于是了了本命年的一桩心事。回想上一个本命年&#xff0c;当时小编还是沉迷扫雷和蜘蛛纸牌的孩子...但当时却发生了一件令我很不爽的事——“熊猫烧香”席卷全国&#xf…

$query php,phpQuery让php处理html代码像jQuery一样方便

简介如何在php中方便地解析html代码&#xff0c;估计是每个phper都会遇到的问题。用phpQuery就可以让php处理html代码像jQuery一样方便。DEMO我下的是onefile版&#xff1a;phpQuery-0.9.5.386-onefile.zip然后在项目中引用。html文件test.html&#xff1a;Spiderman City Driv…

那个成人总会遇到的小问题……

结语超模君就问问&#xff1a;我还有机会10万&#xff0b;吗&#xff1f;&#xff08;溜了溜了&#xff09;莱布尼茨德国数学家莱布尼茨&#xff0c;被后人誉为“百科全书式的天才”&#xff0c;他的研究涉及逻辑学、力学等40多个领域。他创建了数学理论&#xff1a;微积分学。…

java继承接口和泛型,JavaSE习题 继承接口和泛型

问答题&#xff1a;1.子类在什么情况下可以继承父类友好成员&#xff1f;答&#xff1a;在同一个包内2.子类通过怎样的方法可以隐藏继承的成员变量&#xff1f;答&#xff1a;声明一个与父类相同变量名的成员变量3.子类重写继承的方法原则是什么&#xff1f;答&#xff1a;保证…

Github CodeSpaces 使用及定制化

Github CodeSpaces 使用及定制化IntroGithub 最近推出了很多令人兴奋的新功能&#xff0c;最近使用了 Github CodeSpaces&#xff0c;觉得还是挺不错的&#xff0c;CodeSpaces 相当于自己有了一个云主机&#xff0c;真正实现了云端开发&#xff0c;CodeSpaces 和 Github 做了很…

nat+端口转发,使得宿主机secureCRT可以访问vbox里linux虚拟机

为什么80%的码农都做不了架构师&#xff1f;>>> 环境&#xff1a;vbox或者叫vitrualbox连接虚拟机&#xff0c;由于公司内网不能分配IP&#xff08;不知道是不是这个原因&#xff09;&#xff0c;虚拟机用桥接得不到IP&#xff0c;没法实现虚拟机和宿主互相访问&am…

男人可以有多敷衍?

1 现在更流行「红茶女生」&#xff1f;&#xff08;via.白头叔&#xff09;▼2 谢谢&#xff0c;有被冒犯到&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 天使与恶魔▼4 男朋友可以多敷衍&#xff1f;▼5 你的高原红&#xff0c;像极了妈妈的巴掌印&#xff…

linux 内核代码构架图

转载于:https://www.cnblogs.com/kuainiao/archive/2012/12/17/2822384.html

Win11开始大范围推送!

微软宣布 Windows11 现已开始向更多符合最低硬件要求的电脑推送。预计到 2022 年年中&#xff0c;所有符合条件的电脑都可以免费升级到 Windows 11。微软将根据硬件条件、可靠性、使用时间&#xff0c;及其它会影响升级后使用体验的因素&#xff0c;为 Windows 10 电脑分阶段推…

有什么看起来很难,但是其实很简单的题目

全世界只有3.14 % 的人关注了爆炸吧知识做题其实很简单今天超模君一进办公室就感觉充满“杀气”&#xff0c;果不其然&#xff0c;一抬头就看见小天拿着一张纸对着我坏笑。莫非这家伙又要我折纸&#xff1f;拿过纸张一看&#xff0c;虽然密密麻麻的一大堆公式&#xff0c;但我相…

双11,2分钟狂挣20亿的神秘大厂,急招.NET!

双11小米开门红&#xff0c;2分钟不到突破20亿&#xff0c;于是机智的我又去逛了下小米的招聘官网&#xff1a;招5年左右.NET&#xff0c;35k左右&#xff0c;14薪&#xff0c;要求WPF和自动化&#xff0c;真香&#xff01;回首牛年2个跳槽季&#xff0c;招WPF的大厂太多了&…

炸了!刚刚数学家获得了2020年诺贝尔物理学奖!没想到诺奖也能蝉联.......

全世界只有3.14 % 的人关注了爆炸吧知识就在刚刚&#xff0c;万众瞩目的2020年诺贝尔奖物理学奖获得者确定了&#xff01;他们就是——天体物理学家&#xff08;该领域连续两年获得诺奖&#xff09;物理学奖得主罗格彭罗斯爵士&#xff08;Roger penrose&#xff09;&#xff0…

Envoy实现.NET架构的网关(五)集成Redis实现限流

.NET网关与Gateway实战-Envoy与kong课程什么是限流限流即限制并发量&#xff0c;限制某一段时间只有指定数量的请求进入后台服务器&#xff0c;遇到流量高峰期或者流量突增时&#xff0c;把流量速率限制在系统所能接受的合理范围之内&#xff0c;不至于让系统被高流量击垮。而E…

使用 Daynamic 动态添加属性

所谓的Dynamic 动态类型&#xff0c;页面也要是动态的&#xff08;强撸&#xff09; 很简单的 直接上代码&#xff1a; //案例一 DynamicpersonCollection new ObservableCollection(); for (var i 0; i < 10; i) { dynamic p new ExpandoObject(); ((IDictionary<str…