摘要：MFE 微前端架构落地实践 微前端的架构中必然存在有基座或者框架层应用，不管是采用qiankun，sspa，还是网关路由分发式架构。 具体的可以参考[MFE聚合层-Qiankun源码分析]和[MFE聚合层-网关聚合分析]两篇文章。 架构功能规划 微服务已经是一种成熟的应用组织架构方式，在前端架构中采
阅读全文
随笔分类 - ToB前端生态
摘要：在toB业务场景中，中台或云平台都会大量存在表单填写，那么低代码、可配置表单就是一个必不可少的基础能力。 动态表单 动态表单或者说json表单，一般需要具备下列能力： 动态字段 最基础能力，既通过配置指定字段的属性，包括：输入类型，标签，placeholder，静态验证规则等等，如 { key: '
阅读全文
摘要：作为toB业务生态，长生命周期下来积累有自己的组件库是一件理所应当的事情。本文主要介绍创建和维护自己的UI组件所需要注意的方面几个方面。 开发框架 工欲善其事必先利其器，要造自己的轮子首先要有一个好用的开发框架。下面看看搭一个前端组件库需要的各方面： 本地调试 提到本地调试可能都会想到webpack
阅读全文
摘要：SPA单项目的开发框架一般来说要么是前端组自己搭建的经过沉淀的自研架构，要么就是使用现成的开源框架，接下来看看对于这两种情况的分析。 自研积累 基于现在大部分SPA业务层项目都是使用webpack，我们看一下本地开发框架需要解决的问题和webpack已经为我们解决的问题 本地开发调试 API本地开发
阅读全文
摘要：背景 在采用MFE架构的组织和业务中，跨项目功能复用是必须面对的一个问题，一般情景下这种情况通常可以通过npm公共包的形式来实现。但这种npm包抽取适用于更新频率较低，且具有普适性的非业务功能或模块。同时，npm包版本管理，依赖版本收集也会成为一个问题，这部分问题将会放到支撑层的脚手架一文中进行讨论
阅读全文
摘要：对于大型或超大型公司，规范引入和实施工作通常由对应的自研Cli工具来完成。 规范引入 eslint规则检查提示 通常项目会引入eslint来检查代码，以期望能够统一代码风格。 rules用来自己来定义所有的规则，但是通常都会使用业界流行的规范，可使用extends配置来引入。 "extends":
阅读全文
摘要：统一数据管理中心是SPA复杂数据流的管理形式。 Context 注：这里统一指16.3版本以后的新context API，16.3以前的context API存在SCU问题。 类组件中的Context context可以嵌套使用，也可以多个split使用 // index.js // 顶层Conte
阅读全文
摘要：MFE灰度发布支持对比 前面讲了一下MFE聚合层所能采取的技术手段，现在对比一下几种聚合层机制对灰度发布和灰度策略的支持情况。 QianKun & SSPA import { loadMicroApp } from 'qiankun'; // load micro app loadMicroApp(
阅读全文
摘要：Rollup Version: "2.56.2" 从入口开始: //cli/cli.ts import run from './run/index'; if (command.help || (process.argv.length <= 2 && process.stdin.isTTY)) { .
阅读全文
摘要：使用 version: 5.2.0 官网的使用示例如下： import React from "react"; import { BrowserRouter, Switch, Route } from "react-router-dom"; export default function root(
阅读全文
摘要：SSR方案 说到前端SSR大部分都会想到React+nextjs或者vue-server-renderer，或者是同构渲染，其实还有一种就是模板引擎。模板引擎是从后端编程解决前端问题的一种方式。 在微前端的落地方案中，模板引擎作为一个可选项，来看看模板引擎解决了哪些问题。 常见的ToB业务平台或Sa
阅读全文
摘要：Webpack的核心原理应该是基于Tapable的支持复杂发布订阅流程控制的工具，内置大量的plugin，再结合loader做资源编译。 先上图： 1. 编译入口 version：webpack@4.46.0 webpack的编译命令一般是这样的： webpack --config webpack.
阅读全文
摘要：示例 先看看官网示例： const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { await next(); const rt = ctx.response.get('X-Response-Ti
阅读全文
摘要：构建聚合 构建聚合通常使用软件工程的方式将拆分的子应用在构建编译阶段重新聚合为一个微前端应用。 monorepo ├── packages | ├── pkg1 | | ├── package.json | ├── pkg2 | | ├── package.json ├── package.json
阅读全文
摘要：QianKun 源码分析 QianKun MFE注册 registerMicroApps<T extends ObjectType>( apps: Array<RegistrableApp<T>>, lifeCycles?: FrameworkLifeCycles<T>, ) type Regist
阅读全文
摘要：网关聚合 网关聚合式的微前端方案根据路由将不同业务分发到不同的、独立的前端应用上，通常又称为路由分发式微前端。 实现方式有： nginx反向代理 微服务网关如Zuul或者SpringCloud Gateway K8S Ingress 自建网关，如Nodejs搭建的网关层等 根据团队技术栈和生产环境的
阅读全文
摘要：适用场景 先说微前端诞生的背景：SPA应用在长时间的迭代开发后，由于人员变更、业务模块变更、业务逻辑迭代等，逐渐从一个普通应用积累成一个巨石应用，随之而来的就是可维护性的问题。这些问题其实就是当年后端微服务流行起来时所同样面临和解决的问题，既包括技术问题，也包括管理问题。 而这类问题通常是S
阅读全文
摘要：Single-SPA 源码分析 //src/application/apps.js export function registerApplication( appNameOrConfig, appOrLoadApp, activeWhen, customProps ) { const regist
阅读全文
