NEAR Protocol 🛠️ How to Decentralize Any Frontend Using BOS - Kendall Cole

foreign [Music] I'm here to tell you guys how to decentralize your front end for this hackathon and potentially Beyond and we're going to talk about how to do it with a tech stack that we're calling the blockchain operating system so just to kick it off like what is the blockchain operating system so two main things one it's this lit common layer for discovering open web experiences that's compatible with any blockchain which is a part of it that we're really excited about and then maybe even more directly for those of you who are developers in the room probably most of you it's a tech stack for building fully decentralized applications and most importantly for this for this talk it's about decentralizing your front end uh so the main reason we decided to build boss is to solve a few different problems uh so onboarding and distribution are common ones compliance is one that's becoming a lot more important especially if you're building Financial applications uh complexity another one for developers you know there's there's a lot that comes with building a front in these days and we aim to make it easier uh and then we're really excited about bringing cost platform to support to this ecosystem and really just you know letting blockchains collaborate in a more compelling way and so the boss stack is a few different pieces we'll mainly be talking about user interfaces and blockchains today but we also do have some products for onboarding mostly around users being able to use blockchains without actually needing an explicit wallet if they're new to their crypto Journey or using a crypto application they may not have a wallet and they may not want one just yet and we do have some products for that but but less relevant to this talk um and here's kind of a snapshot of a few of the different pieces that fit into the boss stack uh again we have what's called like these gateways which are going to be basically interface spaces that enable users to interact with the front ends of various decentralized applications like say Ave uniswap liquidy and others and the code for these will be stored both on the near blockchain for the front end and then uh on say the ethereum blockchain for the smart contracts um so one of the biggest things we aim to solve when we set out in building the blockchain operating system is that typically developers are forced to make a choice between distribution and decentralization when it comes to their front end you're way better hop-flight kind of baking your front end into a few existing applications or even hosting your own front end and promoting the hell out of it if you're trying to get distribution uh if you want just decentralization though those are kind of counter the things that you want fortunately we think we have a way to kind of thread the needle and actually give you both increased distribution while also giving you even more decentralization you would have had if you're hosting your own website on like versal or something like that so to make it very clear and exactly how it works let's imagine that you guys are developers and first you're going to deploy a smart contract to ethereum and now you need somewhere to deploy your uh your front end and let's say you choose boss and you choose linear blockchain so what you're going to be doing today is you'll actually be deploying basically like reacts to jsx code like these can components you'll make a component for your adapt that you will deploy to the near blockchain and then users will be able to interact like access that interface could conduct some actions that will uh that will then result in a transaction and then they can send that transaction to ethereum which means they can have basically they're interacting with two different blockchains in one experience they don't necessarily know that all they care about is accomplishing their goals um and a component of this we're really excited about is that since you will be able to deploy your code on chain what this means is that dials that are currently managing their smart contracts can now also manage their front end all unchain so we're hoping we can see it like a world where every single dial will do this like if you have Smart contracts you at least have some basic user interface or even a very full feature user interface that you as a dial will maintain an upgrade that like reflects the usage of their smart contracts um to make this a little bit clearer we'll talk about it from the user angle so let's imagine that we have a user the first step to use boss they're going to navigate to some kind of interface refunding this could be metamask this could be zapper on on iOS it could be near.org soon it's going to be orbit which we're pretty excited about and it can also be this site called boss UGA that's basically like a doc site that we have so by going to any of these they can access all of the same applications so then they're going to select adapt that they want to use these are four examples we have available today Ave one inch uniswap or liquidy let's say they select Ave so after they select Ave then the uh the Ave front end code is going to be loaded from the near blockchain so it'll be an RPC request to the near blockchain which should then return the jsx and that jsx will be rendered in a specialized virtual machine that'll be running on one of those different uh gateways that the user first navigated to and this virtual machine is designed to basically be a strict subset of JavaScript that has some extra security guarantees so that you know if it is nearer.org like and there's private keys in local storage for some reason those are not able to be stooped easily that's the goal um so then like they've loaded the front end they're doing their thing they're like I want to deposit 100 usdc into Ave great forms a transaction because like they're just using now they're just using a front end and then it hits the ethereum RPC sends the the transact to ethereum they then get like you know some kind of receipt showing them that the transaction was mined get a message saying that they were deposited it updates the front end now they're happy and they've used a fully decentralized uh or you know cross-platform application what's really cool if you want to get really paranoid with this which we like to do is that Gateway in the first step can be self-hosted and it can be self-hosted very easily you can run this in an electron app and you know soon we'll have that as an access point or I think even more commonly we'll just see people using their typical Mobile wallet and they'll be able to access the application kind of skipping DNS entirely skipping going to this front end entirely just interacting with two blockchains at most one blockchain if it's fully built on near or two block chains if the front is on here and then the back ends on ethereum or an L2 or Solana or whatever it may be um and the best part for you guys is that it's super easy to get started so there's basically five steps if you guys want to like want to build with this today or even get some things running you can go to near.org you can use the search function search for these five different applications uh you can click Fork you can make changes and then you click save and that save is actually going to be a transaction to the near blockchain it's super cheap should be a few cents if anyone in here needs some near come talk to us at the near Booth we'll get you guys some some near and you'll be on your way and then the other aspect of this that we're really excited about is that every single component that you build can be composed with other components the same way if you're familiar with react where you can have higher order components and you can compose components you can pass State and props between them you can do that with with boss with a bunch of different components like there can be 10 different components that are deployed I gave an example of a page uh for polygon that shows like a few of their different applications all of which are available on boss and then it shows an interactive uh swap component there that's also being rendered in the same page and this is actually going to be like seven different components all of which are composed together into a single experience which is really cool um so now on to the fun part which is the demo and we'll actually walk through how you can access boss components and how you guys can get started for this hackathon so this is actually a demo that was created for each soul and I think what's fun is it's gonna make be a very easy way for us to show uh how you can get started so in this demo there's basically four different components that are gonna be shown you see that little widget line that's basically a compo a different component that's being loaded into this higher order component um so some of the things you're going to get out of the box here is like the detecting the the network that the user is on that's going to be like the first thing that this component is doing um then you can detect like basically who the sender is going to be from State and we have some examples of how to do that you can load their balance whether they're youth balance and you can load their their state deep balance because in this case we're this is like a Lido component example like helping people stake their ethereum and I think it'll be even easier if we actually just go to this and show you what's happening so here here you can actually see this being rendered this is the Lido component and I can go up here and I can click Fork now we're seeing the code so users can actually do this they can view the source code in the browser same way you'd be viewing the source code for a um for like a smart contract on etherscan so they can check out I can't actually see it on my screen um bear with me somewhere in here we'd be able to see the smart contract but I cannot actually see it um maybe we'll let's just go to the actual light out contract it's let's see here here we go so let's Fork this one here you can see the smart contract so like a Savvy user would be able to actually check the smart contract go cross check it on another uh another website and be like cool I am very confident that this is going to actually uh send my e to the contract I want to which in this case isn't a lot of contract and you can easily change that to say the Lido contract for polygon and then I can just click save and it's actually just going to show me the state diff uh so this is like showing you like the code is that that's actually going to be saved to the near blockchain click save data I'll probably have to sign a near transaction Maybe oh I don't even have to yeah if it's below a certain size then you don't even necessarily like you don't necessarily have to save it uh save it on the on do a transaction in order to save the state diff um and then bam we're good to go and I can preview this I can preview it here so I can actually see what I'm doing and then just like hop back and forth between the browser editor or you can download a vs code extension that will make it a lot easier to compose your apps like if we have from the previous example we had that you can see here there's like these widgets that are being loaded the widget means it's another component so if you use the the vs code extension you can actually click into this and you can uh then see the component or like pull in the component so you know what it is that you're going to be interacting with um yeah and then if you go to neo.org you can actually use the search functionality here and find a few different components so we can look for Ave for instance the Wi-Fi is going to cooperate I think this is the one you can see this yes okay this is for Avion the polygon zkevm testnets where did my browser go here we go while that's loading we can oh there we go so you can see this is like another component that someone in the community built uh we can then go to develop and check out the details which will show us like who deployed it it'll show us like all the source code and then go ahead and Fork it and maybe in this case we'll want to like change the network that like maybe we don't want it to point to Ave on uh polygon zkvm maybe we wanna sorry guys I can't see it on my screen here but we can change it to point to like Ave on polygon or Ave on ethereum or whichever Network it's deployed on and then we can do the same thing and save it oh I hear it's over here or we can save this version of it locally this will be saved in the browser so you can just kind of like edit while you're while you're testing and then if you want to publish it and you can do the transaction so in this case I'm actually just forking it live demos all right let me just pull up the slideshow again cool there we go all right uh so just diving into some more of the technical details and showing you what we're doing here um so a lot of this right now this assumes a react dependency out of the box we're launching a version of the virtual machine that will not make that assumption because I'm sure plenty of you want to use other JavaScript packages um so right now we use props and state if you're familiar with uh with um how react works so like props you can pass between components you can also Pass State but state it can in this case will be more Global which means that you can just like store State between components um so here's an example of how you can use ethers so we inject ethers just by default right now to make it easy for developers to to get started so you can see here this is like basically doing a get balance function uh from ethers pretty simple to similar to what you've been doing before and then the result here will do a a state update um and then similar to like updating any sort of State in a component it like uses the the life cycle of react and this component will rebrender with the Steed balance to to whatever the user's balance is so that's an example of just like how State and props are going to work um similar kind of thing here I think this one's actually doing yeah the kind of uh smart contract call so you can see like you know it puts the you can assume here that we have like a lot of Contracting in there and then like encodes the data using um using like the the standard that ethers is expecting in this case like balance of and we'll call it and then it will then update the interface based on like the result of that transaction and then a very important part for everyone is building a front end you're going to want to style this component so uh by default we actually enable um oh no sorry this is an example of that uh composability we're talking about where you can have this kind of like other component pass pass the props to it um and yeah it shows an example of basically how to do that and then finally we have styling so we uh by default it'll let you use styled components um so it should be like a nice and familiar way for you to to include your style sheet so you don't actually have to like pull an an external style sheet you can just build into the component like similar like you would do in a lot of typical react components and that is what I after you get today so we do have uh some bounties here so we have 10K total in bounties I think it's split up between a first place prize of 3K two second place prizes of two grand and then three one two or three of 1K if you scan the QR code there you can check it out and you can also come visit us at the near Booth we're on this side there's also like filecoin in the graph right over there uh we're right between them if you have any questions and we'll be here all weekend um and yeah we still have a good amount of time left so I'm happy to answer any questions that anybody has about how this works all right yeah great question um so I guess like our goal here is that you can fully decentralize this right so there's a few different layers if you want to decentralize an app a blockchain application right like there's gonna be the front-end code and where that's going to be running there's going to be the smart contracts those parts are almost like the easy part the harder part is like well making sure that like if you need radical decentralization like I'm in a place where like they're a serious censorship then you're also going to probably need to run your own RPC and most applications these days have some kind of data layer hopefully it's the graph which fortunately is getting very decentralized but a lot of times it isn't and if it's not like yeah you need some easy way to access that data so like that's been a general big problem on most blockchains like at near we've we've worked with a lot of teams and created a lot of solutions to kind of make like just more easily indexable or accessible data available available to developers um but we want we basically want front ends at some point to like let users kind of Define their data layer to find their RPC to find their wallet and like Define each to the different parts of the stack um so there I mean yeah that part is tough like right now basically the Gateway is usually just choosing like an RPC provider they're choosing uh the data provider and making sure that like developers can essentially be agnostic to the choices that the Gateway providers might eventually make is is a bit of like an experience problem so that's one of the ones thank you Oh you mean like it millions of people are accessing like how many yeah so that's actually gets into that first question is like it sort of depends on which part of the stack we'll end up getting hit getting like essentially DDOS like it's uh I mean the near blockchain itself can handle quite a few transactions and these are mostly view calls so they're not actually going to be an updating state for users who are accessing it which means that it really comes down to RPC load so like we have we have a few applications not actually related to boss that send a lot of transactions to the network and so like there are some pretty battle tested RPC Solutions so like that probably is gonna do okay but depending on which one the Gateway like whoever's running the Gateway chooses that that might fail right that's a common one we see in blockchains that get kind of a lot of load as RPC fails like that could be a problem um the data layer in theory could be another problem like if if the app you're rendering the component you're rendering is making some or some maybe like hit the developer is like oh we didn't want to use the graph so we just built our own API and it's running on some like really small ec2 instance like that could then fail um or just like the Gateway itself uh if it's like again running on a small a small ec2 instance or something so it depends there are ways to do it like new.

org for instance like you you could it can handle a lot of simultaneous users but it's because like you know they was they built it in a way to anticipate that because they get a lot of load already there's like you know quite a few people visit that page on a monthly basis um but yeah smaller like smaller instances of each of those like could lead to lead to some failures but it is possible to build to build these things in a very resilient way these days maybe not like tens of millions of concurrent users but definitely like pretty substantial numbers especially for for this industry right now oh I see yeah I mean that yeah this is definitely designed more for like kind of like stat it doesn't be static but like Pages where like the dynamic loading is is data I mean you could use a different like it is just the front end code right it's just JavaScript like you could you could like stream content too maybe you're even streaming it from filecoin or something like yeah that would work fine this this isn't basically you shouldn't be using near to store videos for instance or something that would need to be streamed even photos uh near is kind of like a sweet spot where we because it's a sharded system like we can handle a higher state load than most chains can but it's not designed for like petabytes of data like file Quinn is right like a great solution for that would be like combining file coin to actually store the video using their new CDN solution to kind of like stream it and then like piecing it together and creating the UI can be done on using boss that would be like the my recommendation for that stack yeah so all on that what is the cost effectivenessa story God is fine here yeah so it's uh it's like one year per either 100 kilobytes or megabyte no maybe it's a megabyte um so it tends to be like pretty cheap for front ends like most front ends that I deploy and a lot of times like after you deploy the first version when you do updates it's just uploading the state diff um so it ends up being like usually a few cents for most front ends for something really rich if you store the images and do stuff like that it could get a little crazy but yeah I would recommend using other solutions for like the that media and then just using this for like the front end code like it is like Mission critical stuff right like people you want people anywhere to be able to access it like have those pieces there and then like the nicer like images and stuff like that can you know can come from from elsewhere yeah it's a good question so I mean the biggest thing is like yeah obviously if well our approach to scaling is like adding more shards uh we don't know how many shards we can add I think right now they're testing with 100 and that's working pretty well and we don't need that many yet um going Beyond there you know it probably there's some kind of like there are going to be some sort of limits that are hit eventually um but I think we've got like the reason that we chose sharding and took on all of the complexity that comes with that is that we believed it was a much more future-proof solution than a lot a lot of the the choices that are made um so we're confident we can scale for a while and I mean the other thing that happens like the price of near where to go up just like the price of eat goes up that can like manipulate the storage prices in a weird way so what we do there is like similar to ethereum he's like you just update kind of some of the uh the like assumptions that are made so that like the the real costs can can either stay static or go down even like whether and that could go the other way too like whether the price of near goes up or down we can kind of adjust the the static costs that is a great question the uh so the long-term answer will be absolutely the short-term answer today is unfortunately yeah you're gonna have to use the packages that we have sort of pre-installed and that's just because of the security assumptions of the VM but that is that is a common request and it's like one of our top priorities is to enable that so yeah yeah we we don't actually the problem we have now is it's like we have to kind of like add them manually and so we get a lot of requests and we don't want to we don't actually have to make that choice for developers so we are I think pretty close to the V2 of the VM that will allow you to import probably most JavaScript packages or at least it will be like way more like the choice of the developer rather than choice of us so yes soon you will be able to use Tailwind today you're gonna have to use uh style components unfortunately that is a great question um I don't have a great answer uh I would say yeah style components ether's JS you can assume I would look at a few examples um definitely check out yeah like Ave Lido uniswap like some of those just to kind of see some of the common patterns we'll give you an idea we should have a list though I will get on in making that all right thanks everyone