# Comparing frontends · Web3 essentials for Web2 developers · Learn Chromia

> This lesson shows how a frontend client calls the Web2 REST API and how that compares with sending transactions and queries to the Chromia Web3 dapp.

Source: https://chromia.com/learn/web3-for-web2-devs/compare-frontend/

Web3 essentials for Web2 developersLesson 5 of 11

1. [01Web3 essentials for Web2 developers](https://chromia.com/learn/web3-for-web2-devs/introduction/)
2. [02Traditional web app overview](https://chromia.com/learn/web3-for-web2-devs/classic-web2-stack/)
3. [03Chromia dapp overview](https://chromia.com/learn/web3-for-web2-devs/chromia-web3-stack/)
4. [04Comparing backends](https://chromia.com/learn/web3-for-web2-devs/compare-backend/)
5. [05Comparing frontends](https://chromia.com/learn/web3-for-web2-devs/compare-frontend/)
6. [06Authentication](https://chromia.com/learn/web3-for-web2-devs/compare-authentication/)
7. [07Web3 pros and cons](https://chromia.com/learn/web3-for-web2-devs/web3-benefits/)
8. [08Scalability](https://chromia.com/learn/web3-for-web2-devs/scalability/)
9. [09Security](https://chromia.com/learn/web3-for-web2-devs/security/)
10. [10Revenue streams and running costs](https://chromia.com/learn/web3-for-web2-devs/revenues-and-op-costs/)
11. [11Summary](https://chromia.com/learn/web3-for-web2-devs/summary/)

[Learn](https://chromia.com/learn/)[Web3 essentials for Web2 developers](https://chromia.com/learn/web3-for-web2-devs/)

05 / 11Beginner

# Comparing frontends

This lesson shows how a frontend client calls the Web2 REST API and how that compares with sending transactions and queries to the Chromia Web3 dapp.

## Web2 frontend with Axios

The Web2 app has a REST API, but users need a frontend with an interface to work with it. Below is one way to call the API from JavaScript. The native Fetch API would work, but the example uses the [Axios](https://axios-http.com/) library because it keeps the code a little tidier:

javascript

```
// frontend.js
import axios from "axios";

// Base URL for the API
const API_BASE_URL = "http://localhost:3000";

// Create a user
function createUser(name, id) {
  return axios
    .post(`${API_BASE_URL}/users`, { name, id })
    .then((response) => response.data);
}

// Create a post
function createPost(userId, content) {
  return axios
    .post(`${API_BASE_URL}/posts`, { userId, content })
    .then((response) => response.data);
}

// Fetch users with pagination
function fetchUsers(offset = 0, limit = 10) {
  return axios
    .get(`${API_BASE_URL}/users`, {
      params: { offset, limit },
    })
    .then((response) => response.data);
}

// Example Usage:
// createUser('John Doe', 'unique_id_as_byte_array');
// createPost('USER_OBJECT_ID_HERE', 'This is a post content.');
// fetchUsers();
```

Most web developers will recognize this pattern. The next example does the same thing on the Chromia platform.

## Web3 Frontend with Chromia's postchain-client

On Chromia, you change data by sending *transactions* to the Chromia blockchain network. The Chromia TypeScript client library, [postchain-client](https://www.npmjs.com/package/postchain-client), handles this for you.

What is Postchain?

**Postchain** is the blockchain platform technology underneath Chromia. The Chromia team builds and maintains it, and its code is fully [open source](https://gitlab.com/chromaway/).

The following code uses postchain-client to send transactions that match the earlier REST API calls:

typescript

```
import { createClient } from "postchain-client";

// Our dapp's unique ID when deployed to the Chromia network. We get this when
// we deploy our dapp.
const blockchainRid = "...";

// URLs to system nodes in the Chromia network. These are automatically queried by the
// client library to find the URLs of the specific nodes running our particular dapp.
const directoryNodeUrlPool = ["url1", "url2", "url3", "etc."];

const chromiaClient = await createClient({
  directoryNodeUrlPool,
  blockchainRid,
});

// Create a user
function createUser(name, id) {
  return chromiaClient.sendTransaction(
    {
      name: "create_user",
      args: [name, id],
    }
  );
}

// Create a post
function createPost(userId, content) {
  return chromiaClient.sendTransaction(
    {
      name: "make_post",
      args: [userId, content],
    }
  );
}

// Example Usage:
// createUser('John Doe', 'unique_id_string');
// createPost('USER_OBJECT_ID_HERE', 'This is a post content.');
```

Fetching users through the `get_users` query from the dapp backend doesn't require a transaction. You only need transactions, which are almost always signed with cryptographic keys, when you change data. Call the read-only query like this:

typescript

```
const users = await chromiaClient.query("get_users", {
  pointer: 0,
  n_users: 10,
});
```

The next lesson covers adding authentication and authorization to the dapp.

Written for this site from Chromia’s public course. Code samples are the course’s own.

[← Previous**Comparing backends**](https://chromia.com/learn/web3-for-web2-devs/compare-backend/)[Next →**Authentication**](https://chromia.com/learn/web3-for-web2-devs/compare-authentication/)

On this page

* [Web2 frontend with Axios](#web2-frontend-with-axios)
* [Web3 Frontend with Chromia's postchain-client](#web3-frontend-with-chromias-postchain-client)