Как использовать
Разработчикам
Технологический стек
Основной инструмент фронтенд-разработчика в Альфа-Банке — библиотека компонентов для создания веб-интерфейсов. В разделе «Компоненты» собраны примеры использования библиотеки. Там вы найдёте примеры и код компонентов, их свойства и правила использования.
В остальном наш технологический стек выглядит так.
JavaScript
Используем стандарт ES6+.
Особо трепетно относимся к Array API.
React и Redux
Помимо стандартной документации рекомендуем статью «Presentational and Container Components».
Используем Hapi, Webpack, Jest, Nock.
Следуем БЭМ-методологии при именовании классов. Именно методологии, одноименный стек технологий Яндекса не используем. Для удобной работы с БЭМ в React используем bem-cn.
Чтобы сделать жизнь немного проще, используем PostCSS.
Поддерживаемые браузеры
Поддерживаем две последние стабильные версии следующих браузеров:
- Chrome
- Firefox
- Safari
- Yandex
- Opera
- Edge
- IE10+
Браузеры мобильных устройств:
- Android 4.1+: Android Browser, Chrome
- iOS: Safari
Стиль кода
Мы используем стиль кода, описанный на GitHub разработчиками из Airbnb.
Начало работы
Библиотека компонентов Альфа-Банка доступна как npm-пакет. Для установки используйте команду:
npm install arui-feather --save
Для работы необходимы внешние зависимости системы — node 8+ и npm. Для запуска демо используйте команду:
npm run demo
Подробную документацию вы найдёте в README.
Мобильная вёрстка
Документация по использованию библиотеки в адаптивной/мобильной среде.
И ещё
- Набор конфигурационных файлов для компиляции и валидации проектов, основанных на дизайн-системе Альфа-Банка.
- Набор примитивов Альфа-Банка: иконки и цвета.
Дизайнерам
В качестве основного рабочего инструмента дизайнеры Альфа-Банка используют разработчиков :-)
Мы уверены, что дизайнеры и фронтенд-разработчики должны работать в тандеме, используя все преимущеста дизайн-системы для проверки гипотез и разработки продуктов.
Уроки программирования
Дизайнеру важно находить общий язык с разработчиками.