Using asynchronous programming with Sendbird’s JavaScript SDK

Sendbird, JavaScript Frameworks, and Asynchronous Programming

Sendbird’s API and JavaScript SDK provide the tools you need to integrate chat and messaging into a web or mobile application with a framework using JavaScript or TypeScript. Some popular frameworks include React, React Native, Angular, Vue.js, among others.

To make using Sendbird with these libraries and frameworks easier, this guide introduces some asynchronous programming techniques like callbacks, promises, async/await, and observables.

Most developers will have likely used one or many of the frameworks and concepts mentioned above. Whether this information is new to you or not, it’s intended to reassure developers that Sendbird is flexible enough to work with many applications, as well as to show the most common techniques for asynchronous programming with Sendbird.

Frameworks, libraries, and Sendbird

Frameworks and libraries standardize common tasks, help you organize your code, and make applications easier to scale.

Sendbird’s JavaScript SDK supports any JavaScript framework. React is one of the most popular libraries for JavaScript web applications and, likewise, React Native is one of the most popular frameworks for JavaScript mobile applications.

Due to React Native’s popularity, Sendbird has a React Native sample app that you can use as a starting point and speed up your development process. The sample uses redux, the most popular library for managing your application’s state with React and React Native. Since redux is also commonly used in React, the React Native sample application can also speed the development of your application using React.

Dealing with asynchronous requests

Prior to ES6, using callback functions was a common approach to making asynchronous requests in JavaScript. Callbacks are still commonly used, but it is easy to end up in callback hell, affectionately named for the messy code written when developers attempt to write JavaScript in the order it’s executed from top to bottom.

An example problem using the Sendbird JavaScript SDK

At face value, this code looks clean and easy to read. Notice how the code changes, however, if you update a user’s nickname and their profile URL after they connect.

This code is beginning to look a little messy. Even though you connect to Sendbird before updating the user information, you have to define the nickname callback inside of the connect callback. This can quickly get out of hand and become difficult to read. Anonymous functions can make this easier to read, but the upcoming strategies will provide the same or better readability benefits, while being designed to handle asynchronous requests.

Fortunately, promises, async/await, and observables make working with asynchronous code cleaner and more readable. We’ll provide background on each so it is easier to use the Sendbird SDK with a framework of your choice.

Promises

Promises make it easier to work with asynchronous code and perform actions after a promise is settled. A promise handles an asynchronous event that will eventually complete. A promise begins with the status pending and, once it is settled, can either be resolved or rejected. After this, you can perform different actions depending on how the promise settled.

Promises require more setup but they simplify things in the long run. You only need to wrap the functions once and they can be used whenever you need them.

Using promises, you can still write code in the order that it’s executed and handle errors more easily.

Notice, however, what happens when you chain multiple promises together. Although the code now reads in the order it is executed, it is still a bit difficult to read. But this represents an improvement on callbacks. Instead of nesting callbacks inside of one another, you can chain promises together, making the sequence of events more readable.

Async/Await

Async/Await is another way to manage promises that avoids the chaining in previous examples and makes asynchronous programming even easier to follow.

The below example assumes you still have your SDK methods wrapped in promises.

The asynchronous requests now execute top to bottom and wait for the previous request to complete before executing.

Observables

Observables are another common method for improving asynchronous programming in JavaScript. These are brought to JavaScript with the RxJS library. They are more complicated than promises but you may encounter them, especially in Angular. They simplify code in the big-picture.

Think of an observable as a function that can return multiple values over time. An observer can then handle the returned values.

As you can see, this may introduce more complexity without adding any obvious benefits compared to previous strategies, especially for calls that only return a single time. I include observables because they are common in Angular and you may run into them with some common state management libraries such as NgRx. The benefits of using an observable, even for a function that only returns one value, are that they are cancellable, declarative, and composable.

Thunks, Sagas, Effects, Etc.

You may also encounter thunks, sagas, effects and other concepts when using JavaScript state management libraries. These often use one or many of the concepts covered in this guide. They tend to be different approaches to updating an application’s state asynchronously.

A cleaner way to write asynchronous programming

Using the approaches to asynchronous programming above, your code will be cleaner, more readable, and work well with the Sendbird SDK as your application grows.