前端开发使用Ant Design项目评价

目录
  • 好的方面
  • 不好的方面
  • 更新@2020
  • 更新@2022
    • Tooltip 直接使用 rc-tooltip 的 props type

好的方面

作为前端开发使用 Ant Design 1年多了,想说几句。

先说好的方面——

它提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库。他们的经验积累如此之丰富,足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲,令许多其他团队获益匪浅。

不好的方面

但我更想吐槽几个不好的方面,都是针对其开发团队的——

  • 它“过于智能”,常常画蛇添足。比如 Button 内容为两个汉字时会自动在其间加上空格分隔,比如表单验证消息模版中,如果不提供 %s ,它会自动将 %s 的对应内容添加到尾部,仿佛在说“你忘了写 %s,我帮你自动加上了,不用谢我哟!”。于是我想要在某个表单字段展示“此处必填”消息的时候,就会被迫变成“此处必填 field-name”。
  • 维护者常常意气用事。除了之前广为人知的圣诞彩蛋事件,随手翻阅一下该项目在 GitHub 的 issues ,就能看到类似的发言。“爱用用,不用gun”的交流方式,并不能帮助这个库变得更好。

3. 部分组件设计不合理,且长期未进行优化。最显著的是 Form 组件,使用过它的朋友一定体会过其 getFieldDecorator API 的微妙感觉以及 Form.create API 的诡异体验。甚至上面的截图里也吐槽了 Form。值得一提的还有 Modal 组件,提供了一个 Modal.confirm 接口。让我仿佛回到十年前那个写 jQuery 的时代。维护者对 React 的掌握不够纯熟,对于一些深度 bug 甚至不能充分理解,比如 Upload 组件的这个 bug

4. TypeScript 支持欠佳。有的朋友可能会说,”这个库明明有 TS 支持,在编辑器里也有自动提示,你不要乱黑“。我的意思是 Ant Design 的 TS 支持与它的量级不协调。这个 Star 数万的库,对于范型等TS的强力功能发挥甚少,还常常在诸如应该写为 'a' | 'b' | 'c' 的地方看到一个粗暴的 string ,甚至 any。

5. 社区反哺困难。读过源码的朋友应该都发现了,antd 之下还有一套 rc-*的组件库,一个功能简单的 antd 组件,往往需要通过极为冗长的代码来实现,当你读到尾部,又发现它用了一个来自 rc-* 的组件。如此种种,使得当使用者想帮助修复一些简单的bug时,会望而却步。

更新@2020

刚才因为要维护一个使用了 antd 的老项目去官网看文档,有些新发现。

刚打开首页时大部分交互都没有反馈(默认进入最新的 4.0 版,而我想切换到 3.x 版本的,点击没反应),很纳闷。打开 DevTools 看到某个巨大的 JS 仍在加载,最终花了我将近 2 分钟才好。听说 Ant Design - The world's second most popular React UI framework 是托管在 GitHub pages 的,大概是流量太大被限速了吧。当我准备浏览一番,却发现非常卡顿。通过 FPS meter 发现 FPS 只有 10~12,我那沉默已久的风扇呼地一声转了起来,我猜是开发人员的电脑配置都比较好才没发现这个问题。

单就新首页的体验来说,有点差,不知道这次发布的 4.0 版本身变化有多大,是不是解决了我之前吐槽过的点,改天研究一下再来更新。

更新@2022

没想到上面的“改天”这一改就是700多天。最近终于有机会使用了 Ant Design 4,对照原回答里的问题更新一下感受。

  • 在最近的使用中没有遇到“过于智能”的问题,但最近的使用深度也不如以往,基本只用到最常规最基础的场景,希望维护团队是真的已经避免了这个问题。
  • 现在重新审视 @afc163 在原回答截图中的回复,我似乎比之前更能理解他的本意一些——大概是劝用户改变使用方式,默认了 Ant Design 的 Form 在设计上略有缺憾的意思。但我还是坚持认为这个表述方式不能令我满意。我最近因为查找一些使用上的问题,有去翻 GitHub issue,没有翻到比较新的回复。希望是改善了吧。
  • 有看到 Form 组件已经被优化过了,粗看示例代码里没再看到 getFieldDecorator,但总体上感觉还是不那么美好,比较难受的是看到了通过对 form 的 ref 引用来进行数据操作。然后 Upload 组件的问题似乎还是存在的?
  • TypeScript 支持改善了很多,现在 Ant Design 比较全面地使用 TypeScript 进行了实现。补全效果是及格的,枚举类型希望能更多一些,目前还是太多 string,估计是受限于更底层的 rc-* 的 TS 化进度。
  • 社区反哺依旧很困难,不知道这个问题还要拖累这个库多久?

另外这次浅尝过程中发现一个挺无语的小问题——我试着去调整 Tooltip 的动效,通过类型提示得知与动效相关的 transition 的 API 在底层的 rc-tooltip 已经被废弃了,应该用新的 motion API,但是上层的 Tooltip 又几乎写死了 motion API,用户只能用 transitionName 有限地调整 motion

Tooltip 直接使用 rc-tooltip 的 props type

但这里不接受用户传入的 `motion` prop,会强制用 transitionName 生成一个 motion

哎,希望 v5 能更好吧……

以上就是前端开发使用Ant Design项目评价的详细内容,更多关于前端开发Ant Design的资料请关注我们其它相关文章!

(0)

相关推荐

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    实现效果 本来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图: sortablejs介绍 首先先来认识一下这个插件: sortablejs 大家可以去细读一下它的api文档: 这边我就着重介绍一下我用到的api. 1.group可以传入对象,参数值为name,pull,put, name:如果是要两个列表下进行拖动的话,name的值必须为一样: pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function t

  • AntDesign Pro + .NET Core 实现基于JWT的登录认证功能

    很多同学说AgileConfig的UI实在是太丑了.我想想也是的,本来这个项目是我自己使用的,一开始甚至连UI都没有,全靠手动在数据库里修改数据.后来加上了UI也是使用了老掉牙的bootstrap3做为基础样式.前台框架也是使用了angularjs,同样是老掉牙的东西.过年期间终于下决心翻新AgileConfig的前端UI.最后选择的前端UI框架为AntDesign Pro + React.至于为啥选Ant-Design Pro是因为他好看,而且流行,选择React是因为VUE跟Angular我

  • 如何在React项目中使用AntDesign

    目录 0.前言 1.AntDesign是什么? 2.AntDesign如何使用? 3.如何具体使用AntDdesign的组件 3-1.如何使用 antd 的Table组件 3-2.如何使用 antd 的Button组件 4.后续 0.前言 我们在后台管理系统React项目开发中会有Table表格.Form表单.List列表.Button按钮等组件,这个时候我们可以使用AntDesign来减少开发中不必要的样式问题. 1.AntDesign是什么? Ant Design 是一个 UI 设计语言,是

  • vue在antDesign框架或elementUI框架组件native事件中触发2次问题

    目录 vue在antDesign或elementUI组件native事件中触发2次 运用ant-design-vue组件库,且在项目中遇到的问题 难以改变的默认样式 让通知提醒框的内容自动换行 table组件表格出现时间时,格式问题 vue在antDesign或elementUI组件native事件中触发2次 打印event.target 核心思想是设置下event.target的过滤 运用ant-design-vue组件库,且在项目中遇到的问题 难以改变的默认样式 可能大家在运用到组件库的时候

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • 前端开发使用Ant Design项目评价

    目录 好的方面 不好的方面 更新@2020 更新@2022 Tooltip 直接使用 rc-tooltip 的 props type 好的方面 作为前端开发使用 Ant Design 1年多了,想说几句. 先说好的方面—— 它提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面.这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库.他们的经验积累如此之丰富,足以让这个库支持大部分其他

  • React+Ant Design开发环境搭建的实现步骤

    基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架: npm install -g create-react-app 1.2 使用脚手架创建项目: create-react-app antd-start-demo antd-start-demo为项目名. 1.3 启动 npm start 2.npm转换为yarn 2.1 安装yarn: npm install -g yarn ​ 2.2 获取yarn当前的镜像源: yarn config get registry ​ 2.3 设置为淘宝

  • 详解Ant Design of React的安装和使用方法

    在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率.我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design.旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源. Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言.它模糊了产品经理.交互设计师.视觉设计师.前端工程师.开发工程师等

  • ant design实现圈选功能

    Ant Design是一款十分出色的的UI设计组件,Ant Design电脑版界面美观大方,功能强劲实用,软件包含整套开发和设计资源和工具,丰富的React UI组件,能够为前端UI设计提供了新的解决方案,非常的方便实用哦 由于同事离职,公司缺人,他的工作便交接到我的手里了,我一个android开发者,以前也从来没做过web端开发啊,没办法,领导交代的任务硬着头皮也得接下来啊!拿到手上,做的第一个功能,便是存储计划,需要实现可按照天.周.月存储,并且以鼠标圈选的形式实现,接下来附上自己的实现效果

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • Ant Design Blazor 组件库的路由复用多标签页功能

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 `Tabs` 组件的 `ReuseTabs` 组件. 最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 Sign

  • 浅谈JavaScript前端开发的MVC结构与MVVM结构

    MVC Model–View–Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式:Model包含应用的数据和业务逻辑:Controller负责把用户的输入,转换为命令传递给Model和View;这是维基百科的解释: 这种模式最初是由Trygve Reenskaug在使用Smalltalk-80(1979)工作时设计的,刚开始叫做Model-View-Controller-Editor:后来通过<Design Patterns: Elements of Re

  • Android实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用. 组件的源码    https://github.com/haozhaohang/ant-design-expand-component 下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子: impor

  • React Ant Design树形表格的复杂增删改操作

    最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善.踩过的坑都写在了这里. 树形表格的显示 在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串.这一点和我曾经使用过得iview有着很大的区别.react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题.比如新建行时需要自定义新key.

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

随机推荐