5.x hooks or - Discussion

1uokun commented 3 years ago

版本更新说明

由于这个库变成了个人开发者维护了，所以更多的版本更新是来自于issue的反馈，这里也提一下对于issue的提交规范对我们很重要。我们将从issues中整理出一些高频问题进行在线讨论

其中问的比较炸眼👀的问题 《这个项目还维护吗》链接，我们的一致回答是 “这次一定，这次一定维护” 😂

开发说明

“站在巨人的肩膀上”

我们严格遵循ant-design的设计语言，所以非常适合在移动端上的中台类应用服务

过多的props会导致组件“千疮百孔”，间接导致我们疲于开发和维护，样式上我们只开放styles合集对象。想改样式，这可能需要去读源码，比如找到对应的styles name(类似html的class类名)并定义额外样式，内部代码会实现自动merge

比如：

// 使用端
<Tag
  small
  styles={{
    normalText: { color: '#52c41a' },
    normalWrap: { borderColor: '#b7eb8f', backgroundColor: '#f6ffed' },
  }}
  style={{ marginRight: 5 }}>
  NICE
</Tag>

// style name映射列表（./components/tag/style/index.tsx）
export interface TagStyle {
  tag: ViewStyle
  wrap: ViewStyle
  wrapSmall: ViewStyle
  text: TextStyle
  textSmall: TextStyle
  normalWrap: ViewStyle // 上述代码将丰富它的样式
  normalText: TextStyle // 上述代码将丰富它的样式
  activeWrap: ViewStyle
  activeText: TextStyle
  disabledWrap: ViewStyle
  disabledText: TextStyle
  close: ViewStyle
  closeIOS: ViewStyle
  closeAndroid: ViewStyle
  closeText: TextStyle
}

如果你发现这样的样式改动特别多，要么说服UI，要么这个库可能不适合你，我们希望做到“开箱即用”的初衷

把ant-desgin的sketch插件推荐给产品和UI，能节省不少工作量幸运的是还是有很多组件是通用型的，比如List、Toast、Modal等等

React Hook

截止今天许多组件中使用了UNSAFE_xx的生命周期，避免未来react实现异步渲染时可能会造成影响，我们也将在本次重构中弃用并使用Hooks替换之。具体如下：

提供相关组件的Hooks版本
支持严格模式<React.StrictMode>
拥抱 React 17 （wow！~）

最后

欢迎大家在这里分享一下你们的使用案例，给我们一点创作灵感有兴趣的话还可以做一个开箱即用的-pro案例

General
- [ ] Bug fixes
- [ ] Perfect Documentation ...
Refactoring
- [ ] Upgrade related Component to Hooks version
- [ ] Improve documentation ...

BANG88 commented 3 years ago

What kind of react-native ui library do you expect, or what kind of ui do you think is more suitable, feel free to leave your comments to help us in the next development as much as possible to fit the actual needs.

Do you mind using Native Component?
Do you care about performance or appearance?
...?

你期望一个怎样的 react-native ui library？或者说你觉得什么样的ui才是比较适用的，欢迎留下宝贵意见以帮助我们在接下来的开发中尽可能的贴合实际需求。

你介意使用Native Component吗？

你在意的是性能还是外观？

… ?

1uokun commented 3 years ago

Perfect Documentation

通过整理issue list，有一大部分issues是因为文档不完善一定要通过源码阅读才能知道如何使用。我觉得一个适用的ui一定是文档清晰完整的 目前整理了有几个特别需要完善的:

styles props with <WithTheme>（❓是否要在文档中额外说明一下styles或者额外介绍一下WithTheme呢❓）
- Modal样式覆盖 #746
- Pagination样式覆盖 #592
- Badge样式覆盖 #661
- label:Style...
DatePicker #741
Provider #690
...

1uokun commented 3 years ago

Perfect Documentation

通过整理issue list，有一大部分issues是因为文档不完善一定要通过源码阅读才能知道如何使用。我觉得一个适用的ui一定是文档清晰完整的 目前整理了有几个特别需要完善的:

styles props with <WithTheme>（❓是否要在文档中额外说明一下styles或者额外介绍一下WithTheme呢❓）

Modal样式覆盖 #746

Pagination样式覆盖 #592

Badge样式覆盖 #661

label:Style...

DatePicker #741

Provider #690

...

增强功能文档已存在没仔细看到😆

自定义 RN 主题和单个组件样式比如 #1853

BANG88 commented 3 years ago

那个是旧的，很久之前的了。

自定义 RN 主题和单个组件样式比如 #1853

spencer741 commented 3 years ago

I have used antd (react.js) for some time now. It is great because it includes basic components, but also professional looking components that have more applicability to complex UI needs (usually enterprise-level stuff).

ant-design-mobile-rn has the ability to build a great community, matching as many components from antd component framework as possible, and become a very popular react-native library.

Once we get past the React 17 hurdle and standardize things, we can embark on a research project to determine what antd components to reimplement for native and go from there.

Thoughts on the docs: I completely agree with @1uokun. You have to read a lot of the source code to understand them. The other problem I see is that the embedded emulators don't support ios or android. This is a long-standing problem for mobile component framework demos. Most react-native docs just show a gif of component interaction, which could be done here if there are no other solutions. With the standard antd component library, demos are fairly easy since it's made specifically for web. If anybody knows how to implement ios/android in-browser demos for the docs, it would be nice... but the memory overhead would be crazy. My vote is to develop a standard format for gifs (to demo components) and then include the source code in collapsable bins like the main antd website does.

@bang88 I am more than willing to start overhauling the docs, we just need to have more discussion.

1uokun commented 3 years ago

个人愿景

我对ant-design-mobile-rn的理解是ant-design-mobile的RN版本，

现状：结合了nativebase、wix、kitten等RN组件库以及vant等移动端web库之后发现

组件种类不够丰富当然一般根据库的定位来设计组件，重交互还是重数据展示类
外观：组件样式具有陈旧感随着现代设备的像素越来越高，适当提高「像素密度」可以避免陈旧感
移动端组件库市场逐渐被瓜分

优势：它的优势在于继承了ant-design设计语言

我觉得应该扩大这一优势，支持更多组件平移，让ant-designh和ant-design-mobile-rn两者轻松切换

🚩未来定位：

继承ant-design,专心做好移动端上的中后台应用，
更好地支持react-native-web，即逐渐减少Native Component的使用量，web first收益也许会更大些

Future

参考ant-design的组件库，想在未来补充一些组件库：

布局
- [ ] Divider分割线
数据录入
- [ ] AutoComplete自动完成
- [ ] Form 表单
- [ ] Rate 评分
数据展示 
- [ ] Avatar 头像
- [ ] Comment 评论
- [ ] Empty 空状态 
- [ ] AnimatedImage 图片
- [ ] Table 表格
反馈 
- [ ] Skeleton 骨架屏
- [ ] Spin 加载中(原ActivityIndicator)

大致样式

Form

Table

Spin

spencer741 commented 3 years ago

@1uokun Great insight! I 100% agree with your status quo analysis.

Below, I will reference component libraries.

1) ant-design 2) ant-design-mobile 2) ant-design-mobile-rn

A possible plan

Stage 1

My vision for stage 1: I think that both component libraries are relevant. I agree that we should focus on replicating 100% of the ant-design React UI library for ant-design-mobile first. This will give us the opportunity to get designs of all the components hammered out for a browser-rendered mobile-centric scenes.

1) Create a Github project board. 1a) Compile a list of all ant-design components and their APIs. 1b) Compile a list of all ant-design-mobile components and their APIs. 1c) Develop per-component checklists in the Github project that show how many APIs are finished up to the ant-design spec. 1d) For APIs that are not necessary, but a note beside it. Discussion can happen when we get to it.

2) Re-organize ant-design-mobile repo to reflect stubs for the new positioning.

3) Start from the top of the list and work our way down, implementing each ant-design component (and each relevant API) for ant-design-mobile.

Stage 2 (optional)

Once we are done with Stage 1, I don't see why ant-design-mobile can't merge with ant-design.

To take the ant-design calendar, for example... once merged, we could provide props for controlled or uncontrolled rendering of the mapped ant-design-mobile component. This would be very nice.


import { useState } from 'react';

import { Calendar } from 'antd';

function onPanelChange(value, mode) {
  console.log(value.format('YYYY-MM-DD'), mode);
}

function Test(props)
{
   const [isMobile, setIsMobile] = useState();

   const resize = () => {
      if (window.innerWidth < 375) {
        setIsMobile(true);
      } else {
        setIsMobile(false);
      }
    };

    useEffect(() => {
        resize();
        window.addEventListener("resize", resize);
      }, [isMobile]);

    return (
        <Calendar 
                onPanelChange={onPanelChange}
                optimizedMobileView={isMobile}
                autoChangeToMobile={false}
         />
    );
}

Stage 3

Do the same process for ant-design-mobile-rn, replicating ant-design for react-native.

Getting Started

@1uokun I can create and manage the project board and other project management and maintain 100% of the documentation, helping out with components when I can. Those rough styles you have are a great start.

Ready to get to work re-igniting the ant-design-mobile community.

BANG88 commented 3 years ago

But I think ant-design-mobile is dead.

spencer741 commented 3 years ago

Yeah, I mean, we could just go full fledged into developing 1:1 components from ant-design to ant-design-mobile-rn

There is really a need for ant design level enterprise components in the react native world.

@1uokun I personally have never had a use case for ant-design-mobile , so I can't speak to how popular it is or anything.

I'm for either road as long as ant-design-mobile-rn gets supported in the end, I think that's where most people would use it. Doesn't seem like there is a huge demand for mobile web components, but I could be wrong.

1uokun commented 3 years ago

But I think ant-design-mobile is dead.

死就死了，至少ant-design-mobile-rn还有一丝活力，只要我们还在，利用&-rn+react-native-web组合盘活antd在移动端的荣光 @spencer741 High five✋, let's do it

spencer741 commented 3 years ago

@1uokun Are you saying to discontinue antd-design-mobile and put our efforts into revitalizing ant-design-mobile-rn while also making ant-design-mobile-rn compatible over react-native-web?

Just making sure I understand correctly... Chinese -> English translation can be difficult sometimes.

1uokun commented 3 years ago

@1uokun Are you saying to discontinue antd-design-mobile and put our efforts into revitalizing ant-design-mobile-rn while also making ant-design-mobile-rn compatible over react-native-web?

Just making sure I understand correctly... Chinese -> English translation can be difficult sometimes.

Your understanding is right👍 Make ant-design-mobile-rn more and more like ant-design(advantage & vision)， ant-design-mobile is not in the discussion of this issue and ignore it.

spencer741 commented 3 years ago

@1uokun

Awesome! 😎

Give me a couple of days. I will work out a project plan. What's the easiest way for us to communicate?

1uokun commented 3 years ago

@spencer741

email: luokun199503@gmail.com wechat: lk10037 or just github

spencer741 commented 3 years ago

@1uokun I have had a busy end of the week. Will get to you tomorrow about the project plan. 🙌

LZXYF commented 3 years ago

Thank you for sharing, it has brought me a lot of convenience and will always support you.

ant-design / ant-design-mobile-rn