С наступающим, коллеги! У нас в voximplant есть традиция — перед каждым новым годом мы делаем новогодний коллцентр, на котором обкатываем новые фичи нашей платформы. В этом году фичей случилось особенно много. Кроме видеозвонков и записи видео, мы начали активно использовать typescript и react. Современный «хипстерский» стек технологий неимоверно ускоряет разработу: от момента, как журнал maxim предложил нам сделать коллцентр с фотомоделями в роли снегурочек и до первого принятого видеозвонка прошло меньше двух дней. В этом году мы не стали делать анонс самого промо на Хабре, все-таки формат не тот, мы же хотим общаться про код и разработку, да? Поэтому под катом я поделюсь нашим опытом создания решения в сжатые сроки и расскажу, с какими сложностями мы столкнулись.



Идея промо крайне простая. Maxim выбирает несколько коммуникабельных финалисток разнообразных конкурсов красоты и сажает их в студию. Мы предоставляем им простой «диспечерский» интерфес с большой кнопокой «готов к общению», а для сайта издания делаем «пользовательский» интерфейс с возможностью совершить видеозвонок из барузера. При этом диспечерский интерфейс отображается на специальном url нашего сайта, а пользовательский на сайте издания в iframe.

ReactJS и Typescript я упомянул в заголовке не просто так — обе эти технологии играют ключевую роль в очень быстрой разработке. Начнем с React, главная сила которого совсем не в «shadow dom» и пропсах, как думают многие. Мощь ReactJS — в дроблении пользовательского интерфейса на небольшие компоненты. Это позволяет не только повторно использовать компоненты между похожими проектами, но и быстро собирать из кусочков «составные» пользовательские интерфейсы. Простой if в компоненте «главное окно» позволяет, в зависмости от состояни программы, показать либо форму логина, либо сообщение об ошибке, либо интерфейс очереди, либо окно видеозвонка. Такой декларативный подход дает программисту возможность сосредоточиться на user experience и не ломать голову над вопросами «ой, а как же части моей программы будут общаться друг с другом и что мне делать со всеми этими флагами». Создание интерфейса из небольших кусочков позволяет быстро работать с ошибками: в случае ошибочной ситуации не нужно ничего «переключать», создавать «окна», использовать глобальные объекты — достаточно одного if в методе «render» и вот уже окно логина «волшебным образом» показывает красивую красную нотификацию о том, что логин не случился по причине неправильного логина и пароля.

Сила Typescript лежит в другой плоскости: опциональная строгая типизация. Код пишется «как на es6», но в ключевых местах программист оставляет «подсказки» для компилятора в виде типов. Результат — большинство ошибок всплывают и исправляются на этапе компиляции и статического анализа. А если прибавить к этому webpack с dev server наперевес, то разработка становится турбореактивной: разработчик сохраняет изменения, webpack в фоновом режиме пересобирает проект, typescript и eslint его внимательно изучают, и менее через секунду во всплывающем окне можно наблюдать результат сборки — получилось или нет (всплывающее окошко обеспечивает специальный модуль webpack-notifier, очень рекомендуем).

Не обошлось без сложностей. Важно понимаеть, что при всей своей силе связка «reactjs + typescript + webpack» очень молода и все еще «сыровата». Нужно знать «нюансы» (о которых мы стараемся регулярно рассказывать на хабре), набить руку на быстрой расшифровке ошибок компилятора typescript (который по запутанности сообщений местами дает прикурить C++) и в целом быть готовым к неожиданностям. Но оно того стоит — крайне быстрое прототипирование и «апгрейд» кода до production-состояния путем последовательного добавления типов и проверок позволило собрать наше промо менее чем за два дня. Безусловно, мы воспользовались читом в лице нашей собственной платформы, которая дала нам «из коробки» web sdk с видеозвонками, автоматическую авторизацию пользователей по ключу и очереди звонков. Для простых проектов у нас есть даже внутренний скелет, который собирается в три команды:

git clone https://github.com/voximplant/vox-react-skeleton.git && cd vox-react-skeleton
npm install
npm run build

Платформу понадобилось немного допилить напильником — это был первый кейс использования автоматизированной очереди с видеозвонками, и оказалось, что соответствующего флага в api просто нет. В метод VoxEngine.enqueueACDRequest был оперативно добавлен параметр video, установка которого в true превращает обычный звонок в видеозвонок.

Что еще из интересного? Рядом с нашим видеочатом был расположен совсем новомодный перископ, но его быстро пришлось выключить — шквал комментариев о снегурочках выходил за рамки позволенного в прямом эфире. В среднем девушки общались с каждым позвонившим по 2-3 минуты, то есть от 10 до 20 «хороших» звонков в час. Как и обещали, видео звонка ниже, а еще видео — на сайте промо. С новым годом!