Third New Year Call Center: Ultra-fast ReactJS and Typescript Development

Happy, colleagues! We have a tradition in voximplant - before each new year we do a New Year's call center where we run new features of our platform. This year, a lot of features happened. In addition to video calls and video recording, we began to actively use typescript and react. The modern “hipster” technology stack accelerates the development incredibly: from the moment maxim magazine suggested that we make a call center with photo models as Snow Maidens and less than two days passed before the first accepted video call. This year we did not make the announcement of the promo itself on Habré, after all the format is not the same, we want to talk about code and development, right? Therefore, under the cut, I will share our experience of creating solutions in a short time and will tell you what difficulties we encountered.



The idea of ​​promo is extremely simple. Maxim chooses several sociable finalists of various beauty contests and puts them in the studio. We provide them with a simple “dispatching” interface with a large “ready to talk” button, and for the publishing site we are making a “user-friendly” interface with the ability to make a video call from the barser. In this case, the dispatching interface is displayed on a special url of our site, and the user interface on the site of the publication in the iframe.
')
ReactJS and Typescript I mentioned in the title for a reason - both of these technologies play a key role in very fast development. Let's start with React, the main force of which is not at all in the “shadow dom” and props, as many people think. The power of ReactJS is to split the user interface into smaller components. This allows you not only to reuse components between similar projects, but also to quickly assemble “composite” user interfaces from pieces. Simple if in the component “main window” allows, depending on the state of the program, to show either the login form, or an error message, or a queue interface, or a video call window. Such a declarative approach gives the programmer an opportunity to focus on user experience and not wrestle with questions “oh, how can parts of my program communicate with each other and what should I do with all these flags”. Creating an interface from small pieces allows you to quickly work with errors: in case of an erroneous situation, you do not need to “switch”, create “windows”, use global objects - just one if in the “render” method and now the login window “magically” shows a beautiful A red notification that the login did not happen due to an incorrect login and password.

The power of Typescript lies on a different plane: optional strong typing. The code is written “like es6”, but in key places the programmer leaves “hints” for the compiler in the form of types. The result - the majority of errors float and are corrected at a compilation stage and static analysis. And if you add a web server with dev server at the ready, the development becomes a turbojet: the developer saves the changes, the webpack reassembles the project in the background, typescript and eslint study it carefully, and less than a second you can see the build result or not ( pop-up window provides a special module webpack-notifier, highly recommended).

Not without complications. It is important to understand that for all its strength, the “reactjs + typescript + webpack” bundle is very young and still “raw”. You need to know the "nuances" (which we try to regularly talk about in Habré), get a hand on quickly decoding the typescript compiler errors (which, by the confusion of messages in places, gives a light to C ++) and generally be prepared for surprises. But it's worth it - the extremely fast prototyping and “upgrade” of the code to the production state by successive addition of types and checks allowed us to collect our promo in less than two days. Of course, we used the cheat in the face of our own platform, which gave us “out of the box” web sdk with video calls, automatic user authorization by key and queue of calls. For simple projects, we even have an internal skeleton , which is assembled into three teams:

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

It took a little bit to finish the platform with a file - this was the first case of using an automated queue with video calls, and it turned out that the corresponding flag in api simply does not exist. The video parameter was quickly added to the VoxEngine.enqueueACDRequest method, setting it to true turns an ordinary call into a video call.

What else of the fun? Next to our video chat, a completely new-fashioned periscope was located, but it quickly had to be turned off - a flurry of comments about Snow Maiden went beyond what was allowed on the air. On average, the girls talked with each caller for 2-3 minutes, that is, from 10 to 20 "good" calls per hour. As promised, the video call is lower, and another video is on the promo website . Happy New Year!