ИССЛЕДОВАНИЕ ФРЕЙМВОРКА ASTRO ДЛЯ СОЗДАНИЯ БЫСТРЫХ ВЕБ-САЙТОВ

EXPLORING ASTRO FRAMEWORK TO CREATE FAST WEBSITES

Maxim Beryanov

student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

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

ABSTRACT

Astro is a relatively new framework designed to be fast. It can integrate with popular frameworks like React, Vue, and Svelte to create HTML pages and deliver amazing loading speeds. This framework seems ideal for applications with few interactive elements, but even interactively it can outperform some popular web frameworks. This article proposes to generate a simple site using this powerful and fast framework and explore it.

Ключевые слова: Astro, SSR, веб, веб-фреймворк.

Keywords: Astro, SSR, web, web framework.

Начать разработку нового Astro-проекта [1] так же просто, как и с любым другим современным фреймворком – он предоставляет простой инструмент командной строки для настройки проекта с помощью команды ‘npm create astro@latest’. Во время выполнения команды интерфейс командной строки предложит нам несколько вариантов действий. Для начала он спросит, куда поместить новые файлы проекта, какой шаблон использовать, хотим ли мы установить зависимости npm и настроить git-репозиторий, и, наконец, если мы желаем при разработке веб-приложения использовать язык TypeScript [2], его можно также включить через этот инструмент. После этого, все, что нам нужно для проекта, сгенерировано, и теперь мы можем запустить проект локально командами ‘npm run dev’ или ‘npm start’ в терминале.

Рисунок 1. Автоматическая настройка проекта

Можно заметить, что Astro использует собственные файлы. astro вместо .html или .ts/.js. При открытии единственного файла ‘index.astro’ внутри директории /src/pages/ [3], мы увидим, что синтаксис не сильно отличается от, к примеру, React – Asto здесь просто использует меньше JavaScript, который, в свою очередь, находится между тройными тире в начале файла (рисунок 2). Здесь импортируются только два компонента: один из директории /src/layouts/ [4] и другой – из /src/components/ [5].

Рисунок 2. Компонент страницы

В файлах компонентов можем увидеть, как работают данные пользовательские компоненты – например, мы получаем атрибуты с помощью Astro.props. В целом, файловая структура говорит почти сама за себя: директория ‘public’ содержит все необрабатываемые файлы, такие как изображения или шрифты; в директорию src помещаются компоненты, макеты и страницы; в директории components имеются используемые в приложении компоненты; директория layouts располагает макетами, внутри которых есть элемент <slot /> [6], где будет находиться дочерняя часть нашего кода (вложенный HTML). Маршрутизация в Astro основана на файлах и их названиях, как в Next.JS [7]. Это означает, что структура директорий страниц также будет структурой наших веб-страниц. Файл макета представляет собой просто минимальный HTML-скелет с заголовком и телом. Для того, чтобы использовать один и тот же html на каждой странице, но изменять только тело документа, внутри макетов наших страниц мы будем указывать соответствующее место-слот, что именно мы хотим заменять (рисунок 3).

Рисунок 3. Макет общей HTML-страницы

Как и в случае с Gatsby.JS [8], мы можем создавать новые страницы непосредственно в виде файла Markdown [9]. Astro просто преобразует его в HTML-страницу, которая использует макеты для простого создания страниц – мы можем проверить это, создав новый файл post.md или post.mdx внутри каталога /pages и с помощью синтаксиса с тройным тире введя нужные параметры – макет, название страницы, автор. Мы можем напрямую перейти по адресу http://localhost:3000/post, чтобы проверить работу страницы. Более того, мы также можем определить новый макет с именем PostLayout.astro внутри директории layouts и, используя стандартный макет Layout.astro внутри нашего вновь созданного макета PostLayout.astro, обеспечить их вложенность, что несет собой огромную гибкость при разработке (рисунок 4).

Рисунок 4. Страница Markdown

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

Список литературы:

1. Astro [Электронный ресурс] URL: https://astro.build (дата обращения: 09.12.2022).
2. TypeScript [Электронный ресурс] URL: https://www.typescriptlang.org (дата обращения: 09.12.2022).
3. Astro Pages [Электронный ресурс] URL: https://docs.astro.build/en/core-concepts/astro-pages/ (дата обращения: 09.12.2022).
4. Astro Layouts [Электронный ресурс] URL: https://docs.astro.build/en/core-concepts/layouts/ (дата обращения: 09.12.2022).
5. Astro Components [Электронный ресурс] URL: https://docs.astro.build/en/core-concepts/astro-components/ (дата обращения: 09.12.2022).
6. Astro Slots [Электронный ресурс] URL: https://docs.astro.build/en/core-concepts/astro-components/#slots (дата обращения: 09.12.2022).
7. Next.JS [Электронный ресурс] URL: https://nextjs.org (дата обращения: 09.12.2022).
8. Gatsby.JS [Электронный ресурс] URL: https://www.gatsbyjs.com (дата обращения: 09.12.2022).
9. Markdown [Электронный ресурс] URL: https://www.markdownguide.org (дата обращения: 09.12.2022).