Как сдать проектную работу на уровне запуска кода

Что потребуется для выполнения практической работы

- Как установить Node.js. - Подробнее почитать о том, как использовать npm. - Документация React.

Знакомство с проектом

1. Изучить README.md

2. Познакомиться с Dockerfile и Docker Compose

• Dockerfile — текстовый файл-инструкцию для запуска образов Docker,
• Docker Compose — инструмент для запуска приложений.

Мануал по Docker. Docker Desktop — приложение для установки в один клик для Mac, Linux или Windows.

3. Изучить зависимости

Детальное описание структуры файлов package.json можно найти в документации.

4. Изучить структуру кода

• Точкой входа в приложение является файл index.js, он стандартный для приложений React.
• Основной компонент, определяющий структуру главной страницы, находится в папке App.js.
• Также в папке src находятся файлы css, которые содержат стили, относящиеся к компонентам index.js и App.js, и дополнительные файлы, относящиеся к мониторингу и тестированию. Это обычный базовый набор файлов для React-приложения.
• Помимо стандартного набора, в папке src находятся:
  • подпапка components, которая в нашем случае содержит дочерние компоненты приложения;
  • папка utils — класс, отвечающий за работу с API.
    В других приложениях этот набор может отличаться, и вам нужно изучать дополнительные папки и файлы самостоятельно.
• Так как это приложение сделано только для демонстрации концепции микрофронтендов, то настоящего бэкенда у нас нет и все вызовы эмулируются на уровне файла api.js.

Планирование разделения на микрофронтенды

• Компоненты Welcome и UserLogin отвечают за отображение информации о пользователе и логин пользователя и работают с сервисом login service.
• Компонент TaskList показывает список задач и работает с сервисом task service.

Создание проектов с использованием Module Federation

Как это сделать

1. Создайте новую папку, в которой будут лежать все три проекта, и перейдите в неё.
2. В этой папке создайте новое приложение. Для этого выполните команду npx create-mf-app.
   Команда запросит у вас несколько подтверждений.

   
   Для приложения host можно указать стандартные значения.
3. Повторите выполнение команды npx create-mf-app для микрофронтендов users и tasks, но укажите соответствующие имена приложений и другие порты. Дальше в тексте урока мы будем считать, что для users указан порт 8081, а для tasks — порт 8082. Вы можете перейти в папки приложений и выполнить там команды npm install и nmp start, чтобы убедиться, что приложения создались корректно и работают.
4. Сделайте тестовые компоненты в сервисах users и tasks и добавьте их в приложение host.
   В проекте users в папке src создайте подпапку components. Добавьте в эту папку файл UsersTestControl.js со следующим содержимым:
   Скопировать кодJSX

    export default function UsersTestControl() {
        return <div>Это тестовый компонент из проекта Users</div>
    }
     
   Этот компонент будет выводить простую строку текста.
   5. Теперь откройте файл webpack.config.js проекта users и в секции plugins→ModuleFederation измените блок exposes, чтобы он выглядел следующим образом:
      Скопировать кодJSX

       exposes: {
         './UsersTestControl': './src/components/UsersTestControl.js',
       }, 
      Эта строка экспортирует компонент UsersTestControl из микрофронтенда users. Левая часть определяет, под каким именем данный компонент будет доступен приложению hosts. Правая часть указывает компилятору webpack, где находится код вашего компонента в проекте users.
   6. Теперь откройте файл webpack.config.js проекта host и в секции plugins→ModuleFederation измените блок remotes, чтобы он выглядел следующим образом:
      Скопировать кодJSX

      remotes: {
      'users': 'users@http://localhost:8081/remoteEntry.js',
      }, 

7. Откройте файл App.jsx проекта host. Замените строку import React from "react"; на import React, { lazy } from "react";. Этот код загрузит компонент lazy, который будет использоваться для отложенной загрузки модуля.
8. После всех строк import добавьте следующий код:
   Скопировать кодJSX

   
   const UsersTestControl = lazy(() => import('users/UsersTestControl').catch(() => {
    return { default: () => <div className='error'>Component is not available!</div> };
   })
   ); 
   Так выполнится импорт компонента UsersTestControl из микрофронтенда users. Если микрофронтенд users не запущен, этот код вернёт заглушку с текстом “Component is not available”.
9. Измените содержимое функции App следующим образом:
   Скопировать кодJSX

   const App = () => (
   <div className="container">
    <UsersTestControl></UsersTestControl>
   </div>
   ); 
   Этот код вызовет UsersTestControl и выведет его на экран.
10. Теперь попробуйте запустить приложения users и hosts.
    Важно, чтобы приложение users запустилось до запуска приложения hosts, а затем они работали параллельно. Для этого вам понадобятся две командные строки. Это нужно для того, чтобы запустившись, приложение hosts смогло загрузить код из приложения users.
    Если вы всё сделали по инструкции, в браузере появится строка «Это тестовый компонент из проекта Users».
    
11. Теперь проделайте аналогичные действия для проекта tasks: создайте файл ./src/components/TasksTestControl.js и добавьте в него одноимённую функцию. А в секцию exposes в проекте tasks добавьте информацию о файле.
12. Затем пропишите его в webpack.config.js проекта host рядом с кодом, относящимся к users.
    Скопировать кодJSX

    remotes: {
    'users': 'users@http://localhost:8081/remoteEntry.js',
    'tasks': 'tasks@http://localhost:8082/remoteEntry.js',
    }, 
13. Импортируйте в App.jsx проекта hosts.
    Скопировать кодJSX

    const TasksTestControl = lazy(() => import('tasks/TasksTestControl').catch(() => {
    return { default: () => <div className='error'>Component is not available!</div> };
    })
    ); 
14. Добавьте его вызов после вызова UsersTestControl.
    Скопировать кодJSX

    const App = () => (
    <div className="container">
    <UsersTestControl></UsersTestControl>
    <TasksTestControl></TasksTestControl>
    </div>
    ); 

15. Теперь запустите все три приложения. Приложения users и tasks должны быть уже запущены к моменту старта приложения hosts. После запуска вы должны увидеть две строки в браузере:
    
    Теперь, когда вы убедились, что приложение host видит микрофронтенды и способно с ними работать, можно разбивать изначальное приложение на компоненты.

Перенос кода из начального проекта

API

1. В проектах tasks и users в папке src создайте подпапки utils.
2. В папках utils создайте файлы api.js со следующим кодом:
   Скопировать код

    class Api {
        constructor({ address }) {
            // стандартная реализация — объект options
            this._address = address;
        }
    }
    
    const api = new Api({
        //address: 'http://localhost:3001',
        address: 'https://nomoreparties.co',
    });
    
    export default api;
     
   Этот код — общий для обоих микрофронтендов.

3. В класс API микрофронтенда users скопируйте методы login и getProfile. Они специфичные для работы с пользователями.
4. В файл api.js микрофронтенда tasks перенесите весь остальной код из api.js исходного приложения. Этот код эмулирует работу c бэкендом задач. Обратите внимание, в конструктор для tasks нужно будет добавить вызов this.initialize();.

Компоненты

1. Скопируйте их и относящиеся к ним файлы css в соответствующие микрофронтенды в папку components. Откройте скопированные файлы и найдите код export function. Замените его на export default function. Это нужно для того, чтобы импорт к host корректно загрузил компоненты. Для компонента Welcome должно получиться так: export default function Welcome({ jwt }) { Аналогично и для других компонентов.
2. Теперь вам следует добавить их экспорт в webpack.config.js, для этого в webpack.config.js модуля users после строчки './UsersTestControl': './src/components/UsersTestControl.js', добавьте экспорт контролов UserLogin и Welcome.
   У вас получится следующий код:
   Скопировать кодJSX

              exposes: {
                './UsersTestControl': './src/components/UsersTestControl.js',
                './UserLogin': './src/components/UserLogin.js',
                './Welcome': './src/components/Welcome.js',
              },
     
3. Аналогично сделайте в модуле tasks:
   Скопировать кодJSX

          exposes: {
            './TasksTestControl': './src/components/TasksTestControl.js',
            './TaskList': './src/components/TaskList.js',
          },
     
4. Теперь внимательно взгляните на файл App.js в исходном приложении.
   Этот файл определяет структуру страницы. В нём используются контролы, копии которых вы перенесли в микрофронтенды, и вам нужно будет реализовать подобную структуру в приложении hosts.
   Также он содержит в себе код обработчика onLogin, который использует API и вызывает метод login. Но в этом модуле hosts нет api.js. Вся логика, относящаяся к работе с пользователями, вынесена в модуль users. В качестве фасадов данного модуля используются компоненты, которые вы перенесли ранее.
   Напрямую использовать API из микрофронтенда в центральном приложении не стоит. Это нарушит слабую связанность, и изменения в микрофронтенде могут сломать приложение host.

Взаимодействие между микрофронтендами

1. Вот как должен измениться код вашего компонента UserLogin:
   Скопировать кодJSX

    import { useState } from 'react';
    import './UserLogin.css';
    import api from '../utils/api'
    
    export default function UserLogin() { // Убрали onLogin из параметров
        const [email, setEmail] = useState('');
        const [password, setPassword] = useState('');
        
        // Добавили onLogin в UserLogin и отправляем полученный jwt с помощью события
        function onLogin(name, password) {
            dispatchEvent(new CustomEvent("jwt-change", {
                detail: api.login(name, password)
            }) );
        }
    
        return (
     
   🔍 В реальном приложении вы будете работать аналогично, но, скорее всего, вам понадобится добавить несколько событий.
2. Вернёмся в App.jsx проекта host.
   Замените строку import React from "react"; на import React, { lazy, Suspense, useState, useEffect } from "react";. Это позволит использовать необходимые компоненты React.
   Измените функцию App следующим образом:
   Скопировать кодJSX

    const App = () => {
      const [jwt, setJwt] = useState('');
    
      const handleJwtChange = event => { // Эта функция получает нотификации о событиях изменения jwt
        setJwt(event.detail)
      }
    
      useEffect(() => {
        addEventListener("jwt-change", handleJwtChange); // Этот код добавляет подписку на нотификации о событиях изменения localStorage
        return () => removeEventListener("jwt-change", handleJwtChange) // Этот код удаляет подписку на нотификации о событиях изменения localStorage, когда в ней пропадает необходимость
      }, []);
    
      return <div className="container">
        <header className='App-header'>
            Лабораторная работа по микрофронтендам
        </header>
        <section className='App-content'>
            {jwt ? (
                <>
                    <Suspense>
                      <Welcome jwt={jwt} />
                    </Suspense>
                    <Suspense>
                      <TaskList jwt={jwt} />
                    </Suspense>
                </>
            ) : (
                <Suspense>
                  <UserLogin/>
                </Suspense>
            )}
        </section>
      </div>
    };
     
   В этом коде вы добавили состояние для jwt и обработчик события "jwt-change".
3. Теперь вы можете импортировать контролы из модулей в App.jsx.
   Удалите код импорта UsersTestControl и TasksTestControl и замените его на код импорта компонентов TaskList, UserLogin и Welcome.
   Скопируйте из исходного приложения весь текст из файла App.css и вставьте его в index.css в приложении host.

Запуск финального приложения

Итоги

Фронтенд многообразен, существует большое количество библиотек и фреймворков. Если вы захотите изучить тему фронтенда подробнее, мы предлагаем вам ссылки на дополнительные материалы: - Официальный сайт Module Federation - Официальный сайт SingleSPA - Официальный сайт NodeJS - Курс «Фронтенд-разработчик» от Яндекс Практикума.