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.
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
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 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 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.
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.
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.