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

微前端

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. editplus 5.0 破解

    先安装软件,安装步骤就不解释了,很傻瓜式的,一直下一步就行.   到了最重要的一步,请看仔细了!!!   在两个输入框中分别输入 注册名 Vovan 注册码 3AG46-JJ48E-CEACC-8E6 ...

  2. SpringCloud-常用组件介绍

    SpringCloud-常用组件介绍 分布式系统开发用于分布式环境(多个服务器不在同一个机房,同一个业务服务在多台服务器运行) Spring Cloud 是基于Springboot的分布式云服务架构, ...

  3. Urlrewrite

    Urlrewrite  地址重写,用户得到的全部都是经过处理后的URL地址 过滤用户的所有请求,符合规则的便对其进行重定向 rule结点中from默认使用的正则表达式来匹配,若用户访问服务器时的URL ...

  4. 《》——8幅图图解Java机制

    String对象不可改变的特性 String s = "abcd"; s = s.concat"ef"; equals()与hashCode()方法协作约定 H ...

  5. Fastjson使用实例

    Fastjson使用实例 一.FastJson使用范例 1.1FastJson三个核心类 1.2Maven依赖 1.3Scala API 1.3.1反序列化 1.3.2序列化 1.4Java API ...

  6. 腾讯云TcaplusDB获新加坡MTCS最高等级安全认证

    近日,经过国际权威认证机构DNV GL的全面评估审核,TcaplusDB获得了新加坡多层云安全(以下简称"MTCS")T3级最高等级认证,这标志着TcaplusDB全面满足了新加坡 ...

  7. Pytest（4）失败重跑插件pytest-rerunfailures

    安装: pip3 install pytest-rerunfailures 重新运行所有失败用例 要重新运行所有测试失败的用例,请使用--reruns命令行选项,并指定要运行测试的最大次数: $ py ...

  8. Linux 防火墙相关操作

    目录 1.查看防火墙状态 2.部署防火墙 3.常用操作 4.其他操作 1.查看防火墙状态 systemctl status firewalld 绿字部分 Active:active(running) ...

  9. 【繁星Code】如何在EF将实体注释写入数据库中

    最近在项目中需要把各个字段的释义写到数据库中,该项目已经上线很长时间了,数据库中的字段没有上千也有上百个,要是一个项目一个项目打开然后再去找对应字段查看什么意思,估计要到明年过年了.由于项目中使用En ...

  10. 2019牛客暑期多校训练营（第五场）H-subsequence 2 (拓扑排序+思维)

    >传送门< 题意: 给你几组样例,给你两个字符a,b,一个长度len,一个长度为len的字符串str,str是字符串s的子串 str是s删掉除过a,b两字符剩下的子串,现在求s,多种情况输 ...