Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Мобильная гильдия, или Как мы делаем приложение для 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 по всему миру — в среднем до 3–4 разработчиков и лидов проектов на команду. Каждая из команд, в свою очередь, работает над связанными по смыслу модулями. Например, Payments занимается платежами для OneApp, ведает модулями для владельца бизнеса с соответствующим набором инструментов: модулем для покупателей, модулем для приема платежей через терминалы, модулем онбординга новых клиентов и так далее.

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

Архитектура

Вернемся к мобильному приложению. Каждый из модулей имеет свой жизненный цикл, который не связан с другими модулями. Каждый коммит в главной ветке модуля может быть кандидатом к релизу. Поэтому важно проверить его готовность для интеграции в общее приложение. На этом этапе модуль проходит ряд проверок со стороны 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.

Социальная составляющая

А еще у нас есть талисман. Его зовут Чендлер :)А еще у нас есть талисман. Его зовут Чендлер :)
Wix Groups — команда, которая помогает людям из разных точек планеты организовывать свое цифровое общение вне традиционных социальных сетей.


Большая часть команды работает в контексте одной локации, это помогает решить почти любой вопрос в течение 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 не забудьте — там, кстати, много свежих позиций ;) Будем рады любым комментариям и вопросам.

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU

👍ПодобаєтьсяСподобалось11
До обраногоВ обраному2
LinkedIn



7 коментарів

Підписатись на коментаріВідписатись від коментарів Коментарі можуть залишати тільки користувачі з підтвердженими акаунтами.
но из-за специфики JavaScript React Native не всегда работает быстро в тех частях приложения, где происходит много общения с нативной платформой.

И вправду под капот заглянули

А есть хоть один более менее крупный интернет магазин на платформе wix?
Как обстоят дела с удержанием клиентов, или новые лиды покрывают отток?
Мой опыт был исключительно негативным — тормозное уг, запросы на кастомизацию многих фич висят с 2015 года, не представляю как можно что-то сколько нибудь адекватное смастерить на этой платформе 👎

мне кажется ничего большого на виксе не построишь. Только маркетинговые сайты (что и нужно пользователям Wix). Амбиции у ребят большие — своя CRM, Магазин, платежи и куча всего, но есть ли реально большие сайты на Виксе — вопрос к автору Статьи.

из Хорошего могу сказать про Wix, что удобно самому менять сайтик, не залазя внутрь css/html (что видимо и нужно тем сотням миллионов пользователей, которые есть у WIX)

из Плохого — сам процесс WYSIWYG верстки ужасен и как не старался WIX процесс остался ужасным

Константин, уточните пожалуйста, вы пользовались EditorX в том числе? www.editorx.com

editorX не успел по пользоваться. Не смог это все больше терпеть и ушел верстать лэндос руками с разработчиком :)

Чекните на всякий случай. Есть предположение, что он может закрыть ваши потребности.

посмотрю, когда новый лэндос соберемся делать.

Підписатись на коментарі