Build Blockchain dApps using JavaScript

Rate this content
Bookmark

Have we found nirvana for Blockchain developers? This session will focus on building blockchain dApps (distributed Apps) with one set of source code and deploy to multiple blockchains! The session will cover getting started with Reach and being able to deploy the same solution to multiple blockchains including Algorand, Ethereum, and Conflux. New to Reach? We will cover how to set up your development environment as well as walk through a simple app frontend and backend. Finally, we will look one the huge benefits of Reach in the built-in verification process. Reach provides automatic verifications to ensure that your program does not lose, lock away, or overspend funds and guarantees that your applications are free from this entire category of errors.

21 min
20 Jun, 2022

Video Summary and Transcription

Hello, my name is Russ Fustino, and welcome to Build Blockchain DApps Using JavaScript. We'll cover Algorand blockchain, layer one, setup your development environment, creating a simple DApp, verification, and UI controls from pipeline. Blockchain tools are now accessible to anyone for creating liquidity pooling, staking, and more. The Italian Society of Authors and Publishers is using NFTs on the Algorand blockchain to identify copyrights. Algorand accounts, ASAs, Atomic Transactions, Algorand Smart Contracts, and reporting with Indexer are part of the solution. Creating NFTs can be done using visual tools like Algodesk.io and wallets like Algosigner and MyAlgoWallet. Algorand atomic transfers guarantee the exchange of goods and facilitate decentralized applications. Smart signatures approve spending transactions and smart contracts facilitate global and local storage. DApp architecture includes a UI front end, payment transactions between accounts, asset transactions for NFTs and Fungible Tokens, and application calls for smart contracts. Various SDKs and tools are available, such as AlgoDesk.io, Algorand Studio, and Algodia. Reach is a high-level language and compiler for deploying DApps to the blockchain. Verification and audits play a crucial role in preventing locked away tokens. The Pipeline UI offers controls and components for easy integration into solutions.

Available in Español

1. Introduction to Algorand Blockchain and DApps

Short description:

Hello, my name is Russ Fustino, and welcome to Build Blockchain DApps Using JavaScript. We'll cover Algorand blockchain, layer one, setup your development environment, creating a simple DApp, verification, and UI controls from pipeline. Blockchain is a mutable decentralized ledger consist of blocks and transactions. Elgrand uses a pure proof-of-stake protocol, offers infrastructure longevity, technical flexibility, transaction certainty, extensibility, energy efficiency, cost efficiency, true security, DeFi solutions, stablecoins, and decentralized exchanges.

Hello, my name is Russ Fustino, and welcome to Build Blockchain DApps Using JavaScript. I'm a developer advocate for Algorand.

So, blockchain devs need to know, you know, first of all, what is a DApp? And how can I build one? As well as what kind of solutions can I build? I know when I first started doing blockchain development, that was a question that was first and foremost on my mind, what kind of solutions can I build? And what programming languages can I use to build DApps? And how do I verify smart contracts, in other words, audits?

So the agenda for today, we're going to cover Algorand blockchain, layer one. We'll do a little bit on setup your development environment and then creating a simple DApp, which by the way, stands for decentralized applications. And we'll cover verification as well as some UI controls from pipeline.

For those that are brand new to blockchain, what blockchain is, it's a mutable decentralized ledger consist of blocks, which are periods of time. And then the transactions that are associated during that time interval. Now of course, transactions are between a sender and a receiver. So those would be your accounts. And each account has the association of assets to it, as well as applications. Now assets can be your fungible or non-fungible tokens, and applications are smart contracts. So with Elgrand, we use a pure proof-of-stake protocol. The pure proof-of-stake protocol is extremely quick, and it really scales. It lasts pegged at 1400 transactions per second and block times created in under 5 seconds. But not only that, there's infrastructure longevity. The entire project is open sourced, and a lot of technical flexibility with all sorts of SDKs and tools being created and available for developers to build blockchain solutions. Transaction certainty, there is no forking in the Elgrand blockchain. Very extensible platform as well as extremely energy efficient. It is actually a carbon-negative blockchain. Cost efficiency, cost of a transaction is less than 120th of a penny. Also provides true security, because it is a read-only, write-once ledger that is distributed across the globe. DeFi is, by far and away, the biggest vertical marketer type of solution that you can build with Elgrand blockchain. Stablecoins. So what stablecoins are, is still crypto, but they are tied to a US economy. So as the US dollar goes up and down, so will the coin. So it fluctuates the same as the dollar does. So over 3 billion and circulation there you can see for USDC. And we have decentralized exchanges or DEXs. Things like Tinyman, Elgodex, ElgoFi. What's happened here is that, up until now, you've had to go to a bank to use financial tools.

2. Blockchain Tools and NFTs for Copyrights

Short description:

Blockchain tools are now accessible to anyone for creating liquidity pooling, staking, and more. The Italian Society of Authors and Publishers is using NFTs on the Algorand blockchain to identify copyrights. This opens up new possibilities for global access and use cases in various vertical markets.

For example, say you want to create a stock portfolio. Well, now these same tools are available to anybody that wants to use them. And you can go to sites like these, and apps like these, to be able to create liquidity pooling, and staking, and a lot of other things.

The Italian Society of Authors and Publishers, another great implementation of blockchain. They're using NFTs to identify copyrights. So NFTs are unique, and you can see here they've put over 4 million NFTs on the Algorand blockchain to close to 100,000 creators. Really, this is the future of the industry for doing copyrights, because think about it, there's no global boundaries. This is, and it's accessible to anybody that wants to have access to it. And other use cases, you know the list goes on and on here, right? A lot of different verticals, mostly every vertical market that really has a use case for a blockchain.

3. Algorand Accounts, ASAs, and NFTs

Short description:

Layer 1 of your solution includes Algorand accounts, ASAs, Atomic Transactions, Algorand Smart Contracts, and reporting with Indexer. Fungible tokens, such as stable coins and loyalty points, have units of equal value. Non-fungible tokens (NFTs) are unique collectibles used for in-game items, real estate, identity, certification, and more. Creating NFTs can be done using visual tools like Algodesk.io and wallets like Algosigner and MyAlgoWallet.

Let's get to the next section here on the heart and soul of your solution, which is Layer 1. Algorand accounts, ASAs or Algorand Standard Assets, Atomic Transactions, Algorand Smart Contracts as well as reporting with Indexer. So first you have a standard account, which represents an individual, let's say for example. And then you also have a multisig account, which could be representative, maybe, of a board of directors, as an example there. Now with a multisig account, you do have the capability of defining a threshold, in other words how many votes do you need out of the group here to pass the transaction or to sign it. And then a logicsig, which you see on the right, or logic account, is a smart contract. So that either returns true or false. And if it returns true, it will go ahead and sign the transaction, if it returns false, it will not.

Now we'll talk about fungible tokens and what these are exactly. So ASAs, or Algorand Standard Assets, can be either fungible or non-fungible tokens. So what we see here is a list of examples of fungible tokens. So things like stable coins, loyalty points, system credit. Each unit of the cryptocurrency is worth exactly the same amount and there could be several of those. Then on the NFT side of things, with non-fungible tokens, these could be used for in-game items when you're playing games. You've got real estate, identity, certification, collectibles is a big item. And that's really the best way I like to think about NFTs, is the fact that they are like a collectible. They're unique. They're one of a kind. So some folks I know collect baseball cards, for example, or coins. Every one of these is in a different condition. Each one of these is a different rarity. Each one of these has a different trait to it. So these are all a bunch of different metadata that can be used to differentiate these. So these are each very, very unique.

So let's take a look at creating one of these. I'm going to bring up Algodesk.io. This is a visual tool. So let's go to use one of our three wallets that are available here. We've got Algosigner, which is a plugin to Chrome. MyAlgoWallet is a web-based wallet.

4. Creating ASAs and Algorand Atomic Transfers

Short description:

The PairWallet is a wallet based on Android or IRS. We'll use Algosigner for the demo and select an account to create assets. We'll create an ASA named pizza, a fungible token with a supply of 100,000. Algorand atomic transfers guarantee the exchange of goods and facilitate decentralized applications. Smart Contracts use Teal, an assembly language, and can be generated using Python and JavaScript.

And then the PairWallet is a wallet that's based in Android or IRS. We'll go ahead and use the Algosigner here for the demo. We'll go ahead and sign into our wallet, and I'm going to pick an account that's in our to go ahead and use to create these assets.

So what we're going to do now is we're going to create an ASA. So we have the ability to create a name test. Let's give it a name of pizza. After the very first transaction in Bitcoin was for pizza. Now, if I make a supply of one, that would be an NFT. So what I'm going to do is actually create a fungible token. Let's create 100,000 of these. We also have the ability to put a decimal point in there. Also, we have the ability to put a URL that might be associated with this, more information, and then also a meta hat.

So next up, let's talk about Algorand atomic transfers. So this is where all must succeed or all will fail. You have a person A, for example, wants to send 50 Algos to person B. And then person B, in return, is going to send a concert ticket to person A. Now, when we used to do this through things like Craigslist or something like that, it was always a crapshoot whether this actually was going to work or not. Sometimes you'd pay the money, but you wouldn't get the ticket. Here, this guarantees the exchange of goods is what atomic transfers actually do. And so this really does facilitate and really is the secret sauce for many solutions that are built with decentralized applications. Very easy to do, and it's secure. So some examples of this would be simplified expedited settlements, circular trades, group payments, instant settlement for complex multiparty asset transactions, distributed payments. And again, these could be utilized with all the other Layer 1 features of Algorand standard assets and Smart Contracts.

Speaking of which, Smart Contracts. So this is the transaction execution approval language, is the assembly language that's used. Short name for that is Teal. And it's assembly because it's very lean and mean it's got to perform on the blockchain and be very, very scalable. So there's nothing leaner than assembly to do that. And then you have a Python enabled compiler, which you can use Python to generate Teal and also JavaScript is used in a product called Rea. And there's a new Visual Studio extension as well in using C sharp to create Teal.

5. Smart Signatures, Contracts, and DApp Architecture

Short description:

Smart signatures approve spending transactions and smart contracts facilitate global and local storage. DApp architecture includes a UI front end, payment transactions between accounts, asset transactions for NFTs and Fungible Tokens, and application calls for smart contracts. The index is a Postgres SQL database that offloads the Algod process and serves as a reporting tool.

So these are all basically Teal generators is each one of those products I just listed and more are on the way. Smart signatures basically approve spending transactions and then smart contracts themselves provide the transactions and facilitate both global and local storage. Local storage would be at the account level global storage would be at the blockchain level. These are all combinable with other Algorand technologies including atomic transfers and algorithm assets.

So to wrap up DApp architecture, basically you have a UI front end, perhaps maybe there's some smart signatures going on there using the Algorand SDKs or REST APIs. And then you got three different transaction types shown here. You have a payment transaction would be between your accounts. Asset transactions would be revolving around NFTs and Fungible Tokens. And then application calls would be your smart contracts and those would facilitate local state and global state out to the blockchain. So the index is basically just a Postgres SQL database which offloads the Algod process. And then it's indexed and searchable and a lot quicker and responsive. So it's a really a nice reporting tool.

6. Setup Development Environment and Tools

Short description:

Next, we'll cover the setup development environment, including the developer portal, Algorand Discord, sandbox, and Vultr private network. Various SDKs and tools are available, such as AlgoDesk.io, Algorand Studio, and Algodia. We'll explore PyTL and the process of compiling Python code. In JavaScript, we'll install the sandbox and SDK, follow the step-by-step guide, and create accounts. Finally, we'll introduce Reach, a high-level language and compiler for deploying DApps to the blockchain.

Okay, next up we're going to cover setup development environment and what's involved there. Well, the first thing you want to do is go out to the developer portal, developer.algorand.org an award-winning developer portal in the blockchain space. And then also Algorand Discord. If you want to sign up there and it's really great for support and getting your questions answered. And then also there's a discord server as well for reach. And I've got both of those on here as well.

So the first thing I want to do is get the sandbox loaded up, very simple. Just create a Docker instance and then clone the GitHub repo for the sandbox. And then also, the Vultr private network which includes Indexer, which is doing a sandbox up. It also supports other networks, the beta net, test net, main net. These are all supported with the use of sandbox. So mentioned some STKs, those are the ones that are highlighted in red are supported by Algorand. The ones down below it, Rust, PHP, Dart, C sharp swift and some more are supported by the community, the ecosystem. Lot of great tools on the right, including AlgoDesk.io. You saw that as well as Algorand studio. Algodia is a really great tool as well for doing very quick development with minimal amount of coding.

So with PyTL, basically, this is what you have is the Python and then you compile it and it returns the TL and then both TL looks like there on the right. Great PyTL course to go out to YouTube. There's a nice playlist there, excellent work there by the instructor. So your first transaction, let's go ahead and take a look at this in JavaScript. We're gonna bring up this page here on the developer portal. And you see, you scroll down, it gives you the step-by-step on getting started. This is where you install the sandbox. Like we talked about, this is where you install the SDK for JavaScript. You can see the information there, there's videos on each one of these. There's also a try-me live demo right here that you can click on and just hit the run button. You'll see it all execute. And then you start getting into the code and creating accounts and instantiating your clients. That brings us to Reach. What is Reach? Well, it's a programming language, it's a high-level language, it's also a compiler, and it does deploy your DApp to blockchain.

7. Reach Programming and Solution Deployment

Short description:

Reach programmers focus on the business logic, while the back end handles generating and deploying solutions to the blockchain. The front end provides a user interface for creating accounts and running traditional algorithm SDK methods. It's easy to install and requires Docker and the reach executable.

So the focus is on the business logic. So Reach programmers don't need to think about the details of things like contract storage, protocol diagrams, state validation, network details. So you have the back end. We'll start there, over there on the right. You can see this is responsible for generating and deploying the solution to the blockchain. Also, it interacts with the smart contracts automatically. So it's a solution implementation. It defines the interfaces for the front end that you're gonna be talking to, and you define things like participants and APIs as well as verification and commitment.

On the front end, now the front end can be done, the back end is like JavaScript-like code. All right, and on the front end, this could be done in Python, Go, or JavaScript or C-sharp. And basically what you have here is a user interface that is provided, and it does things like create accounts and a lot of traditional algorithm SDK methods. And you can also put blockchain-specific code in there, so if you have something that is slightly different between blockchains, you can tweak that a little bit on the front end as well. You can compile it, run it, and then deploy it out to the blockchain. All right, it's pretty easy to install. You just bring up Docker, download a reach executable, and if you're running this on Windows, you would need the Windows subsystem for Linux, and then also, this is the code you write here, you go ahead and create your directory for the project, and then you curl the reach executable down, giving it executable rights.

8. DAP Walkthrough and Verification

Short description:

A simple DAP walkthrough. Backend file with player interaction, rules, and outcome. Front end deployment, contract attachment, and interact methods. Verification protects against blockchain attacks and ensures contract balance is zero.

A simple DAP walkthrough. So this is the backend file we're looking at here. So either player, Bob or Ellis, gets the fingers they played, and gets a guess, and sees who won the winning game. And you can see that up at the top is really, that's just the interface of the methods that are actually defined on the front end. And then also you have other participants that are involved, right?

So the end-of-the-play get fingers thrown and total guess, and publish them, and then commit means you're done. You're committing that out to the blockchain. So the backend now also continues with rules and outcome. So this is the logic to a game. I've got a game I'm gonna show you here, Mora, where you're throwing fingers and a guess between the two opponents. And if either one of them guessed it correctly, then they win that particular match. So by doing this, everyone agrees on the rules for the outcome, and everyone sees the outcome of the engine that we have.

Now on the front end, this is you take the common number of 10, for example, into whatever native platform support. So it takes like 10 algos, for example, you convert it to micro-algos. And then you have the ability to create a new test account in the Dev environment with that starting balance. And then you see down below, this is where Alice is deploying the contract. And then Bob's going to attach to the contract, in other words, opt in, and then we go ahead and run the game. And then also, these are the interact methods. So we saw the interfaces to these on the back end, and now this is the actual code in the JavaScript in the front end that this provides. So you can see, we're just using some random functions here.

Next, let's talk about verification. This is a very, very important topic. And this is what it does, is it protects against blockchain attacks. And it guarantees things like the contract balance is zero. Because think about it, you're creating accounts on the fly potentially in these contracts. And there you're funding them. And if it's created on the fly, it's in the contract, only that contract knows what the private key is, right? No one else would know that. And if the contract ends executing and there's funds still in that account and haven't been exhausted, guess what? You're gonna lose those funds. There's no way of getting at them because the contract gets done running, it goes away. And you know that's a problem, that's an issue. And there have been, you know, some big monies lost in the past because of this particular problem.

9. Verification, Audits, Reach, and Pipeline UI

Short description:

Verification and audits play a crucial role in preventing locked away tokens. Reach provides a compiler that verifies the code, while auditors verify the assertions provided to the compiler. Demonstrations show the importance of proper verification, and a solution is available on the developer portal. The Pipeline UI offers controls and components for easy integration into solutions. In summary, we explored the Algorand blockchain, layer one features, setting up the environment, Reach, and building a simple Dapp.

So what verification does and audits do are prevent locked away tokens, right? By the contract and hence become inaccessible. So with, as far as auditing goes, the non-reach solution is an auditor proves that program with their own analysis and they're doing the verification of a version of the program. If you got a minor change, then the audit is useless for a prior version. They have to do everything from scratch. With the REACH, the compiler verifies and then the auditor verifies that you provided to the REACH compiler enough assertions. And code changes, well, the REACH auditor just needs to check the right assertions were included on the code changes.

So you see here Alice shoots four fingers and guesses a total of five. This is just demonstration of doing some printing in the back end and then also you see Bob shoots zero fingers and guesses four. So the actual thrown is four and Bob wins the wager. And so you can see as a count value increases. What happens if I change this to just going one times the wager? So right now you have two times because each player is providing a wager amount. So two times a wager is the total that's in the pot. So if we try to run this, it's going to realize that, hey, you know, this doesn't work because you're gonna leave money on the table. And now you can see some violations down below. So you could see here that message zero balance at application exit that assert failed. It's not a zero balance, there's some stuff left in there. I have a solution I wrote up on the developer portal. Here's a link that really goes into detail step by step on building that particular solution that we just looked at.

So that brings us to the front end, right? Pipeline UI, it's a vanilla JS SDK and React component library. And you can see here, there are controls that are available that you just copy snippets of code and HTML into your solution. You can see on the right is an example showing an account, but not only the account number, but also a QR. Also, there are Algorand specific React components as well. And we've got Twitter spaces with Algorand dev Twitter and follow our Algo Devs Twitter. So in summary, we took a look at Algorand blockchain at a high level as well as some use cases, what you can build solutions with. And we looked at all the layer one features. Then we took a look at what was involved in setting up the environment. We took a look at Reach and Building a Simple Dapp. This is a fascinating product. It does build in things like verification as a good benefit. But again, you're writing it in a JavaScript like code for the backend, the front end can be in JavaScript as well. And the verification process is very, very important there in building solid decentralized applications. And finally, we looked at the pipeline UI controls. Thank you very much.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.