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/cli;
• Application Lifecycle;
• библиотека для роутинга;
• File-System Routing;
• решение для управления состоянием;
• ViewTransitions API;
• Dependency Injection.

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

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

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

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

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

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

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

• granular chunking;
• webpack-плагин для дедупликации зависимостей;
• Fast Refresh.

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

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

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