最新公告
  • 欢迎光临数据科学与编程,我们是数据学科学兴趣交流小组立即加入我们
  • 你必须知道的12个微前端框架

    你必须知道的11个微前端框架
    作者 | Jonathan Saring
    译者 | Flora
    策划 | 蔡芳芳
    微前端将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能,可以在自己的代码库中工作,可以独立发布版本,可以不断进行小的增量升级,还可以通过 API 与其他团队集成,以便他们可以一起组建和管理页面和应用程序。本文中,作者收集了 11 个最杰出的微前端构建工具,并提供了进一步学习的链接和视频。

    将单体后端分解成为微服务之后,后端开发流程已在效率和规模上取得了显著进步。然而,当今大多数前端应用程序架构仍然是单体式的,使得前端开发流程很难加速和扩展。

    微前端的想法是将前端单体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能,可以在自己的代码库中工作,可以独立发布版本,可以不断进行小的增量升级,还可以通过 API 与其他团队集成,以便他们可以一起组建和管理页面及应用程序。

    你必须知道的11个微前端框架

    微前端有很多方法,从智能的构建时组件集成,到使用自定义路由的运行时集成等等。在本文的列表中,作者收集了最杰出的微前端构建工具。欢迎读者在评论中添加反馈或建议!

      1. Bit  

    Bit 容许你从独立的组件组建和管理前端。它可能是清单上最受欢迎的、可用于生产(production-ready)的解决方案。

    如果查看 bit.dev 主页,你会发现它由很多独立的组件构成。这些组件由不同团队,在不同代码库中构建,并最终集成在一起,创造了一个紧密结合的产品。

    你必须知道的11个微前端框架

    Bit CLI 是广泛流行的工具,用于组件驱动开发。使用 Bit,你可以将独立的组件构建、集成和组合到一起。

    尽管人们通常将微前端视为在运行时发生的组合,但 Bit 可以让开发人员在构建时高效地组合前端,以享受两全其美的优势:“传统单体式前端”的安全性和健壮性,以及微前端的 简单性可伸缩性

    使用 Bit,在与其他团队合作同时,不同的团队可以独立构建、发布和公开其组件,这样就可以将 Web 开发过程转变为功能和组件的模块化组合。

    你必须知道的11个微前端框架你必须知道的11个微前端框架

    除了 用于组件驱动开发的 OSS 工具 外,Bit 还为团队提供了一个 云平台,该云平台使得团队可以构建变更并在组件上进行协作,可以高效地管理和扩展开发过程,同时保持所有团队完全独立,团队可自主交付。

    为了确保每个前端都有自己独立且快速的构建流程,Bit 还提供了独特的 CI/CD 流程,该流程为 100% 组件驱动,这意味着不同的团队可以安全地集成更改,而不必等待,争夺主控权或打破任何东西。开发人员可以在所有受影响的应用程序中持续和安全地将更改传播到组件。

    你必须知道的11个微前端框架

    作为结果,通过 简单的解耦代码库、自治团队、小型定义良好的 API、独立的发布管道持续增量升级,增强了工作流程。可以查看如下示例。

    我们怎样构建微前端

    https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc

     

    如果你的团队使用组件来开发软件,并且正在寻找一种可以在大型应用程序上解锁微前端和模块化工作的解决方案,请务必查看 Bit 的 OSS 工具和平台,这可能正是你所需要的。

    项目链接

    https://github.com/teambit/bit

    2. Webpack 5和Module Federation

    多个单独的构建最后要形成一个应用程序。这些单独的构建不应相互依赖,因此可以单独开发和部署。

    Module Federation 是 Zack Jackson 发明的 JavaScript 架构,Zack Jackson 随后提出为其创建一个 Webpack 插件。Webpack 团队提供帮助将该插件引入了 Webpack 5,目前处于 beta 测试阶段。

    项目链接

    https://webpack.js.org/concepts/module-federation/

    简而言之,Module Federation 允许 JavaScript 应用程序在运行时从另一个应用程序动态导入代码。模块将构建唯一的 JavaScript 入口文件,其他应用程序可以通过设置 Webpack 配置项来下载该入口文件。

    它还通过启用依赖关系共享来解决代码依赖关系和包大小增加的问题。例如,如果你要下载一个 React 组件,那么你的应用程序不会两次导入 React 代码。模块将自动使用你已有的 React 源,仅额外导入组件代码。最后,你可以使用 React.lazy 和 React.suspense 提供后备功能,以确保当导入的代码由于某种原因失败后,不会因构建失败而影响用户体验。

    这个架构释放了构建微前端的巨大潜力。你可以在如下文章中阅读更多信息和查看示例。

    采用 Webpack 5、Module Federation 和 Bit 变革微前端:

    https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0

     

    3. Single SPA

    Single SPA 将自己定义为一种“前端微服务 Javascript 框架”。简言之,它将生命周期应用于每个应用程序。每个应用程序都可以响应 url 路由事件,并且知道如何从 DOM 引导,加载和卸载自身。传统 SPA 和 Single SPA 应用程序之间的主要区别在于它们能够与其他应用程序共存,并且它们各自没有自己的 HTML 页面。

    因此,如果你希望将不同的前端或框架整合到一个 DOM 中,并希望在运行时进行集成,请查看这个有趣的实验。

    https://youtu.be/L4jqow7NTVg

    你可以在这里查看一些示例:

    https://github.com/react-microfrontends

    项目链接

    https://github.com/single-spa/single-spa

     

    4. SystemJS

    SystemJS 不是微前端框架,但它确实为跨浏览器的独立模块管理提供了解决方案。这种解决方案是实现 MF 的关键(并且实际上也被 Singe-spa 使用)。

    可以将 SystemJS 视为 JS 模块的协调器。它使我们无需依赖本机浏览器支持,即可使用与 JS 模块相关的不同功能,诸如动态导入和导入映射等,并且所有这些都具有接近本机的性能。一些值得注意的功能包括用于较旧浏览器的 Polyfill,使用名称的模块导入(通过将名称映射到路径)以及对多个 JS 模块的单个网络请求(通过使用其 API 将多个模块设置为单个文件)。

    它还提供便捷的方式访问其“模块注册表”,以便你随时了解浏览器中哪些模块是可用的。

    项目链接

    https://github.com/systemjs/systemjs

     5. Piral 

    Piral 的目标是让你可以使用微前端轻松构建门户应用程序。你可以使用 Piral 创建模块化前端应用程序,并利用微前端体系结构在运行时使用称为 pilets 的解耦模块进行扩展。用户可以独立开发一个 pilet,并附带必要的代码以及所有其他相关资产。这是一个现场演示:

    https://youtu.be/SkKvpBHy_5I

    Piral 所要求的前提条件相当宽松,开发人员仅需要安装喜欢的编辑器、终端、网络浏览器和 Node.js 即可。开发者可以在本地开发机的仿真器中执行和调试 Piral instance(应用程序外壳)和 piltes(功能模块)。

    你必须知道的11个微前端框架

    项目链接

    https://github.com/smapiot/piral

     

    6. OpenComponent

    Open Component(简称 OC)项目宣布其目标是“前端世界中的无服务器”。更具体地说,OC 旨在成为一个一站式微前端框架,从而使其成为一个丰富而复杂的系统,其中包括从组件处理到注册表、再到模板、甚至包括 CLI 工具。OpenComponents 有两个部分:

    • components 是同构代码的小单元,主要由 html、javascript、css 组成。它们可以选择包含一些逻辑,从而允许服务端的 node.js 应用去组建用于呈现视图的模型。在渲染之后,它们就是纯 html 片段,可以插入到任何 html 页面中。

    • consumers 是网站或微型网站(所有小型可独立部署的网站,这些网站均通过前门服务或路由机制连接)。这些网站需要在其网页中呈现部分内容的组件。请查看这里以了解更多信息:

      • https://github.com/opencomponents/oc

     

    7. Qiankun

    Qiankun 声称自己是“一个 微前端 实现,基于 single-spa,但已使 single-spa 可用于生产(production-ready)”。该项目旨在解决由较小的子应用程序组成较大的应用程序时所面临的一些主要问题,例如发布静态资源、集成单个子应用程序、确保子应用程序在开发和部署过程中彼此独立且运行时相互隔离、处理公共依赖性和处理性能问题等。

    项目链接

    https://github.com/umijs/qiankun

    8. Liugi

    Luigi 是一个微前端 JavaScript 框架,你可以使用它创建由本地和分布式视图驱动的管理用户界面。Luigi 允许 Web 应用程序与应用程序包含的微前端进行通信。为了确保通信顺利进行,你可以配置路由、导航、授权和 UX 元素等设置。

    你必须知道的11个微前端框架

    Luigi 由 Luigi Core 应用程序和 Luigi 客户端库组成。他们使用 postMessage API 在核心应用程序和微前端之间建立安全的通信。想获取更多信息,请自行前往查看。

    这是一个 测试乐园 (Test Playground),你可以在这里亲身体验它的工作原理。

    https://fiddle.luigi-project.io/#/home/overview

    尝试一下,也可在 GitHub 上查看这个不错的 SAP 项目:

    项目链接

    https://github.com/SAP/luigi

    9.FrintJS

    FrintJS 是“用于构建可伸缩和响应式应用程序的模块化 JavaScript 框架”。你可以使用它加载来自不同 bundlers 的应用程序,为应用程序提供结构,并处理诸如路由、依赖关系等问题。该项目可通过附加的软件包支持 RN 和 Vue,但文档和测试大多数是针对 React 的。

    你必须知道的11个微前端框架

    可以访问如下的 GitHub 项目了解更多信息。

    项目链接

    https://github.com/frintjs/frint

    10 Mosaic

    Mosaic 是一组服务,库以及规范定义了其组件之间如何彼此交互,用来支持大型网站的微服务式架构。Mosaic 使用了片段(Fragments)的机制,这些片段由单独的服务程序提供服务,并根据模板定义在运行时组合在一起。

    你必须知道的11个微前端框架

    它由一堆软件包组成,这些软件包处理不同的问题,例如路由、布局、模板存储、甚至展示 UI。需要更多信息,请查看如下链接。

    项目链接

    https://www.mosaic9.org/

    11. PuzzleJS

    PuzzleJS 是“用于可扩展和快速建站的微前端框架”。你可以使用它创建相互对话的网关和店面项目。它的灵感来自 Facebook 的 BigPipe,朝着微前端的方向发展。

    你必须知道的11个微前端框架

    PuzzleJs 提供诸如创建网关或店面(彼此独立)的功能,并提供配置文件将它们连接。你可以使用它在编译时将 html 模板编译为 javascript 函数。此操作完全独立于请求,因此 PuzzleJ 可以使用此功能发送第一个块。它也是 SEO 友好的,在服务端进行准备和渲染。而且,当片段所需的 api 出现故障时,PuzzleJs 可保证其他页面片段仍正常工作。这里是一个真实的 例子。

    项目链接

    https://github.com/puzzle-js/puzzle-js

    英文原文

    https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20

    12.wp-bootstrap

    如何获得Bootstrap?

    最新版本的Bootstrap可以从getBootstrap.com免费下载。和WordPress一样,任何用户都可以以任何方式使用和修改它。基本的Bootstrap设置有三个主要文件:一个CSS框架、一个JavaScript或jQuery框架和一个名为glyphicons的图标字体集。

    为了充分发挥网站构建器的作用,Bootstrap需要jQuery,这是一个流行的JavaScript库,提供了JavaScript跨浏览器的兼容性,并支持其丰富的插件库。此外,如果想通过Bootstrap将响应移动的主题构建到自定义的WordPress站点中,用户可以单独使用CSS框架,而无需添加JavaScript元素。

    Bootstrap的主站点还包括通过混合和匹配一长串CSS、组件和JavaScript文件来构建自己的自定义Bootstrap版本的选项,这些文件可以包含在用户版本中。自定义Bootstrap还可以包括许多jQuery插件,它们通过旋转木马、高级按钮等扩展Bootstrap的功能。在可用的菜单中选择了需要的功能之后,只需下载结果,就可以将Bootstrap添加到WordPress自定义站点了。而现有的Bootstrap配置可以上传到Bootstrap的主站点,添加用户所需的功能,并下载新版本以便在站点上使用。

    将Bootstrap集成到WordPress中

    WordPress主题通过在WordPress核心代码定义的框架中添加一组HTML和CSS样式表来建立WordPress站点的外观和布局。任何熟悉HTML、CSS和PHP(开发WordPress核心代码所用的编程语言,同时也是使用Bootstrap创建响应性主题所必需的)的人都可以创建主题。

    所有WordPress主题都位于一个名为style.css的文件中,该文件包含了主题及其元信息的所有样式。该文件由WordPress主题主文件(称为index.php)支持。要将Bootstrap文件集成到WordPress主文件中,您需要导航到wp-content》主题并为Bootstrap主题创建一个新文件夹。为这个新的主题文件夹命名。

    完成此操作后,复制创建任何类型的WordPress主题所需的所有文件,并将它们放在Bootstrap主题文件夹中。然后,将Bootstrap代码复制到这些文件中,并根据需要进行修改,以便将正确的元素和样式添加到主题中。这样,就可以覆盖Bootstrap中现有的样式,而支持新的版本,并且不需要修改Bootstrap的核心代码。

    当构建Bootstrap主题所需的所有文件都被添加到主题文件夹中并安装在网站的主题主文件夹中之后,该主题可以像其他主题一样被激活,并通过网站的管理仪表板进行管理。

    适用于WordPress的Bootstrap插件

    像其他WordPress主题一样,Bootstrap可以与许多WordPress友好的插件一起工作,为特定站点添加一系列其他功能。Bootstrap插件可以帮助用户处理电子商务的各项事宜,例如设置价格和在小屏幕上展示产品。其他插件允许用户创建移动设备可用的元素,比如菜单和表单。一些SEO友好的插件也有助于促进和优化博客帖子或文章。插件甚至可以帮助用户管理Bootstrap的完全可自定义的组件。

    移动设备的应用主导着互联网的趋势,所以WordPress网站具有移动响应性是一个聪明的商业举措。不管用户使用哪种设备,只要利用Bootstrap,再加上一点编码知识,任何WordPress网站都能呈现出最好的效果。(源自:美国主机-BlueHost)

    本站上原创文章未经作者许可,不得用于商业用途,仅做学习交流使用,本站免责声明。转载请注明出处,否则保留追究法律责任的权利。《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
    数据科学与编程 » 你必须知道的12个微前端框架

    发表评论

    • 52会员总数(位)
    • 310资源总数(个)
    • 32本周发布(个)
    • 1 今日发布(个)
    • 331稳定运行(天)

    提供最优质的博文资源集合

    立即阅览 了解详情