Ant-design-pro: V4 Next Big Version

[yutingzhao1991]

For make Ant Design Pro more flexible, we plan to start the 4th version (Why not 3, because of @chenshuai2144 don't like it).
In the long-term maintenance, we found that the biggest problem with pro is that it is not pluggable. Next, our focus will make him more flexible.

• [x] transform pages to blocks so that you can add or delete a page easier, https://github.com/ant-design/ant-design-pro/issues/2809
• [x] make i18n selectable
• [ ] dark theme
• [x] More custom settings
• [x] better components
• [x] TypeScript https://github.com/ant-design/ant-design-pro/pull/3702
• [x] cli tool https://github.com/ant-design/ant-design-pro-cli/issues/20

More TodoLIst:

• [x] init v4 branch https://github.com/ant-design/ant-design-pro/issues/3357
• [x] sync master commit to v4
  
  
  
  • [x] revert: simplify antd-pro's boilerplate
  
  
  • [x] revert: remove SettingDrawer
  
  
  • [x] more
  
  

[yesmeck]

TypeScript!

[zwl1619]

帅，就是任性

[crashsol]

type script太重要了，大大的支持

[panw3i]

麻烦多写点注释,弱类型真的很难猜

[sorrycc]

typescript 还是不要了吧，用 antd-pro 必须先学 typescript 对很多初学者成本会比较高。

[crashsol]

不会吧，现在typescript不是都是前段开发标配了么，并且上手难度也不高啊，收益大于弊

[yesmeck]

用 TypeScript 可以编译到 ES6，新手可以用 ES6 的版本。

[sorrycc]

@yesmeck 编译出的 es6 可读性如何？
@crashsol 有很多非专业前端的用户的。

[crashsol]

其实我也不是专业前端，主要还是写后端，强类型的使用，能让后端的人更好的适应，前段时间使用NG-ZOORO，感觉就舒服，配合swagger生成的HTTP代理和DTO类，注释，节省很多事情。毕竟现在都推荐使用TS，希望大佬考虑一下呢 @sorrycc

[yesmeck]

编译到 ES6 基本上只是把类型去掉而已，其他不会有什么变化。

[yutingzhao1991]

看上去如果能够编译到 ES6 的话似乎不错，这样就大家都有得选了。

[yutingzhao1991]

再补充一个 init-cli 的功能，开发者应该用这个 cli 来初始化 pro 的项目，而不是直接使用 github 上的源代码，该工具应该做如下的事情：

• 选择是否要去掉 firebaserc 这些 pro 官方的部署相关代码
• 选择需要初始化添加的区块（页面）
• 选择是否需要国际化
• 选择是使用 ts 还是 es6

[redclown]

请问这个大概需要多长时间推正式版，正打算用pro~

[chenshuai2144]

你可以直接使用的

[sorrycc]

when.ts

import {
    $mobx,
    IReactionDisposer,
    Lambda,
    autorun,
    createAction,
    fail,
    getNextId
} from "../internal"

export interface IWhenOptions {
    name?: string
    timeout?: number
    onError?: (error: any) => void
}

export function when(
    predicate: () => boolean,
    opts?: IWhenOptions
): Promise<void> & { cancel(): void }
export function when(
    predicate: () => boolean,
    effect: Lambda,
    opts?: IWhenOptions
): IReactionDisposer
export function when(predicate: any, arg1?: any, arg2?: any): any {
    if (arguments.length === 1 || (arg1 && typeof arg1 === "object"))
        return whenPromise(predicate, arg1)
    return _when(predicate, arg1, arg2 || {})
}

function _when(predicate: () => boolean, effect: Lambda, opts: IWhenOptions): IReactionDisposer {
    let timeoutHandle: any
    if (typeof opts.timeout === "number") {
        timeoutHandle = setTimeout(() => {
            if (!disposer[$mobx].isDisposed) {
                disposer()
                const error = new Error("WHEN_TIMEOUT")
                if (opts.onError) opts.onError(error)
                else throw error
            }
        }, opts.timeout)
    }

    opts.name = opts.name || "When@" + getNextId()
    const effectAction = createAction(opts.name + "-effect", effect as Function)
    const disposer = autorun(r => {
        if (predicate()) {
            r.dispose()
            if (timeoutHandle) clearTimeout(timeoutHandle)
            effectAction()
        }
    }, opts)
    return disposer
}

function whenPromise(
    predicate: () => boolean,
    opts?: IWhenOptions
): Promise<void> & { cancel(): void } {
    if (process.env.NODE_ENV !== "production" && opts && opts.onError)
        return fail(`the options 'onError' and 'promise' cannot be combined`)
    let cancel
    const res = new Promise((resolve, reject) => {
        let disposer = _when(predicate, resolve, { ...opts, onError: reject })
        cancel = () => {
            disposer()
            reject("WHEN_CANCELLED")
        }
    })
    ;(res as any).cancel = cancel
    return res as any
}

when.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const internal_1 = require("../internal");
function when(predicate, arg1, arg2) {
    if (arguments.length === 1 || (arg1 && typeof arg1 === "object"))
        return whenPromise(predicate, arg1);
    return _when(predicate, arg1, arg2 || {});
}
exports.when = when;
function _when(predicate, effect, opts) {
    let timeoutHandle;
    if (typeof opts.timeout === "number") {
        timeoutHandle = setTimeout(() => {
            if (!disposer[internal_1.$mobx].isDisposed) {
                disposer();
                const error = new Error("WHEN_TIMEOUT");
                if (opts.onError)
                    opts.onError(error);
                else
                    throw error;
            }
        }, opts.timeout);
    }
    opts.name = opts.name || "When@" + internal_1.getNextId();
    const effectAction = internal_1.createAction(opts.name + "-effect", effect);
    const disposer = internal_1.autorun(r => {
        if (predicate()) {
            r.dispose();
            if (timeoutHandle)
                clearTimeout(timeoutHandle);
            effectAction();
        }
    }, opts);
    return disposer;
}
function whenPromise(predicate, opts) {
    if (process.env.NODE_ENV !== "production" && opts && opts.onError)
        return internal_1.fail(`the options 'onError' and 'promise' cannot be combined`);
    let cancel;
    const res = new Promise((resolve, reject) => {
        let disposer = _when(predicate, resolve, Object.assign({}, opts, { onError: reject }));
        cancel = () => {
            disposer();
            reject("WHEN_CANCELLED");
        };
    });
    res.cancel = cancel;
    return res;
}

看了下编译后的代码，虽然可读，但看起来还是有很明显的编译痕迹。

[redclown]

自己想用哪些功能自己配置，这个很帅，赞赞赞~

[yesmeck]

你这是编译到 es5 了吧，到 es6 是这样的：

import { $mobx, autorun, createAction, fail, getNextId } from '../internal';
export function when(predicate, arg1, arg2) {
  if (arguments.length === 1 || (arg1 && typeof arg1 === 'object'))
    return whenPromise(predicate, arg1);
  return _when(predicate, arg1, arg2 || {});
}
function _when(predicate, effect, opts) {
  let timeoutHandle;
  if (typeof opts.timeout === 'number') {
    timeoutHandle = setTimeout(() => {
      if (!disposer[$mobx].isDisposed) {
        disposer();
        const error = new Error('WHEN_TIMEOUT');
        if (opts.onError) opts.onError(error);
        else throw error;
      }
    }, opts.timeout);
  }
  opts.name = opts.name || 'When@' + getNextId();
  const effectAction = createAction(opts.name + '-effect', effect);
  const disposer = autorun(r => {
    if (predicate()) {
      r.dispose();
      if (timeoutHandle) clearTimeout(timeoutHandle);
      effectAction();
    }
  }, opts);
  return disposer;
}
function whenPromise(predicate, opts) {
  if (process.env.NODE_ENV !== 'production' && opts && opts.onError)
    return fail(`the options 'onError' and 'promise' cannot be combined`);
  let cancel;
  const res = new Promise((resolve, reject) => {
    let disposer = _when(predicate, resolve, { ...opts, onError: reject });
    cancel = () => {
      disposer();
      reject('WHEN_CANCELLED');
    };
  });
  res.cancel = cancel;
  return res;
}

[sorrycc]

有没有配置项可以保留空行？

[yesmeck]

没有配置，但是有 workaround https://github.com/Microsoft/TypeScript/issues/843

[chenshuai2144]

编译完之后 prettier 一下，格式就会变得和 ts 的一样

[yutingzhao1991]

@redclown v4 的分支预计这周就会拉，会基于 https://github.com/umijs/ant-design-pro 这个，但是 v4 正式发应该要春节前后了，还要一段时间。

[zombieJ]

编译完之后 prettier 一下，格式就会变得和 ts 的一样

试了下，还挺不错的：

$ prettier dist/components/Hello.jsx
import * as React from "react";
export const Hello = props => (
  <h1>
    Hello from {props.compiler} and {props.framework}!
  </h1>
);
//# sourceMappingURL=Hello.jsx.map

[zombieJ]

如果 cli ready，我觉得可以试试

[ylzon]

能扩展cli可以配置插件、配置功能、主题然后自动生成一个干净的项目就好了，省了很多修改和删除的功夫才能开始一个新项目，期待v4

[tomgao365]

持续关注中，TypeScript 是一个好的选择

[sorrycc]

有没有配置项可以保留空行？

试过 @babel 的 generator 是可以保留空行的，理论上 typescript 也可以。

[CaoMengLong]

typescript 还是不要了吧，用 antd-pro 必须先学 typescript 对很多初学者成本会比较高。

强烈支持typescript， typescript很简单，学习成本几个小时即可。
期待TypeScript Angular 版本~

[rendongsc]

还是es6稳妥些！

[wangxingkang]

typescript +1

[clock157]

javascript 教⛩ -> typescript 教⛪️ 转化中...56% 🙏

[yutingzhao1991]

V4 正式发布还需要一段时间，当前想要使用 ant-design-pro 区块的可以参考文档 https://www.yuque.com/ant-design/ant-design-pro/lmgc46

[Ivocin]

可插拔真的是特别需要的特性

[hipstersmoothie]

Would also be awesome if all the components were included in the NPM package.

[xiaoxiangmoe]

@sorrycc @yesmeck @yutingzhao1991 如果对于 TypeScript 存在争议，我觉得我们可以提供一个完整版本的作为 sample，不管 ES 的还是 TS 的都行，并且提供 ES 和 TS 两个版本的最简版本。
因为目标是 pluggable，也就是所有组件都是 pluggable 的。用户只把它当组件库用就好，不需要在意组件库的语言。

毕竟 create-react-app 初始化项目 支持 JavaScript 版本和 TypeScript 版本，ant-design-pro 可以把自己定位为「更复杂的 create-react-app」 + 「npm 上的通用组件库」。

[a854363956]

@yesmeck 编译出的 es6 可读性如何？
@crashsol 有很多非专业前端的用户的。

话说这个框架本身就是专业的前段框架,如果用户不够专业那么就学习啊..

[a854363956]

@sorrycc @yesmeck @yutingzhao1991 如果对于 TypeScript 存在争议，我觉得我们可以提供一个完整版本的作为 sample，不管 ES 的还是 TS 的都行，并且提供 ES 和 TS 两个版本的最简版本。
因为目标是 pluggable，也就是所有组件都是 pluggable 的。用户只把它当组件库用就好，不需要在意组件库的语言。

毕竟 create-react-app 初始化项目 支持 JavaScript 版本和 TypeScript 版本，ant-design-pro 可以把自己定位为「更复杂的 create-react-app」 + 「npm 上的通用组件库」。

没必要,强制使用TypeScript 就好了

[redclown]

V4 正式发布还需要一段时间，当前想要使用 ant-design-pro 区块的可以参考文档 https://www.yuque.com/ant-design/ant-design-pro/lmgc46

请问V4有没有计划把国际化去掉，感觉这个好多人用不到吧，个人观点~

[yutingzhao1991]

请问 V4 有没有计划把国际化去掉，感觉这个好多人用不到吧，个人观点~

V4 会尝试做成可灵活选择的。

[xiaoxiangmoe]

我想要的功能如下：

• React Hooks
• GraphQL
• TypeScript
• CSS in JS 方案与主题管理的结合，例如： https://github.com/mui-org/material-ui/tree/master/packages/material-ui-styles
• 一个更合适的登录功能的 mock，我觉得 OAuth 2 的 Resource Owner Password Credentials Grant 来 mock 一下挺合适的，毕竟这是 OAuth 2 里需要用户参与的最简单的授权模式。我已经试着撸了一版最简单的 mock server。https://xiaoxiangmoe.github.io/talk--mock-authorization-server/#17

[Free-Qi]

请问V4版本大概什么时候出，我们最近要启动一个新项目，看看是否直接用V4版本

[chenshuai2144]

v4 最快也要在4月份

[yoyo837]

个人可以强制使用TypeScript，当然，可选比强制更佳，总的意思就是强制也很接受。不管是新人还是老鸟，TypeScript都是逃避不了的。

本打算升2.x 的，要不等这V4 Next Big Version吧

[iammathew]

Due to non existent chinese skills. Is there any estimation when it will be ready?

[xiexingen]

支持使用ts写组件 然后页面可以用js写

[roc916]

TypeScript+1 持续关注中!

[dkvirus]

@yutingzhao1991

transform pages to blocks so that you can add or delete a page easier

页面插件化使用 umi-blocks 不够灵活。

弊端：使用 blocks 下载了 ant-pro 一个页面，过一段时间，原始页面又添加了一个不错的新功能，如何升级？？删了重来？？umi-blocks 我理解更多的是创建页面原型，简单点说就是复制模板文件。

实际业务：基础模块经过沉淀功能基本固定，像用户管理、机构管理这些菜单，没人愿意重新开发。在同时维护多个后管系统时，更关注的是如果底层页面有更新，如何平滑过渡。假设使用 umi-blocks 做页面插件化，当底层页面有变化时，上层每个系统都需要手动修改代码，这很人崩溃。

建议：整成页面模块化是必定的，可以考虑将基础页面打成 npm 包，如果页面有更新，只要升级下依赖包就可以了。

[yutingzhao1991]

@dkvirus 页面不存在升级这一说，现在的模式也一样，不管是区块还是现在的 pro 的代码放到你自己的项目中之后维护就交由项目自身处理了，后续由于业务需求上可能产生的修改会导致无法持续同步 pro 的代码更新的。你说的 可以考虑将基础页面打成 npm 包 我理解应该是把一些页面中公共的部分抽取出来作为组件，而不是把页面整个作为 npm 包，那也就无法修改了。抽取组件这个现在也正在做，实际上区块中使用了 ant-design-pro 这个包，是可以直接升级的。

[ibmsoft]

在没有使用区块之前，我是把能复用的页面弄成模板，然后通过 yeoman 的 generator 来拷贝（具体拷贝到哪个目录也是根据项目目录的约定来搞）

[ztplz]

如果用ts的话，里面别到处any了。基于类型推导的，中间有一环放了any，后面就全是any了，这对于debug很不友好。ts也不是只有类型，其实你可以当kotlin一样写。

[laozhu]

request 能封装下 web socket 类型请求吗，这样可以规整的在 services 里面写。

[laozhu]

@sorrycc 用 babel + @babel/preset-typescript 代替 tsc 编译呢，会不会可读性好些？据说 babel 只是移除了 ts 里的类型定义。

[jerryyan1990]

只希望文档能够跟上！正在学习TS的我希望能跟上大佬们的步伐！TS+1

[vellengs]

2019 TS 群体继续扩大，对ts 友好很迫切的。

[vellengs]

这段时间在ts 模式下使用独立模块引入，还是有不少问题的；提交了一个合并的request, 但是看了下master 分支下新的组件默认也还没有 *.d.ts 的声明文件， 如果导出的模块原始文件采用ts写的话（发布默认就带类型声明，维护度是最好的）。
@chenshuai2144 顺便问下 npm 的模块包发布没看到生成 lib 的脚本，不知道是如何做的（目前发布进度跟不上需要，自己弄个包都要手动来更新同步挺麻烦的）。

[yoyo837]

v1准备升级v2, 有必要等待v4一气呵成吗？

[xiaohuoni]

@yoyo837 v1升级v2改动比较明显，v2升级v4对于就项目来说，感觉改动不大，v4对新建项目和新开发友好

[zhangjie2012]

Pro 的用户大多应该都是「非专业前端」，应用场景应该侧重于中后台系统。专业前端 + 面向 C 端的产品，公司内部一般都有自己的框架。

所以，个人感觉 Pro 相比新版本更新更重要的是给一个更为明确的「定位」（从 0.x ~ 1.x ~ 2.x -> 4.x 定位越来越模糊），Pro 真的有必要向 create-react-app 靠拢吗？就好像 2.x 的国际化功能，有没统计过有多少人用呢？解决了问题还是带来了问题。

我个人使用 Pro 第一步永远是删代码，删到最后就是一个空壳子（ Layout + Router + Menu），Menu 有时候还会重写一下，这个过程很费劲（1.x => 2.x 改动很大）。

[afc163]

Pro 的用户大多应该都是「非专业前端」，应用场景应该侧重于中后台系统。

这个是对的，也是 Pro 长期会坚持的定位。

就好像 2.x 的国际化功能，有没统计过有多少人用呢？

@zhangjie2012 国际化目前在我们内部是很重要的特性，很多产品都需要这个功能。只是目前没有找到一种很好的方式一键切换到不需要国际化的项目。

[afc163]

Pro 真的有必要向 create-react-app 靠拢吗？

Pro 从来不是 create-react-app，符合这个定位的产品是 umi。

[yoyo837]

没有谁的项目使用pro百分百契合吧，弄下来都会改改，不用的该删删，没有的该补补。

[xiaohuoni]

@zhangjie2012 这个问题大家都在考虑，实际用户中的真实需求都可以提出来。v4的其中一点 要做的就是完成个人使用的第一步。删代码。

[vellengs]

删代码的事情，组件抽取到库不是就分离很多不必要多维护干扰么，如果要绝对干净，参考着复制代码不行吗？，如果只是要
（ Layout + Router + Menu）干嘛需要持续维护的项目呢，自己fork 一个删减了留着用不行？ 【非专业前端】不是压缩这种必要特性和规范多借口。

[zhangjie2012]

@afc163 @xiaohuoni

感谢回复，我是这种类型的用户，供你们参考一下：

非专业前端，主要工作是后端开发，对前端丝毫不感兴趣。

迫于工作需要，零零散散写了很多年的前端（六七年了），对 JS/HTML/CSS/LESS 比较熟悉，以前用的是 Bootstrap/JQuery，后来用 React，熟悉 React，但是不想把精力花在折腾 React 全家桶上，就想用 Pro 这样的开箱即用的框架，不用了解路由什么的，看看 antd 和 umi 文档就可以上手做事情了。

@yoyo837 不是要求百分之百契合，而是 Pro 的样例实在太多了···还有切换主题这种，需要吗···

@vellengs fork 留着用是可以的，但是版本升级之后的底层东西我想用啊。比如 1.x -> 2.x 之后的 umi 是比之前好用啊。

[xiaohuoni]

@zhangjie2012 你看看https://github.com/xiaohuoni/ant-design-kit/issues/18 这里假设的V3，是不是比较符合你的想法。这么说吧，下下来之后，直接删除page文件夹，其他都能用。

[zhangjie2012]

@xiaohuoni

差不多是这个意思。其实权限、国际化这种熟悉一下还好，我期望的是，下下来直接就可以开始写业务代码了。

pages 里面的范例大多时候是不需要的，我现在的工作的时候如果有些不知道怎么写，又懒得学，是会上 github repo 上看范例。但是我以为这些应该是文档的任务。

[vellengs]

对于 typescript 支持的想法，考虑到目前项目是支持ts，js 混写了，但是 components 里的都是js 文件（分离到独立到模块包后， *.d.ts 维护度太差，目前无法保持和js 文件的准确对应关系， 长此以往独立包也就用不好），如果不能支持整个项目ts开发，建议至少 components是 ts 的维护的。

[xiaohuoni]

@zhangjie2012 我认为作为代码实践和代码规范也是pro很重要的一个功能点。你说的没错，如果拿来随便写写，能完成业务需求，确实对于后端或者对前端不感兴趣的开发者来说，是比较友好。但是对于像我这样的纯前端，还是希望pro完全按照前端工程化思想和设计规范。

[xiaohuoni]

@vellengs v4会上typescript，暂定的可能的方案.

到时候应该区块也默认用 ts 写，然后会有一个自动同步的 js 的分支或者仓库，添加区块的时候可以自己选择用哪个区块

[afc163]

pages 里面的范例大多时候是不需要的

这些范例是 Pro 的重要部分，主要是给中后台开发一些代码化的设计资产和设计参考，让那些没有设计师的产品也能做出水准上的设计品质。

[afc163]

切换主题是非常重要的特性，否则后台产品样式千篇一律，估计不会有人爱用。

[zhangjie2012]

不能苟同~

1. 抛开有没有设计师一说，如果是作为设计参考的范例，完全可以独立成一个 example 的项目。而且「是否有设计水准」应该是 antd 考虑的事，并不是 Pro，Pro 只是一个脚手架啊，_看回复似乎你们每个人自己对 pro 的定位不太一样啊~_
2. 切换主题，跟产品样式千篇一律没啥关系啊··· 黑白切换一下，菜单栏放到侧边还是顶部就有很大的不一样了吗···爱用不爱用一个产品也不是由框架决定的啊，又不是 QQ 空间···

[afc163]

Ant Design Pro 是提供了中后台典型页面设计模板的中后台脚手架。

切换主题是脚手架标配功能，可以去 https://themeforest.net/ 看一下。需要注意的是，我们提供的不是在线动态切换主题功能，而是脚手架可选主题。

[vellengs]

不能苟同~

1. 抛开有没有设计师一说，如果是作为设计参考的范例，完全可以独立成一个 example 的项目。而且「是否有设计水准」应该是 antd 考虑的事，并不是 Pro，Pro 只是一个脚手架啊，_看回复似乎你们每个人自己对 pro 的定位不太一样啊~_
2. 切换主题，跟产品样式千篇一律没啥关系啊··· 黑白切换一下，菜单栏放到侧边还是顶部就有很大的不一样了吗···爱用不爱用一个产品也不是由框架决定的啊，又不是 QQ 空间···

1. 每个自己都有个 Pro，实际上挺成立的，前端UI 本来需求就很个性化， Pro 应该是技术层和实现之间的一个衔接。
2. Pro 的主题切换应该是不仅仅限于现成的主题切换吧（个人理解）， 应该是为主题定制提供更好的扩展能力，否则为什么不是去 themeforest 买一个主题呢？如果是更好的情况应该是，支持给主题开发者更方便的制作出主题。

[zhangjie2012]

不能苟同~

1. 抛开有没有设计师一说，如果是作为设计参考的范例，完全可以独立成一个 example 的项目。而且「是否有设计水准」应该是 antd 考虑的事，并不是 Pro，Pro 只是一个脚手架啊，_看回复似乎你们每个人自己对 pro 的定位不太一样啊~_
2. 切换主题，跟产品样式千篇一律没啥关系啊··· 黑白切换一下，菜单栏放到侧边还是顶部就有很大的不一样了吗···爱用不爱用一个产品也不是由框架决定的啊，又不是 QQ 空间···

1. 每个自己都有个 Pro，实际上挺成立的，前端UI 本来需求就很个性化， Pro 应该是技术层和实现之间的一个衔接。
2. Pro 的主题切换应该是不仅仅限于现成的主题切换吧（个人理解）， 应该是为主题定制提供更好的扩展能力，否则为什么不是去 themeforest 买一个主题呢？如果是更好的情况应该是，支持给主题开发者更方便的制作出主题。

1. 我说的重点似乎是 antd 应该负责「设计水准」，Pro 负责组织代码··· 跟前端 UI 个性化有啥关系，怎么理解 技术层 和 实现 之间的衔接呢 ···
2. 是否支持主题，只是看对 Pro 的定位而已，按照 @afc163 所说「Ant Design Pro 是提供了中后台典型页面设计模板的中后台脚手架」，加上也没什么毛病。 只是我觉得你们把主题过分看重了，写一个/设计一个主题出来并不是特别难的事情。因为 Pro 对应的是中后台的系统，跟 Wordpress 的定位不太一样。

[ifzm]

期待 Follow ...

[xiaopanghhh]

请问一下，基于TypeScript的V4有了发布计划了吗？

[qivhou]

发现了pro-blocks的repo，之前忘了在哪个issue里看到antd-pro要专注做block，不知道目前的block定位、粒度如何，是否有roadmap？

在项目选型过程中同时考察了ice和antd-pro，感觉从设计语言、antd本身的组件库以及antd-pro提供的完整脚手架这几点，从代码（技术）层面上antd-pro更适合目前的需求。

但是有一个别扭的点是从目前ice的block以及领域模板来看，的确是省去了很多设计的工作，个人感觉ice-works更适合产品经理构建原型、串联需求等非coding工作。所以把ice-works作为pre-coding work感觉更合适，但是这个中间就会存在一个断层，如果整体选择antd-pro作为脚手架，那就需要将目前ice的领域模板或者block用antd或者antd-pro的component进行重写一遍，或者在ice中使用antd-pro定制一个template脚手架。目前没有考虑好如何才能更好的将ice和antd/antd-pro进行搭配使用，是否有建议？

不知道antd/antd-pro团队是否在block甚至基于antd的领域模板上有交流、配合，以及下一步的计划？如果需要构建领域模板的话，感觉社区应该还是有很大贡献力量的，至少个人愿意贡献。

[ypli0629]

期待 dark theme

[tomgao365]

正式版要是支持多种主题就好了。css in js 貌似可以实现

[poyiding]

大部分Pro的用户应该是使用它当项目的架子，配置简单灵活，UI设计好看，这块做好才是重点，区块或者页面其实都是用户自己开发完成。现在的Pro太重了，很多功能只是参考作用，比如权限控制，只能控制用户维度，它不能控制到角色和功能点维度；再比如国际化，需要国际话的用户应该是少数，所以只要提供一个国际化方案就行，而不是默认支持国际化。
至于ts，它很好，大部分用户应该还是没有用它在项目中，应该还是以es6为主，需要ts的同学应该单独有个仓库来支持。从关闭的issue来看，很多比较初级的问题或者用户应该自己能解决的问题都抛出了，说明有很多初级的用户，给你们维护者也增加负担。所以个人觉得应该做这个项目应该是要往精的方向发展，break change 少一点，大家都尽力支持一点。

[soonnyt]

我看历史讨论中，没有从我的利益角度出发的我就写了

用于策反，设计师 -> 产品/项目经理（从“设计选择”到“项目快速构建”）

---

简单的用户故事：

对于我们吃瓜群众来说，Antd生态的开源代码就是知识消费的产品。

第一个问题：为什么star Antd
回答1:
因为星多就加入了（这个不是我想要表达的重点）
回答2:
1.组件全网最全（隔壁angulr2 Vue的都来偷艺）
2.性能一直在优化（人多力量大，ant团队给力，贡献热血积极）
3.好看符合设计原则（一大堆的交互设计精髓，作为 交互设计师 懒得再写一遍设计标准手册，而且还有现成的和组件配套的设计文件外挂，不用再标记切图，懂的设计师都推荐给PM和PM）
4.其实帮设计师解决的是“终于能跟程序员少交流设计和版式布局问题了”
5.帮PM下定决心的是“这么整- 速度快啊，功能点全好构建，质量好，先进啊，再也不用跟前端因为下拉框问题强调体验细节的重要性了，我选择一个就行了。“

第二个问题：为什么star Antd Pro
回答1:
因为星了Antd再看看Antd Pro是什么就收藏下（这个也不是我想要表达的重点）
回答2:
1.好多个功能页面+布局实现啊，我都不用设计了，说明文档中还说布局都能调整，甩锅给前端简直完美（我在思想中甩给了我的左脑）！
2.终于有时间完善汇报的ppt了。

---

我的思考：

1.不知道有多少像我一样因为Antd Pro 开始学习React的设计师，在我的角度看来，Antd pro 的发展，其实源于一直被程序员们缩写的“d“——design。
2.Ant团队的design，帮我们实现了快构建、快沟通和美，不用再因为技术细节实现耽误迫在眉睫的功能实现。
3.还有个Antd pro 现成的工程样例，展示页面的功能。快速和标准化解决，后台功能场景和需求实现之坑。（打动设计和PM的难道不是Pro首页的那几个chart？）

---

建议：

1.用Antd pro 首页的描述“开箱即用的中台前端/设计解决方案”来说明。

“开箱即用”应该是技术保障，“解决方案”才是产品核心体验。

说句戳心窝的话，项目用什么不会因为程序员爽而用（脚手架好什么的...），Antd pro作为“中台前端/设计”的解决方案应该能成为策反设计和PM的工具。

2.用什么策反？
代码的灵活性——能快速的符合需求的更改，只是程序员之间的相互救赎。
质量和稳定性——如果没有测试兄弟帮你背锅，对不起我们不是TDD团队。

他们只会和你说体验！那么Antd pro提供的更多的pages代表着更多的体验场景，实现了的适配版式减少沟通成本。在我看来 antd 做到是组件的供应，作为antd的下游antd pro 做的就是pages（更多的体验场景）的供应。

3.希望 Antd pro 推出的功能，都能在体验上挖的足够深，别让程序员在后程有大坑，增加开发体验深度。

4.我想大多的star 都是像我这样半吊子的吃瓜群众。技术构架上的问题，灵活上的思考有ant团队的大牛解决，完善和深挖使用需求，有热情的社区贡献者。

---

希望Ant Design Pro 能识别自己的强项，和旗舰功能。

[TianenPang]

建议：可初始化一个BasicLayout空项目，需要的组件可自行选装。对于新手来说上手会更快！

[evanyangg]

有个想法，是否可以把楼上所说的BasicLayout空项目 写成一个组件，这样我用antd开发的时候可以直接引入，也可以通过yarn add 到项目中。这样有需要的人，引入这个组件就可以了。

[tomgao365]

@evanyangg ant-design/ant-design-pro-layout
貌似已经有了

[TianenPang]

@evanyangg ant-design / ant-design-pro-layout
貌似已经有了

这个空模板我看过和现在ADP的项目结构都不一样，建议可直接创建一个由登录，注册，BasicLayout等最基本组件的项目。

[xiaopanghhh]

v4 发布了以后就是这样的一个版本，所有的原来的界面都改变为了 pro-blocks 。 只是现在 V4 还没有具休的发布时间节点。

[CaiJingLong]

@xiaopanghhh 没有具体的发布时间,那么可以问下v4分支的可用度到哪里了吗

[xiaopanghhh]

@xiaopanghhh 没有具体的发布时间,那么可以问下v4分支的可用度到哪里了吗

我也想知道具休的发布时间节点。这个只能问问项目相关人员了。

[pkaq]

typescript 还是不要了吧，用 antd-pro 必须先学 typescript 对很多初学者成本会比较高。

学不动了

[boylych]

npm run fetch:blocks 根本不能执行啊，
yarn create umi后创建的默认脚手架内不含scripts目录

想构建一个完整demo，怎么办？

[afc163]

我试了一下是有的。

[pkaq]

大部分Pro的用户应该是使用它当项目的架子，配置简单灵活，UI设计好看，这块做好才是重点，区块或者页面其实都是用户自己开发完成。现在的Pro太重了，很多功能只是参考作用，比如权限控制，只能控制用户维度，它不能控制到角色和功能点维度；再比如国际化，需要国际话的用户应该是少数，所以只要提供一个国际化方案就行，而不是默认支持国际化。
至于ts，它很好，大部分用户应该还是没有用它在项目中，应该还是以es6为主，需要ts的同学应该单独有个仓库来支持。从关闭的issue来看，很多比较初级的问题或者用户应该自己能解决的问题都抛出了，说明有很多初级的用户，给你们维护者也增加负担。所以个人觉得应该做这个项目应该是要往精的方向发展，break change 少一点，大家都尽力支持一点。

这个确实，比如菜单后台获取这种提了无数issue的问题官方坚持了很久不拿到mock里， 而ts上的更是神来之笔，根据issue来看有很多javaer学es6都已经秃了