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.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

A DApp, or decentralized application, is a type of application that runs on a blockchain network rather than being hosted on centralized servers. This allows for enhanced security, transparency, and decentralization.

The Algorand blockchain uses a pure proof-of-stake protocol, which is extremely fast and scalable. It supports 1,400 transactions per second with block times under 5 seconds. It is open-sourced, carbon-negative, cost-efficient, and ensures transaction certainty with no forking.

To set up your development environment, you can visit the Algorand Developer Portal at developer.algorand.org and join the Algorand Discord for support. Use the Algorand sandbox by creating a Docker instance and cloning the GitHub repo for the sandbox.

Algorand Standard Assets (ASAs) are tokens on the Algorand blockchain that can be fungible or non-fungible. Examples include stablecoins, loyalty points, system credits for fungible tokens, and in-game items, real estate, identity certifications, and collectibles for non-fungible tokens.

Atomic transfers in Algorand ensure that all transactions in a group either succeed or fail together. This guarantees the secure exchange of assets, such as when person A sends 50 Algos to person B, and person B sends a concert ticket to person A.

Algorand ensures transaction security through its read-only, write-once distributed ledger, which eliminates the risk of tampering. It is highly cost-efficient, with transaction fees being less than 1/20th of a penny, and it is also energy-efficient, being a carbon-negative blockchain.

DApps on Algorand can be built using various programming languages, including JavaScript, Python, and C#. Tools like PyTeal, Reach, and Visual Studio extensions allow developers to write and deploy smart contracts efficiently.

Smart contracts in Algorand, written in Teal (Transaction Execution Approval Language), facilitate transaction execution and approval. They provide solutions for both global and local storage and can be combined with other Algorand technologies like atomic transfers and ASAs.

The Algorand Indexer offloads the Algod process and provides a searchable, indexed Postgres SQL database. This makes querying and reporting on blockchain data faster and more responsive.

Reach is a high-level programming language and compiler that simplifies the development of DApps by focusing on business logic. It handles contract storage, protocol diagrams, state validation, and network details, allowing developers to deploy solutions to the blockchain efficiently.

Russell Fustino
Russell Fustino
21 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
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.

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.

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

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
Webpack in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
Top Content
In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

Workshops on related topic

Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
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.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
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.
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components