С Новым годом, Хабр. Меня зовут Илья, я работаю Frontend разработчиком в компании Бастион. Январские выходные в самом разгаре, но уже многие, включая меня, наобещав себе свернуть горы в этом году, находятся в поиске полезной для мозга информации. Тогда присаживайтесь поудобнее, ибо сейчас мы будем разговаривать о такой замечательной технологии для разработки гибридных мобильных приложений, как Capacitor.

Начнем с сухого определения:

Capacitor — это среда выполнения с открытым исходным кодом для создания гибридных мобильных приложений для iOS, Android и PWA.

Понятно, но зачем нам это нужно? Самую большую пользу данная технология принесет командам, у которых уже есть готовое веб-приложение и нет времени или денег на переписывание всего этого добра на натив или другие кроссплатформенные решения.

Именно в этом случае идеально подходит Capacitor.

Проблема

Предположим, у вас есть:

• SPA на React / Vue / Angular и т.д;

• бизнес-задача: выйти в App Store и Google Play;

Варианты:

1. Переписать все нативно. Дорого, долго и, как правило, нужны две команды. Не наш вариант.

2. React Native. Вариант рабочий, но со своей специфичной экосистемой Expo / Metro. Все равно придется переписывать код из-за отсутствия DOM.

3. Flutter. Переписать вообще все, да еще и на новом языке. Не наш вариант.

4. Упаковать веб-приложение и дать ему доступ к нативным API. А вот это уже зона ответственности Capacitor.

Четвертый вариант, как правило, в общественном сознании считается плохим. Все из-за наследия Cordova.

Capacitor — это попытка сделать этот вариант как минимум приемлемым, а не последним выбором в стеке и то из-за безысходности.

Что такое Capacitor на самом деле

Архитектурно:

• приложение работает в WebView;

• поверх него есть bridge к нативным API;

• iOS и Android — полноценные нативные проекты со своей файловой структурой;

Структура проекта выглядит примерно так:

• dist/ — билд веб-приложения;

• ios/ — Xcode-проект;

• android/ — Gradle-проект;

• плагины — npm-пакеты, мост между JS и Swift / Kotlin / Java;

Важно: Capacitor ничего от вас не скрывает. Вы можете в любой момент открыть Xcode или Android Studio и писать нативный код, если это необходимо.

Почему это не Cordova 2.0

Cordova:

• динамически подгружала плагины;

• имела устаревший API;

• часто ломалась при обновлении SDK;

• делала нативную часть магической коробкой.

Capacitor:

• генерирует полноценные нативные проекты;

• использует современные API iOS и Android;

• плагины пишутся как обычные нативные модули;

• обновляется синхронно с платформами.

Если упростить: Cordova пыталась спрятать натив, Capacitor, наоборот, делает его явным.

Capacitor vs нативная разработка

Capacitor — это не замена нативной разработке, но для большинства бизнес-приложений, админок, маркетплейсов, клиентских и внутренних систем разница в производительности не является критичной. А вот разница во времени разработки и стоимости вполне ощутима.

Capacitor vs React Native

React Native делает вас мобильным разработчиком, который пишет на JavaScript.
Capacitor делает ваше веб-приложение мобильным.

Это принципиально разные подходы. Один не лучше другого, они решают разные задачи.

Почему именно сейчас Capacitor стал адекватным выбором

Здесь несколько факторов:

• WebView давно стал быстрым и стабильным;

• веб-фреймворки научились работать офлайн и эффективно кэшировать данные;

• TypeScript стал стандартом;

• CI/CD для мобильных приложений перестал быть экзотикой;

Когда Capacitor — плохая идея

• игры и тяжелая графика;

• сложные анимации;

• жесткая зависимость от проприетарных SDK;

• требования к максимальному FPS;

В этих случаях стоит выбрать нативную разработку или специализированные фреймворки.

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

Это вводная статья из цикла материалов про Capacitor. Дальше будет больше практики:

• миграция на Capacitor: чек-лист и реальные баги;

• как написать свой плагин для Capacitor;

• CapacitorUpdater и Capgo: безопасные обновления в обход сторов (обновленная статья);

• CI/CD для Capacitor;

• интеграция Firebase / Push / Background handlers;

• производительность: как профилировать WebView и сократить bridge calls;

• PWA, Electron, Capacitor Desktop: что выбрать и почему;

• сборка готового приложения;

• Security & Privacy checklist перед публикацией;

На этом у меня все. Пишите любые интересующие вас вопросы в комментарии и в личку.

Ссылки:

• VK

• Telegram