Understanding dapps and blockchain for frontend developers
About a year ago I had the opportunity to start working for a “cryptocurrency company” that was developing a product using the Ethereum blockchain. I will try to explain a few points that I wish I knew before starting!
Some concepts that I will explain here are highly simplified because:
It’s probably not needed to have a deep understanding to be able to use it and do the frontend work.
I simply don’t understand enough to explain them in details and this knowledge was enough for me to go on.
Also, some concepts might seem obvious to you but they were not for me, so don’t hesitate to skip.
What is a dapp?
The term dapp stands for decentralised application. I knew that.
However what I didn’t know is that what we commonly call dapps are not actually decentralised: they are still just normal websites, hosted on Amazon or any other hosting service (even static hosting services like Github Pages or Netlify). What is different from a normal app is where the data is stored, the database. Or you might most-likely have heard of is as the blockchain.
If you were to compare a standard app with a dapp, the standard app would use a MySQL database, like a Wordpress blog, where the dapp would use a database that is hosted on multiple servers that represents the blockchain network.
So why is it called “decentralised application” if the code is still in the hands of Amazon’s servers?
Because in some cases the actual code of the application doesn’t actually matter much: if the app is taken down and the code is not available due to a problem on the hosting, you can just deploy it somewhere else. The worst possible scenario would be some down time for your users.
What really matters is the data. That’s what you want to get away from centralisation.
Now if this data is stored in the blockchain, no matter what happen, it can hardly be taken down totally to the ground since you can just redeploy it as many times as you want on different servers since its role is just to be a visual interface for your database/blockchain.
This is good but not good enough! Your users could still be unable to use your app and that way of building dapps is not solving this. And that’s why IPFS has been created. This is a protocol to make your app available in Peer to Peer, like a movie on BitTorrent. No more single point of hosting, your assets are decentralised on the network. Unfortunately at the moment of writing these lines you will still need at least some centralisation to get your dapp up and running with a decent UX.
What is a blockchain and how do I write things in it?
I read dozens of definitions of blockchain and I was still not understanding what it was. Until I realised a blockchain was just a database. That is decentralised.
I’m sure you already saw that image representing a “distributed graph” or “cloud of dots” a hundred times (it’s in every blockchain presentations, between the “private key” slide and the “hash rate” one). As a frontend developer (or just anyone that is not actually a blockchain developer), all you need to understand is that each point represents an instance of the database. In other terms, every person on the network has a copy of the database.
This is what is also often called “distributed ledger” (yes that’s what “DLT” stands for).
So how do you communicate with the database on a dapp? In other words, how do you read and write to the blockchain?
Actually just like you would do with any other web app. Blockchain protocols propose APIs and pretty much all of them have an SDK that you can use in your JS code. On Ethereum for example, that JavaScript library is called Web3.js. For EOS, it’s simply called Eosjs, etc.
Then you will be able to read data from the blockchain directly from your web page.
But what if you want do save some data? For Ethereum, you can run a blockchain locally on your machine, like you would run a MongoDB or any other database. It’s called Ganache and it will let you read, write, or do anything you want just like on a real blockchain environment, without the cost.
What are smart contracts?
“Smart Contract” is just a fancy term for “script”.
Smart Contracts are usually associated with the Ethereum blockchain but as you can imagine, you can have scripts for other blockchains, so you might hear about it on other blockchain technologies as well.
What is MetaMask? Why do I need it?
MetaMask is a browser extension used to interact with dapps built on the Ethereum blockchain.
That’s another one I really struggled with. It’s not that MetaMask is complicated, the UX is fine and the app usually works well. What I took a long time to understand is why I had to use it and what it was actually doing under the hood.
MetaMask represents your account on the Ethereum blockchain. Think about it as the “My Account” section of a regular website. On a dapp, all that part is decentralised and sits on the blockchain, not on the actual dapp: the dapp does not need to store your identity. Your identity is represented by the “wallet” and the wallet is managed by MetaMask.
That’s why you can use a single “account” on various dapps. You could compare it to a “Single Sign On” a la Google/Facebook Login.
MetaMask then handles the communication between your wallet and the dapp.
What it does under the hood is that it reacts to the Web3.js events. When you (the dapp code) call the Web3.js API to trigger a transaction, MetaMask opens a popup and ask the user to confirm or cancel that transaction. This is needed because it will often send tokens (usually actual money) to complete the actions.
The reason you need a browser extension to do that is because it would be insecure otherwise. Imagine giving any dapp access to your wallet, they would be able to do anything they want with your money without your consent. Like key-logging your password and so on. Here MetaMask always asks you for confirmation for any action in your wallet. And as it’s a browser extension, you can be sure the code is sandboxed and the dapp won’t have access to it.
What are networks?
When you interact with a dapp, you have different “modes” in which the app can run. These modes are represented by networks. You could relate the networks to traditional app environments: just like you have a production and staging environment for your website, dapps usually work with a main and test network.
What is usually called the Testnet (test network) is pretty much like a demo or draft mode for the dapp. There are different ones, but you might have heard of Kovan, which is the most popular one, on the Ethereum blockchain.
However, what is important to understand is that these modes are actually only related to the blockchain interactions: think of it as a demo database, or a demo account on a website. Any data you save while in demo mode, won’t be saved on your actual account but only in the demo.
In the same way, in a dapp, if you do a purchase while in Testnet, it won’t spend your precious coins or tokens until you switch the dapp in Mainnet mode.
For the Ethereum blockchain, you usually control the mode in which the dapp operates directly from MetaMask.
That’s it. With that much knowledge I was able to work on the frontend of an advanced dapp in production and understand enough to provide some good UI and UX work in the world of blockchain.
Please leave a comment below if you want to correct something or extend the explanations of a concept!
