开源精选:AntdFront —— React 纯 Hook 多标签微前端管理系统解决方案

AntdFront


项目动机

使用 React 开发管理系统前端, 选择 Ant Design of React(antd)做 UI 十分常见,然而与其相关的开源项目普遍存在以下问题:

  • 大多使用 antd3,使用 antd4 的项目很多还在用 umi2
  • 大多处于 class 组件的时代,有的部分使用了 Hook ,权限管理粒度又到不了按钮级
  • umi 3 并没有完成数据流的迁移 ,仍然使用 dva,与 Hook 特性配合的并不自然

为解决这些问题,我的同事,一个在前端领域深耕十数年,对技术趋势及各类框架核心思想有着精准把握,长期追求技术优雅与代码简洁的大佬出手写了一套基于 Ant Design Pro ,拥抱纯 React Hook ,实现按钮级权限,整合下一代数据流 Hox 的微前端多标签管理系统,开源并命名为 「AntdFront」

项目于 2020 年 5 月正式开源,本来大佬不打算推广,在我的撺掇下才写了篇介绍文章,我在此基础上稍微整理、复述一下,为了能够使用推荐卡让更多人看到暂且标注原创。

先说结论,这个项目无论从学习角度还是应用角度看,都是不可多得的福利。

「GitHub 地址」:https://github.com/X-neuron/antdFront

项目作者发布原文:「这可能是你们都在找的:React 纯原生纯hook多标签微前端」

项目展示

AntdFront
注册登录、多标签、国际化、权限控制、微前端等已经全部实现,在此基础上开发管理系统应用十分方便。此外由于各类组件均为原生,执行效率、扩展性、兼容性等方面都具有巨大优势。

项目特点

该项目的突出特点一是原生,二是简洁。

React Hook、函数组件、hox数据流、极简的权限。

改写后的组件,代码简洁、易懂,易于解剖学习。动态多标签路由 Hook、权限组件、权限 Hook、微前端组件、国际化等非配置的核心代码加起来不超过500行。

正如项目作者所说,该项目适合具有强烈求知欲或教狂热的技术洁癖人群。其技术特点总结如下:

1、采用 webpack、babel、antd 等较为原生的配置和函数组件搭建,支持 pwa。
2、极简 Hox 数据流。
3、支持 json 路由动态配置。
4、页面及按钮级动态权限。
5、开发环境支持热重载。
6、提炼路由算法,实现多标签页面路由,支持组件、路由状态保存。
7、支持国际化 (react-intl-universal)。
8、支持微前端 (qiankun)。
9、代码量小,完整的开发环境,为欲接轨 React Hook 时代开发者做参考。

技术选型背后的考虑在项目作者原文中有详细说明,这里不再赘述。

我们在使用各类框架时往往容易迷失其中,盲目遵循各种约束,分不清什么是可以持续的优秀的思想,什么是有缺陷的、需要优化的做法,因此在不同框架之间的迁移成本极高。

这个项目整合了作者认为具有方向性的技术思想与实践,对理解前端发展趋势、降低学习成本有重要的指导意义。

项目结构

项目结构与 Ant Design Pro 基本保持一致。

├── package.json
├── .babelrc
├── .eslintrc.js
├── .postcss.config.js
├── webpack.config.js
├── webpack.dev.config.js
├── build                    // build文件夹
├── mock                     // mock模拟数据文件夹(mockjs) 真实生产测试环境建议使用其他库
├── public					 // 公开资源文件夹
	└── locales              // 国际化语言配置,后续可调整至/src/locales目录
└── src
    ├── components           // 组件文件夹
    ├── hooks                // 安置自定义的非全局影响的hook
    ├── config
        ├── icons.js         // 主要为了实现routes.js的图标的字符串配置。
        └── pages.js         // 主要为了实现routes.js的路由页面字符串配置。
        └── routes.js        // 可自己设计的路由配置入口。
    └── layouts              // 基础布局组件。用于全局性嵌套路由
    └── models               // 安置全局影响的hook 
        ├── useAccess.js     // 权限配置hook
        ├── useLocale.js     // 国际化hook
        ├── useLogin.js      // 登录状态控制hook
        ├── useTabRoute.js   // 管理多标签状态hook
    └── pages                // 安置业务页面
    └── services             // services API函数
    └── utils                // 一些工具
    └── app.jsx
    └── index.jsx
    └── index.html      

补充说明

  • 该项目暂用 JS 编写,保持原生性。如需在 TS 中使用,需自行定义类型。同时也欢迎 TS 版的 pull request
  • 由于该项目常使用 ncu 管理依赖,目前less-loader 仍是5.0(因mini-css-extract-plugin)
  • 该项目会持续关注业内最新技术,保持对parcel2,webpack5,esbuild ,babel/macros 等的实践跟踪, 一旦稳定,会陆续跟进
  • 项目依赖 nanoid 可能对 node 版本要求较高,需要 13.5以上版本,推荐使用 nvm 管理 node 版本,方便自由切换。如不喜欢,可自行替换适合自己的库

项目目前处于初期阶段,欢迎各路大神或是有兴趣、有信心的小伙伴参与其中。同时,我们也会根据后续的实际应用总结新的经验,对它进行进一步的完善。

延伸阅读

React Hook

React 的组件化给前端开发带来了前所未有的体验,我们可以像堆积木一样利用组件搭建出我们想要的系统,既加快了速度,又提高了代码的可读性。

然而,在这种模式下,业务代码与生命周期函数的耦合度随着功能的复杂度逐渐提高,导致很多重复的功能模块无法被抽离复用。为解决这个问题, react 尝试了 mixin、高阶组件两种方案,但同时又衍生了新的问题。

直到 React 16.8 发布,全新的 Hook 特性不仅解决了功能复用问题,还让我们以函数的方式创建组件,可以在不编写 class 的情况下使用 state 以及其它的 React 特性,干净利落地解决了上述问题。

目前,React 16.8 发布已逾一年, 但相关应用实现向新特性的迁移仍需要一段时间。

Hox

Hox 是蚂蚁金服体验技术部提供的下一代数据流方案,目前并未被大规模使用,但其拥抱原生 hook,且仅有 1 个 API,学习成本极低,能轻松应付主要应用场景。

详细分析见项目作者另一篇文章:「React 下一代数据流 hox vs Recoil 使用对比分析」

微前端

在软件工程实践中,处理复杂问题的核心思想是分而治之。类比于微服务架构,微前端就是把日益复杂的前端工程分解为可以独立开发、测试和部署的单元模块的一种架构风格。

上面的动图里,作者演示了在项目中内嵌 Vue 应用,我们可以在此基础上实现更为复杂的系统。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页