Если вы чувствуете себя подавленным 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?
- AlpineJS идеально подходит для небольших и легких проектов. Самый очевидный пример - простые элементы пользовательского интерфейса, такие как раскрывающиеся списки, выдвижные панели, модальные окна и т. Д. Небольшой размер библиотеки (5 КБ против 34,8 КБ в React) и простота позволят вам двигаться быстрее и порадовать ваших клиентов.
- AlpineJS можно легко интегрировать в любой существующий веб-сайт / приложение, просто импортировав скрипт. Это означает, что вы можете внедрить рендеринг на стороне клиента на свои устаревшие серверные сайты рендеринга (ASP.NET, WordPress и т. Д.) Практически без изменений в кодовой базе.
- И AlpineJS, и React предназначены для создания интерфейсов, но, на мой взгляд, AlpineJS делает это более простым способом.
- Ты полюбишь это. Если вам кажется, что вы уже какое-то время работаете с React и вам нужен свежий воздух, попробуйте AlpineJS.
Почему бы вам не выбрать AlpineJS?
- Вы точно знаете, что строите большой проект, ориентированный на производство. AlpineJS очень интересно использовать, но он не предназначен для больших проектов (на самом деле, как раз наоборот).
- Вам нужна мобильная поддержка. React имеет встроенную систему реагирования, а AlpineJS - нет. Это так просто.
- И AlpineJS, и React предназначены для создания интерфейсов, но React может быть расширен для создания чего угодно (даже опыта виртуальной реальности), в то время как AlpineJS не может (на данный момент).
- Вы не любите разрабатывать или изучать что-то новое. В то время как React имеет огромное сообщество, корпоративное участие и существует уже довольно давно, AlpineJS - новинка. У него нет библиотеки, написанной для всего, или учебника, объясняющего, как решить каждую проблему, с которой вы сталкиваетесь. Если вы разрабатываете на AlpineJS, вам нужно полагаться на себя гораздо больше, чем при разработке на React.
Написаны ли какие-нибудь проекты на AlpineJS?
Хотя я не смог найти ни одного, есть несколько классных демок, написанных на Alpine. Вот кодовые ручки, которые стоит попробовать:
Примеры кода
Теперь я покажу вам несколько примеров, чтобы вы могли понять, как выглядит разработка в AlpineJS.
Связывание данных
Задача проста: спросите у пользователя его имя и поприветствуйте его. С React:
С AlpineJS:
События
Вот как React обрабатывает различные события:
С AlpineJS:
Условный рендеринг
Вот как бы вы сделали условный рендеринг в React:
С AlpineJS:
Как видите, в каждом примере у Alpine меньше строк кода. Эта тенденция продолжается по мере вашего роста, но только до определенного момента, пока функции повторного использования React (повторно используемые компоненты) не сработают и не сделают свою часть работы.
Как мне начать?
Начать можно двумя способами. Если вы хотите сначала прочитать учебное пособие и испытать его на практике, у Alpine Toolbox есть отличный дайджест. Если вы хотите сразу погрузиться в разработку и начать создавать проект, в этом репозитории есть стартовый комплект (подумайте create-react-app
, но для Alpine).
Заключительные примечания
Спасибо за чтение. Надеюсь, вам понравилась эта работа. Дайте мне знать в комментариях, что вы думаете об AlpineJS и для каких крутых проектов вы его использовали!