How to Build a Chat Application Without a Backend?

After reading the title, you may wonder how you can build a chat application without a backend. But you read it right. We can build a chat application without a backend!

In this article, we cover the components you need to build it.

First, let’s look at why chat applications matter today. Communication plays an important role in building relationships in business, social and personal life. For instance, chat applications are one form of communication. Almost everyone uses them in some form, like personal chat or business communication.

To add chat to your website or web application, you have two options. You can integrate third-party libraries, which is quite costly in the long run. Or you can build the application the traditional way, with a backend and all the middleware components. A chat application without a backend avoids both costs. You can also see our web development services.

Areas Where Chat Applications Play an Important Role

• Hotels and Food Delivery sectors
• Banking Sector
• Social Media
• Railways

The Components We Use to Build a Chat Application Without a Backend

We use the following components to build a chat application from scratch:

• Angular
• AWS AppSync
• GraphQL
• AWS Dynamo DB
• AWS Cognito

Here is a brief introduction to all these components.

Angular – Angular is an application framework and development platform for creating efficient single-page apps.

AWS AppSync – AWS AppSync is a fully managed service that makes it easy to develop GraphQL APIs. It handles the heavy lifting of securely connecting to data sources like AWS DynamoDB.

GraphQL – GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. Facebook developed it as an application layer server-side technology.

AWS Dynamo DB – AWS Dynamo DB is another AWS service. It lets us save data in NoSQL form. It is a fully managed, serverless, key-value NoSQL database. Because of its design, high-performance applications run at any scale. Also, a chat application needs both performance and scalability.

AWS Cognito – Amazon Cognito helps you add Authentication and authorization to your web and mobile apps quickly and easily. It provides 30+ methods. As a result, we get full control of user authentication and authorization.

The Architecture We Follow to Build a Chat Application Without a Backend

Here is how the architecture above works.

• First, you need an Angular library. It gives you ways to connect with AWS Amplify, i.e., aws-amplify and aws-amplify-angular.
• AWS amplify provides you with ways to connect with AWS App Sync. It provides GraphQL schemas and resolvers to connect to a Dynamo DB.
• AWS Amplify also lets you connect with Amazon Cognito, which helps you register and authenticate users. You need an Amplify authenticator component with the Auth class. It provides methods like signup, signin, signout and forgot password. Check out the complete API here.
• Once the user authenticates successfully, you can start a chat and store and retrieve messages from Dynamo DB. For that, you need to create a schema, mutations, subscriptions and queries. They help you save and retrieve data from Dynamo DB.

Schemas

Schemas are the most basic component of GraphQL. A schema represents a kind of object you fetch from a service. Example:

type ChatTable = {
  __typename: "ChatTable",
  id?: string | null,
  message?: string | null,
  sender_id?: number | null,
  receiver_id?: number | null,
  assets_id?: string | null,
  created_date?: string | null,
  updated_date?: string | null,
}

Mutations

However, mutations are special because they define the entry point of every GraphQL query. For example, whenever a write operation occurs, you must send it explicitly via a mutation.

type CreateChatTableMutation = {
  createChatTable?:  {
    __typename: "ChatTable",
    id?: string | null,
    message?: string | null,
    sender_id?: number | null,
    receiver_id?: number | null,
    assets_id?: string | null,
    created_date?: string | null,
    updated_date?: string | null,
  } | null,
}

Subscriptions

Finally, subscriptions are the most special operation. A subscription keeps listening for mutations. Whenever a mutation happens, it runs an operation and sends the response to the UI. For example, when someone starts a new chat, it listens and tells the UI that a new chat began.

type OnCreateChatTableSubscription = {
  onCreateChatTable?:  {
    __typename: "ChatTable",
    id?: string | null,
    message?: string | null,
    sender_id?: number | null,
    receiver_id?: number | null,
    assets_id?: string | null,
    created_date?: string | null,
    updated_date?: string | null,
  } | null,
}

Queries

Queries help you with CRUD operations. Please find an example below for getting requests.

  query ListChatTables(
    $filter: TableChatTableFilterInput
  ) {
    listChatTables(
      filter: $filter
    ) {
      items {
        id
        message
        sender_id
        receiver_id
        assets_id
        created_date
        updated_date
      }
    }
  }
`

Advantages and Disadvantages of a Chat Application Without a Backend

• Advantages

  • Speed is a major concern for applications today, and this architecture reduces execution time. You can fetch data with a single GraphQL API call. Also, it runs in the application layer, so the middleware complexity drops.
  • Easier and faster to build applications.
  • Only pay for the services you use.
  • Modern UI-driven approach to building applications.
  • It provides web-based analytics.

• Disadvantages

  • Lack of resources for the complex calculation.
  • Missing design pattern for a complex application.
  • It does not use the HTTP caching methods that store request content.
  • Its cost is overkill for small applications.
  • When you use AWS Amplify, you cannot distribute load balancers.

Conclusion

To sum up, I covered all the components that help you build a real-time chat application without a backend. Therefore, you can build fast and reliable applications with a modern UI. Execution time plays an important role today. To achieve it, we can use the power of AWS AppSync. It is a little expensive, but it gives you a secure and scalable chat application. Also, you avoid the overhead of managing a backend. This makes it a cost-effective chat development option.