After deciding to try out Stream, it can be a little daunting with the number of ways to use the product. One of the earliest and most critical decisions is whether to use a component library or a low-level library, or even the Rest API. 

Using the REST API

Arguably the most "low level" method of interacting with an API would be to use a raw API request with Axios or Curl. Below is an example of a curl request to update a user, a common server-side request;

curl --location --request POST 'https://chat-proxy-singapore.stream-io-api.com/users?api_key={api_key}' \
--header 'Accept: application/json' \
--header 'Stream-Auth-Type: jwt' \
--header 'Authorization: {{ YOUR TOKEN HERE }}' \
--header 'Content-Type: application/json' \
--data-raw '{
"users": { "Lakshmi": { "id" : "Lakshmi", "name": "Seethalakshmi" }}
}'

The REST API can be cumbersome, it can be timely to modify the code and the arguments, so we give you alternative options. 

What is a Low Level Library?

Low level libraries are going to wrap REST methods into easy to use functions that can be imported into a project via a ChatClient instance and used over and over again. The functions accept parameters as arguments that are easier to use than URLs and request bodies. For example, the above curl request can be executed with the following, and the client can be re-used over and over. 

import { StreamChat } from 'stream-chat';
const chatClient = StreamChat.getInstance(app_key, app_secret);
const update = async () => {
  await chatClient.updateUser({ id: "Lakshmi", name: "Seethalakshmi" });
};

We offer Low Level Libraries in many languages, learn more here.

What is a Component Library?

A component library is an importable package that contains ready to use UI components that can be readily configured and added to an existing or new project or application. In the same way that a button can be imported from a commonly used package such as material-ui into a project, so can the components from, for example, the Stream Chat React component library. For example, in this tutorial a fully functioning Chat application can be rendered very quickly by importing the React component library.

The component libraries are built on top of the Low Level Libraries. For example, in order to fetch the Channels in the React ChannelList component, the underlying API request is the chatClient.queryChannels() method from the JavaScript Low Level Library. 

Which One Should I Use?

Using the REST API should only really be considered if we are missing a Low Level Library for your particular language of choice. We understand that this isn't ideal, and we do our best to create libraries for all commonly used languages. 

If you are able to use a Component Library, then the decision that requires the most consideration is whether to use one of these libraries, or build the UI on top of the low level libraries. The two main time sinks of engineering development time when integration the Stream Chat API with a Component Library are 

1. Customizing the functionality
   • For example, adding additional moderation features or changing the available emojis. 
2. Customizing the layout and design
   • For example changing the design of the message component or image galleries and adding branding. 

Generally, we see a complete integration using both the Component Libraries and methods from the Low Level Libraries. The reason for this is because many methods are not included in the UI component libraries. For example, if you have a reason to query the Members of a channel, you'll need to import that method from a Low Level Client. 

As an example, below is the default UI of our mobile SDK (React-native, Flutter, iOS, and Android). With React-native, changing the message component, for example, can be quite straightforward - we provide some instructions here but some customizations may be more time consuming.  

Pros

Can dramatically reduce development time and time to market

Exceptionally strong for creating proof of concepts or MVPs

The Stream SDK teams are considerable sized full-time teams of skilled engineers who build these component libraries which take away much of the complexities of a Chat application

The SDKs are built with custom styling and design in mind and the entire CSS (or SDK equivalent stylesheet) can be entirely overwritten

Even when styling isn't possible with CSS, components can be replaced with custom UI components with styling to match your exact designs

Cons

The SDKs are not infinitely customizable, and there may be a point at which it would make sense to build out your own components from scratch

The components may not work well with an existing automated testing suite