Build Web3 apps with Javascript

Rate this content
Bookmark

The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for JavaScript developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”

Learn more about the Hyperverse here.

We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have JavaScript experience.

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

FAQ

Hyperverse is a community-built, open, and audited platform of modular on-chain smart contracts for all major blockchains. It simplifies blockchain development by allowing developers to build Web3 applications using familiar languages like JavaScript, without needing to write smart contract code themselves.

No, you do not need to know smart contract coding to use Hyperverse. The platform is designed to allow Web2 developers to build Web3 apps using JavaScript, leveraging pre-built smart modules for various functionalities.

With Hyperverse, you can build various types of Web3 apps, such as NFT minting sites and community-based platforms like Tribes, where users can create, join, or leave groups. The platform uses JavaScript for all front-end development, simplifying the process for developers familiar with Web2 technologies.

In Hyperverse, once smart contract developers create smart modules, they are sent to registrars who validate their documentation and metadata. After validation, these modules are reviewed by auditors who examine the code for security and reliability, staking tokens as a form of assurance and creating an insurance layer.

Yes, Hyperverse enables you to build Web3 apps without any blockchain-specific knowledge. By using JavaScript and accessing pre-built smart modules, developers can focus on the application's functionality rather than the complexities of blockchain technology.

To start building a Web3 app on Hyperverse, you need basic knowledge of HTML, CSS, and JavaScript. The platform provides all the necessary tools and libraries to connect and use smart modules like building blocks, simplifying the development process.

Hyperverse offers several benefits for Web3 development, including ease of use, no requirement for smart contract coding knowledge, and a supportive community. It also provides a modular approach, allowing developers to easily integrate various functionalities into their applications.

Hyperverse ensures the trustworthiness of its smart modules through a rigorous process involving community registrars and auditors. Auditors review the modules and stake tokens on them, providing an insurance layer that boosts trust and reliability.

Shain Dholakiya
Shain Dholakiya
49 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hyperverse simplifies blockchain development by providing modular on-chain smart contracts for all major blockchains. Fungible tokens are interchangeable, while non-fungible tokens have unique characteristics. Developers can build Web3 apps using JavaScript libraries and connect wallets using RainbowKit for UI. Interacting with contracts is done through imported modules and the Hyperverse provider. The ERC721 smart module allows for NFT minting and token transfers. The Hyperverse documentation provides step-by-step guides for building Web3 apps and integrating modules like stake and rewards. Joining Discord and fast camps are available for support and learning opportunities.

1. Introduction to Hyperverse and Web3 Development

Short description:

Hi, everyone. I'm Shane, the developer advocate for Decentology. Today, we'll talk about building Web3 apps with just JavaScript. Our mission is to onboard 10 million devs to Web3 using Hyperverse. Hyperverse simplifies blockchain development by providing modular on-chain smart contracts for all major blockchains. It allows web2 devs to build apps without writing smart contract code, using JavaScript libraries to connect and build Web3 applications. Hyperverse is like NPM for smart contracts. You can build Web3 apps with HTML, CSS, and JavaScript.

Hi, everyone. I'm Shane, and I'm the developer advocate for Decentology. And today, we're going to be talking about how you can build Web3 apps with just JavaScript. So, no smart contract code knowledge needed at all. And that's exactly what I'll be showing after this PowerPoint. So let's go ahead and get started.

So first, our company, we obviously love developers. So we make products that make their lives simpler, which is exactly what I'll show you today, which will be the Hyperverse. So our mission is that we want to onboard 10 million devs from Web2 to Web3. So obviously, you guys will be a part of that mission. And then our product, which I'll talk about even more after is Hyperverse, which accelerates and simplifies your blockchain development journey so that you don't have to worry about all the blockchain specific stuff.

So our agenda for today, I'll go over a little bit about Hyperverse and then go into some blockchain and crypto basics, and then start building some Hyperverse dApps. So I'll show two examples. One will be ERC-721, which is essentially an NFT. So how you can create an NFT minting site using just JavaScript. And then Tribes will be the other example, which I'll get into as well. So let's go ahead and get started.

So what is Hyperverse? So Hyperverse is a community-built, open, and audited modular on-chain smart contracts for all major blockchains. So I know that's a big blurb and a mess, but I'll break it down. So, you know, today in the web3 world, if you want to build an application, you need to build a smart contract layer and then as well as the client side application. Now, obviously for smart contracts, you would have to pick up a whole different coding language, whether it be Solidity, Cadence, whatever blockchain that you want to build for. But also it's a totally different paradigm than the web2 world, right? You have to think of code being immutable. You have to think of storage costs, all these things that are totally different than the web2 world. So we wanted to make it super simple for web2 devs to build apps without writing a single line of smart contract code and write with something that they're familiar with, which would be JavaScript.

So here would be an architecture of the hyperverse. So let's just break it down into three sections. So first, we would have smart contract developers who would build what we call smart modules. And essentially, these smart modules are just packaged up a single purpose, you know, on chain contracts. So they're all meant for, you know, single functionalities instead of having a full smart contract doing multiple different functionalities. And then once the smart contract developer has built these smart modules, it would then be sent off to our community of registrars, where they would actually validate the smart module, making sure that they have the proper metadata documentation, examples, whatnot in them. And then once that is validated, it would then be sent to our community of auditors. So this is where the auditors would actually look at the smart contract code and make sure that, you know, there's no funny stuff going on in there. Make sure that they trust this code and they would actually stake their tokens to confirm that, hey, this is trustful. So you can think on the JavaScript side of things, you know, if they're looking at a bunch of different smart modules, they see one smart module that does a similar functionality to another. One of the smart modules has, you know, 10, 20, 30 auditors that have actually staked tokens on them. Obviously that one would be, you know, more trustful and they would go and use that smart module. So this stake actually acts as an insurance layer as well, just in case something does occur. So now for most of you guys, the Web2 developers would actually just use our built, you know, JavaScript libraries to build these Web3 applications just by connecting their smart modules, kind of like Lego blocks, right? So you're choosing which functionalities you want, and you would put them into your Web3 application and built it how you wish. And, you know, if this sounds familiar to you, it's because it is, right? So if you have a payment layer in Web2World, you wouldn't, you know, go make it from scratch obviously. You would just use Stripe. So you'd use that functionality, submit it into your Web3 application, and use that. And if you have, you know, if you need notifications, you would use Twilio. You would take that API, use it in your application how you wish. So that is very similar to what is happening here. You would have a bunch of different smart modules, all with different functionalities that you can use throughout your application to build and connect and update stuff on the blockchain. So what we are essentially building is the NPM for a smart contract. So it is really that easy. And if you're wondering now, or if you're wondering before, you know, do I even have the proper skill set to build, you know, Web3 applications, and I'm here to tell you that you do. You absolutely do. You know, all you need to know really is HTML, CSS and JavaScript with the hyperverse.

2. Blockchain Basics and Crypto

Short description:

You can tap into smart modules built by smart contract developers and build client-side applications using these modules. Blockchain basics include the difference between web2 and web3 architectures and the workflow of blockchain transactions. Private keys are derived from random numbers and should not be shared, while public keys can be shared. Blockchain accounts are derived from public and private keys. Wallets are tools for securing private keys and signing transactions. Blockchain fees, also known as gas, include transaction fees, gas prices, and transaction speed. Transactions with low gas may be ignored.

You can just tap into the smart modules that are have already been built by the smart contract developers and use that as you wish, and built the client-side application with several different features using all the smart modules.

So now let's go ahead and get into some blockchain basics. So here we have a diagram of the web2 architecture. So we have someone trying to access a website on their mobile device or desktop, which then a request would be sent to the web server, which then would be sent to the API server, which then would be sent to the database server. Once this data has been accessed, it would then be sent back down the line to the API server, web server and then show up on the user's page, whether it be on their mobile or desktop or whatever.

So now let's look at the web three application. So now we have a user trying to access a decentralized application on their mobile or desktop device that was built using HTML, JavaScript and CSS. So what happens is that that request is then sent to a computer or a node on the blockchain. And then once that data has been accessed, it would then appear on the user's mobile or desktop device.

So now we have a quick high level overview of the architecture between Web 2 and Web 3. We can get into some of the blockchain workflow. So here we have a diagram where someone requests a transaction, which is then broadcasted to a network consisting of computers, which are also known as nodes. And then once these nodes validate the transaction, it would then be sent onto a block of data along with other users' transactions as well. And then it would be that whole block would then be attached to the blockchain where it stays forever. It's permanent and cannot be changed. And that is when the transaction would be complete.

So now let's get into some crypto basics. And the first thing we should go over is public and private keys. So how the private key is derived is using some large random number with some fancy, mad stuff which we won't get into for simplicity's sake. But the important thing to note is that private keys are not meant for sharing. So this is where your private key gets exploited by someone or you accidentally sign a transaction, which is actually showing your private key or anything like that. This is where hackers can technically get in and basically do whatever they want with your wallet if they have your private key. So it's very important that you do not share a private key.

Now, how your public key gets derived is using a private key with some even more fancy math stuff. But it's important to note that your public key can be shared with anyone if you wish. And it's also important to know that, you know, obviously, blockchain accounts are very different than user accounts in Web2. So you can see here that, you know, blockchain accounts are derived from, you know, your public and private keys that are randomly generated. So here would be a quick diagram of Bob and Alice who are, you know, signing in and receiving messages. So this is kind of like a workflow diagram. So here we have Bob who creates his message for Alice. So you can see that Bob uses an app to sign his message with his private key, which creates a signature and sends it to Alice. So it's important to know it's the signature that is being sent to Alice. It is not, you know, his private keys that is being sent to Alice. So then once Alice receives Bob's signed message, Alice can then use the app to verify that this message does in fact belong to Bob using his public key. So this is where Bob can send Alice, you know, their public key, and then Alice can put the public key in and be like, OK, this message does belong to Bob. So now that we had a quick overview of signing and receiving messages, it's time to talk about the tool that's actually doing all this, which is wallets. So it's important to know that wallets are only meant for two things. It is to secure storage for your private keys and a tool to sign transactions. So, again, those are the only two reasons that the wallet would be there. There is no money in the wallet. There's no crypto in the wallet. It's only there for those two reasons, securing storage for your private keys and the tool to sign transactions.

So now that we're talking about transactions, we can get into blockchain fees, which are often called gas. So I'll go into the three main concepts, which would be the transaction fees themselves, the gas price and how it fluctuates, and then the transaction speed. So the transaction fee itself, often called gas, you can actually specify which amount you wish, but transactions with very low gas are likely to be ignored. And then you'll see how speed will also differ in the gas price itself as well. And then the gas price itself, you're probably wondering how is the gas price determined? So it is very dynamic and varies accordingly to how many other people are submitting transactions at that specific time. And then the transaction speed itself, transactions with higher gas fees are likely to be processed faster than than those with lower fees. So obviously, then if it's too low, it could be ignored, like I mentioned earlier.

So now we can talk a little bit about fungible versus non fungible tokens.

Watch more workshops on topic

Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 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
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
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

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.