Содержание
Привет, разработчики! Меня зовут Джек, и я фрилансер, fullstack-разработчик, живущий в Техасе. В свободное время я также работаю над штукой под названием Qwik UI 🙂 .
Проблема
В середине-конце 2022 года у меня появилась возможность попробовать Astro, серверно-ориентированный, контентно-ориентированный и чрезвычайно гибкий мета-фреймворк на моей основной работе.
Он быстро стал моим основным инструментом для создания целевых страниц, маркетинговых сайтов и даже небольших веб-приложений. Если моим клиентам что-то требовалось, то это почти всегда можно было сделать одним щелчком мыши и получить руководство по интеграции.
Astro sites значительно превзошел предыдущие генераторы статических сайтов, которые я использовал. Я оценил скорость и нашел его интуитивно понятным в работе.
К сожалению, когда я добавил больше интерактивности, мои сайты на Astro стали тормозить, несмотря на то, что Astro был самым быстрым метафреймворком, который я использовал до этого момента!
Мои клиенты и я обратили на это внимание. Я потратил много времени, изучая способы повышения скорости работы сайта, но в итоге все время казалось, что это нелегкая битва - оптимизировать и добавить то, что нужно моим клиентам.
Путешествие
В идеальном мире вы могли бы создать свое приложение, и оно было бы чрезвычайно быстрым, независимо от уровня интерактивности или размера страницы. На первый взгляд, это неразрешимая проблема. Чем больше компонентов мы добавляем, тем медленнее оно работает.
Я задался вопросом: неужели все должно быть именно так? Возможен ли вообще быстрый и легкий процесс разработки? Виноват ли разработчик в том, что наши приложения работают медленно?
Оглядываясь назад, я бы сказал, что нет! Разработчики должны сосредоточиться на том, что важнее всего: на создании продукта! Так как же нам решить эту проблему? Некоторое время это был большой вопрос “а что если”. 😅
Это “а вдруг” быстро стало реальностью, когда я узнал о возможности резюме в Qwik. Я был на 100 % уверен, что это именно то, что я искал.
Поэтому я провел небольшое исследование. Я увидел множество сравнений между ними с точки зрения производительности. В апреле этого года я подумал: “Почему бы нам не использовать их вместе?” Один из них - мета-фреймворк, а другой - UI-фреймворк.
Будет ли это все еще возобновляемо?
Будет ли подход Astro к частичному гидрированию проблемой для фреймворка, в котором нет гидрирования?
Как это будет работать с островами?
Оказывается, я был не один такой!
После потрясающей помощи со стороны Миско, создателя Angular и Qwik, а также основной команды Astro, я наконец-то могу ответить на вопрос, который возник у меня еще в апреле.
Представляем @qwikdev/astro
Первый фреймворк Astro с возможностью возобновления работы пользовательского интерфейса.
Начинается быстро, остается быстро
Одна из ключевых особенностей Astro - нулевой JS по умолчанию.
К сожалению, после добавления фреймворка JavaScript и всех последующих компонентов это обычно не так.
Если мы хотим внедрить интерактивность с помощью фреймворка, такого как React, Vue, Svelte и так далее, то появляется время выполнения фреймворка. Количество компонентов, добавляемых на страницу, также увеличивается линейно O(n) с ростом количества JavaScript.
Добавление Qwik
Qwik строится поверх Zero JS от Astro, по умолчанию, и даже больше. Благодаря возобновляемости компоненты не выполняются до тех пор, пока не будут возобновлены. Даже при наличии интерактивности фреймворк также не выполняется до тех пор, пока в нем нет необходимости. Это O(1) постоянная, … с нулевыми усилиями разработчика.
Эта интеграция для Astro обеспечивает возобновляемость, тонкую ленивую загрузку и многое из того, что мы знаем и любим в Qwik.
Сюда входят все плюсы Astro, такие как переходы между представлениями, коллекции MDX и сотни интеграций, которые предоставляет Astro.
Так где же @qwikdev/astro будет иметь смысл?
Вы можете использовать его везде, где сейчас используете компонент фреймворка в Astro! Использование Qwik и resumability должно значительно ускорить работу вашего сайта.
Нужны ли компонентам Qwik директивы гидратации?
Короткий ответ - нет!
В других UI-фреймворках для интерактивности потребовалась бы директива hydration, например client:only или client:load. Однако в Qwik они не нужны, потому что здесь нет гидратации!
При использовании Qwik внутри мета-фреймворка, такого как Astro или Qwik City, компоненты загружаются на сервере, префетчируются в отдельном потоке и “возобновляются” на клиенте.
Например, вот как мы используем компонент счетчика Qwik в Astro.
counter.tsx
import { component$, useSignal } from '@builder.io/qwik';
export const Counter = component$(() => {
const counter = useSignal(0);
return <button onClick$={() => counter.value++}>{counter.value}</button>;
});
index.astro
--- import { Counter } from "../components/counter"; --- <html lang="en"> <body> <h1>Astro.js - Qwik</h1> /* без гидратации диrective! */ <Counter /> </body> </html>
Работает ли резюме?
Да! Мы можем лениво выполнять код при взаимодействии, точно так же, как при использовании Qwik с Qwik City.
Здесь мы обновляем страницу, и вы можете заметить, что ничего не выполнялось, пока не была нажата кнопка. Без возобновляемости наш компонент был бы выполнен при загрузке страницы.
q-чанк размером 402 байта - это обработчик onClick$ нашего счетчика.
Что находится в этом куске размером 17,61 кб?
Это фреймворк! Мы не выполняем его до тех пор, пока он не понадобится. В данном случае он сжат с помощью SSG.
А как насчет островов?
Вместо островов у нас есть контейнеры Qwik! Они вполне вписываются в островную модель Astro, имея аналогичные ограничения.
Ниже приведен пример контейнера Qwik в Astro. В DOM вы заметите, что здесь нет никаких пользовательских элементов. Это потому, что в Astro Qwik отображается как статические данные.
Это только начало! Вы можете опробовать интеграцию в Alpha уже сегодня, выполнив следующие действия:
npx astro add @qwikdev/astro.
💡 В настоящее время эта интеграция находится в альфа-версии. Мы призываем вас попробовать ее и поделиться своими отзывами. Если у вас возникнут какие-либо проблемы, создайте проблему в нашем репозитории GitHub.
Вы также можете посмотреть пакет на NPM, Github, странице интеграции Qwik и странице интеграции Astro.
Присоединяйтесь к веселью и вносите свой вклад!
Оставайтесь крутыми разработчиками,
-Джек