microfrontends

技术雷达之「微前端」- 将微服务理念扩展到前端开发(下:实战篇)

前言与大纲 本文分为理论和实战上下两篇。本篇为微前端的实战篇,共计约 5k 字,预计阅读时间 10 mins。 在技术雷达之「微前端」- 将微服务理念扩展到前端开发(上:理论篇)中,我们介绍了微前端在单体应用和微服务的架构演进中所产生的缘由,将微服务理念运用到前端开发就是为了解决臃肿前端的当前现状。与此同时,合理拆分微前端也给我们的应用开发带来显而易见的好处,在本篇当中我们将逐一介绍微前端的实践方案与可能遇到的问题和对应的优化建议。 * 微前端的可选实践方案(4 种 +) * 创建更小的 Apps(而不是 Components) * 如何组合微前端的 App 模块? * Option 1: 使用后端模板引擎插入 HTML * Option 1.1: 渐进式从后端进行加载 * Option 2: 使用 IFrame 隔离运行时 * Option 3: 客户端 JavaScript 异步加载 * Option
吕立青

技术雷达之「微前端」- 将微服务理念扩展到前端开发(上:理论篇)

前言 本文分为理论和实战上下两篇。本篇为技术雷达之「微前端」- 将微服务理念扩展到前端开发(上:理论篇),共计约 2k 字,预计阅读时间 5 mins。 在 ThoughtWorks 正式发布的最新一期技术雷达(下载地址:technology-radar-vol-17-cn.pdf)当中,「微前端(Micro Fontends)」已经进入到试验阶段,而试验环所列出的技术是我们认为值得去追求的。理解如何建立这种能力对您所在的组织十分重要,现在就可以尝试在一个低风险的项目上试点和实践这项技术,帮助您真正地了解这门技术。 摘自技术雷达:我们已经从引入微服务架构中获得了明显的好处,微服务架构可以让团队裁剪出独立部署的交付物以及可维护的服务。不幸的是,我们还看到许多团队在后端服务之上创建了前端单体——一个单一,庞大和杂乱无绪的浏览器应用。我们首选的(经过验证的)方法是将基于浏览器的代码拆分成微前端。在这种方法中,Web 应用程序被分解为多个特性,每个特性都由不同的前后端团队拥有。这确保每个特性都独立于其他特性开发,测试和部署。这样可以使用多种技术来重新组合特性——有时候是页面,有时候是组件
吕立青

「技术雷达」之 Micro Frontends:微前端 - 将微服务理念扩展到前端开发

[slide] ✨ Micro Frontends ✨ 微前端 - 将微服务理念扩展到前端开发 (via Jimmy Lv 🐵) [slide] ⏲️ | Agenda 1. 微前端的概念缘由与定义 2. 微前端的实践方案(4+) 3. Demo 4. 优缺点总结与思考 [slide style=”background-image:url(‘https://raw.sevencdn.com/JimmyLv/images/master/2017/12/1513920317188.png’)”] The Majestic Monolith [note] * 当今的软件开发环境中,大多数应用程序都是单一的,这种方法的缺点之一是企业所有者一年内需要做的决策数量非常有限(因为依赖关系,响应时间较慢)。 * 升级产品,在一系列相关服务中增加尺寸较大等新功能,需要所有相关方共同努力,以同步方式进行变更。 [/note] [slide]
吕立青