Найти тему

Думай, как фреймворк Qwik

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

Уникальность
Qwik заключается не в том, что он делает, а в том, как он достигает своих целей. Цель Qwik — создавать приложения с мгновенным запуском даже на мобильных устройствах. Qwik достигает этого с помощью двух основных стратегий:

- Отложите выполнение и загрузку JavaScript как можно дольше.
- Сериализировать состояние выполнения приложения и фреймворка на сервере и возобновить его на клиенте.

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

Ключевые принцыпы

== Максимально отложите выполнение JavaScript ==

Qwik-приложения запускаются быстро, потому что требуется выполнить минимальный объем кода JavaScript. (В простейшем случае приложению Qwik требуется всего около 1 КБ JavaScript, чтобы стать интерактивным.)

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

Qwik работает быстро не потому, что использует умные алгоритмы, а потому, что он разработан таким образом, что большую часть кода JavaScript не нужно загружать или выполнять. Его скорость зависит от того, что он не делает вещей (таких как hydration), которые должны делать другие фреймворки.

Возобновляемость и сериализация

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

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

Какую проблему решает Qwik?

Современные веб-сайты требуют огромного количества JavaScript, чтобы стать интерактивными. Слишком много JavaScript проявляется в двух проблемах:

  1. Пропускная способность сети: клиенту отправляется большой объем кода, что может занять много времени в медленных сетях.
  2. Время запуска: на клиенте необходимо выполнить код, чтобы сделать сайт интерактивным.

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

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

Кто виноват?

Решение вышеуказанной проблем одновременно и очевидное, и сложное: отправляйте меньше JavaScript.

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

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

Вам нужно решить рендеринг, стилизацию, анимацию, A/B-тестирование, аналитику и т. д.? Для этого есть инструмент. Просто импортируйте или добавьте тег <script>, и эти инструменты решат ваши проблемы, но за счет увеличения исходного пакета.

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

Что делать?

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

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

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

Разработчики не должны думать о размере кода

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

Наши лучшие отраслевые практики позволяют создавать большие пакеты, и в Интернете полно примеров.

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

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

Причина создания Qwik

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

Текст оригинальной статьи - https://qwik.builder.io/docs/think-qwik/