ООО «НПП САТЭК плюс» · 07.2016—02.2020
RedForester (САТЭК) — корпоративный инструмент для управления проектами, знаниями и мозговыми штурмами в формате mindmap. Позволяет создавать масштабные карты с типизированными узлами, которые превращают визуальные связи в осмысленные процессы — от ТЗ и задач до спринтов и канбан-досок.
Типизация узлов и автоматизация
Каждый элемент карты имеет тип, который задаёт его свойства, возможные действия и логику взаимодействия. Благодаря этому можно отображать одни и те же данные в разных представлениях — например, построить канбан по задачам спринта или дерево ТЗ. Это превратило mindmap в полноценный инструмент управления проектами.
Переход с jQuery на React и TypeScript.
После прихода на проект я инициировал переписывание фронтенда: отказ от устаревшего jQuery и переход на React и TypeScript. Это позволило упростить кодовую базу, внедрить современный подход к компонентности и улучшить читаемость. Новый клиент поддерживает ленивую загрузку узлов карты с «заглушками» по сохранённым размерам, что обеспечило плавную работу даже на огромных картах.
Оптимизация производительности
Для стабильной работы с тысячами узлов я оптимизировал отрисовку: минимизировал перерендеры markdown-контента, использовал will-change и translate3d для GPU-ускорения, анализировал профили в Chrome DevTools и устранял узкие места. Это дало заметный прирост отзывчивости и снизило задержки при перемещении по карте.
Архитектура и state management
Использование MobX позволило организовать логику в виде сервисов с dependency injection, что упростило масштабирование и изоляцию модулей. Такая архитектура сделала возможным добавление новых функций без необходимости переписывать существующие части интерфейса.
Стек технологий
- TypeScript
- React
- CSS Modules
- MobX
- Webpack
- NGINX
- REST API
- Java Spring
- PostgreSQL