Truffle Suite Recap with v5.0.36 ~relative latest~

Blockchain & arounds cover comprehensive area of IT technology domains and multiple layers of components from bottom to upper, web, distributed architecture, peer-to-peer networking, cryptography, etc, which looks the complex maze of technologies at a glance. You would have no clues which street or alleyway you have to wander through and find the right way sometimes for what you pursue. I went through some guides and blockchain articles in the past and came back again to relearn the basics throughly with Truffle framework. Here are some recommended tutorials that I had found when I did some tutorials again recently about Truffle suite for Ethereum. To avoid any setbacks I recommend reading “Mastering Ethereum”. beforehand [1]

Truffle Three Musketeers

Introduction

Before having those sweets Truffle, Ganache and Drizzle I overviewed what Ethereum is and its characteristics again to avoid vague understandings.

Ethereum is a distributed state machine with data store and it’s capable for running smart contracts, which are programs that work on an emulated computer called the Ethereum Virtual Machine (EVM). So the EVM is a global singleton state machine running everywhere in the globe where the Ethereum nodes can execute transactions. Viola!! So in any countries it’s accessible globally via the Internet and a singleton state machine plus a virtual machine that applies changes to that state with transactions (Private chain can be managed on local computers or in some closed environments while public chain is globally accessible). As a lot of blockchain’s chain have the same characteristics, Ethereum also has the deterministic and varifiable distributed ledger and the globally decentralized computing infrastructure where people can build decentralized applications (called DApps) providing high availability, auditability, transparency and neutrality to some degree. Those application could eliminate censorship and reduces certain counterparty risks. That’s why Ethereum is called “World computer”. Let’s delve a little deeper into smart contracts now.

How can smart contracts be created in Ethereum? It’s straightforward in Ethereum. A smart contract can be created by a transaction from one of EOA (Externally Owned Accounts). EOA are accounts those that have a private key. On the other hand contract addresses do not have a private key but it’s controlled by the logic of its smart contract code, so contract addresses are calling points from EOA or other contracts to execute the codes and functions inside its smart contract. OK understand that a smart contract can be created by a transaction. But what is a transaction? In this era we have seen a lot of transactions in our daily lives. In Chapter 6 of “Mastering Ethereum” its preface explains well:

Transactions are signed messages originated by an EOA, transmitted by the Ethereum network, and recorded on the Ethereum blockchain.

In simple word transactions are the only ways to trigger a change of state of Ethereum, or cause a contract to execute in the EVM. Ethereum doesn’t run autonomously. It’s said that everything starts with a transaction. A transaction consists of the following data and serialized using the Recursive Length Prefix (RLP) encoding scheme before signed. Nonce, Gas price, Gas limit, Recipient, Value, Data, v,r,s are nine elements in the transaction message.

transaction example

We don’t go deeper into each element of a transaction message here but understanding those elements is important to handle smart contracts appropriately. Especially the filed Value and Data are considerable to distinguish a payment trasaction, an invocation or a contract creation. Transactions can have both Value and Data only Value, only Data, or neither Value nor Data. All four combinations are valid.

• Only Value — a payment to EOA or to a contract address changing its balance with the fallback function
• Only Data — an invocation to a contract address to invoke one of the functions in that contract, as of now it doesn’t make any sense to send Data to EOA but it shows on a user wallet as data
• Value and Data — a payment and an invocation, when it goes to a contract address both a payment and an invocation explained above could happen on that contract address, in case of EOA a normal payment happens on its balance and Data shows
• Neither Value nor Data — Nothing happens except gas emission of the originator of the transaction

I could raise one exception besides four cases mentioned above in a transaction. That is a contract creation by a trasaction from EOA. A contract creation is a special case of one of transactions to a special destination address that is called the Zero address 0x0 ; to field in a contract registration transaction must contain the zero address as a destination. This address represents neither an EOA nor a contract. When a compiled bytecode of a smart contract is set on Data in transaction messages, it must be signed and sent to the Zero address for creating a contract. The contract address is given once a pile of transactions are mined and executed in the network. The given contract address can be used in a transaction as the recipient, sending funds to the contract or calling the contract’s functions as usual. If you have web3js you can embed your bytecode in data: and send a transaction. The transaction will be signed and broadcasted to the network.

> src = web3.eth.accounts[0]
> web3.eth.sendTransaction({from: src, to: 0, data: bytecode, gas: 113558, gasPrice: 200000000000})

Writing programs, smart contracts on Ethereum EVM needs a compiler to translate programs into raw byte codes when we need to deploy it on Ethereum EVM. Becacuse this virtual machine understand only machine code that human can’t understand. Human can understand high-level programing language such as Serpent, Solidity, Vyper, Bamboo for writing Ethereum smart contracts. As smart contracts are immutable it’s crucial to select a language that can be written with less side-effects and less fraws as much as expected. As of now Solidity is kind of de-facto standard language to write smart contracts in Ethereum. As Solidity is evolving rapidly it would be better to install the latest version with compatible tools, and it is one of motivations for me to write this Truffle article with the relative latest version.

Let’s think to use Solidity language for writing smart contracts in the EVM. Solidity is an imperative, object-oriented, high-level language which was influenced by C++, Python and JavaScript. [2]

It has the compiler solc which converts written programs into EVM raw bytecode and manages Aplication Binary Interface (ABI) standard. ABI defines the scheme how each function and event takes arguments and return values in JSON format. The ABI would be clues for DApps and outside applications to construct transactions that call the functions in that contract with the correct arguments and argument types in the right way. Otherwise people (or system) can’t know how to call the functions in the contract appropriately. These ABI definition could be thought molds for the contract and the functions.

Solidity - Solidity 0.6.2 documentation

You can use solc simply to generate raw byte code and ABI file. Then you would need to use web3js, which is the Ethereum-compatible JavaScript API via JSON-RPC for interactions, to send a contract creation transaction, for instance. However your life gets harder with a lot of tedious and repetitive works with only solc and web3js and other npm libraries. Apologize for lengthy introduction. Now it’s obvious that it’s vital to have something to make your life easier with integrated tool to cover comprehensive ideas mentioned above. This is where the framework Truffle takes place. Truffle eases Ethereum smart contract development drastically.

Truffle suite?

We went through Ethereum and EVM overviews and how can smart contracts be created with transactions in network. Let’s make our life easier with comfortable sweet tools, Truffle suite. Truffle suite consists of three useful development tools for DApps, Truffle, Ganache and Drizzle. [3]

Sweet Tools for Smart Contracts | Truffle Suite

Truffle manages smart contract artifacts, development environment with truffle develop and testing, etc all in one place. Truffle became de-fact standard for developing Ethereum smart contract nowadays. It’s a must-to-try tool even if you prefer to something different.

Ganache is a local blockchain for smart contract development you can use to deploy contracts, develop your applications, and run tests. It provides both a desktop application and CLI (formerly known as the TestRPC).

Drizzle is a collection of front-end libraries that make writing dapp user interfaces easier and more predictable based on a Redux store. It consists of some modules drizzle core, drizzle-react and drizzle-react-components.

https://www.trufflesuite.com/drizzle

All these libraries are provided in npm package manager. The requirement is that you have nodejs v8.9.4 or later version. [4]

Truffle | Installation | Documentation | Truffle Suite

$ node --version
v11.10.0
$ npm --version
6.9.0

Let’s install both Truffle and Ganache together. Truffle requires that you have a running Ethereum client which supports the standard JSON RPC API, but if you install Ganache you can spawn a personal Ethereum blockchain immediately. You have another option to use truffle develop to create a development blockchain with Truffle and it invokes truffle console tool. However there is one drawback in using truffle develop that I’ll explain later.

$ sudo npm install -g truffle@latest
$ sudo npm install -g ganache-cli@latest

Running truffle version shows each js library version. You may realize that Truffle consists of three libraries Truffle, Solidity compiler, web3.js (that is the Ethereum-compatible JavaScript API for interacting with clients via JSON-RPC).

$ truffle version
Truffle v5.0.36 (core: 5.0.36)
Solidity v0.5.8 (solc-js)
Node v11.10.0
Web3.js v1.2.1

I installed ganache-cli only via npm.

$ ganache-cli --version
Ganache CLI v6.8.2 (ganache-core: 2.9.2)

I recommend using Docker container to avoid dependencies between npm packages to some degree. Containerizing the required packages in one image would be a great escape from dependency riddle. There are some publicaly available images for Truffle and related tools. You can just pull the image from Dockerhub you want to use locally or in other places such as on the servers.

You may use MetaMask wallet to confirm your DApps with blockchain for testing behaviors. But please note that from 2020 Q1 MetaMask stops supporting web3.js injection as mentioned. Because the current injected version lacks some safety validations that have caused trouble for our users. It’s explained that keeping upgrades to the latest versions bring breacking changes frequently for users, which is understandable. [5]

You can still bring your own convenience library and use it with the MetaMask inpage provider, whether ethers.js, web3.js, or something else.

No Longer Injecting web3.js

Let’s see some usuful tutorials in the next paragraph.

Tutorials

There are 23 tutorials as of writing including the latest “Learn How to Deploy with Truffle Teams”. Truffe Teams is relatively new tool developed for DApps monitoring and management specifically. It gives you DevOps ability for DApps in solidity development with continuous integration, automated development, test tracking, etc. [6]

Tutorials | Truffle Suite

Pet Shop

This tutorial will take you through the process of building your first dapp — -an adoption tracking system for a pet shop!

It’s recommended to go through Ethereum Overview article before proceeding the tutorial. It covers the extensive area of IT technologies not just only Ethereum but smart contract, frontend stack (basic HTML and JavaScript) and peer-to-peer networking.

Pet Shop tutorial covers the following contents: [7]

1. Setting up the development environment
2. Creating a Truffle project using a Truffle Box
3. Writing the smart contract
4. Compiling and migrating the smart contract
5. Testing the smart contract
6. Creating a user interface to interact with the smart contract
7. Interacting with the dapp in a browser

Ethereum Pet Shop -- Your First Dapp | Tutorials | Truffle Suite

It’s said that truffle develep could be a choice for a development blockchain but I recommend using Ganache when DApps confirmation is required. Truffle develop spawns a private development blockchain and truffle console for development network at the same time. You might say truffle develop is fabulous, but wait, truffle develop can’t be open in public with -h option for instance while Ganache has more glanularity with various options.

I defined the named network “local” in the truffle-config.js for ganache-cli then migrate artifacts into the development “local” network that is accessible via the Internet. Run ganache-cli with the option -h 0.0.0.0 and configure the truffle-config.js as below:

$ ganache-cli -h 0.0.0.0
Ganache CLI v6.8.2 (ganache-core: 2.9.2)

truffle-config.js example

You can connect the named network “local” with this command now.

$ truffle console --network local

Once you’ve created the smart contract and frontend with simple HTML and JavaScript you can launch the web UI with npm-scripts npm run dev that is configured in the package.json file.

$ npm run dev

lite-server will be invoked and “External” shows your public URL or IP address to confirm the DApps on the browser.

lite-server external URL shows up

Do not forget the setting on your MetaMask. You need to configure your custom RPC endpoint with the server running your development blockchain and specific port number. We can shop around Pete’s Pet Shop now.

Pete’s Pet Shop!! Do adopt one.

Pet Shop is a lovely tutorial and straightforward especially for people who are familiar to the existing web technology and frontend to some extent.

Drizzle and React

React came with some focal concepts Virtual DOM and JSX, as one of View libraries while Backbone.js and Angular.js have MVC concept. React abstracted JavaScript codes into one place to take care of rendering DOM efficiently, however React applications usually requires the use of additional libraries for state management, routing, and interaction with an API. Redux, React Router and axios are respective examples of such libraries. [8]

Redux is one form of Flux architectures and can be described in three fundamental principles. Redux does not have any dependencies with React so Redux can be used with Angular.js or Vue.js whatever. [9]

Redux · A Predictable State Container for JS Apps

Drizzle takes care of synchronizing contract data, transaction data and more from the blockchain to a Redux store. The tutorial focuses on the lower levels how Truffle project comes up with React and Drizzle core library from scratch. Please don’t have mix-up between the terminologies and the roles of each library Truffle, Drizzle, React but Redux is not the library but the name of one of Flux architectures.

Drizzle and React tutorial covers the following contents: [10]

1. Setting up the development environment
2. Creating a Truffle project from scratch
3. Writing the smart contract
4. Compiling and migrating the smart contract
5. Testing the smart contract
6. Creating our React.js project
7. Wiring up the front-end client
8. Wire up the React app with Drizzle
9. Write a component to read from Drizzle
10. Write a component to write to the smart contract

Getting Started with Drizzle and React | Tutorials | Truffle Suite

We will use create-react-app library to create a React project. Let’s install it in advance.

$ sudo npm install -g create-react-app@latest

During each library installation you may face errors in npm. node and npm need to be updated to satisfy the requirements. I had to switch node version to the latest v13.7.0 when I tried to install create-react-app library.

create-react-app failing when creating new project · Issue #7503 · facebook/create-react-app

sudo n latest and v13.7.0 helped

$ yarn -v
1.13.0
$ node -v
v13.7.0

create-react-app forces to import files from client/src so that we need to change the contract build directory as follows. Built contract artifacts will be placed in client/src/contracts now. [11]

truffle-config.js example for create-react-app

After you’ve compiled the smart contract and migrated it in your network you have to install drizzle in the client directory. Drizzle contains everything we need to work reactively with our smart contracts.

$ npm install drizzle

drizzle and drizzlestate can act as Redux stores in the medium to interact with the built smart contract and web3js in an efficient way. We instantiate Drizzle store in the code. But no idea what Drizzle store is at all? To get better understanding about Drizzle and its Redux store, the given snippet below is relatively easy to grasp what drizzle instance and drizzleState from component state in console log. Drizzle instance is pass from this.props.drizzle and drizzleState is pass from this.state.drizzleState on the other hand.

drizzle and drizzleState

Drizzle state and Drizzle options are good materials to have a glance with this tutorial. [12] [13]

Let’s wrap up Truffle Suite recap. This article might be rudimentary for some people who are familiar to Ethereum, smart contracts, frontend technologies already to some extent. But it’s good to refresh your memory and avoid setbacks beforehand for people who just started learning around-technologies.

Reference

• [1] Mastering Ethereum: Building Smart Contracts and DApps
• [2] Solidity
• [3] Truffle Suite
• [4] Truffle — Installation
• [5] No Longer Injecting web3.js
• [6] Truffle — Tutorials
• [7] ETHEREUM PET SHOP — YOUR FIRST DAPP
• [8] React (Web Framework)
• [9] Redux — A Predictable State Container for JS Apps
• [10] GETTING STARTED WITH DRIZZLE AND REACT
• [11] Truffle — Configuration
• [12] DRIZZLE STATE
• [13] DRIZZLE OPTIONS