在后端架构发展史上,如果要找一个低耦合高内聚架构模式的典范,微服务当仁不让。

在互联网业务急速扩张的背景下,微服务架构解决了后端服务中的“重”,让每个服务都能够独立部署、独立扩展,每个服务都具有稳固的模块边界。而越来越“重”的前端工程也面临类似问题,微服务思想,自然而然就成了前端工程师们探索的方向。

微服务的服务怎么拆、拆到多细一直是最核心的问题。同样的,前端应用如何拆分成能够独立开发、部署的模块,也非常有讲究。

一、What:微前端到底是什么?

通过主应用来加载子应用,而子应用由不同的功能按照不同的维度拆分而来,这就是微前端的定义

微前端可视为一棵大树中的各个组织,软件包则对应于组成各组织的细胞,而模块就是分子,组件等同于原子。

二、Why:我们为什么需要微前端?

引入微前端后,最显著的变化在于前端应用整体效能的提升:

  • 每个模块的前端部分均能实现独立开发、测试和部署;

  • 协同开发,不同技术栈能够构建同一前端部分;

但是,如同后端一样,架构重构是一项大工程。为了实现渐进式重构,我们在实际落地过程中首先要进行低风险的局部替换,例如升级依赖项、更替架构、UI 改版,调整技术选型等。

三、How:如何落地微前端?

最高效的方式首当其冲是成熟的微前端解决方案。例如主流的 iframe、Web Components、ESM、qiankun、EMP 等。

每种解决方案各有优劣,比如 iframe 可以直接加载其他应用,但无法做到单页导致许多功能无法正常在主应用中展示,EMP 更支持跨应用状态共享、跨框架组件调用、远程拉取ts声明文件、动态更新微应用等。

微前端是较新的前端技术,近几年已经开始在前端领域大放异彩,越来越成为主流。掌握微前端是高级前端工程师的必备技能,这里分享一门微前端的实战好课,3天实战内容,前联通技术专家带你透彻掌握微前端核心,以及面试必问难点、痛点

课程市场价499元

前100名仅需0.01

不到一次共享单车的钱

获得Top1%前端大神的24节实战精华

给3月要跳槽的前端提个醒!不了解微前端就别去面试了,不然……相关推荐

  1. 【微前端】什么是微前端

    专栏: [微前端]什么是微前端 [微前端]qiankun [微前端]qiankun + vite + vue3 目录: 一.微前端是什么 二.微前端解决了什么问题 三.微前端的优缺点 四.微前端的解决 ...

  2. 前端dashboard框架_微前端在网易七鱼的实践

    一.前言 网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...

  3. py获取前端的参数_微前端 qiankun 项目实践

    (给前端大全加星标,提升前端技能) 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语 最近在做微前端的项目 , 过程中真是踩了 ...

  4. 微前端解决方案初探 02 微前端框架 single-spa

    single-spa 概述 single-spa 是一个实现微前端架构的框架. 在 single-spa 框架中有三种类型的微前端应用: single-spa application / parcel ...

  5. 微前端(一)微前端是什么?为什么要用微前端?

    微前端是什么? 参考网站: https://micro-frontends.org https://microfrontends.com 微前端就是与多个可以独立发布功能的团队一起构建现代化web应用 ...

  6. 微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案

    什么是微前端 微前端是一种软件架构,可以将前端应用拆解成一些更小的能够独立开发部署的微型应用,然后再将这些微应用进行组合使其成为整体应用的架构模式. 微前端架构类似于组件架构,但不同的是,组件不能独立 ...

  7. bootstrap跟vue冲突吗_知道微服务,但你知道微前端吗?

    在 toB 的前端开发工作中,我们往往就会遇到如下困境: 工程越来越大,打包越来越慢 团队人员多,产品功能复杂,代码冲突频繁.影响面大 内心想做 SaaS 产品,但客户总是要做定制化 不同的团队可能有 ...

  8. 生产可用:是时候来一个微前端架构了!

    微前端的场景域 在选择一个微前端方案之前,常常需要思考这样一个问题,我们为什么需要微前端.通常对微前端的诉求有两个方面,一是工程上的价值,二是产品上的价值. 对于工程上的价值,可以从一个三年陈的项目来 ...

  9. 听说你还不了解微前端?[收藏=学会]

    一.自我介绍 qiankun 简介 首先开始之前,我先给大家简单的介绍一下乾坤,大家可以在 <qiankun.umijs.org> 的官网上,看到 qiankun 的介绍和 qiankun ...

最新文章

  1. PhpMyAdmin的简单安装和一个mysql到Redis迁移的简单例子
  2. 谷歌砸出10亿美元,要为湾区困难群众,建2万套经适房
  3. burpsuite collaborato模块简介 dns log、http_https log、smtp_smtps log
  4. cnblog博客CSS定制
  5. Android中对Log日志文件的分析
  6. java 删除list元素_JAVA中循环删除list中元素的方法总结
  7. 接口_简单get接口_第一个接口
  8. 为什么重写equals时必须重写hashCode方法?
  9. python 改文件名字_【Python】按要求修改文件名
  10. VS2012连接数据库问题
  11. nginx编译包含perl模块
  12. 2018ICPC赛后总结
  13. 锦囊5-斐波那契数列
  14. Open EtherCAT Society——SOEM、SOES
  15. 主力吸筹猛攻指标源码_成功率90%以上【主力吸筹+买点提示+使用方法】通达信指标公式源码...
  16. Unity3D 5.0软件安装教程
  17. python 词云生成
  18. 2020胡润80后白手起家富豪榜公布,掌门教育张翼强势登榜
  19. 直播有什么新的互动玩法?
  20. “理财管家”正式发布了!

热门文章

  1. 复试计算机网络与软件工程,2018华南理工大学软件工程复试经验贴
  2. mysql 卸载批处理_MYSQL 注册启动 及 停用卸载 批处理脚本 (补)
  3. linux 安装软件的几种方法
  4. 论文笔记——Deep Model Compression Distilling Knowledge from Noisy Teachers
  5. 牛顿插值法及其C++实现
  6. iOS Coding项目片段记录(八)
  7. Android_Layout (一)
  8. if...else..的错误用法
  9. nginx配置ssl
  10. [记忆碎片的磁盘整理]老妈