June 09, 2021

How to use Subspace with QuickNode

What is Subspace?

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.

JavaScript is the programming language behind most of the internet apps and websites. JavaScript today has become one of the most used programming languages, and one of the big reasons behind javascript's popularity is the javascript frameworks and libraries. There are many frameworks to choose from based on your preference (React, Angular, Vue being the most popular ones).

What is Subspace?
Subspace is a tool to develop dApps (Decentralized Applications) in your preferred/favorite javascript framework. Subspace's key feature is that it is based on reactive app development.

Reactive development is becoming more and more popular to make websites run faster. The main goal of reactive web development is to create responsive and fast websites. In reactive development, most of the content is presented and rendered in front-end as a reaction to the user's interaction - hence the name 'Reactive' - unlike the traditional way where the components of the web page/app are rendered server-side where we would typically see increasing the retrieval time. Subspace provides various methods to track and subscribe to events, contract & state balances, and react to changes via observables. Subspace supports many JS frameworks. React, Angular, and nodejs is amongst them. Subspace saves the last state of your dApp to a local database so that your dApp always syncs from the previous known point, even after reload.

What is RxJS?
RxJs is a library/framework for reactive programming that uses Observables, making asynchronous coding easy. According to their official documentation, RxJS is an extension to Javascript with better performance, better modularity, better debuggable call stacks, while staying mostly backward compatible, with some breaking changes that reduce the API surface.

What are observables?
An Observable is a function that returns the stream of data values whenever there is a change in value synchronously or asynchronously; observables do this with an observer or subscription; the observer is set up and looks for the change in value, the stream of data can be zero to infinite.

The following are some features of Subspace:
  1. Event Tracking & Event Sourcing - Events can be tracked, and with subspace observables doing event sourcing becomes very easy.
  2. Tracking State - Changes to contract variables can be tracked.
  3. Tracking balances - Changes in both ETH and ERC20 token balances can be tracked. 
  4. React integration - Subspace can make any React components compatible with observables.

Prerequisites
  • NodeJS installed on your system
  • A text editor
  • Terminal aka Command Line

Installing Subspace and other dependencies

To install Subspace, we'll need a package manager. We'll use NPM (Node Package Manager) here, which comes with NodeJS. To check if NodeJS is installed on your system, open a terminal/command prompt and run:

$ node -v

if not installed, you can download the LTS version of NodeJS from the official website.

Note: The installed NodeJS version should be higher than 10.17.0

Now to install subspace, type the following in your terminal/command prompt:

$ npm install --save @embarklabs/subspace web3 rxjs
or

$ yarn add @embarklabs/subspace web3 rxjs

We are also installing web3 and rxjs as dependencies along with subspace

The most common issue at this step is an internal failure with `node-gyp.` You can follow node-gyp installation instructions here.

Note: You will need to have your python version match one of the compatible versions listed in the instructions above if you encounter the node-gyp issue. 

Another common issue is a stale cache; clear your npm cache by merely typing the below into your terminal:

$ npm cache clean

If everything goes right and Subspace gets installed correctly, and you're halfway there!

Booting our Ethereum node

For our purposes today, we could use pretty much any Ethereum client, such as Geth or OpenEthereum (fka Parity). To boot an ethereum node all by ourselves, we'll first need to select a client and configure it; syncing an ethereum node and maintaining it is a challenging task; syncing an ethereum full node can take days.

Since that is a bit too involved for just querying for block height, we'll grab a free endpoint from QuickNode to make this easy. After you've created your free ethereum endpoint, copy your HTTP Provider endpoint:



You'll need this later, so copy it and save it.

Using Subspace to subscribe to new blocks

Now let's create a short script, let's call it `index.js,` to fetch the latest block number from our node. You can copy/paste this into your code editor:

var Web3 = require('web3')
var Subspace = require('@embarklabs/subspace');
var url = 'ADD_YOUR_ETHEREUM_NODE_URL'
var web3 = new Web3(url)
var subspace = new Subspace.default(web3);
subspace.init().then(() => {
	subspace.trackBlockNumber().subscribe(blockNumber => {
		console.log("The latest block number is: ", blockNumber);
	});
});

So go ahead and replace `ADD_YOUR_ETHEREUM_NODE_URL` with the HTTP provider from the section above. 

Let us try to understand the above code line by line - we are importing Web3.js and Subspace library we installed earlier (lines 1-2), setting our Ethereum node URL (line 3), creating a Web3 instance (line 4), creating a Subspace instance with web3 (line 5), Initiating our Subspace instance (line 6), subscribing to trackBlockNumber method to track the update in block number of Ethereum blockchain from our QuickNode node(line 7), now logging the block number to console (line 8).

As we're subscribing to the trackBlockNumber method it will output a new console line as soon as there is a new Block.

Save this code snippet in a file index.js. We're going to run this in the next section.

Confirm it's working

Run the file using the node command, and you will see the latest Ethereum blockchain:

$ node index.js

You should see the following:



So this is how we can use Subspace with QuickNode. You can refer to their documentation if you wish to play more with Subspace.

Subscribe to our newsletter for more articles and guide on Ethereum. If you have any feedback, please feel free to reach out to us via Twitter, and you can always chat with us if you have a question via our community server on Discord, thanks :)
Ready to try QuickNode? Start your 7-day free trial

Related articles 35

Jul 3, 2021 The Web3 Developer Stack

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are common web developer stacks. Similarly, today we will learn more about the web3...

Continue reading
Sep 22, 2021 How to do a non-custodial transaction with QuickNode

Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private key) and...

Continue reading
Jun 7, 2021 How to integrate IPFS with Ethereum

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with...

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in PHP

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

Continue reading
Jun 8, 2021 Estimating gas price using pending transactions in Python

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Continue reading
Sep 23, 2021 How to Mint An NFT On Solana

Hello reader! Welcome to another Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. In this guide, you will walk through step-by-step how to create an NFT on Solana....

Continue reading
Jun 8, 2021 How to connect to Ethereum network with ethers.js

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

Continue reading
Jun 8, 2021 How to connect to the Ethereum network using Ruby

Ruby has a huge fanbase. Ruby was developed by its creator with an intention to create a language people can have fun using. Ruby has been largely accepted by the developers all around the world since it’s launch, in fact, the biggest tech communities in many cities are...

Continue reading
Jun 8, 2021 How to re-send a transaction with higher gas price using ethers.js

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

Continue reading
Jun 17, 2021 How to get the balance of an ERC-20 token

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

Continue reading
Jun 8, 2021 How to connect to Ethereum network with Web3.js

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

Continue reading
Jun 8, 2021 How to generate a new Ethereum address in Ruby

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

Continue reading
Aug 15, 2021 How to Send a Transaction On Solana Using JavaScript

Hello reader! Today is an exhilarating day because we are going on an expedition to the Solana Blockchain. Solana is an up-and-coming blockchain seeking to improve upon the current ecosystem's solutions to the complex problem of providing a secure, scalable, decentralized...

Continue reading
Nov 4, 2021 How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a more recent player in the game: "Login with MetaMask". For instance, this is...

Continue reading
Jun 8, 2021 How to Fork Ethereum Blockchain with Ganache.

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

Continue reading
Jun 8, 2021 How to fetch Ethereum event logs in Ruby

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch ethereum event logs in Ruby using ethereum.rb ruby...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Go

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in Python

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

Continue reading
Jun 9, 2021 How to generate a new Ethereum address in JavaScript

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Go

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

Continue reading
Jun 9, 2021 How to connect to Ethereum network using Java / Web3j

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

Continue reading
Sep 24, 2021 How to Mint an NFT on Solana Using Candy Machine

Hello reader! We have had a lot of requests for another Solana NFT guide where we show you how to Mint a 1-of-1 token, or NFT on Solana. In the previous guide we did not quite get to...

Continue reading
Jun 9, 2021 How to connect to Ethereum using .NET (Nethereum)

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

Continue reading
Jun 15, 2021 How to connect to Ethereum using PHP

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the web3.php...

Continue reading
Jul 15, 2021 How to Setup Local Development Environment for Solidity

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

Continue reading
Jun 9, 2021 How to connect to the Ethereum network using Python using Web3.py

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

Continue reading
Nov 4, 2021 How to Connect to Terra with JavaScript using Terra.js

Stablecoins have been bridging the gap between the traditional currencies and blockchains. Stablecoins offer stable price crypto tokens pegged by a reserve asset which is often a fiat current like USD, EUR, GBP. The Terra protocol provides a framework to work with...

Continue reading
Oct 10, 2021 Introduction to Scaffold-ETH 🏗

Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements like smart contracts and nodes that allow you to connect to the...

Continue reading
Jul 24, 2021 How to deploy a smart contract with Brownie

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Continue reading
Jul 13, 2021 How To Fork Ethereum Mainnet with Hardhat

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

Continue reading
Jun 26, 2021 How to create and deploy a smart contract with Hardhat

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

Continue reading
Jul 2, 2021 How to generate a new Bitcoin address in JavaScript

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Continue reading
Aug 13, 2021 How to create your own DAO with Aragon

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything; it enables various use cases in finance, governance, voting, fundraising, etc....

Continue reading
Aug 15, 2021 How to Create an Address in Solana using JavaScript

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

Continue reading
Nov 4, 2021 How to Build a Wallet Generator for Solana in React

In this practical guide you will build a basic Wallet application with React and Web3 that will interact with Solana Network.This application will do the following operations:Connect to the...

Continue reading