Третій новорічний колцентр: надшвидка розробка на 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 «хороших» дзвінків на годину. Як і обіцяли, відео дзвінка нижча, а ще відео — на сайт промо. З новим роком!



Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.