在当今快速发展的互联网时代，前端微应用架构设计应运而生，它为现代Web应用提供了可扩展性和灵活性。这种架构有助于开发团队以更加模块化的方式管理代码，提高开发效率，促进团队间的协作。在这篇博文中，我将记录下我在设计前端微应用架构的过程，其中包括背景描述、技术原理、架构解析、源码分析、扩展讨论以及未来的展望等部分。
## 背景描述
前端微应用架构在近几年逐渐兴起，尤其是在大型Web应用的开发中，这
什么是微前端？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端架构具备以下几个核心价值：技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的
转载
2023-11-07 17:39:49
117阅读
1.Tier和Leyer的区别：Tier 指的是系统的物理部署结构Leyer 指的是系统的逻辑层结构 2.基本设计原则概述KISS原则 提倡在设计和编码中，尽量保持代码的简约性，避免不必要的复杂DRY原则 抽取系统中的公共部分，并把它放到一个地方避免重复，既适用于代码也试用于功能和业务逻辑Tell,Don’t Ask原则 要去对代码进行合理的封装，并把它放到正确的类中，并明确告诉对象我们
转载
2023-08-08 00:59:30
109阅读
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。使用微前端的场景随着需求的不断跨大，可能前端的服务也在不断增加，但是随着业务的增加，需要将整个系统重新发布，造成的是资源的浪费，如果能够每次只需要发布新的子系统，不需要发布整个系统就好了； 而现有的技术中，我们可以通过Iframe引入所谓的子系统，但是该方式存在无可忽视的缺陷，下面会提到，所以
转载
2024-09-05 16:42:06
61阅读
此篇博文介绍 我所认为的应用框架设计原理。应用框架是指为解决前端应用程序复杂性的一套解决方案。它的特征是分层。我不保证我的阐述是对的。不过，基础有对错，但从客观经验得出的理论没有对错，仅有适应范畴或优劣的区别，它们都能保证你达到目的地。 应用框架原理图解: MVC是java十几年来一统企业应用程序后台框架的杀手锏。所以将它作为前端应用框架的核心，不求一览众山小，但肯定可以‘高
转载
2023-07-15 06:57:44
89阅读
背景：在项目开发中，有这样的需求，多个项目要通过统一的门户网站加载出来，该统一门户网站只显示相应按钮进行菜单导航切换qiankun.js介绍： qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。参考：: 介绍-qiankun优势 技术栈无关；独立开发、部署；增量升级；独立运行状态隔离Why Not Iframe使用：主应用
转载
2024-08-22 17:36:34
42阅读
前言：正在学习react大众点评项目课程，学习react、redux、react-router构建项目。一、前端架构是什么前端架构的特殊性前端不是一个独立的子系统，又横跨整个系统分散性：前端工程化页面的抽象、解耦、组合可控：脚手架、开发规范等高效：框架、组件库、Mock平台，构建部署工具等抽象页面UI抽象：组件通用逻辑抽象：领域实体、网络请求、异常处理等 二、案例分析功能路径展示：首页-
转载
2023-06-12 20:22:50
261阅读
背景去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。没有计划的阅读，收效甚微。新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。这个“玩法”虽然常见且板正，但是有效，已经坚持阅读六个月。已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（
1、什么是微前端微前端是一种架构风格，其中众多独立交付的前端应用组合成一个大型整体。将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品——这样的一个架构思想称为【微前端】。2、为什么要提出微前端任何新技术的产生都是为了解决现有场景和需求下的技术痛点。 微服务所解决的痛点：拆分与解耦目前，单页面应用（SPA）是非常流行的项目形态之一，随着业务的拓展以及
转载
2024-01-03 13:02:39
75阅读
前沿：前半年微前端火得一踏糊涂，刚好业务需求上有这样的应用场景，针对目前的微前端解决方案做了技术选型，qiankun作为蚂蚁金服内部孵化出来的微前端解决方案，经过线上应用充分检验及打磨最后开源，最终选择qiankun作为我们云产品架构入口。不过官方文档上关于上线部署文档较少，很多童鞋也可能只是在本地玩玩，没有到真正走通整个闭环，于是结合自身，在将qiankun落地过程中遇到的“那些坑”做个梳理。希
转载
2024-08-23 16:32:00
51阅读
先说说singleSpa的缺点不够灵活 不能动态加载css文件css不隔离没有js沙箱的机制 ( 没有全局对象 每次切换的应用 都是同一个window )但是刚刚接触微前端 可以了解一下微前端的基础使用 qiankun微前端框架已经很成熟 也是基于singleSpa来实现的大致实现思路 (不了解微前端概念的可以去自行了解)首先在父应用注册一个应用当条件满足的时候(匹配路径) 会加载我们另一个子应用
转载
2023-11-27 21:44:59
197阅读
1. 什么是微前端 微前端是一种软件架构,类似于组件架构(但不能独立构建和发布),能将前端项目拆解成一些更小并能够独立开发部署的微型应用(每个应用都可以使用不同框架技术),然后再把这里微应用再组合起来,成为一个整体应用架构的模式。2. 应用场景 &
转载
2023-08-21 16:51:37
117阅读
背景去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。没有计划的阅读，收效甚微。新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。这个“玩法”虽然常见且板正，但是有效，已经坚持阅读六个月。已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（
背景去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。没有计划的阅读，收效甚微。新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。这个“玩法”虽然常见且板正，但是有效，已经坚持阅读六个月。已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（
序：引言前端架构的种子编写前端样式总是作为延后的事情来考虑如果把前端开发当作“一个值得做出战略规划和有投资价值的关键元素”如果我们在CSS框架、文档工具、构建流程的命名规范，甚至标记本身这些方面拥有话语权会怎么 前端架构师的含义软件架构师的职责就是要保证项目中的每一步都在总体架构的指导下进行，而不会随机决定前端领域缺少架构，需要架构讨论使用什么技术栈、内容类型是什么，如何被创建、保存以及
转载
2023-11-16 21:28:09
103阅读
前端是什么？通俗的来说前端就是运行在PC端，移动端等浏览器上展现给用户层浏览的网页。前端技术也分为前端设计和前端开发，前端设计顾名思义就是网页的UI视觉设计，简洁美观的UI设计会给用户带来更佳的使用体验，而前端开发则是网站的前台代码实现。前端技术发展日新月异，更新迭代的速度很快且种类繁杂，本文将对前端开发基础知识作一个简单梳理介绍，通过MindMaster思维导图帮系统梳理前端知识框架
转载
2023-08-15 21:21:13
455阅读
前端面试题（二）1. 说说React生命周期中有哪些坑？如何避免？2. 说说Real diff算法是怎么运作的？tree层级conponent层级element层级3. 调和阶段setState干了什么？4. 说说redux的实现原理是什么，写出核心代码？5. React合成事件的原理？6. React组件之间如何通信？7. 为什么React元素有一个$$typeof属性？8. 说说Connec
转载
2023-10-22 09:51:09
27阅读
1. 概念设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。2. 设计原则S –单一职责原则 一个程序只做好一件事 如果功能过于复杂就拆分开，每个部分保持独立 O – 开放/封
转载
2023-12-11 16:03:31
116阅读
目录1.什么是微前端？2.核心价值3.意义4. qiankun 实现主应用微应用最后1.什么是微前端？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。2.核心价值①技术栈无关：主框架不限制接入应用的技术栈，微应用具备完全自主权。②独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新。③增量升级：在面对各种复杂场景时，我
转载
2024-07-15 16:30:43
58阅读
# 前端架构设计指南
作为一名经验丰富的开发者，你将指导一位刚入行的小白如何实现前端架构设计。本文将按照以下步骤进行引导，并提供相应的示例代码。
## 步骤
| 步骤 | 描述 |
| ---- | ---- |
| 第一步 | 确定项目需求和目标。 |
| 第二步 | 设计整体架构。 |
| 第三步 | 划分模块和组件。 |
| 第四步 | 设计数据流和状态管理。 |
| 第五步 | 选择
原创
2023-07-15 07:23:33
612阅读
