研发模式:微前端
从零开发——微前端框架实践
我们对微前端框架的内容做了一个详细的介绍,并从零开始用Typescript实现了微前端的基本功能。
Qian-Kun 微前端入门
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,而在用户看来仍然是内聚的单个产品。
你想要的【微前端】都在这里了!
本文从大型项目实战角度解读,分析传统方案存在的缺陷,引出微前端框架,主要介绍了微前端的能力、核心原理、平台选择等,以及对使用微前端时遇到一些问题的解答。
From Monolith to Micro-frontends: How we Revolutionised REA Mobile App Development
In this talk, the focus is on our main Residential App.
We setup an iOS team back in 2010 for our iOS development. Then we setup a different team for our Android Development in 2014.
Fast forward to today, we have about 10 different teams which consist of both iOS and Android the contributed to the Residential App development.
The focus of this talk is on, how we evolve our architecture to enable scaling from 2014 till today.
微前端框架qiankun的沙箱方案解析
本文主要讨论微前端框架 qiankun 的沙箱实现方案,及各方案的实现原理,希望大家对 js 沙箱隔离有更深的理解。
基于qiankun的微前端渐进式升级
通过引入qiankun微前端框架,实现项目的渐进式升级,既能快速引入新的框架开发新的功能,又能灵活的根据需求逐步翻新已有的功能,直至整个项目完成重构升级。
京东微前端MicroApp上新啦!
MicroApp目前已在京东集团系统以及业界其他系统中广泛应用,但在实际应用中仍发现一些需要优化的方向和问题。经过近一年的不断优化和沉淀,推出了MicroApp V1.0.0-rc版本,欢迎查看。
模块联邦在微前端架构中的实践
webpack几乎没办法做到不同应用之间进行插拔式的热更新。那怎么样去实现这种跨应用间的共用模块运用呢?于是乎webpack5内置了一个模块联邦的功能特性,这个功能可以让跨应用间做到模块共享真正的插拔式的便捷使用。
每日优鲜供应链前端团队微前端改造
我所在团队是做toB业务的,技术栈是Vue,团队目前有十多个典型的toB业务(菜单+内容布局),这些业务都是服务于一个大平台的,因为历史原因,每个业务都是独立的,都有一个html入口,所以当用户在这个大平台上使用这十多个业务的时候,每当切换系统时,页面都会刷新,体验很差;在开发层面,这十多个业务又有太多共同之处,每次修改成本都很高。
最近有一个很重要的需求X,内容是这样的:从十多个项目中,每个项目抽取若干功能组成一个新项目,基于现有架构的话,每当点击来自不同系统的功能页面就要刷新一次,这是不可接受的。为了新需求X重复开发一遍这些业务功能又不现实,所以从技术角度来看,架构改造不可避免。
为iframe正名,你可能并不需要微前端
在被微前端坑了几次之后,回过头发现,iframe真香!
微前端究竟是什么?微前端核心技术揭秘!
微前端是将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的一种手段。本文从微前端的基础理论出发,对其核心技术进行阐述,最后结合项目进行简单的应用实践。
微前端的前世今生
随着近些年前端应用的复杂增加,诞生出了微前端这种架构风格,同时各类微前端框架也是层出不穷。本文将从微前端的起源讲起,介绍实现微前端架构的各种方式及其代表框架的区别,并原理层面讲述主流实现方式。
携程度假零成本微前端框架-零界
无侵入式、零成本、适用于所有页面的微前端框架。
接入成本最低微前端框架 京东零售micro-app开源了!
micro-app已经在多个京东内部项目中投入使用并顺利发布上线,现在正式对外开源!
微前端场景下的代码共享
在现有前端应用日益复杂化的业务场景下,将一个体积庞大的前端应用拆分为几个可以独立开发、测试、部署的微应用变得越来越普遍。微前端的这种模式这大大提高了我们的构建效率,在每次构建时我们不再需要去构建一个庞大的应用,而是构建我们所需要构建的某个子应用。通常在一个微前端的架构下应用之间又会有许多公共的代码,那么在此基础上又如何更加灵活更加有效的共用这些代码呢?(下面介绍的各种方案与微前端的场景并无绑定关系,只是基于这个场景更好去说明一些问题)。
微前端如何做样式隔离?
在主应用和子应用上分别使用 div 元素插入一段标题,两个 div 元素使用相同的 class 名 title,分别在 class 中设置文字颜色,主应用 color 值为 yellow,子应用为 red。
由于子应用的样式晚于主应用加载,所以主应用的样式会被覆盖。
以上问题在同时加载多个子应用时也会存在:各个应用之间也可能存在同名的 className 或者给相同条件的选择器添加了样式, 那么最终只有优先级最高的样式才会生效。要确保应用之间的样式不会互相影响,就需要对应用间的样式进行隔离。