В этой статье я расскажу, как выбрать идеальную структуру пользовательского интерфейса для вашего следующего проекта React. Будучи стажером в SimbaQuartz, я впервые столкнулась с проектом такой сложности. Мне рассказали о требованиях, рабочем процессе и сценариях, которые должны были быть обработаны в проекте.
При разработке такого огромного проекта задача состояла в том, чтобы реализовать функциональность, не нарушая внешний вид проекта. Использование фреймворка пользовательского интерфейса сделало нашу задачу довольно простой. Теперь все, что нам нужно сделать, это сделать идеальный и оптимизированный код.
Наши оценочные критерии включали:
➔ Широта компонентов
➔ Качество реализации
➔ Легкость рестайлинга
➔ Качество документации
➔ Поддержка проекта
Нашими основными претендентами были:
★ Муравей Дизайн Про
★ Семантический интерфейс
Муравей Дизайн Про
➔ Разнообразиекомпонентов:
◆ Ant Design Pro имеет большое количество встроенных компонентов, которые можно импортировать из среды Ant-d.
➔ Качество реализации:
◆ Красиво выглядящие компоненты имели множество опций и хорошую совместимость.
➔ Простота изменения стиля:
◆ Компоненты Ant-D можно изменять, но они не предназначены для капитального ремонта. Стандартного стиля ant-d было достаточно для наших требований.
➔ Качество документации:
◆ Хотя документация представлена на китайском языке, она имеет хороший перевод. И были снабжены подробными примерами.
➔ Поддержка проекта:
◆ Ant-D Pro имеет около 20 000 звезд на GitHub и имеет хорошую поддержку на Stack Overflow и Github.
Семантический интерфейс
➔ Разнообразиекомпонентов:
◆ Хороший выбор компонентов, но, возможно, потребуется дополнить их другими (например, выбор даты, фильтрация/сортировка в таблице данных)
➔ Качество реализации:
◆ Красиво выглядящие компоненты имели множество опций и хорошую совместимость.
➔ Простота изменения стиля:
◆ Компоненты очень легко перестраиваются. Документация для каждого компонента предоставляется очень четко.
➔ Качество документации:
◆ Интерактивные примеры каждого компонента, понятная навигация и информация о темах, параметрах компонентов и образцах макетов.
➔ Поддержка проекта:
◆ Имеет около 1500 звезд на github.com и поддерживается участниками с открытым исходным кодом.
Для вариантов использования нашего проекта лучше всего подходит Ant Design React. Он предлагает большое количество компонентов, каждый из которых довольно прост в использовании и интеграции с другими. Мы делаем много быстрых прототипов, и Ant идеально подходит для этих целей. Его документация и обширные примеры чрезвычайно полезны для быстрого начала работы.
Тем не менее, для всех Ant-D не обязательно лучший вариант для всех: если вам нужна простая тематика, то Semantic UI React может подойти.
Мы были довольны Ant Design с тех пор, как начали его использовать, хотя у нас были некоторые проблемы, мы смогли найти решение либо через документацию, либо через социальные форумы. Просто выбрав одну библиотеку пользовательского интерфейса и придерживаясь ее, вы решаете множество проблем с согласованностью и ошибками, которые могут возникнуть у вас при использовании собственных решений или выборе различных отдельных компонентов неизвестно откуда.
