In this episode I am going to introduce you Drizzle, a frontend framework for Ethereum Dapps. We will also build a simple Dapp using this framework, Truffle and React. This will cover:
- What is drizzle?
- When do you need it?
- Integrating Drizzle with other frameworks (React, Truffle, Redux & Saga)
- Components of Drizzle
- How does Drizzle work?
- Dapp tutorial with Drizzle
What the video tutorial for free here (create free account to access source code):
What is Drizzle?
Drizzle is a Javascript framework to help you build the frontend of your Dapp. It is available as a npm package, so you can install it very simply with your command-line. It was released by the team of the Truffle framework in early 2018 and is pretty much to this date the only frontend framework for Dapps.
In the Javascript world, whenever a new frontend framework is introduced, people always wonder, what is the purpose of this? Is it really useful? That’s a fair question.
You probably noticed that there is a lot of boilerplate code when you deal with web3 like for example when you import the contract artifact or when you configure the web3 object. Beside this, you also have to write the code for calling the functions of your smart contract, and it can be quite repetitive. And finally, you need to create your own solution to show some feedback to the user while a transaction is pending. And it’s not very easy.
Drizzle solves these problems. It reduces the boilerplate code a lot and simplify the integration of your Dapp frontend with the smart contract. With Drizzle, a lot of the integration with your smart contract becomes declarative instead of imperative. In other words, you just need o do the right configuration and Drizzle will figure out the rest.
Now that you know a bit more about Drizzle, a good question to ask yourself is when do you actually need it and how does it compare to just using web3?
When do you need it?
There is no exact answer but generally speaking with Drizzle you can get started much faster that by just using web3. You just need a few configurations and you can start to communicate with your smart contract right away. There are 2 downsides
- first, you need to do some extra learning compared to web3,
- and second also it can be a little bit less flexible that just using web3.
This being said, Drizzle is very modular and you can choose to use more or less components depending on how much flexibility your need and which integrations with other framework you want.
Speaking of integration, how does Drizzle integrate with other frameworks?
Integrating Drizzle with other frameworks (React, Truffle, Redux & Saga)
On the frontend size, Drizzle can be used with different frameworks, even though it was primary developed for React. Under the hoods, it uses Redux and Saga, 2 popular libraries for state management in React. You don’t have to use these libraries in your application, but if you do, it’s possible to integrate your reducers and your sagas with the ones of Drizzle.
Drizzle also uses web3, and you can still access the web3 object in your code if you need more flexibility. That’s a nice escape hatch to have.
On the backend, in theory you could use any smart contract framework you want. Drizzle imports a json file that describe your smart contracts. All that Drizzle requires is that this json file follows the format of a library called truffle-contract-schema, with among other things some fields like the abi and the deployment address of the smart contract. If you really wanted, you could use a framework different from Truffle and produce yourself this contract artifact. But, unless you have a very good reason to do this, it’s more simple to just use Truffle that will produce this contract artifact out of the box.
Components of Drizzle
Drizzle has 3 main components:
Drizzle is the library that holds the core of the logic of Drizzle. It is framework-agnostic, which means you don’t need to use it. You can use just this and integrate the drizzle manually with the rest of your application if you want.
Drizzle-react allows to easily integrate Drizzle to your React application. It provides a higher-order Provider component that wraps your other components and pass them down the the state of drizzle.
And finally there is the Drizzle-react-components library, which provides some ready-to-use react components for your applications, such as a component to display accounts, a component to read data from your smart contract and another one to write data.
Just a word of caution. In this tutorial we are going to use both Drizzle, Drizzle-react and Drizzle-react-components. Depending on the tutorials that you will find online, they use more or less of these components. For example, the official tutorial does not use Drizzle-react-components.
How does Drizzle work?
Drizzle first needs to know which smart contract you track with a configuration object. Then, Drizzle will:
- first, it will connect to the Ethereum blockchain with Web3
- Then, it will maintain an internal state storing the results of function calls of the state of the smart contract. This state is stored in a redux store, client side. Drizzle will keep this state up-to-date, you don’t have anything to do.
- It will also relay transactions to the smart contract (data write)
The synchronization with the data of the smart contract is crucial, so let’s give more details.
- First, Drizzle subscribes to new block headers, using web3. Block headers contain metadata about each block in the Ethereum blockchain.
- Whenever a new block header comes in, Drizzle checks if it contains any transaction relevant to the contracts we are watching, as configured initially. If it does, it update its internal state. Otherwise Drizzle just ignores the block header.
One last thing I would like to tell you about the inner workings of Drizzle is that even though the data is kept up-to-date by Drizzle, it’s up to the developer of the Dapp to re-render the UI when the data of Drizzle changes. This can be done simply using react and drizzle-react.
Dapp tutorial with Drizzle
Now its time for our Dapp tutorial with Drizzle. We are going to create a very simple Storage smart contract. Our smart contract will be able to get and set a variable. On the frontend, we are going to build a UI to be able to interact with this smart contract. Beside the core package of Drizzle, we are going to use react-drizzle and react-drizzle-components, as well as Truffle and React.
You can watch the tutorial for free on the website of EatTheBlocks Pro. Create a free account if you want to access the source code.
Leave a Reply