Фреймворк для создания универсальных react-приложений Tramvai

Для чего нужен

Tramvai достаточно гибкий и функциональный для поддержки любых сценариев использования. Например, в Т‑Банке часть приложений создаются динамически через конструктор страниц и собраны из отдельных микрофронтендов, а приложение выступает в роли легковесной обертки. Другие приложения содержат большое количество бизнес-логики и интерактивных элементов.

Долгое время Tramvai был внутренней разработкой компании, но с 2021 года исходный код публикуется на Github.

Фреймворк решает архитектурные и функциональные вопросы для разработчиков приложений, среди них:

серверный рендеринг;
внедрение зависимостей;
инфраструктура сборки проекта;
жизненный цикл приложения;
роутинг и загрузка данных;
тестирование приложения;
стилизация, SEO-оптимизация, безопасность и многое другое.

Концепции

Серверный рендеринг. Рендеринг HTML-страницы на стороне сервера (SSR) нужен для качественной индексации приложения поисковыми системами. Еще на поисковую индексацию влияют метрики производительности приложения (Core Web Vitals), часть из которых можно улучшить с помощью SSR.

Серверный рендеринг открывает дверь для оптимизаций:

быстрые запросы к сторонним API на сервере в условиях стабильной сети;
возможность кэшировать ответы на эти запросы сразу для многих пользователей;
быстрая генерация HTML на производительных серверах.

Внедрение зависимостей. Ключевая особенность фреймворка — использование принципа внедрения зависимостей. Dependency Injection (DI) удивительно хорошо подходит для создания SSR-приложений и позволяет делать даже самые большие приложения гибкими и модульными.

DI — неотъемлемая часть многих фреймворков на других языках программирования. Angular и Nest.js — самые яркие примеры таких фреймворков в JavaScript-экосистеме.

DI позволяет создавать и поставлять независимые модули, каждый из которых отвечает за конкретную функциональность, а также изменять любые зависимости в этих модулях на уровне приложения. В итоге каждое Tramvai-приложение собирается из набора таких модулей, как из блоков Lego.

Благодаря Tramvai разработчики приложений могут создавать свои модули, выделяя тесно связанную функциональность, и по необходимости легко выносить их в отдельные переиспользуемые пакеты.

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

Жизненный цикл приложения

Еще одна важная составляющая любого фреймворка — управление жизненным циклом приложения. Для веб-приложения в этот цикл входит запуск сервера, инициализация приложения, обработка запросов от пользователей, маршрутизация, запрос данных, рендеринг страницы. В случае SSR-приложений свой жизненный цикл появляется и в браузере: инициализация приложения, гидрация страницы, SPA-переходы.

Tramvai решает проблему изящно и эффективно, используя собственную реализацию CommandLineRunner. Идея заключается в том, что для приложения и на сервере, и на клиенте существуют заранее заданные последовательные этапы, вместе они составляют линию, и на каждый из них можно добавить любое количество действий.

Действия на каждом этапе будут выполняться параллельно, таким образом мы легко можем сгруппировать на одном этапе множество запросов к API и выполнять линию на каждый запрос максимально быстро.

Основные возможности

React. Tramvai — это фреймворк для создания React-приложений.

Фреймворк предоставляет гибкий механизм для построения макета страниц, хуки для работы с DI, экшенами, роутингом и глобальным стейтом, а также поддерживает hot reloading компонентов без потери локального состояния с помощью webpack-плагина Fast Refresh.

Full stack. Tramvai — это full-stack-фреймворк, который предоставляет API роуты. Они создают полноценный бэкенд, или Backend for Frontend (BFF), для группировки или трансформации запросов к основному API.

Микрофронтенды. Одна из недавних возможностей Tramvai — тесно интегрированное с приложением решение для микрофронтендов, с поддержкой SSR, DI и Module Federation — Child Apps.

Child Apps позволяют строить страницы приложения из независимых блоков, с собственным релизным циклом и отдельной командой разработчиков.

Благодаря поддержке DI и переиспользованию CommandLineRunner, разработка Child Apps практически не отличается от разработки Tramvai-приложений.

Routing. Tramvai использует собственную библиотеку для роутинга, которая позволяет гибко задавать роуты вручную, получать роуты динамически и генерировать их на этапе инициализации приложения на основе компонентов из файловой системы.

State management. Для управления состоянием используется собственное решение с API, похожим на Redux в связке с redux-act, но с поддержкой независимых атомарных сторов, что значительно повышает производительность подписок на сторы через useStore и useSelector.

React-Query. В Tramvai интегрирована замечательная библиотека react-query, которая эффективно решает вопросы кэширования и дедупликации серверных данных.

Для любых React-приложений react-query дает возможность отказаться от кэширования данных в глобальном стейте, уменьшить количество сопутствующего шаблонного кода, а также ряд других преимуществ: дедупликация, оптимистичные обновления, разные стратегии кэширования и многое другое.

Тестирование. Для unit-тестирования и интеграционного тестирования разработаны библиотеки с максимально близкими к компонентам приложения абстракциями, использующие такие зарекомендовавшие себя технологии, как jest, testing-library и puppeteer.

Надежность. Для обеспечения качественной и бесперебойной работы Tramvai-приложений мы предоставляем пользователям фреймворка модули:

обработчики для неперехваченных исключений;
метрики состояния сервера для prometheus;
отправка ошибок в Sentry;
health checks и graceful shutdown для успешных деплоев;
автоматическое логирование ошибок запросов.

Инструментарий. Для сборки приложений создана консольная утилита @tramvai/cli — помимо development- и production-сборки, CLI отвечает за генерацию приложений или компонентов приложения, несколько режимов анализа сборки, обновление и установку Tramvai-зависимостей.

В сборке участвует Webpack и Babel, еще мы ведем активную работу для поддержки сборщиков и транспайлеров нового поколения — swc.

Для качественной production-сборки используется множество оптимизаций, в том числе granular chunking и кастомный webpack-плагин для дедупликации зависимостей в приложениях по SemVer.

Документация и примеры

Документация проекта расположена на сайте tramvai.dev. Основные разделы документации из статьи:

Мы следим за качеством и актуальностью документации, улучшать ее помогает большое сообщество разработчиков Tramvai-приложений Т‑Банка. Узнать об обновлениях или задать вопрос можно в сообществе в телеграме.

Для знакомства с фреймворком мы рекомендуем пройти туториал по созданию приложения Pokedex.

Узнать больше про внутреннее устройство и основные концепции можно в разделе Concepts.

Самый простой способ запустить Tramvai-приложение — это базовый шаблон на Codesandbox.

Более комплексный пример — todo-приложение, разработанное по методологии feature-sliced.

Посмотреть на результат работы Tramvai-приложений можно на сайте tbank.ru.

Полезные материалы:

Заключение

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

Работа в coretech-команде похожа одновременно и на open-source-разработку, и на стартап: мы разрабатываем продукт для других разработчиков, но еще частично выполняем роли продакт-менеджера, аналитика и SRE.

Наши цели — максимальный комфорт в developer experience, эффективно и быстро работающие веб-приложения и довольные разработчики, которые могут тратить время на выполнение бизнес-задач вместо настройки тулинга или поиска подходящих библиотек.