Третий новогодний коллцентр: сверхбыстрая разработка на ReactJS и Typescript

    С наступающим, коллеги! У нас в 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 «хороших» звонков в час. Как и обещали, видео звонка ниже, а еще видео — на сайте промо. С новым годом!

    Метки:
    Voximplant 195,39
    Облачная телеком-платформа
    Поделиться публикацией
    Комментарии 14
    • +23
      Пришел только из-за снегурки…
      • +1
        Аналогично!
        • +3
          +1… Знают чем брать..)
        • +5
          Пришёл только из-за ReactJS и TypeScript'а (начинаем проект на этих технологиях).
          А тут такое :-(…
          • +2
            Жалко, что Кати нет.
            • 0
              всплывала такая же мысль, но всё-таки тут о снегурках же обещали
          • +16
            Снегурки на первой фотке более лучше чем на видео в конце!
            • +1
              Особенно правая....:)
              • +2
                Кстати, каким-то образом я, ходя по ссылкам, попал на трансляцию снегурок с фоточки. Правая там для виду, говорит в основном левая ) С другой стороны, рту правой можно найти другие более достойные применения )
            • 0
              А по какому критерию вы их сравнивали?
              • +1
                Чуть ниже середины скриншота есть перегруженный оператор <

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое