Перевод статьи «13 Top React Component Libraries for 2020».
Представляем вам список полезных UI-библиотек React с открытым исходным кодом, которые стоит знать в 2020 году!
1. Rebass
Открывает наш список Rebass — маленькая библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных UI-элементов для тем на основе библиотеки Styled System.
Среди ключевых особенностей этой библиотеки стоит отметить следующие:
- Очень простой старт. У вас не будет нужды писать большое количество бойлерплейт-кода: вы его просто импортируете и начнете расширять примитивные компоненты, а также создавать собственные при необходимости.
- Благодаря тому, что эта библиотека основана на Styled System, она обеспечивает разработчику потрясающий опыт (можно сказать, к библиотеки хороший DX — по аналогии с UX).
- Привыкнув к рабочему процессу и синтаксису, вы сможете реализовывать темы для своих приложений, причем они будут обладать потрясающим уровнем кастомизации и расширяемости. А лучше всего то, что система тем полностью совместима с Theme UI. То есть, она создана поверх очень надежной библиотеки, специально спроектированной для тем react-приложений.
- При создании этой библиотеки применялся подход mobile-first. Вы получите новейшую философию дизайна прямо из коробки.
- Flexbox layout с примитивными компонентами Box и Flex, которые вы можете расширять.
- Помните, я сказал, что библиотека маленькая? Она занимает около 4KB, можно ли мечтать о чем-то лучшем?
Если вам нужны какие-то дополнительные доказательства жизнеспособности этой библиотеки компонентов, могу сказать, что она имеет больше 6 тысяч звезд на GitHub и больше 30 тысяч еженедельных загрузок на NPM.
2. Компоненты Ant-design
В отличие от Rebass с ее очень минималистическим набором расширяемых компонентов, Ant-design предлагает полновесный список из больше чем 50 настраиваемых компонентов, которые вы можете использовать для создания прекрасных приложений.
Особенность библиотеки в том, что все ее компоненты базируются на языке дизайна, разработанном создателями этой библиотеки.
Я советую вам почитать их Философию языка дизайна, где объясняются идеи, стоящие за каждым аспектом этих компонентов. Объяснения очень подробные: вы узнаете все «почему» каждого дизайнерского решения (например, расстояний между компонентами, выравнивания текста в пользовательськом input и т. п.).
Этот набор компонентов получил 53 тысячи звезд на GitHub и имеет больше 6 тысяч еженедельных загрузок NPM-версии (эта версия может быть устаревшей, так что по возможности лучше скачивайте напрямую с GitHub).
3. React Bootstrap
Помните старую добрую библиотеку Bootstrap? Это была, собственно, смесь CSS и JS-файлов, позволявшая вам легко добавлять уже подготовленные UI-компоненты.
Так может ли быть лучшее сочетание, чем Bootstrap и React? Эта библиотека заполняет пробел между старым и новым подходом, добавляя мощь React к уже и так мощной библиотеке.
Все, что вы могли делать с Bootstrap, можно делать и с этой библиотекой, с той лишь разницей, что вы будете при этом следовать паттерну React-компонентов.
Если вы поклонник Bootstrap или ищете способ быстро улучшить свои навыки CSS/JavaScript, вам определенно стоит обратить внимание на эту библиотеку. На время написания этой статьи оригинальная библиотека Bootstrap вышла в версии 4.4, а в React Bootstrap используется версия 4.3, так что они не слишком отличаются.
Наконец, о популярности: проект React Bootstrap имеет больше 16,7 тысяч звезд на GitHub и еженедельно скачивается с NPM больше 470 тысяч раз (да, популярная вещица!).
4. Material UI
Ребята из Ant-design создали собственный язык дизайна и реализовали на его основе React-компоненты. Google тоже создала собственный язык дизайна — Material Design, — в основе которого лежат карточки, макеты-сетки и отзывчивые анимации.
Библиотека Material-UI реализует язык дизайна Google, позволяя вам использовать его в React-проектах.
Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно.
Наконец, эта библиотека не просто дает вам набор инструментов для создания вашего собственного сайта. Она предлагает список тем, из которых вы можете выбирать. Это бывает очень удобно, особенно если вы занимаетесь дизайном фронтенда. Имейте в виду, что некоторые из лучших вариантов не бесплатны, но ничто не мешает вам взять бесплатный вариант и расширить его в нужном направлении.
С учетом всего вышесказанного, не удивительно, что этот проект имеет больше 52 тысяч звезд на GitHub и больше 800 тысяч скачиваний на NPM (в неделю!). Если вы ищете полностью React-совместимую тему для своего сайта, подумайте об этом варианте и попробуйте его, прежде чем принять окончательное решение.
5. React Spinner
Вам случалось слышать фразу «иногда меньше значит больше»? Эта библиотека — прекрасная иллюстрация данной фразы. React Spinner, в отличие от предыдущих вариантов, фокусируется на не общем виде вашего приложения и не на внутреннем дизайне его архитектуры. Вместо этого она заботится об одной-единственной вещи: индикаторах загрузки.
Возможно, это не самый популярный проект в нашем списке, но это хорошая рабочая лошадка. Если вы ищете способ дать понять пользователю, что что-то происходит, эта библиотека предоставляет вам больше 20 индикаторов загрузки, совместимых с React.
С учетом того, что эту библиотеку еженедельно скачивают с NPM около 69 тысяч раз, а на GitHub наградили тысячей звезд, мы можем предполагать, что она не просто полезная, а еще и активно используется сообществом.
6. Semantic UI React
Semantic UI это библиотека на основе jQuery, добавляющая дополнительный функционал в ваш конвейер. Это как Bootstrap, только с фокусом на семантике UI-разработки. Но есть одна проблема: эта библиотека не на 100% совместима с React. Вот здесь и выходит на сцену Semantic UI React.
Эта библиотека содержит длинный список готовых компонентов, разработанных таким образом, чтобы способствовать производству семантически правильного кода.
Оригинальная версия библиотеки работала на основе HTML и CSS с небольшими вкраплениями JavaScript. Вы определяли свои HTML-элементы, задавали подготовленные CSS-классы и вызывали подходящую JavaScript-функцию.
Теперь, благодаря добавленной совместимости с React, вы при помощи JSX-кода напрямую определяете компоненты и связываете их с кодом React Component. То есть, вам не нужно волноваться о выборе правильного элемента и добавлять код: «реактивный» подход все это значительно упрощает.
Библиотека Semantic UI React имеет больше 10,6 тысяч звезд на GitHub, а с NPM ее скачивают больше 100 тысяч раз в неделю.
7. Grommet
Grommet это еще одна библиотека компонентов, призванная помочь вам создавать ваши собственные сайты, просто смешивая и соединяя разные их части. При этом данная библиотека очень сильно фокусируется на отзывчивости и доступности (предлагает клавишную навигацию, теги для скринридеров и т. п.).
И если вы не увлекаетесь дизайном (а это могут сказать о себе многие разработчики, включая меня), вам понравятся design kit и полный комплект значков, поставляемые с этой библиотекой.
Design kit поставляется в разных видах, например, Sketch для MacOS (на картинке снизу), Adobe XD и т. д.
Набор значков полностью можно просмотреть на сайте, а картинка демонстрирует, насколько легко вам будет установить их в своем проекте и добавить в ваш код.
Эта библиотека имеет больше 5,6 тысяч звезд на GitHub. По части NPM-загрузок она, может, и не сравнится с предыдущими библиотеками в нашем списке, но, тем не менее, речь идет о 16 тысячах скачиваний в неделю, а это тоже не мало.
8. Gestalt
Библиотека компонентов Gestalt была разработана Pinterest на основе их внутреннего языка дизайна. Как и Material UI, и Ant-Design, Gestalt была создана для упрощения коммуникации между дизайнерами и разработчиками путем внедрения множества готовых компонентов.
Имейте в виду, эти компоненты не особенно красивы (ну, вы же видели UI Pinterest?). Но это хороший вариант, если вы работаете над прототипом или ищете способ сделать так, чтобы ваши дизайнеры и разработчики начали понимать друг друга.
На GitHub эта библиотека набрала больше 3,3 тысячи звезд, а вот в NPM-сообществе она не столь популярна (800 загрузок в неделю).
9. Fabric React
Еще одна библиотека, созданная одним из крупных игроков рынка. Речь идет о Microsoft. Fabric React может помочь вам в создании Office-подобного пользовательского опыта. Это не значит, что вы будете копировать Office, просто у вас будет доступ к похожему поведению и графике.
Fabric React совместима с десктопами, устройствами Android и iOS, а также используется на таких сайтах как Office 365, OneNote, Azure DevOps и пр.
Опять же, когда дело касается библиотек компонентов React, есть определенный смысл в использовании тех из них, которые следуют какому-то языку дизайна (в данном случае — язык дизайна Microsoft Office), потому что такой дизайн имеет сильную логику. В общем, если вы хотите создать веб-приложение с пользовательским интерфейсом, похожим на Office, обратите внимание на эту библиотеку.
Что касается популярности, Fabric React не дотягивает до «звездных деток», но показывает вполне достойные результаты: больше 6,2 тысячи звезд на GitHub и 77 тысяч скачиваний в неделю с NPM.
10. OnsenUI
Onsen это библиотека компонентов с фокусом на mobile-first дизайн. Отличительная особенность этой библиотеки в том, что она написана на чистом JavaScript и не привязана к какому-то фреймворку. Другими словами, это не React-библиотека в строгом смысле; потенциально ее можно использовать с любыми другими UI-фреймворками.
Если вы хотите создать приложение в стиле mobile-first, подумайте об использовании OnsenUI. Эта библиотека даст вам возможность создать надежный UI с минимальными усилиями, причем вы получите совместимость с основными платформами просто «из коробки».
В отличие от других библиотек в списке, Onsen UI в большей степени популярна на NPM (больше 12 тысяч скачиваний в неделю), чем на GitHub (больше 7,8 тыс. звезд).
11. React Virtualized
Подобно проекту React Spinner, React Virtualized предназначен для решения одной-единственной проблемы: эффективного рендеринга списков и табличных данных на странице. Я знаю, что вы думаете: «А что, так сложно отобразить таблицу? Или простой выпадающий список?» Но что, если в вашем выпадающем списке больше тысячи элементов, а в таблице — больше сотни столбцов?
Этот проект как раз и призван решить проблему подобных edge cases.
На сайте проекта вы найдете простую, но мощную демку, с которой стоит повозиться, чтобы понять, насколько полезной может быть эта библиотека. Поменяйте число столбцов, добавьте побольше элементов в списки, и вы увидите, насколько легко демо адаптируется. После этого задумайтесь, сколько кода вам пришлось бы написать, чтобы добиться такой же гибкости списков, — и скачайте React Virtualized.
Этот проект набрал больше 17,5 тыс. звезд на GitHub и еженедельно скачивается с NPM около 460 тысяч раз. В общем, на эту библиотеку стоит обратить внимание.
12. Blueprint
Помните, я говорил, что OnsenUI это библиотека компонентов, следующая подходу mobile-first? Так вот — о Blueprint этого точно не скажешь. Как справедливо отмечено на сайте проекта, он фокусируется на разработке десктопных приложений, требующих обработки большого объем данных и запускающихся в современных браузерах (к которым зачем-то причислен IE11).
С этой библиотекой вы получаете доступ к компонентам для выбора даты и времени, к таблицам с высокой интерактивностью (здесь вспоминаем об обработке больших объемов данных) и к хосту с более чем 300 значками для всех ваших графических нужд.
Библиотека Blueprint создана командой Palantir. Эта компания фокусируется на создании способов легкого взаимодействия пользователей с данными, так что понятно, почему ее библиотека имеет именно такую направленность.
Имейте в виду, что если вы создаете приложение, требующее обработки больших объемов данных, использование чего-то вроде React Virtualized поможет вам в отображении этих данных, но если вам нужно нечто большее, лучше подумайте о Blueprint.
На GitHub этот проект набрал больше 15 тысяч звезд, так что он определенно пользуется популярностью. Количество скачиваний с NPM тоже впечатляет — больше 100 тысяч в неделю.
13. React Desktop
Наконец, закрывая обзор лучших библиотек компонентов React на 2020 год, я хотел бы рассказать о React Desktop. Этот проект занимает уникальное положение в нашем списке, поскольку он единственный пытается подражать десктопному опыту в вебе.
Посмотрите на скриншоты и вы поймете, что я имею в виду (компоненты используются одни и те же).
Как видите, при помощи этой библиотеки вы можете идеально воспроизвести десктопный опыт, используя JavaScript. А это значит, что вы сможете создавать настоящие десктопные приложения, используя Electron.js или же просто добавлять интересные эффекты в ваши веб-приложения (эти примеры лучше всего работают в Chrome, так что используйте именно этот браузер для тестирования).
GitHub-репозиторий этого проекта имеет больше 8,5 тыс. звезд, а это просто потрясающе для инди-разработки. Но, несмотря на все эти звезды, количество скачиваний незаслуженно низкое — чуть больше 600 в неделю.
Если вы ищете легкий способ разрабатывать десктопные приложения, используя веб-технологиии, я настоятельно советую делать это, опираясь на React Desktop и Electron.js.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]