GitHub user liuqiufeng closed a discussion: Discussion on the Replacement of the Console Frontend Framework
# Discussion on the Replacement of the Console Frontend Framework ## 1. Background ### 1.1 Current Issues Currently, some packages referenced by the Console frontend framework have not been updated for a long time, leading to dependencies that cannot be upgraded to the latest versions. This results in frequent security vulnerabilities and other issues. ### 1.2 UI Library Issues The UI library currently referenced by the Console frontend framework has relatively low popularity, incomplete documentation, and is not -friendly for contributors to quickly get started and iterate. ## 2. Purpose ### 2.1 Technology Upgrade To restructure existing functionality using a frontend framework and UI library that are highly popular, well-documented, and have stable update frequencies. ### 2.2 Technology Selection To select a framework that considers the current frontend technical proficiency of contributors. ## 3. Frontend Framework Selection ### 3.1 React Stack [React Official Website](https://react.dev/) #### 3.1.1 Global Popularity React is likely the most popular frontend framework globally. #### 3.1.2 Flexibility React offers high flexibility, but the coding styles of different developers may vary significantly, and different frameworks (e.g., umijs or icejs) may have distinct writing styles. #### 3.1.3 Performance Optimization React sometimes requires developers to consider performance optimization, and different coding styles may lead to noticeable performance differences. #### 3.1.4 Dependencies The dependencies in the React stack are not unified, for example, global state management solutions like dva and redux are available. ### 3.2 Vue Stack [Vue Official Website](https://vuejs.org/) #### 3.2.1 Global Popularity Vue is also highly popular globally, though possibly not as much as React. #### 3.2.2 Coding Style Vue primarily uses template syntax, resulting in smaller coding style differences among developers. However, it is less flexible compared to React. #### 3.2.3 Performance Optimization Vue includes built-in optimization algorithms, so developers generally do not need to focus excessively on performance optimization. #### 3.2.4 Dependencies Vue provides a series of official dependencies for project construction, with relatively unified packages. ### 3.3 Other Frameworks The selection of other frameworks will be discussed separately. ## 4. UI Library Selection (Framework Selection First) The following lists some relatively popular UI libraries for reference. Specific selections should consider international popularity, the number of components, and their ease of use. ### 4.1 React Series - **Ant Design**: [Official Website](https://ant.design/) - **daisyui**: [Official Website](http://daisyui.com/) - **shadcn**: [Official Website](https://ui.shadcn.com/) ### 4.2 Vue Series - **element-ui**: [Official Website](https://element-plus.org/) - **daisyui**: [Official Website](http://daisyui.com/) - **vuetifyjs**: [Official Website](https://vuetifyjs.com/) - **Ant Design Vue**: [Official Website](https://antdv.com) # 关于console前端框架替换的讨论 ## 1. 背景 ### 1.1 当前问题 目前Console前端框架所引用的部分包长久未更新，导致所依赖的包无法升级到最新版本，经常出现安全漏洞等问题。 ### 1.2 UI库问题 目前Console前端框架引用的UI库流行度较小，文档不全面，不便于大家快速上手进行迭代。 ## 2. 目的 ### 2.1 技术升级 使用流行度较高、文档全面、更新频率较为稳定的前端框架及UI库重构现有功能。 ### 2.2 技术选型 考虑目前贡献者的前端技术掌握程度进行选型。 ## 3. 前端框架选型 ### 3.1 React技术栈 [React官网](https://react.dev/) #### 3.1.1 全球流行度 React可能是目前全球最流行的技术栈。 #### 3.1.2 自由度 React的自由度较高，但不同开发者的写法风格可能大不相同，不同框架（如umijs或icejs）的写法也可能存在较大差异。 #### 3.1.3 性能调优 React有时需要开发者自行考虑调优，不同的写法可能导致性能差异较大。 #### 3.1.4 依赖包 React技术栈的依赖包不统一，例如全局状态管理有dva和redux等。 ### 3.2 Vue技术栈 [Vue官网](https://vuejs.org/) #### 3.2.1 全球流行度 Vue目前全球流行度也很高，但可能不及React。 #### 3.2.2 代码风格 Vue大多使用模版语法，不同开发者写的代码风格差异较小，但灵活度不如React。 #### 3.2.3 性能调优 Vue内置了调优算法，开发者一般不需要过多关注调优。 #### 3.2.4 依赖包 Vue官方提供了一系列依赖包用于构建项目，依赖包相对统一。 ### 3.3 其它框架 其它框架的选型另行讨论。 ## 4. UI库选型（先进行框架选型） 以下列举了部分相对流行的UI库，供参考。具体选型应当考虑国际流行度、组件个数、组件便利程度等因素。 ### 4.1 React系列 - **Ant Design**：[官网链接](https://ant.design/) - **daisyui**：[官网链接](http://daisyui.com/) - **shadcn**：[官网链接](https://ui.shadcn.com/) ### 4.2 Vue系列 - **element-ui**：[官网链接](https://element-plus.org/) - **daisyui**：[官网链接](http://daisyui.com/) - **vuetifyjs**：[官网链接](https://vuetifyjs.com/) - **Ant Design Vue**：[官网链接](https://antdv.com) GitHub link: https://github.com/apache/incubator-seata/discussions/7348 ---- This is an automatically sent email for dev@seata.apache.org. To unsubscribe, please send an email to: dev-unsubscr...@seata.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: dev-unsubscr...@seata.apache.org For additional commands, e-mail: dev-h...@seata.apache.org
