Использование и спрос на крупномасштабные микроинтерфейсные приложения (MFE) и высокопроизводительные многостраничные приложения (MPA) с годами увеличились. Несмотря на то, что большое количество технических энтузиастов все еще плохо знакомы с некоторыми концепциями, связанными с такими приложениями, сегодня существует множество инструментов, которые позволяют эффективно и всесторонне разрабатывать масштабируемые, более эффективные интерфейсные приложения.

Мы собираемся рассмотреть Astro, среду разработки многостраничных приложений (MPA), которая представляет новые и интересные способы более эффективной работы с несколькими внешними модулями и независимыми компонентами во внешних приложениях с использованием концепции под названием «Astro Islands».

В этой статье мы подробно расскажем о некоторых проблемах и возможностях использования Astro для создания крупномасштабного проекта интерфейса с несколькими платформами или просто переноса существующих наборов, порталов или веб-приложений на архитектуру MFE, работающую на Astro. Цель состоит в том, чтобы представить новый генератор статических сайтов как потенциальный выбор для крупных, средних и малых проектов, а также обозначить потенциальные проблемы и задачи. Поскольку мы будем интегрировать несколько фреймворков с Astro, мы постараемся не слишком углубляться в сложные детали, чтобы чтение было коротким, но при этом ценным для вас.

Несколько вещей, которые Astro делает иначе, чем его коллеги

В Astro есть некоторые особенности и функциональные возможности, о которых стоит упомянуть, поскольку большинство людей могут привыкнуть к созданию больших приложений с использованием других технологий и архитектуры, вот несколько вещей, которые Astro делает иначе, чем другие фреймворки и библиотеки.

Многостраничный подход (MPA) к организации, компиляции и визуализации компонентов

Хотя многостраничные приложения (MPA) не являются новой концепцией, сегодня многие веб-приложения представляют собой одностраничные приложения (SPA), особенно если такие приложения основаны на React, Angular или Vue. Сложные компоненты и проекты MFE во многом выигрывают от архитектуры MPA, поскольку она снижает сложность и повышает общую производительность приложения, когда речь идет о рендеринге, оптимизации, безопасности, маршрутизации и некоторых других аспектах приложения, поскольку по умолчанию Astro поставляется с рендерингом на стороне сервера (SSR). ) и обрабатывает множество процессов за кулисами. Это, в свою очередь, сокращает время, которое браузер тратит на принятие основных решений. Однако важно отметить, что не все приложения выигрывают от архитектуры MPA, и следует понимать различия между ними, прежде чем вкладывать в нее время.

Астро острова

Astro представляет концепцию под названием «Astro Island». Эта функция наряду с другими функциями позволяет фреймворку объединять компоненты из разных фреймворков в одну страницу без конфликтов или проблем одного фреймворка или библиотеки, влияющих на другой.

Поддержка маршрутизации по файловой структуре по умолчанию

Встроенная настройка маршрутизации по умолчанию, которая не требует дополнительной настройки после создания проекта. Нет никакого дополнительного конфигурационного файла или какой-либо настройки для запуска базовой маршрутизации. Нет необходимости специально определять маршруты или настраивать пути; все зависит от того, какие страницы у вас есть и как они были названы / размещены в соответствующих папках. В случае, когда необходимо настроить более сложные ситуации с маршрутизацией, Astro предоставляет разработчикам простой способ настройки маршрутов. В целом, с помощью этой функции можно ускорить процесс настройки проектов Astro.

Большое количество интеграций

Astro предоставляет разработчикам список официальных плагинов, которые обеспечивают интеграцию со сторонними библиотеками, инструментами, фреймворками и бессерверными решениями. Добавить поддержку таких инструментов, как React, Vue и Netlify, так же просто, как запустить команду с помощью инструмента командной строки Astro.

Интерфейс командной строки Astro (CLI)

Хотя инструмент командной строки не является самой инновационной вещью, стоит упомянуть, что Astro CLI делает немного больше, чем просто сборка и создание новых проектов. Он также предоставляет разработчикам такие команды, как добавление поддержки сторонних инструментов, обслуживание проекта, проверка типов и другие полезные команды для повседневной разработки.

Как Astro упрощает процесс разработки сложных приложений?

  • Astro поставляется с собственным инструментом командной строки под названием Astro CLI, похожим на Angular.
  • Astro предоставляет отличную документацию для своего проекта, которую вы можете найти здесь https://docs.astro.build/en/getting-started/
  • Astro предоставляет несколько способов управления стилями в проекте с дополнительным учетом динамических стилей, областей действия и интересных способов управления и заполнения переменных стиля в проекте.
  • Автоматическая маршрутизация с использованием файловой структуры / каталогов гарантирует, что вы сделаете минимум для того, чтобы настроить маршрутизацию вашего проекта, и хотя Astro предоставляет возможность настраивать маршруты и поведение, многим проектам может не потребоваться ничего делать в этом отношении.
  • Превосходная привязка данных для создания статического и динамического контента с помощью директив Astro, параметров и вставки данных, предоставляемых в различных областях приложения, с автоматическим рендерингом массива и других сложных объектов.
  • Простые в использовании коммуникационные интерфейсы API для запроса контента и данных со встроенной поддержкой выборки.

Каковы некоторые недостатки использования Astro?

  • Файлы .astro являются гибкими, настраиваемыми и расширяемыми для поддержки нескольких фреймворков, переменных, загрузки переменных CSS и многого другого. Когда дело доходит до использования супервозможностей Astro, вы хотите как можно чаще использовать файлы .astrom, к которым может привыкнуть.
  • VS Code полностью поддерживает редактирование файлов .astro; WebStorm и некоторые другие редакторы еще не поддерживают .astro на момент написания этой статьи (11.04.2022).
  • Astro может официально не поддерживать ваш любимый фреймворк, инструмент или библиотеку. Пример можно увидеть с компонентами Angular, которые необходимо интегрировать с использованием сторонних решений.

Для тех, кто уже знаком с MPA, вы согласитесь со мной, что этот момент не так уж и плох, если вы понимаете концепцию работы с данными в MPA с использованием файлов cookie, локального и сеансового хранилища, кэширования, переменных запроса/пути и, как правило, сохранения только основные вещи, которые вам нужны. Это также хорошо с архитектурной точки зрения, поскольку побуждает ваши независимые компоненты быть «по-настоящему независимыми».

Настройка астропроекта

Настроить проект Astro легко отчасти из-за доступного инструмента командной строки. Одной из доступных команд является команда create, которая предоставляет возможность создать новый проект npm create astro@latest. После выполнения команды создается новый проект, который дает вам начальный шаблон для работы. . Если вам не нужен начальный шаблон, вы можете легко выбрать вариант пустого проекта, и по умолчанию поддержка файлов .astro, .html и пользовательских веб-компонентов включена в базовые проекты Astro с самого начала.

Создание крупномасштабного мультифреймворкового проекта

С Astro можно объединить несколько фреймворков в один проект. Идея может показаться странной для многих людей. Существует много вариантов использования такой реализации, особеннос продуктами, содержащими различные автономные функции, или продуктами, в которых несколько команд разрабатывают отличительные функции, которые должны работать вместе в одном проекте-оболочке. В большинстве случаев компании могут использовать схожие технологии, в других случаях могут быть большие различия между технологиями, используемыми в первой итерации функции, и в текущей итерации. В большинстве случаев, когда речь идет о большом продукте, «островной» подход Astro к изоляции компонентов помогает правильно разделить проблемы со многими независимыми компонентами. Эта функциональность настолько надежна, что я бы сказал, что она дает возможность использовать различные фреймворки/технологии, объединенные в одном проекте-оболочке Astro.

  • Собственные компоненты Astro
  • Простые файлы Html, CSS, JS с Astro
  • Нативные веб-компоненты
  • Компоненты светового элемента
  • Реагировать Компоненты
  • Vue-компоненты
  • Угловые компоненты

В нашем примере мы рассмотрим проекты, использующие следующие технологии, которые должны быть объединены в наш пример проекта-оболочки Astro:

Для компонентов Astro мы используем компоненты по умолчанию, которые поставляются с начальным шаблоном, и добавили несколько простых html-страниц и JS. У Astro не было проблем с рендерингом собственных компонентов или работой с обычными файлами html, css и js. Образцы кода можно посмотреть на https://github.com/itmaginationdemos/astro-multiframework-demo.

Поддержка собственных веб-компонентов

С помощью инструмента командной строки create-astro новый проект создается довольно быстро. Поскольку Astro предоставляет встроенную маршрутизацию с использованием файловой структуры, в подпапке pages создается новая папка.

Нам не нужно устанавливать какие-либо дополнительные плагины для использования пользовательских веб-компонентов в astro, поскольку они поддерживаются по умолчанию. После создания нового проекта мы можем продолжить и создать собственный веб-компонент вместе с его кодом html, css и js и добавить его в файл .astro в подпапке pages/web-component.

--- 
import Card from '../../components/Card.astro';
import { CustomWebComponent } from '../../components/custom-web-component.js';
--- 
<script src="./src/components/custom-web-component.js" type="module"></script>
<main> 
  <Card 
    href="/" 
    title="Back to home page" 
    body="navigates back to /pages and loads the default index file"
  />
  <custom-web-component count="2"></custom-web-component> 
</main>

Проект успешно компилируется, и мы видим, что компонент отрендерен с работающими функциями.

Примечание.С помощью файлов .astro веб-компоненты можно импортировать и отображать без ошибок, если в astro.config.mjs не добавлена ​​поддержка других платформ. если для какой-либо платформы, например React или Vue, добавляются дополнительные поддержки, это затрагивает пользовательский компонент, и Astro пытается предварительно отобразить его, что приводит к возникновению проблемы, связанной с DOM, особенно при использовании методов из класса Windows. В таких случаях использование зарегистрированного тега вместо импортированного класса должно решить проблему навсегда.

Вердикт
Маршрутизация по умолчанию работала как часы, передача данных через атрибуты в компонент работала как положено. Использование встроенных методов компонентов также работает. Рендеринг пользовательского компонента с помощью зарегистрированного имени тега, а также импортированного класса Astro работает легко.

Поддержка светового элемента

С помощью команды astro add lit поддержка Lit Element может быть автоматически добавлена ​​в проект. Существует также руководство по добавлению поддержки lit, которое включает пакеты для добавления и конфигурации для изменения в файле astro.config.mjs. Компоненты Lit Element и компоненты Astro могут отображаться как в одном файле .astro, так и в отдельных файлах html.

--- 
import Card from '../../components/Card.astro'; 
import GenericStyle from '../../styles/GenericStyle.astro'; 
import {CustomLitComponent} from '../../components/custom-lit-component'; 
--- 
<main> 
  <Card 
    href="/" 
    title="Back to home page" 
    body="navigates back to /pages and loads the default index file" 
  /> 
  <CustomLitComponent count="1"/> 
  <CustomLitComponent count="2"/> 
  <custom-lit-component count="3"></custom-lit-component> 
</main>

Примечание.С Lit Element аннотации и аннотированные свойства не работают по умолчанию, необходимо приложить дополнительные усилия, чтобы сделать их компактными. Вместо этого используются статические свойства, как показано в нашем примере.

Вердикт

Ключевые функции, кажется, работают из коробки, однако есть некоторые подводные камни, на которые следует обратить внимание при включении компонентов в проекты Astro, и большинство из них задокументировано в руководстве, которое можно найти на веб-сайте Astro. Выяснилось, что нет поддержки добавления аннотаций из коробки и нужны дополнительные усилия, чтобы заставить их работать.

Поддержка компонентов React

Astro поддерживает компоненты React. Использовать инфраструктуру MFA и ваши существующие компоненты React очень просто, поскольку мы можем добавить поддержку реакции с помощью команды astro add react, которая настраивает все необходимое для работы с компонентами реакции.

--- 
import Card from '../../components/Card.astro';
import GenericStyle from '../../styles/GenericStyle.astro';
import { CustomReactTodoApp } from '../../components/custom-react-component';
--- 
<main> 
  <Card 
    href="/" 
    title="Back to home page" 
    body="navigates back to /pages and loads the default index file"
  /> 
  <CustomReactTodoApp count="1" client:idle="react"></CustomReactTodoApp> 
  <CustomReactTodoApp count="2"></CustomReactTodoApp> 
  <CustomReactTodoApp client:only="react"></CustomReactTodoApp> 
</main>

Примечание. Возможно, вам потребуется отключить отрисовку на стороне сервера с помощью client:only='react' в определенных случаях, когда компоненту необходимо передавать реквизиты или отображать обновление для внутренних компонентов в динамическом способ, который не поддерживается рендерингом на стороне сервера. Такие случаи могут быть редкими и даже не возникнут гораздо раньше, поскольку разработчики Astro активно работают над улучшением платформы.

Вердикт

Похоже, что разработчики уделили много внимания интеграции React, поскольку компоненты React без проблем работают с Astro и в настоящее время имеют наименьшее количество ошибок / проблем с интеграцией. Для большей части процесса настройки образца реакции функциональные возможности реакции были легко реализованы, как показано в примере со списком задач выше.

Поддержка компонентов Vue

Как и в случае с Lit или React, добавление Vue — это процесс без трения. Все, что вам нужно сделать, это выполнить команду astro add vue, и поддержка компонентов Vue будет добавлена. Использование компонентов Vue в файлах .astro и в независимом файле .html в проекте Astro было успешным на основе приведенного ниже примера.

--- 
import Card from '../../components/Card.astro'; 
import GenericStyle from '../../styles/GenericStyle.astro'; 
import CustomVueComponent from '../../components/CustomVueComponent.vue' 
--- 
<main> 
  <Card 
    href="/" 
    title="Back to home page" 
    body="navigates back to /pages and loads the default index file"
  /> 
  <CustomVueComponent count="1" client:visible> </CustomVueComponent> 
</main>

Вердикт

Компоненты, функции и методы Vue поддерживаются, и нет серьезных проблем с интеграцией Vue с Astro.

Поддержка угловых компонентов

У Astro нет официального плагина для соединения компонентов Angular с Astro, НО есть сторонний плагин, указанный на официальном сайте astro, который называется AnalogJS. Этот плагин позволяет нам интегрировать компоненты Angular в наш проект astro, а с помощью встроенной команды astro add @analogjs/astro-angular мы можем добавить поддержку компонентов angular в наш проект-оболочку Astro.

На первый взгляд кажется, что пакет angular добавляет наибольшее количество зависимостей при установке, это может быть частично связано с тем, что модули/компоненты angular не спроектированы так, чтобы их можно было разобрать и добавить в сторонние проекты в необработанном/нескомпилированном виде. форме, и поэтому необходимы все дополнительные зависимости, которые составляют полнофункциональный угловой проект, это также может быть связано с тем фактом, что поддержка предоставляется через стороннюю структуру/библиотеку (analogjs) и из-за того, как библиотека построена ему нужны все дополнительные пакеты. Поскольку в этой статье мы не вдаемся в более мелкие детали, оставим мысли открытыми для комментариев.

Создание и использование компонента Angular в Astro требует добавления файла конфигурации TypeScript tsconfig.app.json, а также код компонента должен быть записан в файлах .ts, так как это по умолчанию для таких проектов. Добавление сюда поддержки TS также показывает, что другие компоненты в проекте-оболочке Astro также могут быть написаны на TypeScript, если для них присутствует правильная конфигурация.

После первоначальной настройки обнаружение изменений компонентов Angular не работало, и команда «astro run dev» перестала работать. После дальнейшего расследования мы обнаружили, что:

1. Проект Angular + Astro оказался медленнее по сравнению с Astro без Angular, и это когда вам удается заставить его работать, как показано в примере Брэндона Робертса https://github.com/brandonroberts/angular-astro- острова

2. Команда Astro run dev выдает ошибки при попытке посетить сайт, такие как нехватка памяти, это происходит, когда используются несколько фреймворков, но они не воспроизводятся только с Angular и Astro в одном проекте.

--- 
import Card from '../../components/Card.astro';
import GenericStyle from '../../styles/GenericStyle.astro';
--- 
<script src="/angular_assets/runtime.f12b6390b6dfe9bc.js" type="module"></script>
<script src="/angular_assets/polyfills.cd4b02e8647d32c8.js" type="module"></script>
<script src="/angular_assets/main.28c576b20400a3a6.js" type="module"></script> 

<main> 
  <Card 
    href="/" 
    title="Back to home page" 
    body="navigates back to /pages and loads the default index file"
  /> 
  <app-root count="1"></app-root> 
</main>

Примечание.Как описано в статье Брэндона Робертса, интеграция с Angular поддерживает рендеринг автономных компонентов. Для всех проектов Angular, созданных до разработки и выпуска поддержки отдельных компонентов в среде Angular, необходимо проделать определенную работу, прежде чем проект можно будет сжать с помощью Astro.

Вердикт

Компоненты Angular в файлах .astro несколько функциональны. Помимо очевидных проблем, работа с angular в astro действительно возможна, но не рекомендуется при текущей настройке, если в проекте astro также будут размещаться компоненты из других библиотек. В настоящее время фреймворк Angular представляет самые большие проблемы при работе в мультифреймворковом проекте Astro. Могут быть некоторые способы обойти это, например, создать окончательный проект Angular и добавить его в проект Astro в виде скомпилированных файлов html, js и css, которые работали, как предполагалось в нашем примере, но пытались использовать компоненты напрямую, особенно при работе с надежным проектом, использующим несколько фреймворков, возникнут некоторые проблемы и трудности.

Важно отметить, что Angular — не единственный фреймворк, сталкивающийся с проблемами во время интеграции, как это было в предыдущих фреймворках, всегда будут некоторые недостатки в процессе миграции и добавления функций, но до сих пор поддержка доступна для фреймворка TypeScript для больших приложений. в Astro является наименее перспективным.

Кроме того, используя новый генератор статических сайтов, мы решаем проблему Angular в JAMStack. Скалли уже обратился к этому, хотя Astro.js дает нам гораздо больше гибкости.

Использование всех компонентов на одной странице

После реализации различных фреймворков самым простым делом было собрать их вместе для использования в любом месте проекта Astro. Компоненты были импортированы в файл .astro, а теги пользовательских элементов указаны в разделе html файла. Не было никаких проблем со сборкой или рендерингом этого файла .astro, что делает вердикт об использовании Astro таким образом положительным.

--- 
import Card from '../../components/Card.astro'; 
import GenericStyle from '../../styles/GenericStyle.astro'; 
import {CustomLitComponent} from '../../components/custom-lit-component'; 
import AngularComponentWrapper from '../../components/AngularComponentWrapper.astro';
import { CustomReactTodoApp } from '../../components/custom-react-component'; 
import CustomVueComponent from '../../components/CustomVueComponent.vue' 
--- 
<script src="./src/components/custom-web-component.js" type="module"></script> 
<main> 
  <h1>All components in one project</h1> 
  <div class="component-block"> 
    <Card 
      href="https://docs.astro.build/" 
      title="Astro Component" 
      body="Learn how Astro works and explore the official API docs."
    /> 
    <AngularComponentWrapper count="1"/> 
    <CustomVueComponent count="1" client:visible/> 
    <CustomReactTodoApp count="1" client:idle="react"/> 
    <CustomLitComponent count="1"/> 
    <custom-web-component></custom-web-component> 
  </div> 
</main>

Заключение

Astro справилась с большей частью интеграции как чемпион, продемонстрировав отличную инженерию, которая до сих пор использовалась для создания платформы. Откровенно говоря, мы впечатлены результатом.

Существуют некоторые различия между использованием компонентов в файлах .astro и их непосредственным использованием в файлах .html. Одним из таких отличий является импорт компонентов из JS или собственных файлов фреймворка в файлы .html, что оказалось сложной задачей для каждого проекта, поскольку их нужно либо загружать как модули, которые поддерживает Astro, либо хранить в общей папке, чтобы иметь возможность правильно импортировать их, ссылаясь на них. источник, например, с помощью тега script.

Это может накладывать ограничения на организацию проекта, и, хотя это может быть настраиваемо, большинство примеров, где компоненты визуализируются в своих собственных файлах html, теперь содержат один компонент со всем необходимым кодом, объединенным в файл .html. Мы бы сказали, что это ограничение предусмотрено дизайном, поскольку концепция островов отражена в таком поведении и заставляет разработчика обеспечивать максимальную независимость компонентов за счет организации связанного кода и надлежащей инкапсуляции логики.

В общем, мы рекомендуем использовать файлы .astro как можно чаще, чтобы уменьшить объем усилий, необходимых для правильной настройки этих проектов для совместимости с Astro. Откровенно говоря, вы можете отказаться от всех других JS-библиотек и фреймворков и использовать только нативные файлы Astro, хотя иногда это невозможно.

Astro продемонстрировал большие перспективы на протяжении всего периода разработки примера проекта, и мы надеемся, что он получит больше времени на внедрение и разработку. Образец кода, созданный для этого проекта, можно найти по адресу https://github.com/itmaginationdemos/astro-multiframework-demo. Отзывы приветствуются, и вы можете связаться с автором этой статьи и демонстрации в Twitter. @ЗиноАдиди.

‍

Первоначально опубликовано на https://www.itmagination.com.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube,и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.