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

微前端

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. PHP 框架之一Laravel

    Laravel: Laravel The phpFramework for Web Artisans and one of the best php framework in year 2014. L ...

  2. Oracle 0至6级锁的通俗解释及实验案例_ITPUB博客 http://blog.itpub.net/30126024/viewspace-2156232/

    Oracle 0至6级锁的通俗解释及实验案例_ITPUB博客 http://blog.itpub.net/30126024/viewspace-2156232/

  3. ModuleNotFoundError 模块寻找路径

    t = os.path.dirname(os.path.dirname((os.path.dirname(os.path.abspath(__file__)))))os.path.sys.path.a ...

  4. css水平、垂直居中的写法

    水平居中 行内元素: text-align: center 块级元素: margin: 0 auto position:absolute +left:50%+ transform:translateX ...

  5. python基础（数据类型，while，if）

    python基础初识. 1,运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码python ...

  6. JDBC基础:JDBC快速入门,JDBC工具类,SQL注入攻击,JDBC管理事务

    JDBC基础 重难点梳理 一.JDBC快速入门 1.jdbc的概念 JDBC(Java DataBase Connectivity:java数据库连接)是一种用于执行SQL语句的Java API,可以 ...

  7. JavaWeb——JSP内置对象application，JSP属性范围

    application application语法 application对象 JSP属性范围 范围的分类 page request session application pagecontext延伸 ...

  8. MySql命令，吐血整理的Mysql，实话，真的吐血

    MySql命令,吐血整理的Mysql,实话,真的吐血 1.基本操作 2.数据库操作 3.表的操作 4.数据操作 5.字符集编码 6.数据类型(列类型) 7.列属性(列约束) 8.建表规范 9.SELE ...

  9. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  10. CTGU_训练实录

    前言 之前做题都没有感觉,慢慢出去比赛后,打Codeforces,看别的人博客,知乎上的讨论,慢慢的对算法有一些自己的思考.特写是最近看知乎上别人说的Dijkstra利用水流去理解,LCA的学习,感觉 ...