Обратный инжиниринг Qwik Framework

Я ценю все, что строит Builder IO. Будь то митоз, qwik или partytown 🎉.

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

Знакомство с Qwik

На мой взгляд, парадигма «возобновляемости», которую использует Qwik, заключается в том, чтобы просто загружать Javascript как можно позже и выполнять его только тогда, когда это необходимо. т. е. избегайте доставки JS и загружайте его только при необходимости и просто отправляйте HTML и CSS.

Вот как ваш веб-сайт смог получить высший балл 100 в тесте скорости понимания страницы.

Инженерное время

Если вы посмотрите на синтаксис, который предлагает Qwik, вы заметите, что «$» часто используется и имеет важное значение.

Например:

export const Counter = component$(() => {
  const store = useStore({ count: 0 });

  return <button onClick$={() => store.count++}>{store.count}</button>;
});

Вы можете заметить следующий компонент «$» и onClick в этом примере. Короче говоря, это говорит Qwik создать для него уникальный файл и медленно загружать его при необходимости.

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

<button on:click="fileName.js#functionName">Hello World</button>

Если вы внимательно посмотрите, это недопустимый атрибут JS onclick; вместо этого это атрибут, созданный Builder IO.

В таких средах, как react, присоединение прослушивателей событий к DOM во время построения дерева DOM — это шаг, который Qwik пропускает в пользу использования глобального прослушивателя событий, в данном случае прослушивателя событий onclick.

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

Для ленивой загрузки и выполнения js Qwik в значительной степени полагается на динамический импорт.

Начиная с базового HTML и JS.

Посетите этот сайт github, если хотите увидеть код.
https://github.com/RavenColEvol/qwik-basic

index.html

Это очень простой HTML-документ с кнопкой, при нажатии на которую появляется сообщение «Hello World». (Ага, классическая реализация инженера-программиста 😜)
Если вы внимательно посмотрите, on:click относится к методу onClick, найденному в файле app.js.

Вышеупомянутый HTML также имеет скрипт index.js, который в нашем случае является нашей базовой реализацией Qwik.

app.js

В упомянутом выше файле app.js есть функция onClick, которая служит нашей основной логикой. 😝

index.js

Давайте потратим некоторое время на выяснение того, что делает наш Qwik.

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

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

Кроме того, у нас есть глобальный прослушиватель onClick, который, по сути, отслеживает событие onclick в документах, проверяет все элементы в пути клика и выполняет код после его получения.

сервисный работник (sw.js)

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

Результаты

Несколько замечаний:

Вся вышеописанная реализация была сделана на основе того, что я понял из документации Qwik.

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

Полезные ссылки:

https://qwik.builder.io/docs/think-qwik/
https://qwik.builder.io/docs/advanced/dollar/