Ant-design-pro: 前端最佳实践即将到来

Created on 27 Feb 2020  ·  107Comments  ·  Source: ant-design/ant-design-pro

随着前端的的发展,底座已经越来越坚实,当前前端框架和工程化已经可以cover 住大部分业务场景的复杂度。前端的已经更加关注于业务,Ant Design Pro 提供了一个中后台的脚手架,为框架和工程化提供了最佳实践,但是还是有很多问题还是需要最佳实践。

🤷‍♂️ 为什么需要最佳实践

在维护 Pro 的过程中,我们遇到了很多直击灵魂的问题,什么样的代码才是最好的?应该怎么写才对?初始化用户信息在哪里请求?有的页面只有部分用户有权限该怎么处理?Layout 代码太复杂看不懂?后端接口报错应该怎么处理?

这类型的问题回答说难不难,说简单也不能算简单。不同的项目乃至不同的人都有自己的习惯,市面上存在很多的解决方案,每个项目中解决方案不尽相同,同样的脚手架我们可以选择 Mobx,redux,dva,使用 Context 的人也不在少数。这已经是选择相对比较少的数据层,我们还有网络请求,权限,Layout 等。

诚然,多个选择是好事,但是作为企业级的产品,维护才是最重要的,我们期望每个同学都可以很快的上手,而且如果每个项目都要选一次,新鲜感过去之后我们可能就会自己花费相当多的精力来封装。更加详细的论证,可以看云谦老师的文章

🏄‍♂️ 我们的解决方案

蚂蚁金服每年都有大量的中后台项目的孵化,各种技术栈百花齐放,我们解决方案其实就是 强约束配置化约定化

🕹 强约束

这方面我们做了 ProLayout ,ProTable 两个重型组件,用于封装重复的逻辑,以后可能还会添加 ProForm 等组件来提升开发项目。

  • ProLayout 会提供一个标准化的布局组件,我们只需要通过插件就可以引入。
  • ProTable 封装了 Table 的常用行为,可以快速的撸出来一个美观的 CRUD 界面。

🔩 配置化

 在 umi@3 中这些插件我们都将会官方提供。

  • Layout
  • 权限
  • 国际化
  • 微服务
  • 主题切换,
  • 极简数据流
  • ....

等插件通过配置来进行使用,关闭和开启都将非常简单。umi@3 的插件体系可以让我们用体验更好的方式来实现这些功能,一些插件我们官方会整合进官方的预设中,一起打包提供出来。

🧬约定化

约定优于配置的优势自然不用多说,Spring Boot 的成功让其思想大行其道,其简化配置的优势让无数程序员脱离了繁杂的配置之苦。

在最佳实践中,我们也将践行这一思想,mockmodelspagesserviceslocales 每个文件夹都进行了约定,用于表示相关的功能,这样可以大大的减少学习成本和配置,让上手成本变得非常之低。我们不需要知其所以然,只需要知道这样就可以跑起来,专注于业务的发展。

🛒 其他的方案

🏆 Feature Request

Most helpful comment

image

All 107 comments

错别字:网络强求 话费 经理╭(╯^╰)╮

期待

期待最佳实践,前端灵魂蜕变。

有具体发布日期么?

同期待中,希望尽快出来

别的不说,文案稍微校对一下,阅读都需要开启人工模糊匹配功能了

土豆泥 notifications@github.com 于2020年3月2日周一 下午4:09写道:

同期待中,希望尽快出来


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ant-design/ant-design-pro/issues/6023?email_source=notifications&email_token=ACAIPJYTYTASUX3SROEOHV3RFNSULA5CNFSM4K4S3FTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENOKB6I#issuecomment-593273081,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACAIPJ2RRZA65CAUBKWQMOTRFNSULANCNFSM4K4S3FTA
.

--
Jerry Tang

Best regards

期待,每天上来看看

日常催更

可以先把 umi@3antd@4 的基本工程框架放出来,后面不断完善到最佳实践。

现在是最佳实践闻着很香。

日常催更,焦急等待release

++++++++1

++++++++1

啥进度了,等待升级

期待啊,现在升级umi3+antd4,umi ui 用不了了,提示 antd4 与block(3.x)不兼容

https://github.com/wetrial/wetrial-template/tree/next
试玩中,用了最佳实践提到的功能
打算是dva只用于全局的状态,其他都通过umi-hooks来做

官方得加快节奏了。隔壁 Vue 3 只剩 2.x 兼容的 todo了,三月底一发布就抢占先机了

点赞+日常催更

点赞

亲,大致什么日期发布呢

官方得加快节奏了。隔壁 Vue 3 只剩 2.x 兼容的 todo了,三月底一发布就抢占先机了

哈哈,这两面向市场不一样吧

等的花儿都谢了。

antd pro 5.0 猜想

antd pro 5.0 猜想

赞同,特别是plugin-model 的实际使用后,比原来的 dva感觉简洁不少

还有plugin-layout

最佳实践会带来那个改变,在升级到antd4和umi3后,还要做一些什么?有计划列表放出让大家一些完成吗?
@chenshuai2144 @afc163

最佳实践会带来那个改变,在升级到antd4和umi3后,还要做一些什么?有计划列表放出让大家一些完成吗?
@chenshuai2144 @afc163

https://github.com/ant-design/ant-design-pro/issues/6183
我猜你问的是这个

@chenshuai2144 “优雅实现在线切换主题”的坑啥时候填?

@chenshuai2144
比较关注最佳实践里umi-model 如何封装统一的loading

每天都来看一下,马上就要月底了,差不多该出来了啊

啥子时候能出来啊,急需拜读大神代码。

感觉这个库更新的不是很频繁啊,没有一点新版本的迹象,是在新仓库开发还没开源么?

稳定做好一个易用的版本,方便定制、示例、文档丰富,比什么都强!
要能意识到pro的不足,你们能理解一个开发经验丰富的人,接触pro后,资料匮乏,遇到问题无从下手的窘境吗?长期这么下去,把版本推到再高,用户难以有效增长,又有什么用呢?

@fengnex 来 PR 帮助我们补充必须的资料和文档吧。https://github.com/ant-design/ant-design-pro-site/

:grin: 偷偷告诉我啥时候正式发布

@fengnex 可以写个issue,告诉一下你需要什么文档

image

别皮 快点了 大家都在等着了

4月了:eyes:

4月了👀

🤣🤣🤣🤣🤣
快了,已经在做了.
-----进度0%-----
👀👀👀👀👀

多点赞比啥都强👍🏻

多点赞比啥都强👍🏻

希望能早点出.支持肯定是支持的.

4月内能出第一版吗?

来了吗?没有。

来了吗?没有。

并没有😂😂

mark

还是挺期待的~

m

ccd

还没来😩😩😩😩😖😖😖😖😟😟😟

等不到最佳实践,已经有同事用于项目了,尝试ts

等不到最佳实践,已经有同事用于项目了,尝试ts

我也是等不及了,就把项目升级到了umi3.x然后全部改成了ts🤪

日常催更🤪

https://github.com/wetrial/wetrial-template 可以先尝尝这个 试玩一下

感恩上帝,V5的分支出来了!

感恩上帝,V5的分支出来了!

😂😂算我一个

感恩上帝,V5的分支出来了!

陈大帅加油😂😂

已经4中旬了

感恩上帝,V5的分支出来了!

陈大帅加油😂😂

终于等到你😂😂,期待

👍

这个最佳实践到底什么时候能出来啊? @chenshuai2144 @afc163

wait。

四月下旬😁

加油

四月下旬😁
image

马上5-1了.
image

月底了,官方也没个准信儿😂

月底了,官方也没个准信儿😂

我看了下官方V5的分支,感觉完成度很低,还没达到我想要的效果😂

v5 中 网络是采用什么方案:
import { request } from 'umi';
还是
import {useRequest} from 'umi';

感觉应该是umi-request

在重构了。删除 dva、国际化,改用 hooks 。
https://github.com/ant-design/pro-blocks/issues/230

在重构了。删除 dva、国际化,改用 hooks 。
ant-design/pro-blocks#230

妈耶,删除了dva,那我岂不是得大改代码了.😂目前就觉得dva最好用.

在重构了。删除 dva、国际化,改用 hooks 。
ant-design/pro-blocks#230

删了捆绑的dva是天大的好消息

在重构了。删除 dva、国际化,改用 hooks 。
ant-design/pro-blocks#230

妈耶,删除了dva,那我岂不是得大改代码了.😂目前就觉得dva最好用.

试一下useRequest+hook,人生真tm轻松

在重构了。删除 dva、国际化,改用 hooks 。
ant-design/pro-blocks#230

妈耶,删除了dva,那我岂不是得大改代码了.😂目前就觉得dva最好用.

试一下useRequest+hook,人生真tm轻松

瞬间感觉代码清爽不少,简洁易懂

v5 中 网络是采用什么方案:
import { request } from 'umi';
还是
import {useRequest} from 'umi';

两都都可以,我用的是import { request } from 'umi';

把最佳实践发布吧,这样长期不理会用户的关切,好像不太好吧。
@chenshuai2144

我决定等你出来再迁移了! 加油

等的时间的确久了点,据说部门要换vue技术栈了。😂

:eyes: :eyes: :eyes: :eyes: :eyes:

两个月过去了。。。。

你好,五月。

去掉umi才是天大的好消息。

请问有具体发布的时间计划吗?感觉等了好久哦

请问有具体发布的时间计划吗?感觉等了好久哦

感觉节后也没希望,可以期待61儿童节😂

喂?120吗?antd pro最佳实践难产了。😂

保大 等v6

------------------ 原始邮件 ------------------
发件人: "Tom Gao"<[email protected]>;
发送时间: 2020年5月5日(星期二) 下午2:25
收件人: "ant-design/ant-design-pro"<[email protected]>;
抄送: "Zhengjin"<[email protected]>; "Comment"<[email protected]>;
主题: Re: [ant-design/ant-design-pro] 前端最佳实践即将到来 (#6023)

喂?120吗?antd pro最佳实践难产了。😂


You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

静待花开

@kaoding 2种都可以啊,一个是传统的api调用,一个是hooks,在项目中可以共存的。

离六一儿童节还有 23 天

离六一儿童节还有 23 天

😂😂

想看看数据流的最佳实践构建

想看看数据流的最佳实践构建

自己用起来顺手,学习成本低,舒服就是最佳实践

日常催更,v5都断更23天了,难道被霸权了吗 😂

Latest commit
2ef7f79
27 minutes ago
看起来V5又活了.

继续等待

六月了,什么进度了

我去结婚了 咕咕了好久,现在大部分已经完成,但是在某些地方还是有瑕疵

帅总新婚快乐

我去结婚了 咕咕了好久,现在大部分已经完成,但是在某些地方还是有瑕疵

期待这个月发版,看pro-list也弄出来了,祝福大佬早生贵子

恭喜恭喜,也希望尽早放出来,瞻仰大佬代码!

我去结婚了 咕咕了好久,现在大部分已经完成,但是在某些地方还是有瑕疵

恭喜 陈帅总 新婚快乐,早生贵子!
大家在催发布,全当闹洞房,呵呵。

我去结婚了 咕咕了好久,现在大部分已经完成,但是在某些地方还是有瑕疵

gongxi恭喜.

达到了发布标准就可以早点发布出来,有瑕疵后面再慢慢修。

close by #6605

close by #6605

来了,来了,陈总带着V5来了.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

2uncle-code picture 2uncle-code  ·  3Comments

ghost picture ghost  ·  3Comments

yaoleiroyal picture yaoleiroyal  ·  3Comments

skyFi picture skyFi  ·  3Comments

gaoqiang19514 picture gaoqiang19514  ·  3Comments