反混沌

我发起这个计划的原因,​正如之前写的文章中所说——

为什么要做这么一个项目?还不是因为前端圈太混乱?虽然与前些年相比稍微好了那么一点,但跟 Java 圈相比,乱太多了。我希望「Anti-chaos」能成为盘古之斧,劈开混沌,清者为天,浊者为地。

那么「Anti-chaos」要做些什么?就如刚才所说,这是一个「大」项目,因为它基本要覆盖当前前端开发的方方面面。

我并不是想开发一个大而全的框架,而是要遵照「反混沌」的思想拆分成多个小项目,每个都是解决某个固定场景的问题,它们可以组合并扩展成适合某个团队、企业的解决方案,从而使前端开发乃至前端圈变得更加有序。

本计划的宗旨是让前端开发变得更加有序,让业务开发人员能够更加专注于业务,而不是其他与业务主线无关的事情。更多更详细的介绍,请见「说说『反混沌』」系列文章和「反混沌」专题网站。

体系

「反混沌」在工具层面的几大体系。

Infra

与日常开发息息相关的各类底层基础设施,如代码校验与格式化、开发套件等:

NPM 包 说明
@ntks/stylelint-config 符合「反混沌」推荐的 CSS/Sass 风格的 Stylelint 配置
@ntks/eslint-config 符合「反混沌」推荐的 JavaScript/TypeScript 风格的 ESLint 配置
@ntks/toolbox 日常开发工具包
@ntks/event-emitter 简易的事件触发器

Fxxk Design

以「设计即代码」为目标的跨 JS-based 技术栈、跨平台 GUI 开发体系:

子体系/模块 说明
Petals 原子化的 UI 组件基础设施,包括风格组件视觉组件无头组件
Kokiri 与 Vue 绑定的结构组件,提供部分既有 UI 组件库的适配包
Zora 与 React 绑定的结构组件,提供部分既有 UI 组件库的适配包

Future.js

以「需求即代码」为目标,将前端应用各个层次、各个环节之间的通信规范化、标准化的开发体系:

子体系/模块 说明
Organik 元数据逻辑引擎,用来收集元数据并生成上下文
Handie 渐进式配置驱动企业级中后台前端应用开发框架

蓝图

Fxxk Design 及 Future.js 相关的规划。

第一阶段

聊聊前端 UI 组件」与「聊聊中后台前端应用」系列文章所阐述思想理论的实践与验证。

跨技术栈 UI 组件基础设施

基于《聊聊前端 UI 组件:组件体系》中讲述的 UI 组件体系构建出不包括「结构组件」的跨 JS-based 视图库/框架的基础设施——Petals。并以此为基础分别在 Vue 和 React 下验证两种适配模式:适配指定视图库/框架;适配已有 UI 组件库。

相关 NPM 包有:

视图库/框架 结构组件基类 视图库/框架适配 第三方 UI 组件适配
Vue @kokiri/core kokiri @kokiri/adapter-element-ui
@kokiri/view-ui
React @zoras/core - @zoras/adapter-ant-design

跨技术栈中后台前端应用框架

Handie 重构为跨 JS-based 技术栈渐进式配置驱动企业级中后台前端应用开发框架,并分别在 Vue 和 React 的至少一个中后台应用中大规模应用。

相关 NPM 包有:

视图库/框架 框架主包 基础部件包
Vue handie-vue @handie/bulbasaur
React handie-react @handie/squirtle

第二阶段

可交换组件(物料)生态建设。

多技术栈运行时共存

基于 Web Components 的多技术栈 UI 组件、多应用运行时共存,为可交换组件的无障碍运行提供条件。主要用于 UI 组件搭建和在中后台前端应用中跨视图库/框架的模块、应用集成等场景。

物料市场

支持可交换组件开发、调试、发布、预览等的配套设施。

第三阶段

JS-based 开发体系完善。

数据层抽象

为 Handie 加入数据层抽象,如 ORM、数据源切换等。

中后台前端应用开发者体验优化

为 Handie 添加 CLI 工具、IDE 插件等配套设施。

第四阶段

打通上下游。

前后端一体化

前后端统一建模。

设计即代码

设计稿生成元数据。

需求即代码

需求文档生成元数据。

第 N 阶段

先让思维飞一会儿……

社区

为了方便对 Fxxk Design、Future.js,或者说「反混沌」真正感兴趣的人能够第一时间获取到相关消息以及对相关问题进行及时交流,故决定创建一个兴趣组微信群:

Fxxk Design + Future.js 兴趣组
Fxxk Design + Future.js 兴趣组

入群者要达到以下几个基本条件:

  1. 真的对 Fxxk Design 和 Future.js 感兴趣;
  2. 不谈国内外政治,不发无用广告,不进行人身攻击,遵守基本网络道德。

若不满足以上条件,最好不要进,否则可能会被请出群。

另外,单纯抱着「进群学习」的态度还是算了,学不到东西。如果真对 Fxxk Design 和 Future.js 感兴趣,倒是可以探讨、交流,也许会碰撞出什么火花。

若 QR 码无法使用,可发邮件给我,请进行适当备注说明。

目录