Я всегда был из тех, кто работает «умнее, а не больше»…

На самом деле, одним из главных мотивов моего погружения в мир программирования было желание дать возможность компаниям делать именно это. Создание инструментов и приложений, которые _фактически_ удобны для пользователя, — это суперсила, над которой я постоянно работаю. Такие интерфейсы позволяют предприятиям и их сотрудникам вернуться к тому, что приносит им наибольшее удовлетворение от их работы. Я на собственном опыте ощутил разницу на своих должностях до SWE, поэтому я очень ценю интуитивно понятный процесс, доступность и в целом красивые интерфейсы.

Имея это в виду, становится понятным, почему для моего первого проекта разработки я искал шаблон для использования во внешнем интерфейсе. Я хотел иметь возможность посвящать больше времени своему бэкенду для этого конкретного проекта, а не тратить чрезмерное количество времени, пытаясь разобраться в джунглях, которые могут быть HTML и CSS (особенно как новичок!). Кроме того, __зачем пытаться заново изобретать велосипед?__ Именно благодаря этому исследованию я обнаружил существование предварительно созданных и предварительно стилизованных библиотек компонентов.

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

Три мои любимые библиотеки компонентов на данный момент:

МАТЕРИАЛЬНЫЙ ИНТЕРФЕЙС

Material UI — это очень популярная библиотека пользовательского интерфейса React, которая была запущена в 2014 году в соответствии с рекомендациями Google по созданию компонентов. В настоящее время у него 77,7 тыс. звезд, и его выбирают ведущие компании, такие как Google, Amazon, Netflix, Unity, Spotify, NASA и Shutterstock. Первоначально меня больше всего интересовала библиотека MUI из-за ее популярности, обширной документации и того, что в ней было больше всего доступных компонентов. Мне также понравилось, что они посоветовали лучшие методы проектирования, например, обязательно сделать текст кнопки длиной всего в 1 строку.

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

РЕАКТИВНЫЙ БУСТРАП

Bootstrap — еще одна очень популярная библиотека с наибольшим количеством звезд Github из трех в списке — 157 тыс. Фактором этого является то, что он также является самым старым. Он был создан Twitter и стал открытым исходным кодом в 2011 году. Компании, которые в настоящее время используют Bootstrap, — это Twitter, Airbnb, Dropbox, Apple Music, Twitter, Coursera и Bloomberg. Известно, что Bootstrap довольно удобен для разработчиков. Вы можете быстро и легко создать свое приложение. Единственным недостатком этого является то, что многие приложения Bootstrap выглядят одинаково. Тем не менее, это широко используемый фреймворк, который нельзя пропускать.

ЧАКРА ИНТЕРФЕЙС

Хотя у этой библиотеки не так много звезд, как у двух предыдущих (25,4 КБ), она также является самой новой. Его популярность быстро растет, и на то есть веская причина — он чрезвычайно удобен для начинающих (чего нельзя сказать о MUI или Bootstrap). Фактически, как только вы нажмете кнопку «Начать» на их сайте, вам будет представлена ​​ссылка на бесплатный онлайн-видеокурс, который вы можете пройти, чтобы акклиматизироваться. Общая продолжительность курса составляет 42 минуты, и он поможет вам создать пользовательский интерфейс «Оформить заказ» небольшими частями. Единственное предостережение заключается в том, что он использует TypeScript, а не JavaScript, который обычно изучается, когда человек становится более продвинутым.

В заключение…

Хотя MUI, Bootstrap и Chakra UI являются моими любимыми интерфейсными фреймворками, которые вам необходимо проверить, существует множество других. Разные проекты имеют разные варианты использования, которые требуют разных инструментов. Вы также можете комбинировать различные фреймворки в своем приложении по мере необходимости. Интернет — это множество книг, документации и видео, которые вы можете использовать. В конце концов, вы сможете работать умнее, а не усерднее.