Как собрать на одном Angular-коде личный кабинет, Telegram Mini App, iOS и Android для стартапа

Один разработчик за три месяца создал фронтенд для стартапа «НеБалкон», который работает на четырёх платформах: веб-сайт с личным кабинетом, Telegram Mini App, а также мобильные приложения для iOS и Android. При этом около 95% кода написано на TypeScript и Angular, и он общий для всех платформ. Тако

Один код для четырёх платформ: как это работает

Идея заключалась в том, чтобы не создавать отдельные проекты под каждую платформу. Разработчик остался на Angular, который хорошо знал, и использовал Capacitor для упаковки веб-приложения в нативные оболочки iOS и Android. Telegram Mini App получил тот же CSR-клиент, что и сайт. В результате все 16 экранов личного кабинета используют одну реализацию. Изменения в коде синхронно применяются ко всем платформам, что критически важно для стартапа, где требования постоянно меняются в поисках product-market fit.

Какие инструменты и архитектура используются?

В основе лежит Angular с монорепозиторием на Nx. Для мобильных приложений применяется Capacitor, который оборачивает Angular-приложение в WebView с доступом к нативным API. Telegram Mini App работает как обычное веб-приложение, но использует Telegram SDK для взаимодействия с мессенджером. Разработчик отмечает, что Capacitor позволяет использовать единый код для iOS и Android, а для TMA достаточно добавить несколько специфических компонентов. Ключевой приём — вынесение всей бизнес-логики, моделей, валидации и форм в общие библиотеки. Платформо-зависимый код минимален: например, кнопка «Пополнить» везде одинакова, но способ вернуться с платёжной страницы различается. Для TMA используется Telegram WebApp API, для мобильных приложений — Capacitor-плагины, для веба — обычные ссылки. Тем не менее, основная масса кода остаётся общей.

Почему стартапу выгодно использовать один код для всех платформ?

Стартап «НеБалкон» начинался как сайт, но быстро потребовались личный кабинет, Telegram Mini App и мобильные приложения. Разработчик работал один, постоянно менял требования, крутил идею и искал УТП. Заводить отдельный Flutter-проект или писать два нативных клиента на Kotlin и Swift было рискованно: пришлось бы изучать новый стек, переносить логику и синхронно править несколько реализаций после каждой новой «гениальной» идеи. Angular-монорепозиторий позволил избежать этих проблем. Единый код сокращает время разработки в 2-3 раза, упрощает поддержку и позволяет быстро реагировать на изменения рынка. Для пользователей это означает единообразный интерфейс и функционал на всех платформах. В российском контексте особенно актуальна поддержка Telegram Mini App, так как Telegram — одна из самых популярных платформ в регионе.

Как удалось добиться 95% общего кода?

Ключевой приём — вынесение всей бизнес-логики, моделей, валидации и форм в общие библиотеки. Платформо-зависимый код минимален: например, кнопка «Пополнить» везде одинакова, но способ вернуться с платёжной страницы различается. Для TMA используется Telegram WebApp API, для мобильных приложений — Capacitor-плагины, для веба — обычные ссылки. Тем не менее, основная масса кода остаётся общей. Разработчик подчёркивает, что такой подход требует дисциплины: нужно чётко разделять общую и платформенную логику, но результат оправдывает усилия.

Кому подойдёт этот подход?

Этот подход будет полезен стартапам и небольшим командам, которые хотят быстро запустить продукт на нескольких платформах без увеличения штата. Разработчики на Angular или TypeScript могут сократить время разработки в 2-3 раза. Для пользователей это означает единообразный интерфейс и функционал на всех платформах. В российском контексте особенно актуальна поддержка Telegram Mini App, так как Telegram — одна из самых популярных платформ в регионе. Если вы строите MVP и хотите охватить максимум аудитории, стоит присмотреться к описанному подходу.

Что будет дальше?

Разработчик планирует продолжать развивать «НеБалкон», добавляя новые функции и улучшая пользовательский опыт. Он также рассматривает возможность открыть часть кода или написать подробное руководство по созданию подобной архитектуры. В перспективе такой подход может стать стандартом для быстрой разработки кросс-платформенных приложений на Angular. Уже сейчас можно сказать, что использование одного Angular-кода для сайта, Telegram Mini App, iOS и Android — это не просто технический трюк, а прагматичное решение для стартапа с ограниченными ресурсами. 95% общего кода означает, что изменения вносятся один раз, а багфиксы не расходятся по платформам.

Итог

Использование одного Angular-кода для сайта, Telegram Mini App, iOS и Android — это не просто технический трюк, а прагматичное решение для стартапа с ограниченными ресурсами. 95% общего кода означает, что изменения вносятся один раз, а багфиксы не расходятся по платформам. Если вы строите MVP и хотите охватить максимум аудитории, стоит присмотреться к описанному подходу.