In this project, we explore building a chat app using five of the most popular web frameworks.
We’re building a similar experience in ways that are native to each of the frameworks. For some of the frameworks (specifically React and Angular), SDKs are available to build up the UI quickly. For others, we rely on the JavaScript Client SDK and build up all the UI ourselves.
As a backend solution, we use Stream's Chat API. By sharing a project under the hood, we allow cross-chatting between all the apps we build.
The code for all the projects can be found on GitHub.
1. React
We start by setting up a blank project using Create React App. Then, we add the user's initialization code and load all the channels.
For the UI, we use the pre-built components that the Stream Chat React SDK offers. Customization options are plentiful, but since we want to build a consistent experience for all apps, we keep them minimal in this case.
2. Angular
With the Angular CLI, it’s easy to set up a new project. From there, we initialize the Stream client and log in as a user, followed by loading the channels.
Then again, we’re using the Stream Angular Chat SDK to build the UI with a channel list and a channel component that displays all the messages. We then even showcase how we can chat between the React and the Angular app.
3. Vue.js
The first framework where we can’t rely on a UI SDK from Stream is Vue. We create a new project and use Pinia to set up a store object. Here, we manage all the initialization code and the user login.
We then load the channels and build up the UI with completely custom HTML and CSS code. It is more code but still a flawless integration, thanks to the JavaScript Client SDK. We subscribe to new channel events and update the UI when new messages arrive.
4. Svelte
Just as we’ve done with Vue.js, we also need to customize the UI for our Svelte implementation. We load the necessary data and opt out of the default server-side rendering behavior of SvelteKit pages.
We can reuse the CSS but need to adjust our previous implementation from Vue.js to attribute to the custom templating language that Svelte uses. Svelte's reactive behavior helps us make the Stream integration a breeze.
5. Next.js
For the last framework, we chose Next.js, one of the most popular at the moment. It’s built upon React, so we add a little extra to the otherwise similar implementation.
In the previous examples, we used a hardcoded token for authentication. In this version, we use server actions to dynamically generate tokens for authenticating users, which is closer to a production application.
Summary
Each framework we used has its way of handling things like templating, reactiveness, and integrating business logic.
It’s interesting to explore each one and build a similar application using the tools and chat SDKs we have available.
Please consider giving the repository a ⭐️ and if you want to see other frameworks used, feel free to reach out on X.