Если вы чувствуете себя подавленным React, прочтите это

React - самый популярный в мире интерфейсный фреймворк. Он очень надежен и богат функциями, но для небольших проектов это может быть слишком много. Здесь в игру вступает AlpineJS. Он меньше, быстрее и проще в освоении, чем React, что делает его идеальным для конкретных целей.

Что такое React?

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

React, как говорит Facebook, - это библиотека JavaScript для создания пользовательских интерфейсов. Это оно. React - это не фреймворк, это не библиотека для создания приложений или веб-сайтов. Это библиотека для создания интерфейсов. Остальные функции поступают как из сторонних библиотек (например, redux), так и из сторонних библиотек (например, react-native) или собственных привязок (API-интерфейсы браузера или API-интерфейсы Android / IOS). Поэтому в рамках этой статьи я буду рассматривать только возможности React по созданию интерфейса.

Итак, как React создает интерфейсы? Он делает это путем преобразования JSX-кода в ванильный JS-код - технически транспилятор делает это - используя этот код для создания виртуального DOM и применяя его к фактическому DOM с помощью сложного алгоритма согласования.

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

Что такое AlpineJS?

AlpineJS также является библиотекой для построения пользовательских интерфейсов. Он может похвастаться реактивным и декларативным характером больших фреймворков, таких как Vue или React, с гораздо меньшими затратами, но как именно он выполняет свои обещания?

Секрет в том, что AlpineJS не использует виртуальный DOM, а работает полностью в реальном DOM. Вы полностью пропускаете этап транспилирования, процесс рендеринга и алгоритм согласования. Я считаю, что это увлекательный прием, и мне это очень нравится.

Он не только прост внутри, но и очень прост в использовании. Есть только 13 директив (мыслить реквизитами) и 5 ​​магических свойств (думаю, хуки, но не совсем). Документация для всей библиотеки умещалась в ее readme на GitHub.

Поскольку вы работаете с AlpineJS из DOM, вы пишете свой логический код непосредственно в HTML, не требуя файлов JS вообще. Это противоречивая практика, но я все еще поддерживаю ее.

Почему вы должны выбрать AlpineJS?

  1. AlpineJS идеально подходит для небольших и легких проектов. Самый очевидный пример - простые элементы пользовательского интерфейса, такие как раскрывающиеся списки, выдвижные панели, модальные окна и т. Д. Небольшой размер библиотеки (5 КБ против 34,8 КБ в React) и простота позволят вам двигаться быстрее и порадовать ваших клиентов.
  2. AlpineJS можно легко интегрировать в любой существующий веб-сайт / приложение, просто импортировав скрипт. Это означает, что вы можете внедрить рендеринг на стороне клиента на свои устаревшие серверные сайты рендеринга (ASP.NET, WordPress и т. Д.) Практически без изменений в кодовой базе.
  3. И AlpineJS, и React предназначены для создания интерфейсов, но, на мой взгляд, AlpineJS делает это более простым способом.
  4. Ты полюбишь это. Если вам кажется, что вы уже какое-то время работаете с React и вам нужен свежий воздух, попробуйте AlpineJS.

Почему бы вам не выбрать AlpineJS?

  1. Вы точно знаете, что строите большой проект, ориентированный на производство. AlpineJS очень интересно использовать, но он не предназначен для больших проектов (на самом деле, как раз наоборот).
  2. Вам нужна мобильная поддержка. React имеет встроенную систему реагирования, а AlpineJS - нет. Это так просто.
  3. И AlpineJS, и React предназначены для создания интерфейсов, но React может быть расширен для создания чего угодно (даже опыта виртуальной реальности), в то время как AlpineJS не может (на данный момент).
  4. Вы не любите разрабатывать или изучать что-то новое. В то время как React имеет огромное сообщество, корпоративное участие и существует уже довольно давно, AlpineJS - новинка. У него нет библиотеки, написанной для всего, или учебника, объясняющего, как решить каждую проблему, с которой вы сталкиваетесь. Если вы разрабатываете на AlpineJS, вам нужно полагаться на себя гораздо больше, чем при разработке на React.

Написаны ли какие-нибудь проекты на AlpineJS?

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

Примеры кода

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

Связывание данных

Задача проста: спросите у пользователя его имя и поприветствуйте его. С React:

С AlpineJS:

События

Вот как React обрабатывает различные события:

С AlpineJS:

Условный рендеринг

Вот как бы вы сделали условный рендеринг в React:

С AlpineJS:

Как видите, в каждом примере у Alpine меньше строк кода. Эта тенденция продолжается по мере вашего роста, но только до определенного момента, пока функции повторного использования React (повторно используемые компоненты) не сработают и не сделают свою часть работы.

Как мне начать?

Начать можно двумя способами. Если вы хотите сначала прочитать учебное пособие и испытать его на практике, у Alpine Toolbox есть отличный дайджест. Если вы хотите сразу погрузиться в разработку и начать создавать проект, в этом репозитории есть стартовый комплект (подумайте create-react-app, но для Alpine).

Заключительные примечания

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

Ресурсы