СберИндекс — статистика, которой нам не хватало. Часть 1/3: про Frontend

#release #sber #frontend #react #nextjs

Наличие качественных статистических данных — в наше время это не роскошь, а необходимость.

Для экосистемы продуктов Сбера мы разработали статистический и аналитический сервис «СберИндекс». Далее мы расскажем о самых примечательных технологиях, библиотеках и фреймворках, которые были задействованы в этом проекте. И начнем с frontend-части сервиса 😎

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

— React Google Charts — библиотека для построения графиков и диаграмм от Google, набор инструментов которой идеально подходит для задач сайта. Именно с помощью этой библиотеки мы реализовали наглядное представление статистических данных в виде графиков различного типа.
— React HTML Parser — преобразует HTML-текст в React-компоненты, и, в отличие от своего аналога dangerouslySetInnerHTML, библиотека проводит ряд проверок и оптимизацию невалидной разметки. Через него пропускались тексты, заполненные с помощью WYSIWYG в панели управления сервисом: исследования, описания графиков и разделов и т. д.
— React-responsive — библиотека помогает адаптировать сложные элементы интерфейса под любое устройство. Одним из решающих факторов в выборе инструмента стала возможность использования методов библиотеки при SSR. Вместо привычных ширины и высоты окна на сервере библиотека использует User-Agent пользователя.
— Anime.js — легковесная, но продвинутая библиотека для реализации js-анимаций. С помощью этой библиотеки выполнены некоторые микровзаимодействия, например, анимация появления попапов.

Продолжение следует! В следующей заметке расскажем об инфраструктуре и backend-части сервиса.

Chulakov Dev

Смотреть подачу