Third New Year's call center: ultra-fast development with ReactJS and Typescript

    Happy New Year, colleagues! We have a tradition in voximplant - before each new year we make a New Year call center , on which we roll in new features of our platform. This year there were a lot of features. In addition to video calls and video recording, we began to actively use typescript and react. The modern “hipster” technology stack is incredibly speeding up development: from the moment maxim magazine suggested we make a call center with photo models in the role of snow maidens, less than two days passed before the first video call was received. This year we did not make the announcement of the promo 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 in creating solutions in a short time and tell you what difficulties we encountered.



    The idea of ​​a promo is extremely simple. Maxim selects several outgoing finalists of various beauty contests and puts them in the studio. We provide them with a simple “dispatch” interface with a large “ready to talk” button, and for the publication’s website we make a “user” interface with the ability to make a video call from the browser. At the same time, the dispatching interface is displayed on a special url of our website, and the user interface on the website is in an iframe.

    I mentioned ReactJS and Typescript in the title for a reason - both of these technologies play a key role in very fast development. Let's start with React, whose main strength is not at all in the “shadow dom” and props, as many people think. The power of ReactJS is in splitting the user interface into small components. This allows not only reusing components between similar projects, but also quickly assembling “composite” user interfaces from pieces. A simple if in the “main window” component allows, depending on the state of the program, to show either the login form, or an error message, or the queue interface, or the video call window. This declarative approach gives the programmer the opportunity to focus on user experience and not puzzle over the questions “oh, but what about the parts of my program that will 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 error, you don’t need to “switch” anything, create “windows”, use global objects - just one if in the “render” method is enough, 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 in a different plane: optional strong typing. The code is written “like on es6”, but in key places the programmer leaves “hints” for the compiler in the form of types. Result - most errors pop up and are fixed at the stage of compilation and static analysis. And if you add webpack with dev server to this, the development becomes turboactive: the developer saves the changes, webpack reassembles the project in the background, typescript and eslint carefully study it, and in less than a second you can see the result of the assembly in the pop-up window (it turned out or not) pop-up window provides a special module webpack-notifier, highly recommended).

    There were some difficulties. It’s 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 talk about regularly on the hub), get your hand on the quick decoding of typescript compiler errors (which, due to the messiness of the messages in places, makes C ++ light) and be prepared for unexpected things. But it's worth it - extremely rapid prototyping and "upgrade" of the code to the production state by sequentially adding 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 call queue. For simple projects, we even have an internala skeleton that 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 was necessary to finish the platform a bit 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 the api simply did not exist. The video parameter was quickly added to the VoxEngine.enqueueACDRequest method , setting it to true turns a regular call into a video call. What else is interesting? A completely new-fashioned periscope was located next to our video chat, but it had to be turned off quickly - a flurry of comments about snow maidens went beyond what was allowed on the air. On average, girls talked with each caller for 2-3 minutes, that is, from 10 to 20 “good” calls per hour. As promised, the video of the call is lower, and the video is also on the site

    promo. Happy New Year!


    Also popular now: