Ui фреймворк: UI framework за 5 минут / Хабр

5 лучших фреймворков для верстки: как они устроены и есть ли у них минусы

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

• Bootstrap
  • Плюсы Bootstrap
  • Минусы Bootstrap
• Tailwind
  • Плюсы Tailwind
  • Минусы Tailwind
• Material-UI
  • Плюсы Material-UI
  • Минусы Material-UI
• Foundation
  • Плюсы Foundation
  • Минусы Foundation
• UIkit

Bootstrap

Bootstrap на сегодняшний день является одним из самых популярных CSS-фреймворков — с его помощью создано около 22% всех сайтов в мире. Чаще всего его используют для создания адаптивных сайтов, а также мобайл-ферст сервисов. Сейчас последней версией фреймворка является Bootstrap 5. Документацию к Bootstrap вы можете почитать здесь.

Плюсы Bootstrap

Адаптивная сетка Bootstrap

Благодаря Bootstrap разработчикам и верстальщикам не нужно тратить рабочее время на создание собственной сетки — сервис позволяет автоматически построить адаптивную сетку, основанную на Flex-модели. При этом пользователи могут как менять эту адаптивную сетку под свои нужды, так и оставить версию по умолчанию, потому что она будет самостоятельно меняться в зависимости от наполнения контейнеров контентом и особенностям сайта.

Адаптивные изображения

Bootstrap поставляется со своим кодом для автоматического изменения размера изображений в зависимости от текущего размера экрана пользователя. Для этого нужно просто добавить к изображениям класс .img-responsive — все остальное сделают стандартные правила CSS.

Компоненты Bootstrap

Bootstrap поставляется с огромным набором компонентов, которые можно легко использовать. Среди них:

• Панели навигации
• Выпадающие списки
• Индикаторы прогресса

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

JavaScript в Bootstrap

Тем, кому не хватает возможностей Bootstrap, сервис позволяет использовать JS. Это дает разработчикам еще больше возможностей для интерактивности.

Документация Bootstrap

Документация у Bootstrap — одна из лучших на рынке. Каждый фрагмент кода подробно описан и объяснен.

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

Настраиваемость Bootstrap

Когда дело доходит до таких фреймворков как Bootstrap, одной из главных проблем является их размер — их вес может замедлять первую загрузку страницы. Например, текущая версия CSS-файла Bootstrap весит 119 КБ, что достаточно много.

Bootstrap позволяет настраивать, какую функцию пользователи собираются встроить в свою загрузку. Можно просто отменить загрузку функций, которые не нужны для работы данного сайта — это снижает вес CSS-файла и ускоряет время загрузки страницы.

Сообщество Bootstrap

Как и во многих опенсорс-проектах, за Bootstrap стоит большое сообщество дизайнеров и разработчиков. Размещение на GitHub позволяет разработчикам легко изменять кодовую базу Bootstrap и вносить в нее свой вклад. Это позволяет core-team в Bootstrap действительно понимать, чего не хватает пользователям их продукта, и быстро реализовывать необходимые фичи.

Внешние шаблоны Bootstrap

По мере роста популярности Bootstrap другие разработчики начали создавать шаблоны на основе этого фреймворка, чтобы еще больше ускорить процесс веб-разработки. Сейчас существуют тысячи шаблонов, готовых компонентов и тем для Bootstrap — по сути, можно создать очень качественный собственный сайт, практически не написав ни строчки CSS-кода.

Продолжайте учиться: На Хекслете есть профессия Верстальщика — в ней вы узнаете как основы HTML и CSS, так и самые современные технологии и концепции для верстки. В этой профессии изучается и Bootstrap

Минусы Bootstrap

Непонятный синтаксис Bootstrap

В самом начале знакомства с Bootstrap некоторые детали его синтаксиса могут сбивать с толку. Например, в системе сеток для того, чтобы создать столбец, занимающий треть экрана, нужно добавить к нему класс .col-md-4. При этом интуитивно сначала кажется, что вместо четверки нужно поставить тройку — ведь мы говорим о трети экрана, а не о четверти. Однако Bootstrap использует систему из 12 столбцов, а 4 — это треть из 12, поэтому такая логика имеет право на существования, хотя первоначально кажется очень неинтуитивной.

Файлы начальной загрузки очень большие

Мы уже писали об этом выше — CSS-файлы Bootstrap весят достаточно много, и опытные разработчики могут вручную сгрузить ненужные им функции. Однако начинающим программистам это сделать самостоятельно практически нереально.

Tailwind

Еще один CSS-фреймворк — Tailwind, который называют «Bootstrap будущего», предлагает огромный каталог классов и инструментов, с помощью которых разработчик может облегчить стилизацию сайта — либо приложения. Эта CSS-библиотека упрощает стилизацию HTML при помощи большого количества разных классов — при этом, в отличие от Bootstrap, который предлагает готовые компоненты, в Tailwind можно создавать конкретные свойства, и применять их уже дальше на разные компоненты.

Например, в Taildwind можно применить классы bg-blue-500 py-2 px-4 rounded к кнопке, сохранить ее и назвать . btn, а потом постоянно использовать в тех местах, где это нужно (да и не нужно тоже).

То есть, в отличие от Bootstrap, фреймворк Tailwind не предлагает нам заранее автоматически созданные компоненты. Скорее он дает служебные классы, при помощи которых пользователи могут создавать собственные классы.

Плюсы Tailwind

Tailwind легко настраивается

У фреймворка есть файл с конфигурацией по умолчанию tailwind.config.js, в котором можно настроить цветовые палитры, стили, темы и так далее.

Tailwind имеет собственные служебные шаблоны

Это решает множество проблем, начиная с определения классов и их организацию, заканчивая неймингом классов. Такие служебные классы сильно упрощают процесс создания пользовательских компонентов — теперь не нужно прям погружаться в разработку или верстку, можно просто применить функцию theme() и все заработает.

Интеграция с PurgeCSS

Этот фреймворк можно оптимизировать с помощью PurgeCSS. С его помощью можно уменьшить размер файла, отсканировав HTML и удалив неиспользуемые классы. Обычно, по мере увеличения размера проекта, размер файла CSS тоже увеличивается — однако это не происходит у Tailwind из-за стандартизированного набора классов и настроенной оптимизации. Однако такая возможность есть и у других фреймворков, просто у Tailwind эта функция наиболее оптимизирована.

Адаптивность

Tailwind позволяет создавать сложные адаптивные макеты, которые будут в первую очередь ориентированы на мобильные устройства. При этом аналогичная функция есть и у Bootstrap.

Коммьюнити

У Tailwind огромное и очень открытое сообщество, где можно всегда задать вопросы и найти решения той или иной проблемы.

Прокачивайте свой уровень программирования: На Хекслете есть несколько десятков треков — специальных курсов для опытных программистов, позволяющие повысить уровень компетентности разработчика в разных направлениях.

Минусы Tailwind

Огромное количество классов, которые не используются

Слишком большое количество классов — как ни странно это звучит и как бы не противоречило это предыдущему пункту — это тоже один из минусов. Дело в том, что у вас всегда будет огромное количество классов и стилей, которые вы никогда не будете использовать: при этом их придется пролистывать, думать о них. Да, это все будет оптимизировано через PurgeCSS, однако огромный выбор может оказаться достаточно сложным, особенно для начинающих разработчиков.

Практики написания кода

Tailwind приучает пользователей писать стили inline.

Material-UI

Material-UI — библиотека с открытым кодом, которая включает в себя компоненты React , реализующие Material Design от Google. Она построена с использованием Less (Leaner Style Sheets) — обратно совместимым языковым расширением для CSS. Запустившись в 2014 году — вскоре после того, как появился React, Material-UI набрал более 68 тыс. звезд на GitHub и на сегодняшний день является чуть ли не лучшей библиотекой для пользовательских интерфейсов для React.

Плюсы Material-UI

Документация

Material-UI имеет очень подробную документацию. Это сильно упрощает навигацию по фреймворку и полностью раскрывает все его возможности.

Регулярные обновления

Фреймворк Material-UI постоянно обновляется — разработчики развивают проект и активно расширяют его функционал, убирая ошибки

Хороший вкус

Все компоненты в Material-UI едины по дизайну и цветовым тонам. Такой подход позволяет разработанному приложению или сайту выглядеть очень эстетично.

Минусы Material-UI

Мутабельность

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

Проблемы с производительностью

Тоже проблема, которая касается разработчиков больших проектов со сложными алгоритмами и большим количеством различных компонентов.

Принадлежность к экосистеме Google

До конца непонятно, хорошо это или плохо — но Material-UI все-таки является библиотекой, которую активно продвигает Google. Это следует учитывать разработчикам, которые хотят создавать платформенно-независимый UX (например, приложение, которое должно хорошо работать и на iOS).

Смотрите полезные вебинары: Продуктивность программиста без выгорания? Вебинар с Максимом Дорофеевым об эффективности и прокрастинации.

Foundation

Если перейти на сайт Foundation, можно увидеть надпись «Самый продвинутый в мире адаптивный интерфейсный фреймворк» — и, в общем, это является не только маркетинговым лозунгом. Foundation был разработан так, чтобы естественно сочетаться с фреймворком Rails — и поэтому он перенял несколько «буддийских» руководящих принципов Rails.

Foundation — это адаптивный интерфейсный фреймворк, который представляет собой адаптивную сетку, а также компоненты пользовательского интерфейса HTML и CSS, шаблоны и фрагменты кода. Сюда же входит вся типографика, формы, кнопки, навигация и другие элементы интерфейса, а также дополнительные функции, которые предоставляются JavaScript.

При этом Foundation — проект с открытым исходным кодом, который ранее поддерживала компания ZURB. С 2019 года этот проект поддерживают только волонтеры.

Сейчас Foundation не имеет такого же влияния на фронтенд-разработчиков, как Bootstrap или хотя бы Tailwind, однако сейчас этот фреймворк постепенно начинает набирать обороты и распространяться среди программистов и верстальщиков. Например, согласно данным BuiltWith, 11,8% из 100 тыс. лучших сайтов используют Bootstrap. И 2,3% — Foundation Framework.

Foundation имеет модульную структуру и состоит в основном из стилей Sass. По сути, фреймворк построен на основе сетки в 940 пикселей, которая является адаптивным макетом.

Плюсы Foundation

Большое количество инструментов

Технически не очень верно утверждать, что Foundation — это CSS-фреймворк. Изначально он создавался как модульный набор инструментов, предназначенных для решения практически всех видов интерфейсных задач. В Foundation есть отдельные инструменты для веб-сайтов, отдельные — для электронной почты и так далее. Также Foundation поставляется с интерфейсом командной строки — это очень порадует разработчиков, которые привыкли работать с Webpack или другими сборщиками модулей.

Гибкость

В отличие от Bootstrap, Foundation был создан для того, чтобы предоставить разработчику полный контроль над своим пользовательским интерфейсом. В результате Foundation будет казаться новичку чрезвычайно сложным. Однако причина в том, что Foundation не навязывает разработчику какой-либо язык стилей, а стремится быть тем, чем он является: отличным фреймворком CSS.

Больше, чем просто элементы интерфейса

Помимо элементов для интерфейсов, Foundation имеет большое количество дополнительных возможностей — расширенную систему адаптивных изображений, готовый компонент ценовой таблицы (да, тот, который применяют для отображения различных тарифных планов), проверку формы, адаптивные встраивания и многое другое.

Минусы Foundation

Небольшое сообщество

У Foundation достаточно небольшое сообщество, и найти разработчика, который знает Bootstrap, все же намного проще. Поэтому и найти решение сложной задачи тоже сложнее на Foundation, чем на Bootstrap.

Сложность

Если разработчик привык к Bootstrap или к ванильному CSS, Foundation будет казаться очень и очень сложным. Слои внутри слоев, компоненты с компонентами, бесконечные возможности настройки. Но это вытекает из плюсов Foundation, поэтому с этим стоит смириться.

Кошмар для перфекционистов

В Foundation есть огромное количество различных вариаций и инструментов — можно практически вечно доделывать ваш продукт, не внося никаких изменений.

UIkit

UIkit — совсем небольшой фреймворк, который специализируется на минимализме — не в функциях, а в дизайне. Если вам нравятся сверхчистые, элегантные и не лишенные пробелов дизайны, то UIkit вам поможет. Особенно UIkit помогает разработчикам для приложений.

Но UIkit — достаточно автономная система, поэтому ее нельзя расширять или изменять. При этом как и Bootstrap, UIkit работает со своим JavaScript. Это значит, что вы можете использовать jQuery для манипуляций с DOM, но использование виртуальной структуры DOM, такой как React — невозможно.

По сути, UIkit — комплект готовых компонентов для различных частей сайтов.

Поэтому мы не будем широко расписывать возможности UIkit, а просто скорее добавим, что это прекрасный фреймворк для очень простых задач, которые вам нужно быстро решить.

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Что есть React: Пишем свой UI-фреймворк

Принципы работы интерактивных UI-фреймворков. Исследование MVC-фреймворков на примере написания клона экосистемы по примеру React и Redux.

Подробнее в нашем анонсе в блоге.

Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram

Free30:41

1 Рендер страницы в JavaScript

Переход от классического серверного рендеринга HTML-страниц на построение DOM через JavaScript. Отделение данных от представления.

Free47:07

2 Динамика и иммутабельный flow

Добавление динамики. Сложность изменения страницы при изменении состояния. Однонаправленный поток данных и иммутабельный перерендер страницы.

Free41:57

3 Виртуальный DOM и синхронизация UI

Оптимизация производительности перерендера страниц. Концепция виртуального DOM. Синхронизация реального дерева с виртуальным.

38:07

4 Виртуальный DOM в формате JSON

Отход от стандартных Node-элементов к структурам для построения виртуального DOM. Перевод на декларативный JSON-формат описания UI.

38:25

5 Компоненты React и синтаксис JSX

Добавление фабрики компонентов для упрощения разработки. Подключение Babel. Внедрение HTML-подобного синтаксиса JSX для написания компонентов.

25:51

6 Хранилище состояния и подписка

Инкапсуляция состояния в объект-хранилище. Реализация автоматического рендеринга через подписку на изменение состояния.

33:37

7 Диспетчер и экшены Redux

Добавление новых действий к объекту хранилища через систему плагинов-редьюсеров. Диспетчеризация действий. Фабрики-создатели действий. Подключение Redux.

38:15

8 Интерактив по Flux и MVC

Добавление интерактивных элементов. Организация однонаправленного потока управления Flux. Анализ паттерна Model-View-Controller.

31:08

9 Контекст и контейнерные компоненты

Проблема каскадного проброса состояния. Использование контекстов для передачи состояния внутренним компонентам. Выделение контейнерных компонентов.

53:55

10 Привязка состояния и React-Redux

Унификация привязки состояния и действий к свойствам компонента. Автоматизация мэппинга через коннектор. Подключение React-Redux. Асинхронные экшены через Thunk.

1:11:29

11 Локальное состояние и хуки

Размещение локального состояния внутри классовых и функциональных компонентов. Использование хуков для экономии кода.

1:54:39

12 Маршрутизация и History API

Динамическая смена контента. Написание компонента Router для эмуляции многостраничности через использование хэшэй и History API браузера.

Вам не нужна среда пользовательского интерфейса — Smashing Magazine

• 13 минут чтения
• CSS, интерфейс, Инструменты, Frameworks
• Поделиться в Twitter, LinkedIn

Об авторе

Джош Комо — разработчик программного обеспечения, педагог, пианист-любитель и любитель кошек. Последние несколько лет он работал инженером-программистом в таких организациях, как Хан… Больше о Джош ↬

Разработчики часто используют фреймворки пользовательского интерфейса, такие как Bootstrap или Material UI, надеясь, что они сэкономят кучу времени и быстро создадут профессионально выглядящее приложение. К сожалению, так дело обстоит редко. Давай поговорим об этом.

Время от времени кто-нибудь будет спрашивать у меня рекомендации по фреймворкам пользовательского интерфейса. Под «фреймворком пользовательского интерфейса» я подразумеваю любой сторонний пакет, ориентированный на предоставление стилизованных компонентов пользовательского интерфейса. Он включает в себя CSS-фреймворки, такие как Bootstrap, а также библиотеки компонентов JS, такие как Material UI или Ant Design.

Мой ответ на этот вопрос, как правило, застает людей врасплох: я не использую их и не думаю, что их следует использовать для большинства потребительских товаров. 😅

Чтобы было ясно, я ничего не имею против этих инструментов, и я думаю, что для них есть несколько реальных вариантов использования. Но я видел, как многие разработчики обращались к этим инструментам с нереалистичными ожиданиями относительно проблем, которые они решат, или того, насколько легко с их помощью будет создавать приложения.

В этой статье я собираюсь объяснить, почему вам, вероятно, не нужны эти инструменты. Я также поделюсь некоторыми из своих стратегий создания профессионально выглядящих приложений без опыта проектирования.

Привлекательность фреймворков пользовательского интерфейса

Существует множество причин, по которым разработчики выбирают фреймворк пользовательского интерфейса. Вот три наиболее распространенные причины, которые я видел:

1. Они хотят, чтобы их приложение/сайт выглядело безупречно и профессионально, и эти инструменты предоставляют красиво оформленные компоненты пользовательского интерфейса.
2. Они хотят быстро запустить что-то, не тратя кучу времени на создание всего с нуля.
3. Они осознают, что многие компоненты пользовательского интерфейса, такие как модальные окна, раскрывающиеся списки и всплывающие подсказки, действительно трудно сделать правильно, особенно когда речь идет о специальных возможностях, поэтому они хотят убедиться, что все сделано правильно.

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

Давайте приступим.

Профессиональный дизайн

Первая причина может быть наиболее распространенной. Есть множество разработчиков, которые хотят что-то создавать, но у которых нет опыта в дизайне. Вместо того, чтобы тратить годы на обучение дизайну, почему бы не использовать сторонний пакет, который предоставляет красиво оформленные компоненты прямо из коробки?

Вот в чем проблема, на мой взгляд: дизайн — это примерно гораздо больше, чем красивые вещи.

Недавно я получил в подарок LEGO Nintendo Entertainment System:

(Большое превью)

Это был действительно забавный набор для сборки. Если вы поклонник LEGO, я настоятельно рекомендую проверить это!

Но вот в чем дело: я смог собрать эту модель, потому что в наборе шла 200-страничная книга, в которой мне было указано, куда класть каждый кирпичик.

Если бы мне дали все части, но не инструкции, моя NES выглядела бы гораздо хуже, чем она есть на самом деле. Мало иметь качественные кирпичи, нужно еще уметь их использовать.

Библиотека компонентов может дать вам красивые кнопки, средства выбора даты и виджеты разбиения на страницы, но сборка их по-прежнему остается вашей задачей .

Блоки в такой системе проектирования, как Material Design, были созданы талантливой командой дизайнеров. Эта команда понимает фреймворк и умеет собирать из кусочков красивые интерфейсы. У нас есть доступ к одним и тем же произведениям, но это не значит, что мы автоматически достигаем тех же результатов.

Я помню, как один дизайнер сказал, что только Google может делать приложения в стиле Material Design, которые хорошо выглядят. В Android App Store полно сторонних приложений, которые используют те же профессионально разработанные компоненты, но совсем не выглядят профессиональными.

У хорошего дизайна так много неосязаемых аспектов, таких как баланс, интервалы и согласованность. Чтобы эффективно использовать библиотеку компонентов, вам нужно поставить себя на место создавших ее дизайнеров и понять, как они предназначены для развертывания.

Кроме того, какой бы обширной ни была библиотека, в ней никогда не будет всего необходимого. Каждое приложение и веб-сайт уникальны, и всегда будут особые требования. Создание совершенно нового компонента, который «вписывается» в существующую стороннюю дизайн-систему, — это 9.0032 чертовски сложно .

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

Я сочувствую разработчикам, которые хотят запустить профессионально выглядящий проект без какой-либо дизайнерской интуиции… Но, судя по тому, что я видел, обычно так не получается.

Экономия времени

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

В этом есть доля правды, но, судя по тому, что я видел, часто бывает ситуация черепахи и зайца.

Несколько лет я преподавал основы веб-разработки студентам буткемпа в Университете Конкордия. Программа завершается 2-недельным персональным проектом. Учащиеся решают, что строить, и они должны это сделать. Как инструктор, я отвечал на вопросы и помогал их распутать.

Мы заметили тенденцию: учащиеся, выбравшие инфраструктуру пользовательского интерфейса, такую ​​как Bootstrap или Material UI, быстро приступают к работе и добиваются быстрого прогресса в первые несколько дней. Но со временем они затухают. Растет разница между тем, что им нужно, и тем, что предоставляет библиотека компонентов. И они тратят столько времени на то, чтобы согнуть компоненты в правильную форму.

Я помню, как один студент потратил целый день, пытаясь изменить заголовок из CSS-фреймворка, чтобы облегчить навигацию. В итоге сторонний компонент решили выбросить, а альтернативу собрали сами за 10 минут.

Написание собственных стилей для меня немного похоже на написание тестов: поначалу это немного медленнее, но первые усилия окупаются. В долгосрочной перспективе вы сэкономите много времени, энергии и нервов.

Удобство использования и доступность

Последняя причина, которую я слышал, очень веская. В Интернете нет очень надежной «стандартной библиотеки», когда речь идет о таких вещах, как модальные окна, раскрывающиеся списки и всплывающие подсказки. Создание модального окна, которое хорошо работает для пользователей мыши, пользователей клавиатуры и пользователей программ чтения с экрана, невероятно сложно.

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

К счастью, есть еще одна категория инструментов, ориентированная исключительно на удобство использования и доступность, без , предписывающих кучу стилей.

Вот некоторые из моих любимых инструментов в этой категории:

• Reach UI
  Набор ориентированных на специальные возможности примитивов для React. Создан Райаном Флоренсом, соавтором React Router и Remix.
• Headless UI
  Набор полностью доступных компонентов пользовательского интерфейса без стиля для React и Vue. Создан и поддерживается командой Tailwind.
• Radix Primitives
  Набор нестилизованных, ориентированных на специальные возможности компонентов для React. Эта библиотека имеет очень широкий набор включенных компонентов, много действительно полезных вещей!
• React ARIA
  Библиотека хуков React, которые можно использовать для создания доступных компонентов с нуля.

Примечание: Я понимаю, что этот список очень насыщен React; могут быть аналогичные инструменты для Angular, Svelte и других фреймворков, но я не так активен в этих сообществах, поэтому не уверен. Не стесняйтесь, дайте мне знать в Твиттере, если вы что-то знаете!

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

Еще после прыжка! Продолжить чтение ниже ↓

Опровержения

Я разговаривал с разработчиками на эту тему уже пару лет и слышал довольно убедительные опровержения.

Знакомство

Во-первых, Дэниел Шуцсмит отметил, что «стандартные» инструменты, такие как Bootstrap, имеют одно большое преимущество: знакомство.

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

С точки зрения агентства, которое занимается множеством краткосрочных/среднесрочных проектов, это может иметь большой смысл. Им не нужно начинать каждый новый проект с нуля. И по мере того, как команда все больше и больше осваивает этот инструмент, они учатся использовать его действительно эффективно.

Я мало работал с агентствами, поэтому мне сложно что-то сказать. Большую часть своей карьеры я работал в продуктовых компаниях. Ни одно из мест, где я работал, никогда не использовало сторонний UI-фреймворк. Мы всегда создавали что-то своими силами (например, Wonder Blocks в Khan Academy или Walrus в DigitalOcean).

Внутренние инструменты

Я думаю, что имеет смысл использовать инфраструктуру пользовательского интерфейса при создании внутренних инструментов или других проектов, не предназначенных для общественного потребления (например, прототипов).

Если цель состоит в том, чтобы быстро что-то запустить и запустить, и вам не нужен 100% профессиональный пользовательский интерфейс, я думаю, что можно немного сэкономить время, быстро добавив кучу третьих- партийные компоненты.

Что насчет интерфейса Tailwind и Chakra?

Итак, я не считаю, что Tailwind или Chakra UI относятся к той же категории «фреймворков пользовательского интерфейса».

Tailwind не предоставляет готовые компоненты, но предоставляет маркеры дизайна. Как говорит Макс Штойбер, Tailwind дает разработчикам набор ограждений. Вам все еще нужна дизайнерская интуиция, чтобы эффективно использовать ее, но это не так сложно, как проектирование чего-то с нуля.

Пользовательский интерфейс Chakra предоставляет стилизованные компоненты из коробки, но они очень минимальны и низкоуровневы. В основном они просто выглядят как более приятные версии стандартных значений платформы.

Моя хорошая подруга Эми сказала мне, что ей нравится использовать Chakra UI, потому что он предоставляет ей набор разумных значений по умолчанию для таких вещей, как флажки и переключатели. Она достаточно хороша в дизайне, чтобы избежать ошибок настройки, но не настолько уверена, что ей будет комфортно создавать целую дизайн-систему с нуля. Этот инструмент является идеальной золотой серединой для кого-то в ее ситуации.

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

Моя рекомендуемая альтернатива

Итак, если вы разработчик-одиночка, который хочет создавать профессионально выглядящие веб-сайты и приложения, но у вас нет опыта проектирования, что вам следует делать?

У меня есть несколько предложений.

Разработайте интуитивное представление о дизайне

Итак, вот плохие новости: я действительно думаю, что вам следует потратить немного времени на изучение некоторых основ дизайна.

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

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

Например:

• Если нам повезет, нам могут быть предоставлены 3 размера экрана, но нам решать, как должен вести себя пользовательский интерфейс между этими размерами экрана.
• Данные редко бывают такими чистыми, как в макетах, и нам приходится решать, как обрабатывать длинные имена, отсутствующие данные и т. д.
• В макетах часто отсутствуют состояния загрузки, пустые состояния и ошибки.

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

Как развить дизайнерскую интуицию?

Если вы работаете с командой разработчиков/продуктов, у вас есть огромный ресурс! Подумайте критически о дизайне, который они производят. Задавайте много вопросов — большинство дизайнеров будут рады помочь вам понять, как все устроено и почему они приняли те или иные решения. Отнеситесь к этому как к инженерной задаче. Вы можете изучить системы и процессы, которые приводят к хорошему дизайну.

Некоторое время назад я написал в блоге сообщение под названием «Эффективное сотрудничество с продуктом и дизайном». Он идет немного глубже в некоторые из этих идей.

Если вы не работаете ни с одним дизайнером (или у вас есть друзья-дизайнеры), вы можете попытаться реконструировать продукты, которыми пользуетесь каждый день. Обратите внимание на то, как расположены элементы и какие размеры шрифта используются. С критическим взглядом вы начнете видеть закономерности.

Украсть

Итак, даже с острым дизайнерским чутьем все равно действительно сложно придумать дизайн с нуля. Итак, не будем этого делать.

Вместо этого давайте попробуем найти несколько профессиональных проектов, похожих на то, что мы пытаемся построить. Вы можете искать на сайтах дизайнерских сообществ, таких как dribbble или behance, или использовать архивы, такие как awwwards.

Например, предположим, что мы создаем стартап Uber для собак и пытаемся спроектировать панель управления водителем. Поиск на Dribbble по запросу «приборная панель» выдает массу интересных дизайнов:

(Большой предварительный просмотр)

Dribbble склонен искажать очень «дизайн», поэтому вы можете использовать продукты из реального мира для вдохновения. Это тоже работает!

Хитрость заключается в использовании нескольких источников. Если вы украли 100% дизайна, это плагиат и дурной тон. Люди заметят, и это вызовет проблемы.

Вместо этого мы можем смешать 3 или 4 дизайна вместе, чтобы создать что-то уникальное. Например, я возьму цветовую схему с одного сайта, общий макет и интервалы с другого, а стили типографики с третьего!

Когда я рассказал об этой стратегии настоящим дизайнерам, они засмеялись и сказали, что все так делают. Я думаю, это их версия «шутки» о том, что программисты тратят половину своего времени на гугление.

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

Собираем все вместе

У разработчиков может возникнуть соблазн поверить, что инфраструктура пользовательского интерфейса избавит нас от необходимости изучать что-либо о дизайне. К сожалению, обычно так не получается. По крайней мере, не из того, что я видел.

Хорошая новость: вы определенно можете создать профессионально выглядящий продукт без дизайнера! Имея несколько высококачественных эталонных дизайнов и немного дизайнерской интуиции, вы можете создать что-то, что достигает порога «достаточно хорошего», когда продукт кажется законным и «настоящим».

Есть еще один аспект, о котором мы особо не говорили: CSS .

Многие фронтенд-разработчики борются с CSS. Я тоже с этим боролся! CSS — это обманчиво сложный язык, и он часто может казаться непоследовательным и разочаровывающим, даже если у вас есть многолетний опыт работы с этим языком.

Я очень страстно отношусь к этой проблеме. Весь прошлый год я полностью посвятил созданию и разработке курса CSS, чтобы помочь разработчикам обрести уверенность в языке.

Это называется CSS для разработчиков JavaScript. Он создан специально для людей, которые используют JS-фреймворк, такой как React или Angular. Курс направлен на то, чтобы дать вам надежную ментальную модель, чтобы у вас было интуитивное понимание того, как работает CSS.

Если вам кажется, что CSS непредсказуем, я очень надеюсь, что вы его проверите. 9Курс прошли более 1 000 000 разработчиков, и отзывы о нем были исключительно положительными.

Вы можете узнать больше здесь: css-for-js.dev.

Что такое UI Framework и причины использования UI Framework?

Пользовательский интерфейс (UI) — это набор экранов, веб-сайтов и визуальных элементов (таких как кнопки и значки), которые позволяют пользователю взаимодействовать с продуктом или услугой на самом базовом уровне. Платформа пользовательского интерфейса — это программный инструмент для разработки программ для работы в Интернете, в случае Mobile Web, таких как Cocoa Touch специально для операционной системы iOS.

UI означает (пользовательский интерфейс), а инфраструктура пользовательского интерфейса — это программный инструмент для создания программ для работы в Интернете, в случае Mobile Web, специально для операционной системы iOS (например, iPhone, iPad). Веб-разработчики могут использовать его для создания пользовательских интерфейсов для мобильных веб-приложений на совместимых мобильных устройствах. Он полностью построен с использованием веб-стандартов, таких как HTML5, CSS3 и JavaScript.

Что такое UI Framework?

Архитектура пользовательского интерфейса помогает в создании клиентских веб-приложений. Это позволяет разработчикам создавать красивые, отзывчивые приложения для нескольких устройств, не требуя обширных технологических или дизайнерских знаний.

Если у вас сжатые сроки и вам нужно быстро доставить приложение, фреймворки пользовательского интерфейса помогут вам сэкономить деньги и время. Фреймворки — это, как следует из названия, фреймворк, который объединяет написанный пользователем код. Они создают основу, на которой может быть спроектирована остальная часть проекта в области создания и дизайна пользовательского интерфейса.

Каркасы могут использоваться в различных областях строительства и бывают разных форм и размеров:

Вспомогательные программы для проектирования ключей

• Хранилища кодов
• Наборы инструментов
• Программирование приложений для интерфейсов (API)
• Компиляторы

А также множество других.

Причины для использования UI Framework

Фреймворки обычно представляют собой программы проектирования в области дизайна пользовательского интерфейса. Это программное обеспечение, которое помогает вам в создании собственного программного обеспечения. (Некоторые приложения, такие как Cocoa Touch, могут помочь вам спроектировать для конкретной операционной системы, в данном случае для IOS.) обсуждалось. Ниже приведены ключевые преимущества этой стратегии:

1. Обычно это более безопасный выбор

Любая широко используемая платформа почти всегда будет иметь онлайн-сообщество, поддерживающее ее, предоставляющее информацию и опыт, чтобы помочь ей стать максимально надежной.

Что именно это означает? Проще говоря, всегда найдутся профессиональные разработчики, готовые вмешаться и исправить любые возникающие ошибки или дыры в безопасности.

Когда дело доходит до защиты, если вы выберете полностью индивидуальный подход — никакой структуры — вы будете предоставлены сами себе.

Конечно, если у вас есть бюджет и нужные разработчики в вашей команде, это не будет проблемой. Просто есть над чем подумать.

2. Это более эффективно

Даже простой набор приложений поможет вам сэкономить много времени. Это экономит разработчикам время и усилия, связанные с необходимостью начинать с нуля, что всегда не нужно.

Если вам интересно, потребует ли использование фреймворка отказаться от важных для вас функций или дизайнерских идей, ответ почти всегда будет отрицательным: вы сможете выбрать фреймворк в зависимости от того, позволяет он или нет. вы, чтобы завершить свой проект так, как вы хотите.

3. Дешевле

Мы говорили о том, сколько времени вы можете сэкономить, используя систему раньше, так что вы, наверное, уже поняли это!

Однако стоит отметить, что фреймворки почти всегда дешевле, чем полностью индивидуальное решение.

Высококачественное производство стоит дорого, и каждый час, который вы можете сэкономить, не жертвуя качеством конечного продукта, будет иметь существенное значение в стоимости вашего проекта. (Конечно, необходима эффективная подготовка.)

Вы или ваши клиенты, несомненно, сэкономите тысячи долларов, сократив время сборки на несколько часов. Было бы проще выполнить задачу быстрее и перераспределить разработчиков на другие проекты, если вы занимаетесь дизайном собственными силами.

4. Облегчает управление большими программами

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

Что это значит? Поскольку в более крупных проектах программного обеспечения тщательно изучается каждая деталь, вам будет лучше, если вы сможете устранить возможную точку разногласий.

По сути, вы сэкономите значительное количество человеко-часов — меньше совещаний, меньше мозговых штурмов и, в конечном счете, меньше денег.

5. У вас есть полный контроль над тем, как и когда вы реагируете

Адаптивный дизайн является важным аспектом любого современного проекта: он обеспечивает работу программного обеспечения на всех типах устройств, включая настольные компьютеры, мобильные телефоны и планшеты.

Вы сможете разрешить это с самого начала, если используете систему со встроенной отзывчивостью, что вам и следует делать.

Какое это имеет отношение к чему-либо? Это избавляет от необходимости конвертировать программное обеспечение позже, чтобы сделать его конфиденциальным, что является большой, неудобной и трудоемкой задачей.

Предусмотрите адаптивный дизайн с самого начала, и впоследствии вы избавите себя от многих проблем.

6. Совместимость с разными браузерами

Браузеры работают на одной и той же основе. Если ваша программа работает в браузере, убедитесь, что она работает в любом доступном браузере, включая Chrome, Firefox, Safari и другие.

Хотя любой программист может сделать это на заказ, это одна из тех задач, которые требуют много времени и хлопот и могут быстро перерасти в серьезную проблему, если вы позволите.

Современные фреймворки помогут вам обеспечить бесперебойную работу программы на всех платформах. В некоторых случаях значительная часть испытаний уже завершена.

Перекрестное тестирование может быть очень дорогостоящим с точки зрения человеко-часов, поэтому не выполняйте его вручную или на заказ, если в этом нет крайней необходимости.

Разработчики могут создавать более надежные и понятные пользовательские интерфейсы с помощью библиотек пользовательского интерфейса и фреймворков (UI). У них есть общие компоненты и сервисы для вашего приложения. Некоторые библиотеки пользовательского интерфейса позволяют вам изменять вещи с помощью тем, в то время как другие имеют последовательный и простой пользовательский интерфейс.

Вы можете создать адаптивный пользовательский интерфейс самостоятельно, но разработка всех адаптивных компонентов пользовательского интерфейса требует времени. Вместо того, чтобы создавать компоненты пользовательского интерфейса с нуля, вы можете использовать внешние библиотеки компонентов пользовательского интерфейса, которые являются мощными, чувствительными и простыми в использовании.

Заключение

Поскольку пользовательские интерфейсы являются реактивными системами, они могут быть определены с помощью чисто реактивной функции, которая сопоставляет события, распознаваемые пользовательским интерфейсом, с поведением на интерфейсном устройстве.

No related posts.