Часть 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