Как мы создали нашу службу почтовых уведомлений
Или как опыт разработчика (DX) - не уловка
Одна из наших основных целей, которые мы поставили при создании новой экосистемы BestPrice, заключалась в обеспечении ясности, абстракции и простоты, как с точки зрения об опыте конечных пользователей, но также и о том, как мы, разработчики, создаем наши вещи.
Одной из процедур, которые пострадали от сегментации и посредственного дизайна, был способ отправки почтовых уведомлений пользователям.
Это включало передачу событий и полезных данных либо в какой-то ржавый SGL (наш собственный язык сценариев) - скрипты или в другие устаревшие каналы.
В результате опыт был непоследовательным, и его очень сложно было изменить.
С этой целью мы приступили к созданию совершенно новой платформы BPMail.
Цели
- Шаблоны должны быть легкими в создании, изменении и развертывании даже для дизайнера.
- Мы должны иметь возможность постоянно продвигать изменения.
- Набор централизованных компонентов должен будет управлять новым оборудованием для обеспечения абстракции и согласованности.
- Обеспокоенность следует разделять.
Куча
- Реагировать
- Webpack
- Дженкинс
- Пряжа
- Узел
- Шутка
- Вавилон
- Докер
- Владелец ранчо
- Git
- ..и еще кое-что.
Результат - рабочий процесс
Вот что у нас получилось:
платформа на основе node и react, на которой мы можем эффективно достичь всех поставленных выше целей; Дизайнеры могут создавать и предварительно просматривать почтовые шаблоны в своих браузерах (даже без перезагрузки), а затем конвейер генерирует эти шаблоны и отправляет их на серверы.
1. Редактировать компоненты реакции, предварительный просмотр в режиме реального времени в браузере
Мы любим React. React поддерживает BestPrice.gr и большинство наших внутренних инструментов. Мы тоже живем и дышим на ES6. Webpack - наш любимый сборщик, который творит чудеса за кулисами
2. Довольны результатами? Давай!
Мы все делаем на git - хотя на то, чтобы добраться туда, у нас ушёл год. Когда мы довольны предварительным просмотром, достаточно git push.
3. Дженкинс вступает во владение
Код хранится на Github. Когда отправляется новая ветка, наш экземпляр Jenkins автоматически:
- строит и обновляет промежуточный сервер, используя эту ветку.
- запускает набор тестов, для которого мы используем Jest.
- Создает образцы «писем» и скриншотов из наших предопределенных демо-данных.
- Сообщает нам, что сборка и тесты прошли успешно.
Предполагая, что все - литературно - зеленое, следующим шагом будет запрос на вытягивание. После просмотра и слияния Дженкинс повторяет вышеизложенное, а также развертывает скомпилированные файлы js на наших живых узлах с помощью rsync.
Сами серверы являются контейнерами докеров, к которым файлы js смонтированы с локального диска.
Затем с помощью nodemon сервер узла перезапускается при обновлении файлов. Контейнеры управляются с помощью Rancher, поэтому для увеличения или уменьшения масштаба достаточно нажать кнопку + или задать вопрос нашему слабому боту (приятно) :)
С высоты птичьего полета
Чтобы мы могли видеть все наши текущие шаблоны с высоты птичьего полета, мы ввели дополнительный шаг, который генерирует скриншоты всех наших шаблонов при сборке (см. Изображение заголовка этого сообщения).
Это Таким образом, мы можем легко выявлять несоответствия и проблемы и вносить изменения и исправления.
Вы спросили, как это работает?
Как шарм!
Например, буквально вчера Stratos, наш иллюстратор, без какой-либо помощи и указаний со стороны разработчика, изменил контент для шаблона, глобально добавил изображение счастливой пасхи ( в компоненте нижнего колонтитула) и отправили его в производство.
Это звучит как магия, и, конечно же, кажется, что это так.
Мы довольны результат.
Следите за этим пространством, скоро у нас будет чем поделиться!
С Пасхой!
Присоединяйтесь, набираем!
