Мобильная гильдия, или Как мы делаем приложение для 10+ миллионов пользователей
Статья написана Игорем Качурой в соавторстве с Андреем Когутом, Александром Колесником, Сергеем Мокиенко.
В статье поговорим о приложении Wix, заглянем «под капот», поделимся опытом инженеров, которые работают в разных командах и над разными продуктами, элементами системы, и расскажем, как это все упаковывается в единый user experience.
Также много будем говорить о мобильной гильдии Wix, так что тут уместно будет пару слов сказать и о самой компании, и о том, при чем тут вообще гильдии.
Гильдии в XXI веке
В Wix есть «вертикали», которые называются компаниями, и «горизонтали» — те самые гильдии. «Компании» объединяют людей по продуктам, над которыми они работают. Например, Payments by Wix, Wix Media, Wix Groups и так далее. В них свои центры принятия решений, менеджмент. Гильдии же объединяют разработчиков по технологиям, с которыми те работают. Например, в Wix, кроме прочих, есть Front-еnd, Back-еnd и Mobile гильдии.
Авторы этой статьи принадлежат к последней — мобильной гильдии. И дальше посмотрим, как выглядит это изнутри и с какими инженерными задачами мы сталкиваемся каждый день.
OneApp to rule them all
Сегодня в мобильной гильдии Wix более 100 разработчиков. И все мы работаем над одним проектом — Wix OneApp. Такое название дали неспроста: тут мы хотим показать, что делаем одно универсальное приложение для бизнеса, учитывая все потребности. Кто знаком с идеей приложения WeChat, может тут провести параллель.
«Чем занимается такое большое количество инженеров на одном проекте?» — пожалуй, один из самых частых вопросов, которые мы слышим. Заняться есть чем — мы куда больше пытаемся решить проблему нехватки инженеров для гильдии, чем проблему поиска интересных задач.
Основная задача нашего мобильного приложения — дать возможность клиентам полностью поддерживать работоспособность своего бизнеса, используя только мобильное устройство. Плюс наладить интеграцию юзеров с веб-версией их сайтов, которые тоже можно создавать и редактировать через мобильный редактор, а не только браузерный.
Как же все-таки удается организовать работу более 100 инженеров над одним мобильным приложением, да так, чтобы еще делать регулярные апдейты, не иметь merge-конфликтов и вообще получать удовольствие от процесса?
Правила организации труда
Мобильная гильдия разбита на небольшие команды. Сейчас у нас таких около 30 по всему миру — в среднем до
Логика разделения функционала на модули позволяет не только заменять части модулей, но и при необходимости полностью их переписывать. Конечно, не все так просто — это вам не переписать пару строк в скрипте — но все же то, что модули не так тесно связаны между собой, позволяет вносить любые изменения довольно быстро и эффективно. А контейнерный подход дает возможность специалистам организовать отдельный процесс разработки и не наступать на пятки людям из других команд.
Архитектура
Вернемся к мобильному приложению. Каждый из модулей имеет свой жизненный цикл, который не связан с другими модулями. Каждый коммит в главной ветке модуля может быть кандидатом к релизу. Поэтому важно проверить его готовность для интеграции в общее приложение. На этом этапе модуль проходит ряд проверок со стороны CI системы и скриптов. Скрипты проверяют размер модулей, выполняют автоматизированные smoke-тесты всей системы и так далее.
Команда каждого проекта имеет возможность добавить к процессу CI свои проверки. Общие для всех Unit-тесты, E2E-тесты.
В сердце всего приложения OneApp главный модуль, который обеспечивает платформу для встраивания новых модулей и коммуникации между ними. Он называется OneApp Engine. А еще он хранит все нативные зависимости. И если мы добавляем в OneApp новую нативную зависимость, то делаем это в одном месте через OneApp Engine. Релиз движка происходит раз в две недели, после чего QA тестируют свои вертикали. Если есть что-то критическое — делаем хотфиксы, если нет — новая версия идет в App Store / Google Play.
Многие команды в гильдии используют нашу внутреннюю разработку Wix Poco, которая управляет релизами. Это надстройка над TeamCity с удобным управлением по тегах и возможностью делать фолбеки релизов. Мы можем включать или не включать модуль в сборку или собирать с разными версиями.
Вокруг OneApp организована инфраструктура, где более сотни мобильных разработчиков могут работать над одним codebase. Это и команды для разработки инструментария (deployment, build pipeline setup, reusable UI components etc), и бизнес-аналитики, которые проводят огромное количество A/B-тестов (даже цветовая схема кнопки имеет под собой статистически доказанного счастливого пользователя), и Content Writers, которые готовят тексты и контролируют локализацию. Они готовят большие in house open-source решения (Detox, react-native-ui-lib, react-remix, react-native-navigation etc.). Все это сделано для того, чтобы разработчик максимально фокусировался на новых фичах, а не настройке окружения.
Принимаем платежи
На Wix можно создать практически любой сайт, включая интернет-магазин. От простой странички с опцией принятия платежа до сложного бизнеса с менеджментом инвентаря, скидками и так далее. Этот функционал доступен и в мобильном приложении.
Ведает всем этим команда Payments. От ввода номера кредитной карты для очередной покупки билетов в WiX Events или оплаты занятий по йоге в WiX Bookings до подключения платежных методов к своему бизнесу. Над этими продуктами трудятся более 70 человек, из которых около половины — разработчики. Пользователи проводят миллиарды долларов через Wix, а поскольку ошибки при таких объемах стоят дорого, мы вынуждены подходить к работе максимально ответственно: используем Unit и end-to-end тесты, непрерывно следим за разнообразными метриками систем и никогда не употребляем алкоголь перед выкатыванием очередных обновлений ;)
Не так давно мы добавили поддержку украинских платежных провайдеров.
На скринах выше — пример того, как выглядит функционал «пейментов» в приложении
Технологии
Мы стремимся к тому, чтобы быстро выкатывать фичи, но при этом максимально избегать багов и оперативно узнавать, когда что-то сломалось. В этом нам помогают:
Detox (открытый исходный код) — разработанный в WiX инструмент для end-to-end тестирования React Native приложений. Такие тесты показывают, что не только отдельные функции, но и весь модуль работает правильно. Особенность инструмента в том, что он встраивается в приложение и имеет очередность задач, позволяя нам писать тестовые сценарии в формате «выбери платежный метод, нажми „далее“, убедись, что на экране отображается сообщение об успешном платеже» — никаких дополнительных «подожди 2 секунды, пока загрузится следующий экран».
FedOps (проприетарный) — наш внутренний инструмент мониторинга, который логирует начало и конец совершения операций, например запросов к серверу с мобильного клиента, и, если в определенном временном интервале начальных событий становится больше, чем конечных, мы сразу получаем оповещения о проблеме.
Ambassador (проприетарный) — новый инструмент, разработанный в WiX, который предоставляет удобную абстракцию для общения с микросервисами на бекэнде. Нужно просто установить автоматически сгенерированный npm-пакет, и мы получаем набор сервисов, умеющих делать rest или rpc-запросы. Причем отправляемые и получаемые данные могут быть проверены TypeScript-компилятором.
TypeScript (открытый исходный код) заслуживает отдельного упоминания, ведь типизированный язык программирования часто спасает от глупых ошибок в коде, упрощает рефакторинг и вообще работу. 92% кода в репозитории с нашими мобильными проектами написан на этом языке.
Эти и другие технологии помогают разрабатывать надежные модули, которые взаимодействуют с множеством API и содержат витиеватую, но в то же время хорошо протестированную логику.
Картинки с выставки
Про деньги поговорили, давайте и про картинки не забудем. А еще про видео и стримы. Этим в компании занимается команда проекта Media.
В рамках мобильного приложения команде приходится уделять особое внимание производительности. Значительная часть бизнес-логики OneApp написана на TypeScript, который работает под управлением React Native. И тут все хорошо, но из-за специфики JavaScript React Native не всегда работает быстро в тех частях приложения, где происходит много общения с нативной платформой. Потому часть модулей мы пишем нативно, используя Swift / Objective C и Java / Kotlin. Модульная структура проекта дает возможность изолировать такой код и использовать в модулях новые нативные технологии.
В команде Media 4 проекта: Video Maker, LiveStream, Video on demand и Media Manager.
- У Video Maker пользователи создают профессиональные проморолики для продвижения своих продуктов в несколько касаний (буквально).
- LiveStream позволяет стримить видео с телефона и добавлять стриминги себе на сайт.
- Благодаря Video on demand пользователи продают / покупают / арендуют видео, имея свои каналы. У владельцев бизнеса есть возможность создавать pricing plans для более гибкой монетизации контента.
- Media Manager отвечает за загрузку, обработку, сжатие и редактирование медиафайлов. Этим продуктом пользуются практически все модули в приложении.
Под капотом
Мобильных разработчиков у нас можно условно поделить на две группы: инфраструктурные и продуктовые. В инфраструктурные входят UILib, react-native-navigation, ребята, которые разрабатывают detox. Продуктовые: Payments by Wix, Wix Groups, Wix Stores и так далее. Media Manager — где-то посередине. С одной стороны, мы даем инфраструктуру почти для всех продуктовых команд. С другой — наш модуль предоставляет пользователям OneApp возможности редактировать, загружать и сохранять фотографии. Благодаря Media Manager’у люди ежемесячно загружают миллионы медиаресурсов, также проект является вторым во всем приложении по CTA.
С самого начала проект Media Manager задумывался как медиагалерея, собственно так он и был реализован. Но со временем пользователям стало мало этого функционала, им хотелось иметь возможность работать с большим количеством типов контента. Так было принято решение двигаться из медиагалереи в сторону файлового менеджера. Мы сразу подумали о скорости разработки нового функционала. Решили перенести часть функционала, отвечающий за галерею, на React Native. В результате за пару месяцев удалось полностью переписать интерфейс Media Manager. Еще эта часть полностью покрыта e2e-тестами (используем detox).
В нативной части проекта на iOS пока что все работает на Objective-C / Swift. На Android — Kotlin. Та часть Media Manager, которая отвечает за коммуникацию с React Native, представляет собой тонкую прослойку TypeScript / JavaScript-кода для JavaScript-разработчиков из других команд. Нативная работа связана с выбором медиафайлов, сетью и редактированием изображений. Это все то, что требует хорошего перформанса. В JS-модуль вынесено публичное API для других модулей.
Ранее проект был разбит на два репозитория для нативной части и RN. Но мы поняли, что эффективно тестировать код не получается из-за того, как устроена архитектура приложения: нам надо было ждать, пока на CI соберется движок с нативными зависимостями. Решили перейти на монорепо. Так можно быстро тестировать разные версии каждой из частей проекта.
Для нас это интересный опыт — работать в проекте, который является SDK и продуктом одновременно. Постоянно приходят фичреквесты от других команд, и надо успевать помогать всем. В таком процессе мы уделяем много времени и внимания документации для других команд, постоянно поддерживаем ее в актуальном состоянии.
Касательно организации проекта: когда мы начинали, использовали только Git Issues. Потом стали расти и перешли на Jira. Со временем решили перестроить процесс и стали использовать Asana. Так что с выбором инструментов для организации работы все очень гибко — берем то, что нравится, и то, что работает.
Планы: перенести часть кодовой базы с Objective-C на Swift. Еще хотим изменить структуру проекта, больше вынести на уровень RN.
Социальная составляющая
А еще у нас есть талисман. Его зовут Чендлер :)
Большая часть команды работает в контексте одной локации, это помогает решить почти любой вопрос в течение 10 минут, даже в карантин. Так как каждый продукт внутри Wix это отдельная «компания», можно быстро принимать решения и не зависеть от какой-то бюрократической машины. Wix Groups — это люди, которые в конечном итоге и принимают решения о том, как будет выглядеть продукт.
Внутри одного приложения реализованы разные мобильные микросервисы. Это позволяет модулю Wix Groups использовать Wix Media для загрузки видео и фото и помогать модулю Wix Events делать ленту. То есть код одного разработчика используют не только пользователи, но и инженеры из других команд.
Пара слов про технологии, которые инженеры Wix Groups любят особенно:
- Draft.js — помогает пользователям создавать посты с динамической версткой и поддерживает много функций — от изменения шрифтов до добавления опросника в середине поста.
- Petri (feature toggles) — благодаря этому команда несколько раз в неделю может выкатывать новые фичи и контролировать к ним доступ, что сокращает QA-цикл, при этом можно не волноваться, что в результате критического бага нужно будет несколько дней раскатывать новую версию. Feature toggles позволяют открывать фичи на небольшое количество пользователей и все выключать и возвращать на доработку, если вдруг результат не устраивает.
- Rehab (integration testing) — мы разработали собственный подход к интеграционному тестированию внутри модуля, можно тестировать весь путь кода от нажатия кнопки до вызова сети или отправки аналитического события без использования реального мобильного устройства.
20% времени на саморазвитие
Одна из особенностей культуры Wix — это время, которое отводится каждому инженеру на реализацию собственных интересных идей. Ребята из гильдии могут работать над изучением новых технологий или углублять знания. Причем это весьма конкретное время — мы называем это «дни гильдии» и «недели гильдии», когда инженеры тратят рабочее время на саморазвитие, на то, чтобы вместе осваивать новые технологии или подходы к решению разных задач.
Например, мы делаем эксперименты с Machine Learning для распознавания картинок, которые, возможно, скоро станут частью основного приложения. Несколько проектов были направлены на создание прототипов на Flutter, Kotlin / Native, Svelte Native, на создание инфраструктурных решений, которые улучшают Dev Experience других команд. Плюс поощряется работа над open-source проектами.
Кстати, про Open Source Software (OSS). Начиная работать с React Native и ставя перед собой амбициозные цели, мы столкнулись с ограничениями платформы React Native и недостатком библиотек для разработки. Решили это исправить сами и начали инвестировать время, выделяемое на саморазвитие, на OSS. Один из результатов — уже упомянутая библиотека Detox, ставшая № 1 в своей нише E2E-тестирования. Библиотека React Native Navigation, которая наряду c React Navigation является лидером в навигационных библиотеках. Стоит отметить наш OSS UI Kit, который используем для основного приложения Wix. Туда мы добавили прослойку стилей и цветовых решений. На сегодня у нас около 50 OSS библиотек.
«Дни гильдии» — это каждый второй четверг месяца, «неделя гильдии» проводится раз в квартал. Тогда разработчик может перейти поработать в другую команду — в другую «компанию» внутри Wix. И заняться совершенно новыми задачами, полностью вживаясь в другой флоу. Более того — если есть желание, можно и стек сменить: пойти поучиться новому в другой гильдии. Попробовать новую библиотеку или фреймворк, презентовать всей гильдии доклад, который готовишь к конференции. Так что есть чем себя занять :) Кстати, большинство инфраструктурных проектов вышли как раз из таких «недель».
Вместо послесловия
Мобильное приложение Wix — это только один продукт, которым занимаются разработчики компании. Мы попробовали приоткрыть завесу и показать, как у нас все работает, какие возможности мы стараемся дать инженерам. Но это, конечно, только тизер. Следите за обновлениями на нашем англоязычном блоге, на фейсбуке и в твиттере. И про наш профиль на DOU не забудьте — там, кстати, много свежих позиций ;) Будем рады любым комментариям и вопросам.
