Знакомство с Astro: меньше JavaScript

Автор
Fred Schott
Nate Moore

Простой секрет более быстрого сайта — просто отдавать меньше.

К сожалению, современная веб-разработка движется в противоположном направлении — к большему. Больше JavaScript, больше функций, больше движущихся частей и, в конечном счёте, больше сложности, необходимой для поддержания всего этого в рабочем состоянии.

Сегодня я с радостью публично представляю Astro: новый тип генератора статических сайтов, который обеспечивает молниеносную производительность и современный developer experience. При проектировании Astro мы заимствовали лучшее из наших любимых инструментов и добавили несколько собственных инноваций, включая:

  • Bring Your Own Framework (BYOF): Создавайте сайт с React, Svelte, Vue, Preact, web components или просто HTML + JavaScript.
  • 100% статический HTML, без JS: Astro рендерит всю страницу в статический HTML, удаляя весь JavaScript из финальной сборки по умолчанию.
  • Компоненты по требованию: Нужен JS? Astro может автоматически гидратировать интерактивные компоненты, когда они становятся видимыми на странице. Если пользователь их не видит — он их не загружает.
  • Полный набор возможностей: Astro поддерживает TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX и любые ваши любимые npm-пакеты.
  • Готовность к SEO: Автоматические sitemap, RSS-ленты, пагинация и коллекции снимают боль с SEO и синдикации.

Этот пост отмечает первый публичный бета-релиз Astro. На этой ранней стадии всё ещё ожидаются недостающие функции и баги. До официального релиза 1.0 остаётся ещё несколько месяцев, но уже сегодня в продакшене работают несколько быстрых сайтов, построенных на Astro. Мы будем рады вашей ранней обратной связи по мере движения к релизу v1.0 позже в этом году.

Начало работы

Начать новый проект в Astro легко:

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro


# install your dependencies
npm install


# start the dev server and open your browser
npm run dev

Как работает Astro

Astro работает во многом как генератор статических сайтов. Если вы когда-либо использовали Eleventy, Hugo или Jekyll (или даже серверный веб-фреймворк вроде Rails, Laravel или Django), Astro покажется вам знакомым.

В Astro вы собираете сайт из UI-компонентов вашего любимого JavaScript-фреймворка (React, Svelte, Vue и т.д.). Astro рендерит весь сайт в статический HTML во время сборки. Результат — полностью статический сайт, из финальной страницы удалён весь JavaScript. Монолитное JavaScript-приложение не требуется — только статический HTML, который загружается в браузере как можно быстрее, независимо от того, сколько UI-компонентов вы использовали для его генерации.

Конечно, иногда клиентский JavaScript неизбежен. Карусели изображений, корзины покупок и поисковые строки с автодополнением — лишь несколько примеров того, что требует JavaScript в браузере. Именно здесь Astro особенно силён: когда компоненту нужен JavaScript, Astro загружает только этот компонент (и его зависимости). Остальная часть сайта остаётся статическим, лёгким HTML.

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

Вы даже можете автоматически откладывать компоненты, загружая их только после появления на странице, с модификатором :visible.

Этот новый подход к веб-архитектуре называется островной архитектурой. Мы не придумали этот термин, но Astro, возможно, довёл технику до совершенства. Мы уверены, что подход HTML-first с JavaScript только по необходимости — лучшее решение для большинства контентных сайтов.

В яму успеха

Хорошо спроектированная система делает правильные вещи лёгкими, а неправильные — раздражающими (но не невозможными)

Jeff Atwood,

Falling Into The Pit of Success

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

Главный принцип дизайна Astro — вести разработчиков к тому, что Rico Mariani назвал «ямой успеха». Наша цель — чтобы каждый сайт был «быстрым по умолчанию», сохраняя при этом знакомый современный developer experience.

Собирая сайт в статический HTML по умолчанию, Astro затрудняет (но никогда не делает невозможным 😉) создание медленного сайта.

Долгосрочная устойчивость

Astro создан командой open-source разработчиков за Snowpack и Skypack, с дополнительным вкладом сообщества.

Astro бесплатен и всегда будет бесплатным. Это open-source проект под лицензией MIT.

Нам важно строить более устойчивое будущее для open-source. В то же время нам нужно поддерживать разработку Astro в долгосрочной перспективе. Для этого нужны деньги (одних пожертвований недостаточно).

Нас вдохновляет ранний успех проектов вроде Tailwind, Rome, Remix, Ionic и других, экспериментирующих с долгосрочной финансовой устойчивостью поверх Open Source. В следующем году мы изучим, как создать устойчивый бизнес для поддержки полностью бесплатного open-source Astro на годы вперёд.

Если ваша компания так же в восторге от Astro, как и мы, мы будем рады услышать вас.