使用开源微前端框架 Luigi 创建一个基于微前端架构的工程

简介: 官网地址

微前端通常被称为“前端微服务”。 它们允许您将大型单体前端分解为独立的、可扩展的、可以协同工作的独立部分。 微前端架构对于复杂的产品或拥有众多团队的公司尤其有用,可以帮助您创建一致的 Web 应用程序。


观看此视频,其中解释了微前端架构的基础知识以及如何使用 Luigi 实现。


Luigi 是一个用 Svelte 编写的开源微前端框架。 它允许您创建一致的用户界面和导航,同时还提供其他功能以使开发更容易。 它的外观基于基本库样式。 Luigi 与技术无关,允许您使用 React、Angular、UI5 或任何其他技术构建应用程序并向其添加微前端。


Luigi Fiddle 是一个测试游乐场,您可以在其中感受 Luigi。


这张图描绘了 Luigi 的基本架构

image.pngLuigi terminology

这是一小部分 Luigi 术语:


Luigi Core - 指其中显示微前端的主要应用程序。 它包括顶部和侧面导航以及与主应用程序相关的所有其他设置。


Luigi Client - 这个术语涵盖了 Luigi 提供的所有与微前端相关的设置。 微前端可通过 Luigi Client API 进行配置。


parameters - 参数是用于配置 Luigi 应用程序的元素。


导航节点 - Luigi 中侧面导航的各个链接。


Contexts - 上下文是 Luigi 参数,允许您将对象传递到微前端。


Views - 视图,微前端的另一个名称。


本系列文章,我们将从头开始使用 Luigi 创建一个应用程序。它将基于网络购物平台的理念,并将包括其他功能,例如用于以英语和德语显示网站的本地化。


该应用程序由三个主要部分组成:


使用 React 构建的 Luigi Core 应用程序:“主应用程序”,其中包含微前端并包括无论您导航到应用程序的哪个子页面都保持一致的顶部和侧面导航。


使用 React 构建的微前端:它们包括主页、“产品”页面和包含每个产品信息的“产品详细信息”列表。


使用 UI5 构建的微前端:“订单历史”页面,显示已购买产品的数量和价格。


最后,您完成的应用程序的主页应如下所示:

image.png

image.png

Install dependencies

If you haven’t already done so, make sure you install SAP Fonts.


跳转到 core app 去:cd react-core-mf


安装依赖:


npm i -P @luigi-project/core @luigi-project/client fundamental-styles fundamental-react @sap-theming/theming-base-content react-router-dom


npm i copy-webpack-plugin webpack webpack-cli @babel/core @babel/preset-env babel-loader --save-dev

image.png

image.png

Add a file with product data

在此步骤中,您将创建一个文件,其中包含有关您的购物应用中在售产品的信息。


在现实的项目实现中,这些数据将由数据库提供。但为简单起见,您将在 .json 文件中创建虚拟数据。该文件将由主应用程序和微前端使用。


Navigate to ui5-mf/uimodule/webapp/model and create a products.json file with the following content:

{
  "ProductCollection": [{
      "id": 101,
      "name": "Logitech Mouse",
      "price": 45.0,
      "stock": 80,
      "icon": "product",
      "currencyCode": "EUR",
      "orderQuantity": 2,
      "description": "LIGHTSPEED Wireless Gaming Mouse with HERO Sensor"
    },
    {
      "id": 102,
      "name": "Logitech Keyboard",
      "price": 50.0,
      "stock": 22,
      "icon": "product",
      "currencyCode": "EUR",
      "orderQuantity": 1,
      "description": "A physical keyboard that uses an individual spring and switch for each key. Today, only premium keyboards are built with key switches; however, they were also used in the past, such as in the Model M keyboard from IBM, which used buckling spring switches"
    },
    {
      "id": 103,
      "name": "HP Optical Mouse",
      "price": 35.0,
      "stock": 4,
      "icon": "product",
      "currencyCode": "EUR",
      "orderQuantity": 2,
      "description": "Utilizing the latest optical sensing technology, the HP USB Optical Scroll Mouse records precise motion."
    },
    {
      "id": 104,
      "name": "MacBook Pro",
      "price": 1299.0,
      "stock": 11,
      "icon": "laptop",
      "currencyCode": "EUR",
      "orderQuantity": 3,
      "description": "It features a touch-sensitive OLED display strip located in place of the function keys, a Touch ID sensor integrated with the power button, a butterfly mechanism keyboard similar to the MacBook, and four USB-C ports that also serve as Thunderbolt 3 ports."
    },
    {
      "id": 105,
      "name": "Magic Mouse",
      "price": 40.0,
      "stock": 20,
      "icon": "product",
      "currencyCode": "EUR",
      "orderQuantity": 6,
      "description": "The Magic Mouse 2 (Apple Magic Mouse 2), is a computer mouse developed and released by Apple Inc. It features a multi-touch acrylic surface for scrolling. ... The mouse features a lithium-ion rechargeable battery and Lightning connector for charging and pairing."
    },
    {
      "id": 106,
      "name": "Brother Printer",
      "price": 235.0,
      "stock": 24,
      "icon": "fx",
      "currencyCode": "EUR",
      "orderQuantity": 1,
      "description": "Our affordable, quality machines provide you with the optimal way to take care of all your printing needs. Shop for the right printer, all-in-one, or fax machine for your home or home office today."
    },
    {
      "id": 107,
      "name": "iPhone 11",
      "price": 835.0,
      "stock": 45,
      "icon": "iphone",
      "currencyCode": "EUR",
      "orderQuantity": 8,
      "description": "The iPhone 11 dimensions are 150.9mm x 75.7mm x 8.3mm (H x W x D). It weighs about 194 grams (6.84 ounces).It features a 6.1-inch all-screen LCD display and is powered by Apple new A13 bionic chip with Third-Generation Neural Engine."
    },
    {
      "id": 108,
      "name": "Google Pixel 3a",
      "price": 299.0,
      "stock": 54,
      "icon": "desktop-mobile",
      "currencyCode": "EUR",
      "orderQuantity": 7,
      "description": "At 5.6 inches, the Google Pixel 3a display is proportionate to the relatively small body of the phone – that is to say, it is rather small. The display is Full HD+ and OLED, with a resolution of 2220 x 1080, and because of the relatively small screen size the pixels per inch count is rather high at 441."
    },
    {
      "id": 109,
      "name": "PlayStation 4",
      "price": 330.0,
      "stock": 94,
      "icon": "video",
      "currencyCode": "EUR",
      "orderQuantity": 1,
      "description": "PS4 is the fourth home video game console produced by Sony Computer Entertainment and is compatible with the PlayStation 3. It was officially announced at a press conference on February 20, 2013 and launched on November 15, 2013."
    },
    {
      "id": 110,
      "name": "Dell Monitor",
      "price": 630.0,
      "stock": 20,
      "icon": "sys-monitor",
      "currencyCode": "EUR",
      "orderQuantity": 3,
      "description": "34'' U3419W Monitor, Display with stand Height adjustable (115 mm), tiltable (-5° to 21°), rotatable (-30° to 30°) Security slot (cable lock sold separately), anti-theft slot for locking to stand (for display). Includes: DisplayPort cable, HDMI cable, Power cable, Stand, USB 3.0 Type-A to Type-B cable, USB-C cable"
    }
  ]
}

Prepare React app

此步骤为您的开发做好准备。 为了能够使用 webpack 并完全控制您的 React 应用程序,您需要触发 npm run eject 命令。


cd react-core-mf


执行下列命令行。 请注意,由于此命令的工作方式,npm run eject 可能会失败。如果出现错误,则需要在运行命令之前提交任何更改。


npm run eject


如果遇到下面的错误消息:

/* eslint-disable no-undef */
Luigi.setConfig({
    navigation: {
      nodes: () => [
        {
          pathSegment: 'home',
          label: 'Home',
          icon: 'home',
          viewUrl: '/app.html#/home',
          children: [{
            pathSegment: 'products',
            label: 'Products',
            icon: 'list',
            viewUrl: '/app.html#/products'
          }]
        },
        {
          pathSegment: 'products',
          label: 'Products',
          icon: 'list',
          viewUrl: '/app.html#/products',
          keepSelectedForChildren: true,
          children: [{
              pathSegment: ':id',
              viewUrl: '/app.html#/productDetail/:id'
          }]
        }
      ]
    },
    settings: {
        header: {
          title: 'Luigi Application',
          logo: '/logo.png'
        },
        responsiveNavigation: 'simpleMobileOnly'
      }
    }
);

Step 13: Use Luigi link manager for routing

在这一步中,我们将使用 Luigi 来提供微前端的路由,而不是使用 React。 Luigi Client 的 linkManager 功能是导航到每个产品的 id 页面的最简单方法。

相关文章
|
2月前
|
前端开发 JavaScript API
微前端:一种新型的前端架构方法
微前端:一种新型的前端架构方法
115 0
|
设计模式 资源调度 Kubernetes
微前端应用 乾坤 开发实践
乾坤作为一款微前端应用框架,可以有效的实现前端应用程序的模块化设计,代码复用和可维护性。下面我们来通过实际开发来看看乾坤的使用方式以及实践。
|
2月前
|
前端开发 JavaScript 开发者
探索前端领域中的微前端架构
随着前端应用的规模不断增长,传统的单体应用架构已经无法满足需求。本文将深入探讨微前端架构的概念、优势以及实现方式,为前端开发者提供新的思路和解决方案。
|
2月前
|
监控 前端开发 Serverless
微前端解决方案
微前端解决方案
66 1
|
2月前
|
人工智能 监控 安全
基于Springcloud微服务框架 +VUE框架开发的智慧工地系统源码
基于Springcloud微服务框架 +VUE框架开发的智慧工地系统源码
43 0
|
7月前
|
前端开发 微服务
微前端应用
微前端(Micro-Frontends)是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
|
存储 缓存 前端开发
从零开发微前端框架实践(基于t y p)
本文我们首先实现一个可进行子应用注册和资源加载的微前端框架,实现在一个vue3主应用中加载3个不同技术栈(vue2、react15、react16)的子应用,并且页面上渲染出各个子应用的内容;然后,我们对该微前端框架实现扩展,实现运行环境隔离(沙箱)css样式隔离应用间通讯(含父子通信、子应用间通信)全局状态管理(全局store的简单使用)利用应用缓存和预加载子应用提高加载性能一、前置准备再开发我
从零开发微前端框架实践(基于t y p)
|
存储 缓存 前端开发
从零开发—微前端框架实践
本文对微前端框架的内容做了一个详细的介绍,并从零开始用Typescript实现了微前端的基本功能
|
存储 前端开发 JavaScript
【微前端架构】AWS 上的微前端架构
【微前端架构】AWS 上的微前端架构
|
前端开发 数据可视化 JavaScript
为什么要用微前端?如何使用乾坤微前端?
为什么要用微前端?如何使用乾坤微前端?
为什么要用微前端?如何使用乾坤微前端?