微前端 & 微前端实践 & 微前端教程

微前端

micro frontends

https://micro-frontends.org/

https://github.com/neuland/micro-frontends

2016, ThoughtWorks technology radar

https://martinfowler.com/articles/micro-frontends.html

每个微型前端都独立部署到生产中

每个应用程序应由一个团队拥有

每个服务器都可以独立构建和部署

  • Container + SSR

Micro Frontends in Actions

https://github.com/xgqfrms/micro-frontends

https://microfrontends.xgqfrms.xyz

实现原理分析

  1. iframe, sandbox (完全隔离，不方便通信)

  2. Container + SSR (路由分发)

  3. js 闭包，namespace

  4. web components

  5. css in js

  6. css modules (命名冲突问题)

Why Not Iframe

https://www.yuque.com/kuitos/gky7yw/gesexv

https://qiankun.umijs.org/zh/guide#它是如何工作的

微前端框架

single-spa

https://single-spa.js.org/

$ npm i single-spa

qiankun

https://qiankun.umijs.org/zh/

微服务

Microservices

https://samnewman.io/books/building_microservices/

GraphQL

https://graphql.org/

微前端 videos

https://www.youtube.com/watch?v=o1Sr39DVdOQ

https://www.youtube.com/watch?v=dTW7eJsIHDg

https://www.youtube.com/watch?v=wCHYILvM7kU

refs

https://www.thoughtworks.com/radar/techniques/micro-frontends

PDF, technology-radar

https://assets.thoughtworks.com/assets/technology-radar-vol-22-cn.pdf

https://www.thoughtworks.com/radar#downloads

https://github.com/ChristianUlbrich/awesome-microfrontends

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

微前端 & 微前端实践 & 微前端教程的更多相关文章

  1. 前端 | JS 任务和微任务：promise 的回调和 setTimeout 的回调到底谁先执行？

    首先提一个小问题:运行下面这段 JS 代码后控制台的输出是什么? console.log("script start"); setTimeout(function () { con ...

  2. 还不知道如何实践微服务的Java程序员，这遍文章千万不要错过！

    作者:古霜卡比 前言 本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件.本文侧重于简明地表达微服务架构的全局图景,因此不会涉及具体如何使用组件等细节. 要理解微服务 ...

  3. Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  4. Web前端开发最佳实践（6）：过时的块状元素和行内元素

    前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...

  5. 前端如何真正晋级成全栈：腾讯 Serverless 前端落地与实践

    Serverless 是当下炙手可热的技术,被认为是云计算发展的未来方向,拥有免运维.降低开发成本.按需自动扩展等诸多优点.尤其是在前端研发领域,使用 Node 开发云函数,可以让前端工程师更加专注于 ...

  6. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  7. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  8. [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇

    原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优 ...

  9. [Linux] 一个前端必会的 Nginx 免费教程-在虚拟机中用deepin测试

    原文技术胖的 nginx 技术胖 专注于前端开发 deepin Linux Deepin 是一个基于 DEB 包管理的一个独立操作系统,和那些 Ubuntu(下个大版本是基于 debian 开发) 的 ...

随机推荐

  1. 扩展PE头属性说明

    CRC检测的算法就是checksum 以下是DllCharacteristics的参数说明

  2. 容器调度 • Docker网络 • 持续交付 • 动态运行应用程序 部署的多元化

    <英雄联盟>在线服务运维之道 - InfoQ https://www.infoq.cn/article/running-online-services-riot/ 第一章 简 介 我是Jo ...

  3. Redis击穿、穿透、雪崩产生原因以及解决思路

    击穿 大家都知道,计算机的瓶颈之一就是IO,为了解决内存与磁盘速度不匹配的问题,产生了缓存,将一些热点数据放在内存中,随用随取,降低连接到数据库的请求链接,避免数据库挂掉.需要注意的是,无论是击穿还是 ...

  4. jQuery——通过Ajax发送数据

    Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML),一个Ajax解决方案涉及如下技术: JavaScript:处理与用户及其他浏览器相关事件的 ...

  5. BPF CO-RE 示例代码解析

    BPF CO-RE 示例代码解析 在BPF的可移植性和CO-RE一文的末尾提到了一个名为runqslower的工具,该工具用于展示在CPU run队列中停留的时间大于某一值的任务.现在以该工具来展示如 ...

  6. Flink-v1.12官方网站翻译-P010-Fault Tolerance via State Snapshots

    通过状态快照进行容错 状态后台 Flink管理的键控状态是一种碎片化的.键/值存储,每项键控状态的工作副本都被保存在负责该键的任务管理员的本地某处.操作员的状态也被保存在需要它的机器的本地.Flink ...

  7. linux（1）Mac上传文件到Linux服务器

    前言 我们使用mac时,想让本地文件上传至服务器,该怎么办呢 windows系统,我们可以使用xftp或者rz命令,那么mac呢? mac系统,我们可以使用sftp.scp或者rz命令,本文介绍sft ...

  8. 《Proxy系列专题》：代理模式（静态、JDK、CGLib）

    <Proxy系列专题>:代理模式(静态.JDK.CGLib)使用 现象:在如今互联网时代,项目的复杂度不断的提升,有些场景下需要一定的设计优化来支撑业务的扩展,如为了不改动原始类,但需要对 ...

  9. c++ stl nth_element 原理解析

    nth_element是stl中的一个库函数,它会使迭代器nth所指的元素与整个[first,last)完整排序后.同一个位置的元素同值.即找到完整排序时第n位的正确值. 但这个函数与完整排序的区别在 ...

  10. 2015-2016 ACM-ICPC, NEERC, Northern Subregional Contest (9/12)

    $$2015-2016\ ACM-ICPC,\ NEERC,\ Northern\ Subregional\ Contest$$ \(A.Alex\ Origami\ Squares\) 签到 //# ...