Вот что я думаю об этой библиотеке
Некоторое время назад я узнал об AgnosticUI, библиотеке компонентов, которая утверждала, что ее можно повторно использовать со всеми основными фреймворками. Таким образом, вы получаете простой способ перехода из одной среды в другую без необходимости заново изучать новую библиотеку или изменять стиль всей вашей экосистемы компонентов.
Это звучало интересно, поэтому я взял интервью у его создателя Роба Левина для подкаста 20MinJS. Вы можете послушать, что он сказал об этом здесь:
Теперь идея библиотеки, не зависящей от фреймворка, застряла у меня в голове, поэтому я захотел попробовать ее сам. В этой статье я собираюсь поделиться с вами своими честными мыслями об этом после того, как построил такой же простой проект в React и Vue.
Проект, который я построил
Я старался сделать проект простым, так как целью является проверка переносимости компонентов, нет смысла создавать очень сложное приложение.
Имея это в виду, я создал очень простое приложение To-Do, и вот результат:
Как видите, разницы практически нет, и основная (выделенный жирным шрифтом текст в версии React) заключается в том, что у Vue лучше сброс CSS по умолчанию, вот и все.
Если вы хотите проверить их код, вы можете сделать это здесь для версии React или здесь для версии Vue.
Я знаю, что, взглянув на это, вы увидите, что фактические компоненты в значительной степени идентичны. Итак, спойлер, мне удалось получить то, что я хотел.
Давайте посмотрим, как легко было добраться сюда.
Начало работы с библиотекой
Если честно, установить библиотеку в мой проект было довольно просто. Единственное предостережение заключается в том, что оно по-прежнему не совместимо с React 18, поэтому у меня было совершенно новое приложение, созданное с помощью create-react-app (которое по умолчанию использует React 18), и мне пришлось вручную понизить его до 17.
В общем, не большая проблема, но стоит упомянуть.
Остальное так же просто, как выполнить npm install agnostic-react или npm install agnostic-vue, и это работает.
Еще одно замечание о версиях: AgnosticUI совместим только с Vue 3, что не является большой проблемой, поскольку по умолчанию новое приложение Vue будет использовать эту версию, но если вы используете 2.x, имейте в виду, что это не сработает для вас. .
После этого нужно было просто импортировать CSS в мою основную точку входа в приложение (либо мои App.vue, либо мои App.js файлы):
И я был готов ехать.
Добро
Давайте прыгнем прямо в мясо этого, не так ли?
В этой библиотеке есть несколько «хороших» моментов:
- Библиотека делает то, на что претендует, она совместима с обоими фреймворками, которые я использовал. Как только вы правильно импортируете файлы стилей, вы готовы начать использовать компоненты, и они работают.
- Стили по умолчанию чистые и простые, и конечный результат выглядит красиво. Мне очень нравятся эти библиотеки, которые не навязывают вам собственные дизайнерские решения их создателей. В конце концов, вы включаете их в свою систему не для этого, поэтому они не должны на это влиять, иначе они просто добавляют визуальный шум.
- Выбор компонентов, за неимением лучшего термина, «достаточно хорош, чтобы заставить вас работать». Я сам пропустил несколько второстепенных компонентов, но в целом выбор довольно приятный, у вас есть элементы управления вводом, оповещения и уведомления, а также некоторые макеты. Всего понемногу, а остальное можно построить, так что ничего страшного.
- Наконец, документация была отличной, на самом деле, она сэкономила мне много времени при попытке установить правильный макет (и я займусь этим через минуту). Роб определенно отлично справляется с документацией, предоставляя множество примеров и дополнительную информацию, которая может вам понадобиться при включении библиотеки в ваше приложение.
Давайте теперь перейдем к разделу «не очень хорошо».
Чем меньше хорошего
Позвольте мне быть честным здесь на секунду, одна из основных причин, по которой я обычно думаю об импорте библиотеки компонентов вместо создания своей собственной, заключается в том, что я плохо разбираюсь в CSS. Я ужасно не умею настраивать макет своих приложений и следить за тем, чтобы каждая кнопка и компонент выглядели должным образом. Я в этом не разбираюсь.
Я могу писать на JavaScript без проблем, но когда дело доходит до стиля, у меня просто нет таких умственных способностей.
Поэтому я выбираю библиотеки компонентов, которые решают эти проблемы за меня.
AgnosticUI не проделал большой работы в этой области, по крайней мере, для меня.
Видите ли, несмотря на то, что базовые, непредвзятые стили, которые он предоставляет, действительно великолепны и чисты, большинство других библиотек компонентов, как правило, имеют компоненты, ориентированные на компоновку, которые вы можете использовать для структурирования своего приложения.
Вместо этого AgnosticUI полагался на то, что пользователь знает и понимает Flexbox. Я имею в виду, что эту концепцию несложно понять, но мне нужно было выйти из библиотеки и узнать кое-что еще, чтобы я мог правильно ее использовать. Как только я понял основы Flexbox, я вернулся к документации служебных классов и начал понимать, что они означают и как я могу их использовать. Но было бы неплохо, если бы это также было интегрировано в компоненты.
Это может показаться вам мелочью, если вы уже знакомы с Flexbox, но я предпочитаю, чтобы библиотеки абстрагировали основные концепции, чтобы новым пользователям было легче их освоить. Вы можете предоставить объяснения того, как вы используете эти концепции внутри, а затем даже предоставить разработчикам способы расширения вашей библиотеки с использованием тех же самых концепций. Но когда вы навязываете концепции каждому пользователю, потому что иначе они не могут использовать вашу библиотеку, тогда вы что-то упускаете.
Думайте так, как делает MaterialUI, они не заставляют вас понимать, как работает Flexbox или что-то еще. Если вы хотите расположить элементы вертикально или горизонтально, у вас есть компонент Stack, который сделает это за вас. Вам нужна сетка? Угадай, что? Вы можете использовать компонент Grid. И так далее.
И это единственное, чего не хватает Agnostic, чтобы его действительно можно было рассматривать как конкуренцию другим, более крупным библиотекам.
Пока этого не произойдет, порог начального уровня может быть слишком высоким для некоторых разработчиков-младших (или ленивых разработчиков, таких как я).
Идея, лежащая в основе AgnosticUI, хороша, и ее создатель, Роб, проделывает большую работу, продвигая ее вперед, почти самостоятельно. Что, если подумать, делает эту библиотеку еще более заслуживающей внимания.
Однако, как библиотеке компонентов, я думаю, что ей все еще чего-то не хватает в отделе компоновки, и пока она не решит эти недостатки, ей будет трудно конкурировать с другими, более крупными и более устоявшимися альтернативами.
Если вы хотите просмотреть код для обоих приложений, вы можете проверить репозитории здесь:
Вы пробовали AgnosticUI? Что ты об этом думаешь?
Создавайте приложения с повторно используемыми компонентами, такими как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
