RTC@Scale 2024 – an event summary
RTC@Scale is Facebook’s virtual WebRTC event, covering current and future topics. Here’s the summary for RTC@Scale 2024 so you can pick and choose the relevant ones for you.
Read MoreWebRTC brings with it some unique challenges to web developers. It is time to suggest a solution to them.
[Time for another developer post by Chris Matthieu, founder of Twelephone, in what I hope will become a series of its own. This time, Chris elaborates more about the tight connection between WebRTC to Single Page Applications]
In our previous article, Node.js and WebRTC go Together Like Peanut Butter and Chocolate, we discussed just how effective Node.JS is for building single-page web applications. Single-page applications are all the rave now when it comes to building real-time web applications that feel like native apps. This is because most of the application logic is delivered to the client (web browser) and only small bits of JSON data move across the wire to the server making these applications very responsive for the user. HTML subviews are basically injected into divs or sections of the existing web page without refreshing or loading a new webpage on submits or clicked links.
In addition to the user experience and performance gains, there is another very important feature of a single-page application when it comes to running WebRTC video, voice, and chat. WebRTC allows you to establish a peer-to-peer video/voice chat session with another person or groups of people. Once this session is established it stays connected as long as the page stays loaded or until one of the people ends the session typically by pressing a hang-up button on the page. By design, single-page application pages do not refresh; therefore, your WebRTC session stays connected while you are able to continue working and clicking buttons and links on the website.
Twelephone, the social telephone, was completely rewritten several times. The first rewrite was to convert the application from a traditional web application to a single-page web application. The second rewrite was to leverage the Holla WebRTC library and improve chat support. Both rewrites were expensive but necessary for the communications platform to provide a better user experience with a clean, refactored codebase making it easier to implement new features in the future.
Here is a video demonstrating how Twelephone's single-page application design allows a user to have a video chat with someone while having text chats with other users.
Over the course of Twelephone's application rewrites, there were several lessons learned with respect to integrating WebRTC with a single-page application design. We would like to help others just now starting out on the WebRTC development journey as well as those thinking about converting their traditional WebRTC application to a single-page app. We hope these tips will save you from rework and improve your customers' experiences on your site too.
While I am in the domain of tips, here are a few more tips – these related to video calling user experience in general:
There are several popular single-page web application frameworks available including: BackBoneJS, AngularJS, KnockoutJS and EmberJS to name a few. You can find a great comparison tool of all single-page application frameworks at TodoMVC. Twelephone uses BackBoneJS along with Rivits for data bindings and Vein for moving JSON data between the client and server via websockets and remote procedure calls (RPC). Rivets and Vein are much faster data moving solutions over traditional AJAX requests because websockets do not require re-establishing connections or sending HTTP headers with requests plus websockets allow the servers to push data to the client without a request.
To learn more about single-page web application design, checkout this free ebook!
RTC@Scale is Facebook’s virtual WebRTC event, covering current and future topics. Here’s the summary for RTC@Scale 2024 so you can pick and choose the relevant ones for you.
Read MoreNeed WebRTC recording in your application? Check out the various requirements and architectural decisions you’ll have to make when implementing it.
Read More