Создавайте веб-сайты в 10 раз быстрее с помощью Qwik

Для современной фронтенд-разработки доступно множество популярных фреймворков JavaScript, и многие другие часто внедряются. Новые фреймворки всегда пытаются превзойти существующие фреймворки. Фреймворк Qwik — один из таких фреймворков, недавно представленный в бета-версии. Qwik не просто быстр; это молниеносно. Фреймворк Qwik легко превосходит существующие фреймворки JavaScript в 5-10 раз. Мало того, Qwik также имеет открытый исходный код и удобен для разработчиков, когда дело доходит до кодирования.

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

Понимание Qwik

Создатель Angular, соавтор Ionic и член основной команды Ionic создали Qwik. Одной из их основных целей была разработка фреймворка с повышенной производительностью. Итак, сначала давайте посмотрим, что делает Qwik таким быстрым.

Возобновляемость

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

Популярные фреймворки, такие как React, Angular и Vue, используют принцип гидратации, который включает в себя перестройку структур данных фреймворка и присоединение слушателей к браузеру после того, как это уже сделано на стороне сервера. Это в конечном итоге замедляет работу веб-приложения, когда необходимо выполнить много JavaScript. Однако Qwik устраняет необходимость в гидратации, используя возможность возобновления, чтобы предоставить браузеру готовую к запуску HTML-страницу без необходимости перестроения.

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

Ленивая загрузка

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

Ленивая загрузка в существующих фреймворках имеет два недостатка:

  • Разработчик имеет полный контроль над границами ленивой загрузки.
  • Фреймворки могут лениво загружать только те компоненты, которых в данный момент нет в дереве рендеринга.

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

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

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

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

Начало работы с Qwik

Для работы с приложением Qwik вам понадобится Node.js версии 16.8 или выше. Затем выполните следующую команду в своем терминале, чтобы создать проект Qwik.

npm create qwik@latest

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

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

npm run qwik add Tailwind

Теперь, когда вы настроили проект, давайте откроем его в среде IDE, такой как VS Code, и запустим с помощью команды npm start. Если все прошло хорошо, в браузере должен открыться экран приветствия Qwik. Кроме того, вы можете увидеть компонент, отображаемый на странице приветствия, если перейдете в каталог routes и откроете файл index.tsx.

Файл root.tsx является основным компонентом приложения Qwik. Вы заметите, что при открытии он начинается с компонента Qwik City. Qwik City — это дополнительный набор API-интерфейсов, созданный поверх ядра Qwik, который предоставляет другие функции, такие как маршрутизация, загрузка данных и конечные точки. Таким образом, Qwik City для Qwik — то же, что Nextjs для React. Qwik City также имеет нулевые накладные расходы, что означает, что в браузер не доставляется дополнительный JS.

Маршрутизация Qwik основана на каталогах. Это похоже на концепцию страниц в Next.js. Если вы создадите новый каталог в каталоге маршрутов и поместите в него индексный файл, маршрут этого файла автоматически получит имя каталога. Например, если каталог называется blog и в него помещен индексный файл, маршрут будет baseRoute/blog. Qwik также поддерживает вложенную маршрутизацию.

Qwik City ожидает, что эти индексные файлы в папке маршрутов будут иметь экспорт по умолчанию.

import { component$ } from '@builder.io/qwik'; 
export default component$(() => { return <> Hello World! </>; } );

Давайте теперь посмотрим, как написать пользовательский компонент в Qwik.

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

import { component$, useStore } from '@builder.io/qwik';
export const Count = component$(() => {
  const store = useStore({ count: 0 });
  return (
    <div>
      <p>Count: {store.count}</p>
      <p>
        <button onClick$={() => store.count++}>Click</button>
      </p>
    </div>
  );
});

Этот код показывает, что используются хуки и JSX, что напоминает кодирование React. Метка $ компонента представляет собой границу сериализации, указывая на то, что все внутри этого компонента загружается отложенно. Даже прослушиватели событий, такие как onClick, загружаются отложенно.

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

Сообщество

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

Заключение

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

Спасибо за чтение!

Essential JS 2 от Syncfusion — единственный пакет, который вам понадобится для создания приложения. Он содержит более 65 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Загрузите бесплатную пробную версию, чтобы оценить элементы управления сегодня.

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

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 20 февраля 2023 г.