Over the next 2–4 years, the world of software development is going to change a lot. App users are expressing frustration about privacy violations and how little control they have over their own data. In the meantime, many industries are held back by process inefficiencies which are the result of centralization of power, money, and control.
disrupted that in 2009, and in the 10 years since, the foundations of a new internet have been forming: the internet of value. It’s now possible to buy, sell, loan, and transact money over the internet with no bank or central company in the middle, with radically lower fees than any company has ever offered before.
The digital storage and transfer of value has opened up new economic models that were not possible before, such as , which pays watchers to share their video bandwidth, building a high performance, decentralized video streaming platform. Theta is currently rewarding watchers with a called TFUEL, which can be used to donate earnings to streamers (gamers who stream their live gameplay), or purchase items in a on . Eventually, TFUEL or currencies like it might be used to purchase in-game items: already a multi-billion dollar industry.
Smart Contracts — Replacing the Middle Man
A smart contract is a program that runs on a decentralized architecture (such as a like ), which is capable of locking, unlocking, issuing, and transferring digital assets. For instance, it’s possible to issue your own on top of networks like . When you do, a smart contract governs those , defining how many there are, how new supply is issued or limited, and how transfers of are controlled.
You can also create a smart contract that represents fractional ownership in a building, or a smart contract that represents promises to supply computing services, such as information storage, bandwidth, or CPU power. The latter can be used to create economic incentives to supply decentralized versions of AWS, Google Cloud Platform, or Microsoft Azure. See and for examples.
Smart contracts are beginning to replace the middleman. For example, if you have some ETH (’s native ), and keep your ETH in the market while you use the loaned amount to buy a car or solve temporary cash flow issues.
Building Crypto Apps (DApps)
“Crypto” is short for “cryptography”, but it’s become the short way of saying “the industry dealing with , , decentralized applications, and decentralized technologies”.
If you want to build an app that doesn’t rely on Amazon for hosting, or Facebook for social graph, or Google for user authentication, that can be open-sourced and could continue to operate as long as there are community members willing to run nodes, (think BitTorrent) you’re in the right place.
We’ll start with , although these days, isn’t the only choice. is a designed to host Turing-complete smart contracts capable of supporting DApps (Decentralized Applications).
My first tip if you’re new to building DApps is that if you want to build DApps, first learn HTML, CSS, and JavaScript. uses a virtual machine, and the most popular programming language for the Virtual Machine (EVM) is Solidity.
I don’t recommend thinking of your app in terms of Solidity and what you can do with the EVM. Instead, try to imagine what you can do when there are digital assets which can be securely transmitted to other people without a bank or broker in the middle. Try to imagine the most user-friendly way to represent those capabilities in your app.
The one thing that is difficult to get around without building a right into your application is interacting with APIs. For example, on , you’d use the to trigger transactions that require interaction from the user. Up until now, that has been mostly bad , because it requires users to download the , or an -capable browser such as the or . Both Trust Wallet and Wallet are really just Web3-aware browsers with built-in wallets and transaction approval UIs.
Getting users to install and use an extension or a whole new browser is really hard, and very close to zero percent of your potential users will do it. That has crippled the DApp industry to date, and has severely limited the Web3 userbase.
Recently, some of the most popular DApps (like ) have integrated wallets right inside the DApp. In those cases, you don’t need a 3rd party integration. You can make your app work in Chrome. The downside is that it’s more centralized: users need to place more faith in your DApp — which places more security responsibility on the DApp developer.
It would probably be crazy for every DApp that wants to work natively in Chrome to build its own integrated . Luckily, new solutions are emerging. is a JavaScript Software Development Kit (SDK) which provides Web3 capabilities inside Chrome. No need for your users to download extensions or special browsers.
Let’s build a simple DApp that works in Chrome without any extensions or separate downloads required.
Project Setup
Note: Details like this tend to change quickly. If they don’t work for you, leave a comment. Maybe somebody can help you figure it out.
- Open a . Make sure you have Node installed (I like to ).
- Create your project directory and install some dependencies:
mkdir hello-eth
cd hello-eth
npm init -ynpm install --save react react-dom next fortmatic web3npm install --save-dev@babel/core@babel/register@babel/preset-env @babel/preset-react
@babel/polyfill
@babel/register eslint-config-prettiereslinteslint-plugin-prettier eslint-plugin-react
eslint-plugin-react-hooks prettier ritewaywatch tap-nirvana
3. Open package.json and replace the “scripts” value with the following:
4. Create some directories:
mkdir pages
mkdir src
mkdir src/views5. Add some files to the project root directory.
.babelrc:
,
"production": ,
"test":
}
}
.eslintignore:
node_modules
.next
.eslintrc:
,
"plugins": [
"react",
"react-hooks"
],
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
"parserOptions": ,
"settings":
},
"rules":
}
Hello, World!
Now create src/views/index.js:
import React from 'react';
const Hello = () => <h1>Hello, world!</h1>;
export default Hello;
With , any file you drop in /pages will create a route automatically at /<page-name> minus the .js file extension. It also does automatic server-rendering, automatic bundle creation and optimization, and when you deploy with Zeit Now, it will do a lot of cool things to automatically optimize client delivery. This is all good when it’s time to ship your app to production, but the real reason we’ve used Next.js is because it’s my favorite way to bootstrap a working React app.
Next.js has built-in CSS support with <style jsx> and you don’t need to figure out how to manually wire up your routing. Let’s get our index view routing right now. Just create a new file called pages/index.js:
import Home from '../src/views';
export default Home;
That’s it. Just import the view, and export the same view. I like to keep the actual component definitions in the src/ directory tree so that I can easily colocate related files in the same spot without accidentally creating a bunch of routes for them. In other words, /pages is for routing-only. /src is for the real source code.
Show Me the Crypto
So far you’ve just seen JavaScript and React code. The good for crypto/DApp developers is that at least 75% of your project code (probably a lot more) will be written in JavaScript, and React is a great framework for UI code. But if you’re going to transact on the internet of value, you’ll probably need to work with some crypto APIs.
At the beginning of the setup, we installed Fortmatic and Web3 with npm. Now we’re going to import them into our index page so we can use them. First, you’ll need to to get your API key.
You should be able to sign up with and immediately grab your testnet key. Fortmatic will automatically send new users ETH on testnet to experiment with.
Fortmatic is a custodial provider of API services, including a very user-friendly sign-in experience. Users sign into your app by supplying their phone number. They’ll get a security code SMS, which they’ll use to authenticate with your app. You’ll get the user’s address when that’s done.
Fortmatic stores user private keys using the cryptographic anchor security architecture safeguarded by Fortmatic’s Hardware Security Modules (HSMs).
As a DApp developer looking for real user traction, this is attractive because pushing the responsibility and complexity of key storage onto users as a prerequisite is not a friendly way to onboard users. Handling it yourself is risky. Fortmatic provides a great middle ground.
You can still allow users to claim custody of assets from their Fortmatic wallets by allowing them to transfer those assets to their own privately managed wallets. Let’s add Fortmatic authentication to our src/views/index.js component:
import React, from 'react';
// import web3 providers
import Fortmatic from 'fortmatic';
import Web3 from 'web3';
const formatic_api_key = '<your test key here>';
const initializeWeb3 = () => );
};
const Hello = () => ;
export default Hello;
Once a user is logged in with Fortmatic, you have the Web3 API at your disposal. You can on top of it, have the users cryptographically sign data, and on smart contracts.
Tips for Scaling DApps
The first rule of blockchains is you should do as little as possible on the . Storing data on the is expensive (See instead).
Batch transactions if you can. Learn how to anchor using . Check out for efficient queries.
You may need to build your own smart contracts to pull off your idea. That’s a lesson for another day.
Published at Sun, 28 Apr 2019 02:53:04 +0000
