Building Fully Decentralized Full Stack Applications

Transcript

okay i think everybody's ready now for the presentation about building fully decentralized full stack applications um i would like to welcome the stage another debit and uh as you like those interesting facts about our speakers i'm going to tell you something about nader so when he was young he swallowed a sewing needle and they then he had to go to hospital and he's got a massive scar like this very scary okay people that i was shot or i was stabbed because it sounds a lot cooler than that so oh yeah that's a good story okay thank you enjoy all right hello everybody uh my name is uh natter dabit i

have been in web 3 for a little over a year and three months at this point um i've been working with the graph protocol on edge and node for most of my career and then about four weeks ago i joined a company called celestia and we're building the first modular blockchain network but i'm also really interested in the entire web3 tech stack and this is kind of what this talk is about it's how to actually build uh with a piece of that tech stack i came from a traditional background of being a software developer mobile developer and a cloud cloud developer in the web 2 quote unquote world for about nine years so i kind of uh typically take some of the mental models that i have from being a software developer in that space and try to apply them here because i think it's a good way to allow developers to

kind of understand how to build applications in this new different and kind of weird and hard to understand sometimes paradigm by kind of like taking some of these ideas and applying them in web 3. and this talk in particular is kind of how we can build out applications uh web three applications not only with the back end but how can we actually deploy a front end that is web three whatever that means and i'm hoping by the end of this talk you have a decent understanding of that and there's a couple of ways to do that but uh the the one that i'm going to be focusing on or the protocol that i'm going to be focusing on today is r weave so who in this room has used r weave okay

what about ipfs a lot more people right okay cool well there's quite a few things in common between the two but r weave is a protocol that allows you to store data permanently with a single upfront fee this is really really powerful when you start understanding what this means and how you might be able to apply this and leverage this and building applications in web3 so a couple of similar technologies that you might use that are really really great as well with different trade-offs or ipfs and filecoin the main differences are with ipfs and with filecoin and with pretty much any other type of storage you have this idea of needing to pay some type of uh concurrent or consistent costs to keep

your data available it's not like a blockchain where you can just save a transaction and then you can read it 10 years later as long as the protocol exists like we can with ethereum with ipfs and with filecoin at least as they exist today you have to have some type of pinning meaning that you have to kind of you know go back and make sure that that data is available or else it will go away and i think that's the main value proposition of r weave is that it offers this idea of a single transaction where you can just pay once and then you can expect to read that data for free forever and not only are we talking about data like when i and when i speak of data i'm thinking more like file storage so we're talking pdfs we're talking about videos and images and

stuff like that but you can also deploy entire applications in this manner so so imagine deploying an application to aws and not having to pay that hosting fee monthly or weekly or whatever or it's monthly or yearly or whatever that would be or using one of these hosting providers not only that if you don't pay that fee your application goes away but with our weave it's there forever so you have this idea of applying this idea of a hyperstructure which i'll talk about later which was introduced by zora we're actually introduced maybe before that but made popular in web 3 about zora and how we can apply that to building full stack applications so the definition as given by our weave is it's a it's it is powered by a scalable blockchain-like structure that uses a new mining system and a

sustainable endowment to ensure the availability and permanence of arbitrary storage data um and in the endowment is really interesting when you kind of try to understand how this actually works you need some type of incentive mechanism for the different nodes in the network to continue serving this data right and when we think of an endowment in the traditional world you might think of something like an endowment for a college where you say i graduated from this college and i made some money and now i'm going to give back to the college and they don't just take that money and spend it they typically invest it or put it in some type of mechanism that returns money and therefore they're able to kind of like continue having some type of revenue i guess to to continue making use of that money so they have that this built into the

protocol itself so when you pay that transaction that money isn't just going to someone's wallet or a miner it's actually a part of it goes into this endowment so in the future when people run nodes to serve this data that data is made or the people running the the nodes are able to get paid for serving that data in the future um their consensus algorithm is uh environmentally friendly it's something called succeed proof of random access um and it is a you know their own i guess somewhat new of an idea of a consensus algorithm that's different than maybe what we're used to used to with proof of work or proof of stake but they introduced with are we this idea of the perma web and i really love the idea of the perma web because it

makes a lot of sense and it's something that we've just not grown used to we're just so used to knowing that if we deploy an application that if something like happens or goes wrong our application's just going to go down and we're just okay with that right or maybe i deploy like my own personal website and uh five years later i want to kind of go back and read it i can pretty much assume that it's not going to be there unless i've continued maintaining it and hosting it and paying for those fees but with the perma web you have this idea of permanence that we're used to with the blockchain but applied to file storage and applications so we can just deploy something and expect for it to be there and and and more importantly we can also make them accessible via dns so i can say www

and i can have my perma web app deployed there and uh obviously i have to keep up with my dns but let's say i don't pay my dns that application is still accessible by the i by the r we've hash similar to an ipfs hash so permaweb apps are full decentralized web applications deployed to and hosted by rweve uh the limitations with permaweb apps is that you cannot do server side rendering so you can't do stuff like php applications or whatever most of these are going to be html javascript and css but the great thing is today we have really really robust and great tooling and great frameworks for building out single page applications so you can use obviously something like react vue or something like that you can also use something like next.js which

adds a lot of additional features even including routing and then you can actually export that as a single page application and deploy that to rwev so this is kind of like to me a very powerful part of the web3 tech stack being able to have this option and again this is just an option i think when we talk about all the different web3 technologies and you know how we can conceptualize where they fit in it's always about trade-offs like you shouldn't say okay this exists so i'm going to use it you should say oh this exists and i understand why it exists and i will use it in this scenario or this circumstance so applications or perma web applications live independently inside the perma web governed purely by their own code once launched a perma web application cannot

be modified by anyone and can be used by everyone permissionlessly so again we're taking this idea of what we've we've been used to with the blockchain and applying it to applications web applications and what's interesting about this is that not only can you deploy your application you know this way but you can actually have logic api calls and blockchain interactions built into the client so not only are you querying data but you can actually mutate that data they're not mutating you can actually append new data to some type of query for example and rwev also has an indexing system kind of built in so you can actually do graphql queries and do filtering and things like that so that's a really powerful thing that we're going to go over in my demo

in just a moment i mentioned hyper structures and i really like this blog post in this really well thought out post or whatever you want to call it that was written from the folks over at zora and they kind of just re-iterated and kind of tried to dive into a little more depth around why protocols exist and why they're so powerful and they kind of use this term hyperstructures which isn't really new but it's new i think for branding what web 3 protocols are and they gave the definition that web hyper structures are crypto protocols that can run for free and forever without maintenance interruption or intermediaries so how do we build hyper structures well we need we need web infrastructure and we need

the type of like infrastructure that exists in place to be able to build these things and i think in the past we had the ability to build hyper apis hyper back ends which would be ethereum and anything else uh future facing from that that might exist five or ten years from now where we can like save and read data but we weren't really able to have that type of hyperstructure for file storage or for front-end application development so i think that's kind of where arweave is one of the first companies or protocols or teams whatever to kind of offer that and i think that we're going to hopefully obviously see even more innovation in this space and more people building these types of protocols for other types of storage they list a few different

characteristics of a hyperstructure it's unstoppable it's free it's valuable it's permissionless it has expansive fees meaning the fees that go into the network essentially help continue to be distributed and power the network incredibly incredibly neutral and uh positive some and i would recommend checking out just google hyperstructures zora for the entire blog post it's really really cool uh overview now how do you actually build these types of applications well there's a few different pieces that i kind of labeled as the permaweb stack so you have rwev which is the protocol you have gateways which allow you to interact with the protocol there are a couple of public gateways that are given to you and you can also run your own gateway you have not only the ability to read an

individual hash which is great which is what we've always had maybe with ipfs but you also have this ability to tag data and then make it accessible via graphql queries with arguments meaning that if i save 100 images and i want to go retrieve those images i don't need to keep a list of all 100 images right i can actually tag each of those images with my name and then i can query that graphql endpoint which is an are we then point and get all of those uh images back that were only mine and i don't have to keep up with any additional images that are added as long as they're tagged with that um you're essentially again having almost like an indexing system that's built into the protocol so you don't have to keep up with this in

some type of centralized manner also graphql is just a really great querying language for building you know modern applications and it's more performant than a rest api if you're building uh low later in places that that have to deal with like low latency i guess you could say and then another area that i haven't really explored that much but i've already started using some applications that are built on top of it it's this idea of smart weave and we're going to go over all those different pieces real quick i mentioned gateways are similar to almost like rpc providers in the blockchain space where you have a way to access their network a gateway just gives you a gateway into the network it's a content delivery mechanism i guess you could say to the

graphql is a querying language that's similar to rest that allows you to define exactly the data that you want back and also pass in arguments for filtering and sorting and things like that smartweave the definition that they give is a simple smart contracting system allowing you to build incentive incentive design elements into your applications smartweave refers to a range of possible components for you to choose from and including different programming languages caching mechanisms execution engines and more and with smartweave you can actually write your smart contracts in javascript and i thought that was pretty cool coming from the traditional web world where i am a javascript developer for the last nine years or so so how do you actually interact with our

weave applications that you end up needing to help pay transaction fees in the way that we have in the past and this is less around the use case that i'm talking about for deploying an application and making it accessible and readable for everyone from everyone because obviously you don't need a wallet for that but let's say you wanted to build some client application that allows a user to send a transaction similar to how we might do with metamask so let's say they want to add a new post or something like that well in the past you might have used something like rconnect which to me was a really really not good experience because with rconnect you actually have to have r weave tokens and to get rw tokens it's you know a whole new ecosystem and you actually have to like live in certain parts of the world to be

able to even get them from exchanges and to me it was kind of a deal breaker for building front-end applications with thor weave you can also you can always obviously build server-side applications and provide the tokens and subsidize that for yourself but what if you want to have an open front end for other people to build on bundler is something that came out a few months no it's been longer than maybe six months or so ago that i became aware of it at least and it allows a multi-chain uh integration with r-weave meaning that you can use any type of your main tokens like um i guess matic or you could use avalanche even solana ethereum obviously which you probably wouldn't want to do but um you know things like that uh any low cost network like optimism and arbitrary are supported and you can also just use

metamask so you now have a way to interact with these applications just using what you already have in your browser probably or in your application uh for client-side integration and one of the reasons that there's a couple of reasons that bundler also brings a lot of really great benefits to the ecosystem in addition to being able to use native tokens that you already have we have this idea of chunking that is a limitation to the r weave protocol itself in my opinion because no matter how much data that you save you're paying for a 256 kilobit chunk meaning that if you just save a string of text you're saving that entire uh and paying for that entire transaction uh but with bundler it actually bundles the transactions almost kind of like how a rollup takes multiple

transactions and posts them together so therefore you only charge for the data that you're saving and um and that's about it so it's up to 25 times cheaper and it's also up to 3 000 times faster so not only for reading but also writing data it's actually a lot faster with bundler so bundler kind of like to me opened up the ecosystem for me as an application developer to take it more a little more seriously so how can you deploy an actual web application to the perma web like a single page application a couple of different ways you can use cli tools like r drive arcb or bundler all those are clis that you can use but there's also starting to be an ecosystem of different front-end services almost kind of like next.js i'm sorry like like versailles

or netlify and aws that allow you to kind of like do all this stuff under the hood so one of those is spheron and spheron allows you to just connect your github repo to any application and it deploys it and you can add dns and it even gives you a custom dns name off the bat i'm going to do a quick demo because i only have less than one minute to go i have this application running on localhost 3000. we built this yesterday in my workshop and we have this admin panel and i'm going to go ahead and refresh and here we're kind of prompted to define whichever token that we want to interact with so i have matic avalanche arbitrarium set up so i'm going to choose matic and we're going to connect our wallet just just like we would if we

were using you know any type of typical web3 application so i'm gonna go ahead and sign this transaction and this is gonna go ahead and sign in and in the web browser we now have access to this instance of the web uh bundler or the bundler instance i guess you could say for us to then interact on behalf of the user's wallet i wanna go ahead and upload a video and we want to save this to the permaweb i'm just going to look for anything within mp4 there we go okay cool all right now we're gonna go ahead and upload this it tells us how much it costs to upload it's point zero zero three matic um that's gonna be like one-third of a cent i guess something

like that or maybe one-sixth of a cent and once we've uploaded it we get this nice uri that's given to us and this is saved forever and i just have it linked there just for us to view it and maybe we'll click on it in just a second but i'm going to give a title of barcelona and then hello world is the description and then we're going to save well let's go ahead and open this video up so it looks like our video is saved now we want to save a transaction with metadata so we're saving the uri to the video we're saving the title in the description and under the hood i'm actually setting a other another description that's being passed in as a tag that will allow us to query that and

i just name this some random string so this is some unique app name blah blah blah bc so meaning any time i hit the graphql gateway with that argument i'm gonna only get the videos back that i have saved so i'll go ahead and save this video the app will reroute me back to that main page after it's been uploaded and now we have our video being served from the perma web and if we wanted to then deploy this application i'm going to go ahead and refresh and we'll see that that query is coming through if i wanted to deploy this forever i would just run the cli command arcb or bundler deploy it i would have that transaction and then this application would be literally running forever and i think to deploy an application like a single page app or something like that it's just like a

fraction of a fraction of a cent or so it's really really inexpensive to deploy like single page apps and it's it's pretty cool so that's it i i really apologize for being a little late for this talk but i appreciate you coming through i also have a full end-to-end workshop if you want to build out this application that we just demoed it's under my github at github.com dabit3 full stack rweave workshop it should be the second first or third repo in my in my github and this was built and updated specifically for east barcelona we we went through it yesterday with a group of folks and this is a great way to kind of get up and running with this tech stack and i am over about a couple of minutes so i'm going to go ahead and

wrap this up so i just want to say thank you everyone for coming to my talk if you have any questions please come and find me i'll be right out there talking to one of my friends that i'm already going to be meeting out there but i encourage you to come hang out if you would like to thank you don't take the mic off you