FAQ

@QwikDev - разумный ИИ?

Почему он называется Qwik?

Сначала он назывался qoot, но мы решили, что его будет трудно найти. Один член сообщества, @PatrickJS__, придумал Qwik, и, после внутреннего голосования в Builder.io, мы изменили название!

Чем Qwik отличается от других фреймворков?

Qwik - это первый фреймворк, который имеет схожий DX (Developer Experience) с React, Vue или Svelte в том, как вы создаете компоненты, при этом предоставляя Живой HTML, который мгновенно становится интерактивным. Qwik достигает этого свойства, полностью устраняя необходимость в гидратации. Вместо этого приложения Qwik немедленно выполняют обработчики событий при взаимодействии с пользователем, без необходимости загружать всё состояние приложения. Эта техника называется Возобновляемость.

В результате разработчики по умолчанию пишут чрезвычайно производительные приложения, даже не задумываясь об этом. Приложения, созданные с помощью Qwik, работают быстро, независимо от количества компонентов или сложности, они работают за O(1) (постоянное время) с точки зрения полезной нагрузки JS.

Зачем ещё один фреймворк?

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

Что такое Qwik City?

Qwik City - это дополнительный набор API поверх Qwik. Считайте, что Qwik - это ядро, а City - дополнительные возможности (маршрутизация, загрузка данных, конечные точки и т.д.). Мы называем его мета-фреймворком для Qwik. Qwik City для Qwik - то же самое, что Next.js для React, Nuxt для Vue или SvelteKit для Svelte.

Сложен ли Qwik в освоении?

Qwik разработан с учётом особенностей React (и других фреймворков на основе JSX), что обеспечивает лёгкость в освоении и способствует высокой производительности. Разработка компонентов практически не отличается от React, а маршрутизация вдохновлена Nextjs и другими фреймворками.

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

У нас также есть интерактивный учебник.

Что значат все эти `$`?

Вы могли заметить, что в приложениях Qwik больше знаков $, чем обычно, например: component$(), useTask$(), и <div onClick$={() => console.log('click')} />. Он служит маркером для границы ленивой загрузки. Qwik разбивает ваше приложение на небольшие фрагменты, меньшие, чем сам компонент. На обработчики событий, хуки и другие. Знак $ сигнализирует как оптимизатору, так и разработчику, когда это происходит.

Пример:

import { component$ } from '@builder.io/qwik';
 
export default component$(() => {
  console.log('рендер');
  return <button onClick$={() => console.log('привет')}>Привет, Qwik</button>;
});

Благодаря синтаксису $, компонент выше разделяется на:

app.js

import { componentQrl, qrl } from '@builder.io/qwik';
 
const App = /*#__PURE__*/ componentQrl(
  qrl(() => import('./app_component_akbu84a8zes.js'), 'App_component_AkbU84a8zes')
);
 
export { App };

app_component_akbu84a8zes.js

import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
import { qrl } from '@builder.io/qwik';
export const App_component_AkbU84a8zes = () => {
    console.log('рендер');
    return /*#__PURE__*/ _jsx('p', {
        onClick$: qrl(
          () => import('./app_component_p_onclick_01pegc10cpw'), 'App_component_p_onClick_01pEgC10cpw'
        ),
        children: 'Привет, Qwik'
    });
};

app_component_p_onclick_01pegc10cpw.js

export const App_component_p_onClick_01pEgC10cpw = () => console.log('привет');

Примечание: $ не имеет отношения к jQuery, Svelte или любому другому фреймворку.

Не является ли запрос JS при взаимодействии с пользователем медленным?

Только если вы загружаете его при взаимодействии с пользователем. Вместо этого Qwik предзагружает JS-модули текущей страницы в фоновом потоке через service workers и запрашивает эти модули из кэша браузера, когда пользователь взаимодействует с приложением.

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

Как Qwik узнаёт, что и в каком порядке нужно предварительно получить?

В производственной среде Qwik использует много информации, сгенерированной во время SSR (Server-Side Rendering), чтобы как можно быстрее начать предварительное заполнение кэша, используя только те фрагменты интерактивности, которые доступны на текущей странице. Таким образом, когда пользователь нажимает на кнопку или взаимодействует с ней, JS уже находится в кэше.

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

Например, кнопка "Купить сейчас" важнее, чем кнопка "Добавить в корзину", поэтому Qwik сначала загрузит кнопку "Купить сейчас", а затем кнопку "Добавить в корзину".

В низкоскоростных сетях приложения Qwik тоже медленны?

Совсем наоборот.

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

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

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

Qwik генерирует слишком много маленьких файлов?

В среде разработки Qwik генерирует много маленьких файлов, поскольку использует сервер разработки Vite.js, но в рабочей среде Qwik эффективно объединяет файлы.

Почему Qwik использует JSX? У него под капотом React?

Нет, React не используется вообще. Qwik использует JSX в качестве синтаксиса шаблонов.

Обратите внимание, что JSX - это не React. Фактически, JSX - это только синтаксис без семантики. Мы выбрали JSX по нескольким причинам:

Знакомый синтаксис: Он не изобретает колесо, а использует существующий JS для циклов, условий и т.д. Спецификация JSX удивительно проста и мала;
Экосистема: он хорошо поддерживается IDE, линтерами, инструментами аудита безопасности, отладки и подсветки;
Похож на HTML: JSX визуально и концептуально похож на HTML-дерево. Другие системы шаблонов, такие как html templates (lit-html), представляют собой не деревья, а массивы лексем, что усложняет преобразование и работу с ними;
Популярен: С любой точки зрения, JSX является наиболее широко используемым синтаксисом шаблонов в мире.

Использует ли Qwik vDOM (виртуальный DOM)?

Qwik иногда использует vDOM, а в других случаях делает то же, что и SolidJS (прямое обновление DOM). Если изменение состояния не влечёт за собой структурных изменений, то Qwik, скорее всего, не будет использовать vDOM. Например:

Нет изменения структуры DOM, только обновление значения

export const NoStructuralChange = component$(() => {
  const count = useSignal(0);
 
  return (
    <>
    {/* Это не приведёт к активации vDOM (нет изменения структуры DOM, только обновление текстового значения). */}
     <div>Count: {count.value}</div>
     <button onClick$={() => count.value++}>+1</button>
    </>
  );
});

Qwik будет использовать vDOM, когда изменения будут носить структурный характер. В следующем примере необходимо обновить структуру DOM (заменить <h1> на <button>), поэтому для рендеринга будет использован vDOM:

Изменение структуры DOM

export const StructuralChange = component$(() => {
  const isLoggedIn = useSignal(false);
  return (
    <div>
      {isLoggedIn.value ? <h1>Вы вошли в систему!</h1> : <button>Войти в систему</button>}
    </div>
  )
});

Главное, что нужно понять (и причина, по которой vDOM не является проблемой производительности в Qwik), - это то, что в React при аннулировании корневого компонента создается vDOM для всего дерева. В Qwik решение принимается на основе каждого компонента. Причём только для компонентов, имеющих структурные изменения И реально изменяющих свою структуру. Если компонент является структурным (vDOM), но изменений в структуре не обнаружено, то Qwik пропускает этот компонент. Можно представить это как автозапоминание всех компонентов, то есть vDOM задействуется только при структурных изменениях представления. Это случается редко, поскольку в большинстве случаев представление изменяет только свои значения.

Короче говоря, Qwik использует vDOM, но значительно меньше, чем React в сопоставимых ситуациях.

Почему стоит использовать vDOM, несмотря на его негативную репутацию?

Вопрос о том, использовать или не использовать vDOM, можно рассматривать с таких позиций:

С одной стороны, это React, который использует vDOM для всего и всегда (можно привести веские аргументы в пользу того, что vDOM работает медленно).
Другая крайность - SolidJS, который вообще не использует vDOM (в результате получилось очень впечатляющее быстродействие).

С другой стороны, Qwik использует vDOM в редких случаях по двум причинам:

Потому что решение без использования vDOM потребовало бы выполнения кода хотя бы один раз при запуске, чтобы узнать о структуре компонента (чего Qwik явно избегает).
Потому что vDOM обладает привлекательными свойствами DX, особенно когда нужны динамические компоненты.

Для примера:

Динамические компоненты

const DynamicList = [ CompA, CompB, ...];
export const DynamicExample = component$(() => {
  const idx = Math.floor(Math.random() * DynamicList.length);
  const Component = DynamicList[idx];
  {/* Динамический выбор компонента для визуализации */}
  return <Component/>;
})

Приведённый выше код <Component/> очень прост для понимания. Мы динамически выбираем компонент для размещения в нём. Но в Solid, Svelte, Vue и Angular это становится сложнее (см. ссылки).

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

Существует ли маршрутизатор для Qwik?

Да! Qwik City включает в себя маршрутизатор на основе каталогов, и он вдохновлен Next.js и другими фреймворками.

Для развёртывания приложений Qwik нужен сервер?

Вы легко можете развернуть приложение Qwik в любой бессерверной среде благодаря нашим адаптерам. Мы также поддерживаем адаптер vanilla-node для серверов на базе Node.js, таких, например, как Express.

Если нет необходимости в SSR, вы можете развернуть своё приложение Qwik как статический сайт, благодаря нашему адаптеру SSG (Static Site Generation).

Что быстрее: SPA (Single Page Application) или MPA (Multiple Page Application)?

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

MPA-приложения очень быстро загружаются, поскольку им не нужно загружать столько JS, как их SPA-аналогам. Однако, когда пользователь осуществляет навигацию, обычно происходит полная перезагрузка страницы. Полная перезагрузка страницы обычно выполняется очень быстро, поскольку браузеры чрезвычайно быстро загружают и разбирают HTML, но подход MPA не идеален для всех проектов, поскольку иногда хочется сохранить состояние между переходами, и SPA делает это очень хорошо.

Qwik - это уникальный фреймворк, который является одновременно и MPA и SPA.

Можно ли на Qwik создать SPA?

Конечно! Qwik City включает компонент <Link>, который активирует SPA-навигацию. С Qwik разработчикам не нужно выбирать между SPA и MPA, каждое приложение - это и то, и другое одновременно.

MPA или SPA - это уже не архитектурное решение, принимаемое при старте проекта, а решение, принимаемое для каждой ссылки.

Может ли Qwik генерировать статические сайты (SSG)?

Да! Эта возможность есть во всех стартовых шаблонах Qwik City. Узнать, как сделать Static Site Generation.

Но... с другими фреймворками я также могу делать MPA и SPA

Не совсем так, другие фреймворки предлагают удалить все <Scripts> в корне для создания MPA, фактически удаляя всю интерактивность вместе с навигацией SPA.

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

Потребует ли переход на Qwik больших усилий?

Не обязательно. Если вы пришли из React, то перенос ваших компонентов в Qwik будет довольно прост. Помимо этого, благодаря Qwik React вы можете использовать всё из экосистемы React, вы можете использовать любые ваши React-компоненты и любые React-библиотеки в приложении Qwik.

Могу ли я пользоваться экосистемой React?

Да! Qwik может нативно запускать React-компоненты, ознакомьтесь с документацией.

Вы будете поражены!

Qwik делает частичную гидратацию?

Нет. Частичная гидратация (или островная архитектура), популяризированная Astro, предназначена для предотвращения гидратации всей страницы, где необходимо загрузить и выполнить все существующие на странице компоненты.

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

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

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

На каких языках написан Qwik?

Большая часть Qwik написана на TypeScript, надмножестве JavaScript, которое добавляет необязательную статическую типизацию и другие возможности. Однако компилятор (или оптимизатор) Qwik написан на языке Rust, который является очень быстрым и экономичным по памяти.

Есть ли у Qwik сообщество?

Да! Существует растущее сообщество разработчиков Qwik в Discord и GitHub. Они вносят удивительный вклад в развитие фреймворка, создают масштабные сайты и помогают друг другу. Присоединяйтесь.

Является ли Qwik "одобренным Алексом Расселом" фреймворком?

Да! Алекс Рассел (@slightlylate), известный своим вкладом в развитие PWA, W3C TAG, WC, TC39 и ES6, Chrome Frame, Dojo и т.д., часто весьма критично относится к JavaScript-фреймворкам. Тем не менее, он одобряет Qwik.

Готов ли Qwik к запуску в рабочей среде?

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

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

Правда ли, что Qwik сериализует слишком много данных в HTML?

Нет. Qwik сериализует только те данные, которые необходимы для текущей страницы. Если на странице 1000 компонентов, но только один из них является интерактивным, то количество сериализованных данных будет пропорционально объёму интерактивности, а не количеству компонентов.

Кто создаёт Qwik?

Удивительная команда разработчиков по всему миру, живущая в Discord, и несколько разработчиков, работающих полный рабочий день в Builder.io: Misko, Adam и Manu Almeida.

Qwik является проектом с открытым исходным кодом?

Да, MIT-лицензия и отсутствие зависимостей не приведут при установке Qwik к раздуванию ваших node_modules и ваших юристов.

Есть ли у Qwik какие-либо недостатки?

Да. Каждый фреймворк имеет сильные и слабые стороны, и предполагает компромисс.

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

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

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!

FAQ