Author: A Byte Ahead URL:

Many people ask me as a blockchain developer, what is a DApp? In one of my simpler version of the answers, “DApp = Web + Blockchain”. Yep, the current web technologies are still heavily used. We simply move some data and authentications onto the blockchain, that’s it. It’s the same idea behind Web3.js, as well as the Connex.js we will be talking about later.

To answer that, we first look at what a traditional web application looks like: [block:image] { “images”: [ { “image”: [ “”, “Web app, client, server and database.jpeg”, 1600, 930, “#edebf6” ], “caption”: “Web app: client, server and database.” } ] } [/block]

What’s Web Application?

A web application in a simplified scenario is a typical client-server application. It contains several critical parts:

  • Client: web browsers.
  • Server: operates the database, serves the clients data.
  • Database: stores the data as valuable assets. 😛

Interestingly, in a web application, data is at the core heart. It flows, displayed, transformed and stored in the system. End users view the data from the web pages on the browsers.

A web application also has several characteristics in common:

  • The server interfaces with the database, not clients.
  • The database is hidden and holds valuable assets.
  • The user has no direct control of the data, only the server can. 😛

So blockchain promises the future of “Users in charge of their data”, what does a DApp look like exactly?

Simple. It looks like a web app, except we have one add-on: Blockchain. [block:image] { “images”: [ { “image”: [ “”, “DAPP web+blockchain.jpeg”, 1600, 1265, “#eceef1” ], “caption”: “DApp: Web + Blockchain” } ] } [/block]

What is DApp?

DApp is an application that is backed up by a distributed blockchain service. To make an analog to the web apps we use today, DApp relies partially on blockchain data but still is a web application (or web page).

  • Client: Browser/IoT devices.

  • Server: Serves code fragments or static assets like images.

  • Blockchain: Partial replacement of database, stores/processes critical user data.

    A public blockchain is a openly readable, slow, expensive database running by a network consists of hundreds of nodes.

DApp also has several characteristics in common:

  • DApp interfaces with both blockchain and traditional server.
  • The blockchain cannot be easily shut down as it contains multiple nodes.
  • The user can directly control data on the blockchain via DApp.

Great, now you know what does a DApp do and where the data is coming from, let us focus on how to write one.

Write a DApp: Sync and Connex

[block:image] { “images”: [ { “image”: [ “”, “1_rbq_5MkZBujA3qDGsvsvWw.png”, 1600, 1164, “#d7d8d8” ], “caption”: “Sync: Browser of VeChain apps.” } ] } [/block]

DApp shall both know how to communicate with traditional server backend as well as read/write from a blockchain network. Connex.js helps with the blockchain part, makes the developer life easier.

VeChain published Connex.js to substitute Web3.js in Ethereum. It is a huge step from Web3 and I am glad to use it in my first VeChain project:

  • Sync: Web browser of VeChain apps.
  • Connex.js: Standard Javascript library that helps to communicate with VeChain, included in Sync.

Token Transfer: A Simple DApp in Javascript

Starting from the next part of the tutorial, we will start to build a demo DApp named as “Token Transfer”. We will use an existing smart contract on VeChain as the data source. And I will help you to familiar with the environment:

  • How to read data from a VeChain blockchain smart contract.
  • How to display data to the user.
  • How to update data on blockchain via Javascript calls.
  • With the help of Connex in the Sync browser, we will do it in the blink of an eye! Follow the hands-on tutorials below to start coding!