NEAR Protocol 🛠️ BOS: Decentralized Frontends Made Easy - Vadim Ilin

foreign [Music] and I'm engineered so I will have some live coding session in the end but today I came to present the the OS which is blockchain operation system I will show white how it works why will you use it and actually how it works so from the beginning we're all here because we believe in the same principles we want users to have their own data actually their own identity and obviously we want them to have their own decisions but right now we're acquired quite far from this point because most of our for example laptops or software applications are running on a large company servers and actually data belongs to those corporations and we're using bank accounts every day and similar as money is sitting in the bank and banks are doing whatever they want without money similar large corporations are using our data as himself actually so and the problem that they have these silent identities for example the reputation you build in one application doesn't translate the reputation in another application in this case for example Uber reputation and lift application have not has no link our Corporation can remove features they can increase some fees or maybe block your account block your data remove your social graph every day we have some news about new censorship corporations like Twitter Reddit they increase some downloads download trade limits remove API functionality and speaking about data leaks because all the data is sitting in one place and human eye making mistakes there are a lot of flicks and some potential problem of the data leaks so here well here it actually to fix this problem most of the of those problems we're doing crypto stuff we're building some amazing functionality and I have an example of being a game so if you have like three terms from this bingo game in your pitch dock then probably you will have some success in token sale or maybe a sound effective you will attract some liquidity uh actually you'll have some profit but the global our final Target is a mass adoption and there is no any clear plan how to bring actually a big amount of people to to our to our website applications so usual plan is like we are just building cool stuff then dot dot and then figures out that at one point we have uh millions or billions of users uh and web3 until now have a lot of has a lot of problems uh we have similar problems with the two with up to is this jointed experience uh our apps and networks has different identities and as far as we introduce new technology new layer ones new side chains neural apps it became more complex nobody knows how much accounts they have how much money they have for sure there is no any direct link between different chains applications are not really decentralized because most of them are using centralized services imagine you have something like a asset management system and you connected a lot of wallets there and obviously everybody who controls this service they know like they can create this link what account do you do you own and you don't have any apps for this data actually and uh the biggest problem from my understanding is the lack of common Services which we used to have in web 2 for example search uh like there is now any simple way to have to to search on chain applications right now uh using Unchained services and for example modifications like if you want to find what what what events happens with your assets with your identity you you don't have this option but imagine say Twitter without searching notification there is nothing to do there but this is how web3 works right now and two like near is representing in our blockchain operation system which is common layer for browsing and discovering uh this new open web experience and actually it's compatible with any blockchain uh so near for a long time is doing not only like block self it's blockchain itself development it creates a lot of a lot of features to enable a simple on boarding now we have this fast OS we have uh login with biometrics uh uh we near prepared a lot of developer tools to create users and really versatile applications and make it simple and now we introduce this new idea of Discovery oil which will give access to make search and find new applications and attract user by giving them some chat and social functionality notifications uh and uh it's like if you will see the scheme like brings up the best parts from web 2003 can buy them together and build this as a only the centralized in the fullest decentralized way so this is how it works actually so BOS can it has a base layer of blockchain which is secure this layer data layer and this is the near blockchain or ethereum or any other blockchain seats on top of it we have a data platform our Engineers created a lot of like like we can we brought together different data sources think about it like a combination of interior different uh index of databases and they aggregated in a way which be easily accessible by any application uh uploaded on chain and on top of it New Concept which is Discovery layer uh this is instead of siloid webs websites it it has um fully composable components uh written on in a very simple language and uh they are giving the full website experience uh right now why near is doing it because it has very fast finality imagine some social network where you you have to wait like 12 seconds until uh your like will arrive to the destination it's not a really realistic uh New York has charging so it can really scale to billion users and we really have amazing functionality about account model uh with this functional access Keys uh with meta transactions with guest accounts uh I I will show it to you in the probably it will be impressed uh this is a concept how it works so we're all uh so there are a lot of gateways where you can access this BLS data you can do it through the browser for example near the torque the official website of near blockchain now is a this is BOS Gateway so every data every piece of data which you'll find there any every uh document like the developer tutorial or maybe help or something all of it it sort of from the chain uh there are Partnerships with different wallets different browsers for example in the browser you can put like call must slash slash and some component address that will load it for you uh and it it is actually a multi-chain uh as you can see here you can connect any account like there is a data abstraction layer a user will never even don't recognize which blockchain is using uh but if he has any wallet integrated injected into his Gateway he will be able to reach his data and obviously send transaction to the chain BOS handles all these infrastructure management handles identity routing uh it's integrated popular libraries to give the developer simple uh developer experience uh I have a screenshot of neurodotorps right now uh so it has as we see different uh social media some I made these screenshots several days ago and this if you will see like on the right panel I have a bit different design just because I composed myself I I like a no code experience I just put some videos which I prefer to have there uh we have quite a lot of users right now quite a lot of components so this is near like a near-based experience but I will show now a few room uh based development on Boss so great great part about it it has a lot of github-like functionality because you can see the code the source code of every component which you see NDB to use you can see the name of user who uploaded it when it he uploaded it and even she you can see uh for example the code div like what hit what he changed and you can roll back and for example use the previous version of front-end if you don't like a new version of frontent and uh for sure you can Fork any component if you don't like it you can introduce your own functionality and use in your way your own way or maybe submit this functionality to the initial uh component of also uh So speaking about ethereum we have different components like this is a component about to stick answers on using lidon you can you can find it you can actually see as a code how it works there is a injected azure's GS Library so you can read and write data in in a way you are familiar with there is also swap components so you can see how uni supports or some like pancake like quick stop with a lot of networks are connected there there is an Arabic component there is a balancer uh actually it's it's quite straightforward this is uh like a final theme how it works so user navigates through a different gateway to the to his user experience for example he can go to the Internet or using his wallet he selects which the app he wants to use then there is a request on your blockchain and near blockchain returns some compressed gs6 code it rendered in the virtual machine inside the browser into the final user interface so user can interact with it and as soon as he wants to send any transaction he is using his uh from this browser using his injected wallet he can just create transaction and sends to to the blockchain he is working with okay and I because for sure some crackers will will want to use actually and we have uh like price pool ten ten thousand dollars to for for hikers who will build some applications to use during this hackathon and I want just to show give you some initial experience how we can work so uh let me just open your.org so this is a social network uh and uh he usually it should be faster for example I can go to I maybe I can for the beginning I can just like something so it will be on chain transaction uh like it's it's if I will refresh you'll see my like there and if I if I go to the wallet you will see that uh it was a real transactions okay okay maybe it's a better example let me go to the to the profile uh so so this page what you see is a component is written as uh on a JavaScript and I can go to discover and sort of develop and use a code of this component so profile page let me open another screen so easy there is several tabs like components I built nft I own for example my followers uh I can go back and I can go to the source code of this component and uh uh for example I can go to the there is a dependencies what what we are using if I go to followers list I will see that there is a set of features which are uh running in a loop and for example if I will copy this one and I will create a new component right now create a new component and okay so now it's empty one and it will just return the hello hello world I can remove this and put for example this account easy I will replace this I will put a venue for example root dot near and if I will preview you will see just a account of one guy who is who has actually a name uh okay and maybe I can put some another widget I prepare just example here for example we have a public tax Tech tax like another scan you can put any tech for any address and we can put also example to see the text of root.nir so now we now you'll see his his profile as I showed before and his public talks and just Plato don't put this hard-coded let me put it for example I can create in the top cleansed account deji and I will read it from props is a react based way how you can get some values inside your components so like account ID or by default I can put Maybe some other some other component so now I'm probably will see that like yeah another guy but let me now save this code says publish it was a blockchain okay I can I can rename it data okay I'll be like that so this will be the name of my component so my component which is which shows a user profile and his public text now I send blockchain transaction and if I create another application and I will return Now widget I will put my so how it works first it is your new account then World widget and then that was the name of the application uh yeah so now it shows like like you see I create that application and like it as it is it can be used in another application is it and you can just create this wave of complexity as you like uh so somebody can just you just use it there and put his own date okay speaking about ethereum uh I haven't I created an example I don't have actually too much time I I can just go through I I made an example how you can use for example wrapped ethereum contract and see the balance of a current user and uh wrap and unwrap a Serial and using it using use different chains to to do this operation uh so at the beginning you need ABI you can use actually you can host it somewhere or you can use it for example I just used a Blog Scout you can it's using the using their API methods you can send any account address and receive apis there so then then you fetch you fetch this API in using slgs you can create an interface using this API and encode transaction to get balance of receiver so here I put receiver you see it again reads from this the browser which is from the srgs library which is using metamask or what is connector whatever uh so and this is my balance of this user in others interrupted serum sorry so and I put a button here uh which has a event on click and it loads function unwrapped with this unwrap button you can read the balance which you want to unwrap in a similar way you create a contract using srgs you provide token ID which is a contract of raptor serum and API which we read above using you you have signer from the metamask and then using this rapid serum contract you can run any method which exists in API in our case it's Swiss draw and you just put them out of what you want to withdraw so if you click this button unwrap it shows you the metamask and it it allows you to make transaction so now let's say we want to create the same application but for polygons kissing so this is the name of token Raptor serum on polygousync I will copy this address I will paste it here now it doesn't work because like this address does not exist on a certain blockchain but if I switch to polygon c network and if I switch to another account where I have some wrapped ethereum click with the first screen no it was this wrong account let's see I have here oh yeah so is it it loads my balance from Easy from the polygon ZK evm and again I can click this under button and it works now in the kevm like the same call the same functionality but as you can see just much smaller than transaction fee so when this is a power of this kind of development you can create like real blockchain agnostic uh applications uh I I put I had coded here the address but you can easily add similar code for example you just check chain ID and you can create and wrap wrap and wrap functionality on on every Network you want and if you will for example create any other application where you need such a functionality you can just use different code code from another developer there so let me now go back to SRM magnet I don't know and I want to show this so this is a lighter component you can you can again you can see the code and you can forecast and you have you have a swap component ah so sorry this is API it does works okay it sometimes it happens uh so uh the code is uh is there you can contact near boost with your questions and uh use this wave to handle a blockchain layer security layer and create this like Unstoppable applications I can give some example of how can this how this can be used for example imagine if uh application like tarnada cache deployed on mbos and then at some point some regulator is coming and trying to close it using the chord uh what can she do she cannot remove smart contracts from the blockchain because it is centralized he cannot write for the hosting provider because there is no any questions there is no any place you can send an email and ask to block this application there is nowhere domain name to block uh okay there is a way to contact Gateway operator and ask them to Blacklist some access to some URL but there are a lot of other block gateways remains and users can easily launch his own local Gateway so and in the worst case like the last Last Hope regulator can ask in a developer of this application to override his code with empty code but in this case users can just throw back to the block height because as you know the blockchain keeps the whole history for the whole time and just you can watch you can you can actually see the the UI even it was completely deleted from the current state of chain okay so if you have any questions yeah I will be happy to answer maybe as a boost yeah if I don't have time like uh so once once you build all that how how do you actually show it as a domain to end user like what like the lighter thing you just showed like what do you type into your browser so an actual user can yeah so how addresses uh what is the routines here uh if you if I go just to any application so this is a like this actually this can be configured by any uh Gateway owner this is the way how you can configurate a Gateway so first it has the name of the user who deployed this application and sends them the name of the uh like of the front end it rolls like that and if you want uh I can just copy it and open on a different Gateway it will have the same the same application yeah and if you don't want uh if I'm not wrong I can put something like embed and this is like without interface you can interpret this to for example iframe or I don't know whatever and just one thing to notice I also participate in a lot of hackathons and usually hackers are deploying their front end server on rear cell or something and just in innovate a small period of time you just this is blockchain oh sorry those fronts have disappeared because like they became unavailable is very cheap but it will it will stay forever thank you Vadim that's all we have time for appreciate that foreign