Владислав Клюев, старший разработчик интерфейсов в Яндекс Про. Что вы представляете, когда слышите слова «паттерн», «синглтон», «фабрика»? А что, если я скажу, что для любимой кнопки или таблицы тоже существуют паттерны? В докладе рассмотрели паттерны построения UI-компонентов, их комбинации, а также то, как использовать паттерны, чтобы обеспечить доступность и не только.
Паттерны в разработке UI-компонентов / Яндекс Go Frontend Meetup #3
00:03 Требования к компонентам
- Обсуждение списка требований, которые могут быть выдвинуты для компонентов: соответствие дизайну, адаптивность, кросс-браузерность, доступность, удобство использования.
- Пример стартапа с тремя людьми: фронтендер, бэкенд, тестировщик.
- Развитие компании, появление новых требований, таких как доступность и юридические требования.
05:55 Стандарты доступности
- Всемирная паутина разрабатывает стандарты доступности, такие как WAI-ARIA.
- WAI-ARIA — набор инструментов и указаний для создания более доступных интерфейсов.
- Примеры использования WAI-ARIA в разработке компонентов.
07:42 Применение WAI-ARIA
- Пример использования WAI-ARIA для создания компонента, который может использоваться для выбора детских кресел в такси.
- Использование паттерна «спинбатом» для реализации дискретных значений с ограничениями сверху и снизу.
- Добавление клавиатурной навигации и дополнительных кнопок для удобства использования.
11:21 Обсуждение паттернов проектирования компонентов
- В видео обсуждается использование паттернов проектирования для создания компонентов в веб-приложениях.
- Рассматриваются примеры использования паттернов для создания сложных компонентов, таких как дей пикер и мульти-селект.
16:11 Влияние паттернов на удобство использования компонентов
- Обсуждается важность использования паттернов для создания удобных и доступных компонентов для пользователей с ограниченными возможностями и обычных пользователей.
- Упоминается, что паттерны помогают разработчикам общаться на одном языке и облегчают процесс разработки компонентов.
20:31 Возможность добавления новых паттернов в гайд
- В видео обсуждается возможность добавления новых паттернов в гайд, если они соответствуют уже существующим паттернам и не противоречат им.
- Упоминается, что использование паттернов может помочь в решении проблемы отсутствия документации и большого количества вопросов.
23:32 Обсуждение паттернов и их использования
- В видео обсуждается процесс переписывания пикера, который был реализован с использованием определенных паттернов.
- Упоминается, что разработчики столкнулись с проблемой, когда им приходилось менять лестницу из-за того, что они не могли заполнить заявки в админке.
24:33 Вопросы и ответы
- Задаются вопросы о том, как разработчики решают конфликты между требованиями аналитиков и дизайнеров, а также о том, как они выбирают, какой паттерн использовать в конкретном компоненте.
- Обсуждается, что в большинстве случаев разработчики стараются договориться и найти компромиссное решение.
27:05 Заключение и подарки
- В конце видео автор благодарит зрителей за вопросы и объявляет о том, что будет проведен розыгрыш подарков.
- Один из вопросов, который понравился автору, был о документации и использовании паттернов в библиотеках.