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

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

微前端

micro frontends

https://micro-frontends.org/

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

2016, ThoughtWorks technology radar

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

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

微前端 & 微前端实践 & 微前端教程_第1张图片

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

微前端 & 微前端实践 & 微前端教程_第2张图片

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

  • Container + SSR

微前端 & 微前端实践 & 微前端教程_第3张图片

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/

微前端 & 微前端实践 & 微前端教程_第4张图片

$ npm i single-spa

qiankun

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

微服务

Microservices

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

GraphQL

https://graphql.org/

微前端 & 微前端实践 & 微前端教程_第5张图片







微前端 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


Flag Counter

©xgqfrms 2012-2020

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


你可能感兴趣的:(微前端 & 微前端实践 & 微前端教程)