Передовым преимуществом Leanplum для наших маркетинговых клиентов является их способность взаимодействовать со своими пользователями в режиме реального времени очень специфическими способами. Когда маркетолог ставит цель в нашем приложении, он может отправить очень конкретное сообщение определенному количеству людей в определенное время. Это означает, что в любой момент маркетологи имеют возможность взаимодействовать с каждым из своих пользователей невероятно подробно и персонализированно через нашу платформу.
В прошлом проблема заключалась в том, что маркетологи сталкивались с таким количеством отзывов в режиме реального времени, что не могли в полной мере использовать платформу в меру своих возможностей. Учитывая сложность и набор функций нашей платформы, мы знали, что в будущем мы хотим создать новый опыт для наших клиентов, который упростил бы их процесс отправки кампаний пользователям.
Итак, Leanplum решил перестроить нашу платформу, сделав новый акцент на оперативность и взгляд на будущее маркетингового пространства. Создавая этот новый продукт, Campaign Composer, мы преследовали три основные цели:
- Продуктивность разработчиков. Мы хотели, чтобы разработчики быстро выполняли итерации, чтобы улучшить тестируемость и модульность (никаких спагетти!)
- Отзывчивый одностраничный интерфейс
- Современная развивающаяся технология с открытым исходным кодом
Теперь, когда наши цели определены, мы можем начать процесс создания Campaign Composer с использованием Vue и Typescript.
Как работает компоновщик кампаний
Чтобы понять, как мы использовали Vue для создания Campaign Composer, вы должны понимать основы работы Campaign Composer. По сути, наши клиенты импортируют SDK Leanplum в свое приложение и инициализируют его с помощью ключа API, затем SDK начинает прослушивать такие события, как «приложение запущено», «пользователь удален», или настраиваемые события, такие как «оформить заказ» или «добавить в корзину». Затем эти данные сохраняются на серверах Leanplum, а затем с Leanplum.com клиенты могут начать разрабатывать целевые кампании в Campaign Composer.
Вот как выглядит Campaign Composer:
Почему мы выбрали Vue для создания Campaign Composer
Когда мы впервые решили создать Campaign Composer и заменить наш устаревший код, мы знали, что нам нужен совершенно новый фреймворк. Мы хотели что-то современное, простое в работе и легкое для написания тестов. В частности, нам понравилось, что мы могли работать с шаблонами и наблюдаемыми, которые предоставляла наша предыдущая структура (Angular), но Vue также предоставил нам методы жизненного цикла, которые предоставили такие среды, как React. Так что Vue был идеальной золотой серединой.
От первого использования Vue до интеграции с Typescript
На сегодняшний день Leanplum использует Vue для создания, тестирования и запуска Campaign Composer в течение полутора лет, и мы действительно настроили его в соответствии с нашими потребностями. Тем не менее, наше первоначальное использование Vue было на самом деле довольно стандартным, и только когда мы интегрировали Typescript, мы смогли подняться на наш текущий уровень успеха.
Вначале мы создавали наши компоненты, используя javascript ES6, и мы писали в Jade (также известном как .pug) для наших шаблонов и HTML-файлов. Оттуда мы использовали официальный маршрутизатор Vue и скомпилировали все с помощью Webpack, а затем обработали его с помощью нашего существующего бэкэнда Python. Наши первоначальные настройки при первом использовании Vue также были стандартными — свойства, компоненты, вычисляемые поля. Что касается CSS, поскольку мы работаем в Webpack, нам просто требовался CSS, а затем Webpack разумно объединил все и использовал один тег стиля, чтобы показать его в браузере.
Однако со временем мы обнаружили, что вся документация по Vue больше ориентирована на однофайловые компоненты. Мы использовали Webpack 3, и у нас были проблемы с vue-loader, но, поскольку у нас уже был рабочий стек, в то время мы не хотели использовать однофайловые компоненты.
На самом деле проблема, с которой мы столкнулись, была понятна каждому Java-разработчику: вы пишете что-то, делаете опечатку, сохраняете файл, обновляете браузер и видите:
«Неопределенное — это не функция».
Or,
«Невозможно установить значение свойства undefined».
Итак, вы возвращаетесь и вносите изменения, но вы теряете время.
В конечном счете, мы не хотели ежедневно сталкиваться с этими ошибками. Очевидно, что одним из решений является написание модульных тестов, чтобы ваш производственный код был безопасным, но если вы кодируете изо дня в день и пишете новые компоненты Vue, вы не хотите обновлять свой браузер каждый раз, когда видите эти ошибки. Итак, нашим решением стал Typescript.
В двух словах, Typescript позволяет вам проверять тип во время компиляции. Есть больше встроенных функций, которые также полезны, но для наших целей возможность проверки типов в javascript является огромным изменением по сравнению с существующим положением.
Как мы писали компоненты машинописного текста:
Для начала мы использовали декораторы, которые помогают вам определить компонент Vue, шаблон, который он принимает, дочерние компоненты, которые он будет использовать, и т. д. Кроме того, у каждого реквизита теперь есть аннотация типа, поэтому Typescript сразу же найдет ваш ошибки, предоставить вам поддержку IDE и в целом повысить вашу уверенность в своем коде. Так что теперь, когда вы начнете производство, вы не получите всех этих надоедливых ошибок!
Это помогло нам охватить большую часть нашей кодовой базы, но все еще были части нашего кода, которые не были защищены, например, наши конечные точки API. Решением, которое мы нашли для исправления этих лазеек, были протокольные буферы (по сути, самодокументирующиеся API-контракты).Оттуда у нас была закрыта наша бизнес-логика и наш уровень API, поэтому следующим элементом был наш шаблоны. Мы по-прежнему писали HTML-шаблоны, которые по сути представляют собой просто строки — Vue компилирует их в javascript, но это все время выполнения. В этот момент у вас есть шаблон, и вы пишете свой код, но если вы сделаете опечатку и запустите его в производство, а он все равно потерпит неудачу — может быть, эффектным образом.
Добавление проверок типов в шаблоны
К счастью, Typescript защищает от серьезных сбоев. Когда вы пишете компонент JSX, он дает вам функцию рендеринга, которая, в свою очередь, обеспечивает безопасность типов кода вашего шаблона. Так что, если вы сделаете опечатку в своем JSX, вам даже не придется перезагружать браузер, так как сама сборка остановится. Он скажет «сбой сборки» из-за ошибки типа, так что в конечном итоге это чрезвычайно быстрый опыт разработчика.
Где мы сейчас
На данный момент Leanplum на 100% проверен на соответствие типам, и мы очень хорошо спим по ночам, зная, что код, который мы пишем, не приведет к краху производства. Теперь, когда маркетологи разрабатывают кампанию с помощью Campaign Composer, они могут использовать всю глубину персонализации, которую может предложить платформа.
Если вам интересно узнать больше, вы можете проверить простой шаблон, который мы сделали, используя нашу текущую настройку. Не стесняйтесь открывать вопрос, если вы заметили какие-либо ошибки или вам нужна помощь!
Удачного кодирования.
Недавно мы сотрудничали с Vue.SF, чтобы обсудить этот процесс на июльской встрече в нашей штаб-квартире в Сан-Франциско.
—
Leanplum набирает сотрудников! Изучите наши карьерные возможности здесь.
