Обзор основных функций и архитектуры Qwik

Как вы, возможно, знаете, за последние несколько лет быстро появилось множество фреймворков JavaScript. Но этот предлагает совершенно новую парадигму рендеринга. Это не что иное, как Qwik.

Qwik, как это звучит, очень быстрый. На данный момент он претендует на самый быстрый интерфейсный фреймворк. Он обеспечивает молниеносную загрузку страниц независимо от размера и сложности вашего сайта. Это считается сложностью O(1), поскольку может обеспечить стабильную производительность в масштабе.

Совсем недавно была выпущена стабильная версия Qwik 1.0. Это проект с открытым исходным кодом под лицензией MIT. Вы можете изучить его на их Официальном сайте и в общедоступном репозитории GitHub.

Итак, эта статья посвящена тому, чтобы познакомить вас с этим замечательным фреймворком, его функциями и стратегией под капотом. Давайте углубимся.

Прежде чем мы перейдем к Qwik, нам сначала нужно понять, как происходит рендеринг в средах JavaScript. Доступны два варианта рендеринга: рендеринг на стороне клиента и рендеринг на стороне сервера.

Рендеринг на стороне клиента

Как следует из названия, браузер отображает все данные в HTML-файле на стороне клиента при рендеринге на стороне клиента.

Когда пользователь посещает веб-сайт, браузер отправляет запросы на сервер для получения файлов HTML, CSS и JS. После получения этих файлов браузер выполняет эти файлы и отображает веб-сайт. Чтобы пользователи могли видеть контент и взаимодействовать с ним.

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

Существенным недостатком этого подхода является то, что по мере роста приложения увеличивается время рендеринга начальной страницы.

Рендеринг на стороне сервера

При рендеринге на стороне сервера сервер отправляет визуализированный HTML-код в качестве ответа.

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

Это значительно ускоряет время первоначального рендеринга. Таким образом, пользователи могут быстро просматривать содержимое веб-сайта, не глядя на пустой экран.

Однако страница доступна только для просмотра и не интерактивна до тех пор, пока файлы JavaScript не будут загружены в модель DOM. После загрузки JS страница будет доступна для взаимодействия с пользователем.

Процесс гидратации

Как мы обсуждали выше, страница, которую браузер показывает нам изначально, еще не интерактивна. Для взаимодействия с веб-страницей в DOM должен быть загружен JavaScript. Этот процесс называется гидратацией.

Это включает в себя присоединение прослушивателей событий, восстановление состояния приложения и перестройку всего дерева компонентов с нуля.

Этот метод сегодня используется почти во всех мета-фреймворках, таких как Next.js, Nuxt.js, Angular и т. д. (кроме Astro — он использует частичную гидратацию).

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

Когда необходимо выполнить значительный объем кода JavaScript, это может привести к замедлению работы веб-приложения.

Большинство этих фреймворков JavaScript загружают и выполняют весь код сразу. В результате время загрузки (время взаимодействия) становится медленнее и следует линейной прогрессии O(n).

Таким образом, фреймворки, основанные на этом методе, будут наблюдать задержку при взаимодействии с веб-страницей.

Именно эту проблему решил Qwik.

Почему Qwik такой быстрый?

Основная причина, по которой Qwik работает очень быстро, — это удаление процесса гидратации.

Он предлагает совершенно новую парадигму рендеринга под названием Resumability, которая полностью устраняет необходимость гидратации. (Нулевая гидратация)

Что такое возобновляемость?

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

Приложение Qwik может быть полностью сериализовано как HTML. В любой момент вы можете выполнить действие и зафиксировать все данные и замыкания в приложении и представить все в виде строки HTML.

Затем браузер может продолжить работу с того места, где остановился сервер, вообще не выполняя JavaScript.

Таким образом, между Qwik и другими фреймворками будет огромный временной разрыв.

Давайте подробно обсудим, как это стало возможным с его стратегиями.

Стратегии Qwik

Qwik достигает этой цели с помощью двух основных стратегий:

  1. Отложите выполнение и загрузку JavaScript как можно дольше. (кроме стартового кода)
  2. Сериализировать состояние выполнения приложения и фреймворка на сервере и возобновить его на клиенте. (Примечание. Qwik сериализует только те данные, которые необходимы для текущей страницы.)

Qwik использует ленивую загрузку для задержки выполнения. В контексте Qwik это называется прогрессивностью.

В Qwik все загружается лениво:

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

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

Пошаговое руководство по коду

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

Я создал базовый компонент, в котором есть только кнопка, при нажатии на которую будет отображаться мое имя. Вам не нужно беспокоиться о синтаксисе Qwik, так как он очень похож на React.

Вы знаете Реакт? Вы знаете Квик.

— Официальные документы

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

Вы можете мгновенно запустить это приложение на Игровой площадке Qwik.

Здесь вы заметите особую вещь. Да! Знак доллара.

Что это $?

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

Это означает, что JS не будет загружен, пока мы не нажмем кнопку. Этот пакет JS с отложенной загрузкой содержит код, который мы хотим выполнить.

Кроме того, у него есть доступ к лексической среде для обновления состояния, которое может использоваться другими компонентами, происходящими из другого пакета с отложенной загрузкой.

Qwik из коробки обрабатывает все это разделение кода и ленивую загрузку. Это очень полезно, потому что нам, разработчикам, даже не нужно об этом думать. Это поведение Qwik по умолчанию.

Что происходит под капотом?

Теперь вы знаете о возобновляемости. Но как это работает на самом деле? Давайте углубимся в это.

Если вы перейдете на вкладку HTML из предыдущего примера, вы увидите много двоеточий q. (к:)

Qwik добавляет в HTML дополнительную информацию. Это известно как сериализация информации в HTML. Чтобы он мог принимать решения позже.

Qwik сериализует прослушиватель событий в DOM в следующем формате:

<button on:click="./chunk.js#handler_symbol">Click Here</button>

Qwik автоматически разделяет код. Вы можете увидеть это на вкладке Client Bundles на игровой площадке.

Это делается с помощью Qwik Optimizer. Как я уже говорил ранее, Qwik Optimizer в некотором роде является компилятором.

Он берет код, который я написал (те файлы JS), исследует его и создает новые файлы на основе кода. Затем там, где наш код остался, он заменяет его ссылкой на этот новый файл.

Этот оптимизатор написан на Rust и вы можете его увидеть здесь. Проверьте файл parse.rs в основной папке src. Он указывает, как происходит синтаксический анализ.

Затем у нас есть Qwik Loader.

После того, как у нас есть все эти отдельные файлы, которые готовы к ленивой загрузке, нам нужно иметь возможность реагировать на события, которые делает пользователь, а затем лениво загружать эти файлы.

Это то, что делает загрузчик Qwik.

Он добавляет глобальные прослушиватели событий и ищет пользовательские события в любом месте документа.

Как только событие по клику запускается, он импортирует соответствующий файл chunk.js.

После этого у него будет модуль с частью имени символа. (#handler_symbol) Он лениво загружается в отдельный файл. Таким образом, загрузчик принесет этот файл и выполнит его.

Состояние/значения будут привязаны в соответствии с qwik/json ссылками. (см. вложение выше)

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

Установите и запустите Qwik в локальной среде

Давайте установим этого маленького зверя на нашу машину.

Предварительные требования — у вас должен быть установлен Node.js ≥v16.8.

Вы можете использовать Qwik CLI, чтобы легко запустить приложение Qwik.

npm create qwik@latest

Это запустит интерактивный мастер, и давайте пройдемся по вариантам, выбрав все значения по умолчанию.

Хорошо. Давайте создадим эту штуку, используя npm run build

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

Хорошо! Теперь вы можете запустить приложение, используя npm run dev. Веб-сайт по умолчанию доступен по адресу http://localhost:5173/.

Давайте посмотрим, как он загружает JS-пакет события по клику в Time to Celebration, используя кнопку inspect.

Если мы откроем вкладку сети, мы найдем только начальные пакеты JS. Как только мы нажмем кнопку, он загрузит пакет JS, соответствующий кнопке.

Кроме того, Qwik удобен для разработчиков, так как мы можем нажать Alt и щелкнуть в любом месте, чтобы открыть его код из вашей любимой IDE.

Бонус — Если вы пойдете к http://localhost:5173/demo/flower?pride=true, вы увидите вращающийся разноцветный цветок.

Qwik позволяет добавлять интеграции, чтобы упростить подключение к вашим инструментам и службам, таким как React, Tailwind CSS и т. д., с помощью команды npm run qwik add. Поддерживаемые интеграции перечислены в их официальных документах здесь.

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

Ресурсы

Последние мысли

Новый инновационный подход Qwik (Resumability) предлагает новый путь вперед для интерфейсных JavaScript-фреймворков.

Несомненно, это изменит правила игры в мире. Будет интересно посмотреть, куда дальше пойдут дела.

Я надеюсь, что эта статья помогла вам понять основные принципы платформы Qwik. Ждите обновлений Qwik и в следующих статьях.

Спасибо за прочтение, оставьте комментарий на Qwik. Удачного кодирования!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу