我的微模块 React 程序 设计终于落实了。

傻梦兽
551 阅读4分钟

经过三个月的不断考虑，和公司的高层不断的讨论咯。基本的框架也是已经设计下来了。设计的同时，我很多时候在考虑怎么把系统拆分成类似spring cloude.这种模块的微服务开发。把23个模块分到5个前端小组进行维护。

先来看看现在的程序项目结构是怎样的？

image.png

image.png

apps 是系统的模块管理吧。每一个子模块都能自己独立开发。而我们的入口模块，也就是spring cloud的网关模块差不多。web 模块加载模块，等webpack mf研究透了后，未来web模块是可以通过mf技术进行远程加载子模块的代码，从而减少构建时间。

【web模块做了什么事情】

他只是把路由映射到你的模块代码即可。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Injector, connectInjector } from '@linkseeks/core';
import MemberApp from 'member-module';

export class TestService {
  name:string = "rex"
}

function App() {
  return (
    <div className="App">
      <MemberApp />
    </div>
  );
}

const Application = connectInjector(
  App,
  new Injector([[TestService]])
)

export default Application;

分别运行两个服务。 image.png

image.png

可见Web模块运行的效果和子模块的效果一模一样。

主模块只要使用 React Router 进行模块分法即可。

【为什么使用Rxjs】

如果你是一个单体应用程序开发，完全无需要使用Rxjs。因为Mobx这些完全可以满足你的90%的实现和事件通信，如你在公司的没有40人前端规模也没有必要使用Rxjs。如果你的团队只有10以下的开发团队也没有必要微模块开发。老老实实的使用vue赚钱即可。

前端有多少人玩得明白rxjs？一般是不推荐，除非有20人以上，做系统设计的时候可以通过rxjs进行流操作拆分，最后code review进行系统代码把控。也就说吧了程序员把控方向，码农进行实现。小组组长进行监工把控。

由于现在是把一个单体业务拆分到5个小组进行微模块开发。这个时候Mobx就显得有点无助。用npm惯了，大家都懂得模块和模块之间是有依赖关系的。那么小组（部门部门）之间就有了通信关系。如果只是单纯的状态管理使用Redux喝Mobx你还需要把store再其他模块进行〈Provider〉注入，每个模块的 store注册多了，你其他模块注册的就多了，反而添加了自己的工作量。这个时候单列+rxjs+di的模式就可以完全解开了这种尴尬的情况。

第二、模块和模块存在调用关系，如果只是数据服务通信还不错，但是前端往往就存在一个很好玩的事情，就是事件循环机制，你把模块分出去了，那其他模块（部门）--人都是懒的。不是自己服务的东西，能用就调用呗。这个时候你的事件要如何通信？mobx能实现，但是基于React的事件机制，你封装事件操作的设计的时候就会显得略有点不优雅。因为异步你不能把步骤拆分几个func进行组合。很容易回到嵌套地狱的聚合代码。rxjs的流缺刚好可以把你的异步操作变成一条流进行事件的封装，如果你是想把你的Address From Input等表单操作封装成一个高可用的事件，供其他模块使用的时候[rxjs]的作用，就体现了。那么以后这个功能就可以又一个微模块进行开发，其他模块复用即可。

第三、就是你把服务拆分给不同部门管理，其他部门也不用管你写了什么，我知道你接口给我什么，我能做什么？这就是部门和部门之间的协作。如果你没有20人以上，建议老老实实使用spa的思路去做就好了。

使用 RxJS 与 Hooks 来处理事件，和多人开发的中的领域驱动思路（最后讲到）juejin.cn/post/707033…

可以参考这个文章进行思考。

avatar
文章
阅读
粉丝