8 шагов к внедрению микроформления в реагирование с Still.js
2 июля 2025 г.Почему микропландент
Создание и модернизация крупных и/или устаревших приложений на уровне предприятия часто является сложным, поскольку требует переписывания значительных частей или даже всего применения при переходе на новые технологические версии. MicroFrontends предлагают практическое решение этой проблемы, так же, как микросервисы делают для бэкэнд. Они не просто модное слово, но и значимый архитектурный подход для обработки сложности и масштабируемости.По -прежнемуУлучшает это, предоставляя мощные и гибкие средства для построения микроформления, с бесшовной интеграцией в рамки, такие какРеагироватьПолем
Какие проблемы и варианты использования могут быть решены с помощью микроконтролдента?
Развязка приложения;
Прогрессивная миграция от старой в новую версию (например, мигрируйте структуру с V2 в V15);
Быстрая реализация новой функции без нарушения существующей экосистемы;
Быстрая модернизация старого/устаревшего применения, но сохраняет стабильные вещи;
И еще ...
Как до сих пор.
Still.JS-это современная, полная и полнофункциональная (с известными возможностями и многое другое), созданная с ванильным JavaScript, предназначенную для простой и масштабируемой разработки и интеграции, таких как встроение приложения в приложения React в форме компонентов. Bellow - это архитектура интеграции на высоком уровне, через которую мы проведем.
Довольно много можно сделать с точки зрения микроконформирована с Still.js, однако в этой статье мы собираемся сосредоточиться на аспектах представлений, есть такжеВидео на YouTubeс помощью учебника.
Интеграция с React (используя Vite для генерации проекта)
Шаг 1Полем Создайте приложение React, используя VITE (следуйтеОтреагировать официальную документацию, используя VITE)
npm create vite@latest my-app -- --template react
Шаг 2.Установить зависимости приложения React.
npm i
Шаг 3Полем В вашем приложении React установите загрузчик приложения Still.js от@ilthjs/apploader(На NPM) это регулярная (не разработанная) зависимость.
npm i @stilljs/apploader
Шаг 4Полем Загрузка приложения внутри React выполняется, когда монтируется компонент React, мы будем использовать App.js (JSX, TSX, TS), который является компонентом ввода React по умолчанию.
import { useEffect } from 'react';
import './App.css';
import { RegularReactComponent } from "./components/RegularReactComponent";
import { StillAppLoader } from '@stilljs/apploader';
function App() {
useEffect(() => {
// Creating App loader instance
const stillApp = new StillAppLoader();
stillApp
.cdn({ env: { STILL_HOME: 'public/micros/stillapp1/' } })
.load();
// Unload the App when React component gets unmounted
return () => stillApp.unload();
},[]);
return (
<>
<RegularReactComponent></RegularReactComponent>
React validating local Still component embeding
<>
)
}
export default App
Шаг 5.Создание приложения Still.js
React Project, сгенерированный с помощью VITE, предоставляет папку с именем Public/ Right на корне вместе с SRC/ и другими, там (публичная) мы генерируем наше приложение Still.js.
Все еще CLI предоставляет все еще одинокую команду для создания проекта MicroFrontend/Lone, предоставляя его очень минимальную настройку, установленную CLI, введите свой терминал. (Следуйтессылка на короткое видео):
still lone
Шаг 6.Создайте одинокий компонент.
Он называется «одиноким», потому что все же. JS не установлен локально, только компонент и файл маршрутов есть, и он ведет себя одинаково. С установленным CLI тип реже в терминале. (Следуйтессылка на короткое видео):
still c cp app/components/TestComponent --lone
Шаг 7.Встроить все еще.
return (
<>
<RegularReactComponent></RegularReactComponent>
React validating local Still component embeding
<st-element component="TestComponent"></st-element>
<>
)
Шаг 8.Запуск приложения React:
npm run dev
Окончательный результат
Взаимосвязь между React и Still.js
Коммуникация возможна между React и Still.js после встраивания приложения/компонента, для этого мы используем Apploader в качестве прокси. Но ради размера этой статьи мы не изображаем ее здесь, вместо этого вы можете увидетьэтот учебник на YouTubeчто реализация осуществляется на практике шаг за шагом.
Чтобы завершить
MicroFrontends не являются универсальным решением, но они идеально подходят для очень модульных и быстро развивающихся приложений, таких как модернизация устаревших систем.Still.jsповышает эту гибкость, являясь рамками-агрессиями и полностью построенным вванильный JavaScript, облегчая адаптацию к любому сценарию, даже когда традиционные рамки не превышают.
Попробуйте и использовать весь потенциал этого архитектурного подхода.
Увидимся в следующий раз! 👊🏽
Оригинал