姜波
高级Bug开发
Canvas Ci/Cd Css Docker Docker Compose Dockerfile Express Flutter Git Gitlab Gulp Html Item2 Js Koa Mock Mongodb Mysql Nginx Node Pm2 React Socket Vue Webpack 填坑 微前端 性能优化 架构设计 正则 算法 设计原则 设计模式 面试

© 2019 - 2021 姜波 苏ICP备20040891号

微前端实现方式对比

微前端实现方式对比

星期五,九月 17 日,2021 年

Iframe

优势

  • 技术成熟
  • 支持页面嵌入
  • 天然支持运行沙箱隔离、独立运行

劣势

  • 页面之间可以是不同的域名,鉴权等
  • 需要对应的设计一套应用通讯机制,如何监听、传参格式等内容
  • 应用加载、渲染、缓存等体系的实现

Web Component

@ 姜波
1 分钟阅读
技术债务填补与崩溃预防

技术债务填补与崩溃预防

星期三,九月 15 日,2021 年

技术债务填补

产生原因

  • 开发过程中因为时间紧迫导致的实现不合理
  • 暂时没有想到更好的实现方式而妥协的版本
  • 架构设计前期没有考虑到的细节
  • 不合理的交互设计,导致技术实现复杂
  • 旧功能文档缺失,无正确拓展、修改和兼容旧功能,导致上线后问题剧增
@ 姜波
2 分钟阅读
架构前期准备

架构前期准备

星期三,九月 15 日,2021 年

架构师分类

系统架构师

  • 从系统的维度,负责整体系统的架构设计
  • 主要是基础服务和各系统间协调,着眼全局
  • 比如关注负载、可靠性、伸缩、扩展,整体项目切分,缓存应用等方面的基础架构设计

应用架构师

@ 姜波
1 分钟阅读
如何保证架构的质量

如何保证架构的质量

星期二,九月 14 日,2021 年

系统的稳定性

  • 定义:当一个实际的系统处于一个平衡的状态时,如果受到外来作用的影响时,系统经过一个过渡过程仍然能够回到原来的平衡状态,称这个系统就是稳定的,否则称系统不稳定
  • 架构设计的基石
  • 可以更好的实现自我修复

系统的健壮性

  • 定义:计算机软件在输入错误、磁盘故障、网络过载或有意攻击情况下,能否不死机、不崩溃,就是该软件健壮性的具体表现
  • 解释:一个系统容错能力强,运行不易被干扰,安全性好

度量标准

@ 姜波
1 分钟阅读
软件设计原则与分层

软件设计原则与分层

星期日,九月 12 日,2021 年

软件设计原则

单一职责原则

  • 永远不应该有多于一个原因来改变某个类
  • 理解:对于一个类而言,应该仅有一个引起它变化的原因
  • 应用:如果一个类拥有了两种职责,那就可以将这个类分成两个类

开放封闭原则

  • 软件实体扩展应该是开放的,但对于修改应该是封闭的
  • 理解:对扩展开放,对修改封闭,可以去扩展类,但不要去修改类
  • 应用:当需求有改动,尽量用继承或组合的方式来扩展类的功能,而不是直接修改类的代码

里氏替换原则

@ 姜波
4 分钟阅读
前端架构的前世今生

前端架构的前世今生

星期五,九月 10 日,2021 年

架构是如何产生的

  • 初始:无架构,前端代码内嵌到后端应用中

后端MVC架构

  • 将视图层、数据层、控制层做分离
  • 缺点:重度依赖开发环境,代码混淆严重

前后端分离架构

@ 姜波
2 分钟阅读
微前端的架构设计

微前端的架构设计

星期四,十一月 12 日,2020 年

构建基础设施

在单体应用里,共享层往往只有一个,而在微前端架构里,共享层则往往存在多个,有的是应用间共用的共享层,有的是应用内共用的共享层。在微前端设计初期,构建基础设施要做如下几件事情:

  • 组件与模式库。在应用之间提供通用的UI组件、共享的业务组件,以及相应的通用函数功能模块,如日期转换等
  • 应用通信机制。设计应用间的通信机制,并提供相应的底层库支持
  • 数据共享机制。对于通用的数据,采取一定的策略来缓存数据,而不是每个应用单独获取自己的数据
  • 专用的构建系统(可选)。在某些微前端实现里,如微件化,构建系统用于构建出每个单独的应用,又可以构建出最后的整个应用
@ 姜波
3 分钟阅读
微前端的业务划分方式

微前端的业务划分方式

星期四,十一月 12 日,2020 年

按照业务拆分

  • 可能同时存在多个系统,每个系统都代表自己的业务
  • 它们之间的关联可能并不是很紧密,对于前端应用来说,只需要一个系统内对象的ID,加上用户的Token,便能轻松从一个系统跳转到另外一个系统中
  • 如果业务间本身的耦合就比较严重,那么要从前端业务上分离它们,就不是很容易

按照权限拆分

@ 姜波
2 分钟阅读
微前端的技术拆分方式

微前端的技术拆分方式

星期二,十月 27 日,2020 年

路由分发式

  • 通过HTTP服务器的反向代理功能,将请求路由到对应的应用上
@ 姜波
3 分钟阅读

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接