Как использовать

Разработчикам

Технологический стек

Основной инструмент фронтенд-разработчика в Альфа-Банке — библиотека компонентов для создания веб-интерфейсов. В разделе «Компоненты» собраны примеры использования библиотеки. Там вы найдёте примеры и код компонентов, их свойства и правила использования.

В остальном наш технологический стек выглядит так.

JavaScript

Используем стандарт ES6+.

Особо трепетно относимся к Array API.

React и Redux

Помимо стандартной документации рекомендуем статью «Presentational and Container Components».

React Router, Thunk.

Используем 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 5+ и npm. Для запуска демо используйте команду:

npm run demo

Подробную документацию вы найдёте в README.

Мобильная вёрстка

Документация по использованию библиотеки в адаптивной/мобильной среде.

И ещё

Дизайнерам

В качестве основного рабочего инструмента дизайнеры Альфа-Банка используют разработчиков :-)

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

Уроки программирования

Дизайнеру важно находить общий язык с разработчиками.