NEAR 🛠 Building Composable Decentralized Frontends for Ethereum Apps - Illia Polosukhin

foreign [Music] co-founder of near protocol and the CEO of pagoda and today I want to talk about how to build decentralized composable front-ends and kind of really accelerate how fast you build and how fast you can actually ship things to your users so just a little bit about near we started in 18 as a blockchain a layer one we launched in 2020 and since then we've really been trying to empower developers ahead of me and kind of all of our group is really believes that developers entrepreneurs makers are one to actually bring web3 to the users and so we want to give the best tools to everyone who's building and so throughout 2022 we've been building a lot of developer platforms kind of data stack and a lot of other things and this year we've kind of positioned this like set of tools that we're building as blockchain operating system right and this is all in the goal of achieving billion users in Web City broadly so what is blockchain operating system it's really a common layer to discover and experience all kind of applications in Open Lab and Main and important thing especially for this is compatible with any blockchain so what problems is it solving first of all we all know like I mean here we are in web 3 because we want to solve a lot of web 2 problems right the censorship of web2 the problems is user retention and Discovery the process is launching on App Store lack of data ownership lack of privacy at the same time web3 itself comes with a lot of challenges right we have a very fragmented ecosystem right each blockchain has its own kind of set of applications and have very little in interconnectivity discoverability of new applications are extremely hard right finding like what actually apps are launched and like live real not trying to rug cool it's pretty hard um re-engagement right somebody came in started using your apps you have no idea how to reach them again you have no idea how to you know bring them back when a new feature launched or the bug that they stumble upon got fixed and there's a set of common problems right just like the as the systems grow the complexity of building and operating them is growing as well so bulk Chevrolet system is really trying to address all of this in a cohesive way and gives you tooling to do this and do it all in decentralized and use your own way so kind of the way it does it by having a set of layers and blockchain layers middleware user interfaces and kind of onboarding wallets layer so diving in a little bit deeper what this means is you have kind of blockchains on the on the bottom right so this is where your identity your kind of money and ownership the kind of the trust of the whole system with building web series later but blockchain is not everything right it's not and if it you cannot fit everything into that and there's a whole layer of indexers streamers notifications in a search relayers that needs to exist to really provide the experience that we're all used to from web2 right so this is what we call data platform this is where kind of all of the abstraction of the different blockchain happens and at the same time kind of all the common services for really powering kind of you know normal user experience right you you should be able to type in you know that you want to play a game and find what are the games in that City exist right so that this is where kind of this layer lives now the new layer we introduced we call it Discovery and this is actually a different way of building applications front ends in itself and so the way it works is you actually take the front end and if component dies it right similar how you do it in react or in View and you put each component independently on a blockchain so in a way what we did with front end here is what smart contracts did was services with web services right we put them on a blockchain we made them uncensorable Unstoppable always accessible and very composable right because now each Atomic piece right the swap an nft a feed of social posts can exist on its own and can be embedded anywhere and and I'll show how all this works but this is just a protocol right all of these are protocols that really Define how data flows and how it shows and you need a place where all of this has been combined and so what we call those things gateways so Gateway is something where it pretty much you go there it's either an app a website a browser um or a wallet and this is where it loads all of this right and shows you exactly as a user what you want and depending on your account allows you to interact with it right so this can be kind of a variety of things and it still works with any of the you know wallets like metamask quality connect it can be wallet itself that does it right you can actually have Rich experiences inside the wallet that are rendered directly from blockchain now I'll show how it all works so conceptually what we're trying to solve here is that when you're choosing to build in web 3 you kind of forced yourself into having very little distribution right like in verse 3 we're all trying to find more users okay and the users in silos across the ecosystem and so what we're doing with blockchain operating system is really removing this trade-off right we're saying decentralization actually needs to more distribution because there will be more places where the same experiences the same applications will be accessible now instead of uni swap just being on uniswap.com or dot org if now is accessible on every place on every wallet in any app that supports this blockchain operate system and it's understood resistant isn't like it's you know mobile lab you can run it locally on your laptop it's you know data belongs to the user or the developer who builds this uh and you have kind of this new layer of discoverability and kind of common user base that spans across all of this applications what does this mean for kind of Enterprises right existing applications well it allows you to grow existing website or an app right you can take existing application or a website that you already have and you can embed all of this website experiences directly into it you don't need to kind of hire you know a huge website team to build this rebuild your website you can just embed that directly into it's easy onboarding for users and it's really like kind of smooth experience that you can integrate with your already existing web tool and it's multi-chain right so you don't need to choose like oh I'm going to build a mirror I'm going to build an ethereum but there's a city I'm going to have high fees like you can actually use all of the like the smart contracts from the right chain at the right time right I need an ft that already exists on uh on ethereum I can you know throw for example loyalty points on near and I can use all that with one in UI which doesn't really care which smart contracts are used at what time right as a user for developers right for you here in a room it's kind of build once and use everywhere right like you build this component once and now it's accessible everywhere ukonian JavaScript and you can clone from thousands there's like over 4 000 components already since we launched this like two months ago that you know you can just really start reusing it's distribution right again the problem in web3 that we have like we all build really cool stuff and then people are not finding not using it so here people can find it to search people can find it so social you can start sharing it and like users already on boarded street whatever Gateway they're using they don't need to like re-log in trust again that this website is not trying to steal all my money and no first thing no infrastructure you just launch once and start using and finally for individuals it's it's a place where they can do Commerce they can start burning they can find you know people to collaborate with to engage with you know groups Etc so it kind of merges the Commerce the social and kind of all the finance that we've been doing so the main benefit is it's all life right so this is all live and we have launched a feature Gateway which is near.org but there's also already a bunch of other gateways you can access this with um and so the first thing it starts with if you go right down to near the door and try to create account is the fastest onboarding in the on the web right so it's using this new technology that Google Microsoft and Apple actually launched it's accessible in all the browsers and and it's using on-device cryptography to create your account and you use email to do recovery with NPC and over time you can actually set up Social recovery and any other types of recovery that you need so this takes about five seconds to set up you'd never see any like hashes you never see any seed phrases uh and it's using your Biometrics or pin code on your phone or on your laptop so it is the fastest as it can be it's faster than like figuring out a password that needs to have you know some characters then you land on kind of this common experience so right now near the dark is most is its social developer environment right again we're focusing on developers and empowering them and so we have kind of a combination of social interactions you know and developers posting updates and kind of some of the projects posting updates we have uh also featured components which you can think of as App Store you can discover apps and so we can actually switch to the left version of this uh so if you go to discover right you can see all the components there's over 40 200 already and it's everything from you know nft views trees kind of like Elemental pieces to full-on applications that you know spam games uh chats Financial like liquid staging uh developer tooling and many more right so it kind of allows you to have a full thing you can also have so check out developer Hub because this is where uh kind of developers meet social right and and decide what to develop on next and kind of propose ideas and just kind of get funding get grants through a developer hub now the cool thing about it is at any point of time when you looking at something you can look how it's implemented so if you go to develop mode you can see the exact source code of the component you're looking at and so that's really powerful because it means you can at any point Fork what you're looking at and start playing with it right so let's say I go to my profile and uh so this is profile page you can also see the dependencies that it has so the different component other components it uses right and so you say like okay cool I like this profile page but you know it's missing something right and so you can go to develop mode and you can see like all right here's the source code I can render it right away by the way there's a cross there's a visual studio extension if you don't like in browser development um that gives you exactly the same form and as you do this you can save and publish right right away from here so publish actually puts it on a blockchain and publishes it under your name uh all of this is on board right now you actually don't need to pay any fees so the underlying infrastructure covers the fees uh on the blockchain for that so you see like okay this is cool but I think there's something missing here right I think I want a uh I want to have another component here and so you can just add a widget right which is how you link to another component and you just uh pretty much need to type in its URL so URL is like when you navigate to uh for example lighter component right how you stake ecidium the URL is this path of a username and the name of the component that you use and so so you can just paste this I want to see lighters here and boom you have a lighter component inside my profile page right so this is how easy it is to start like combining things you know you could like iterate and change things uh for example for Lido you can again go and check out the source code and uh you know there's a chain ID here Define smart contract that's used Etc you can Fork it you can modify it so I have kind of a whole experience here that you can interact with and the cool thing about it is you know you have search now that indexes all these applications indexes users and it's kind of expanding this across other blockchains right now that you can start interacting so like if you're looking for something to swap right the sushi swab which actually was probably a fork of Lido component somebody modified with smart contract to use so you have all these experiences really tied in in one place but as I said this is just one Gateway all right so here is another Gateway it's boss.gg and so this runs exactly the same code it just parameterized differently right like you can actually run your own Gateway on your cell in about five minutes which the five minutes it takes for yourself to build everything and if you run it you can specify there's theme the design uh you can change the home page right so this home page is very different from the home page which we were just looking at which was social this is just apps that build it hackathon but you can open the same lighter component here right it's the same path on the top and you see exactly the same thing right so that's the idea that you build the component once and it's now accessible across every single place this blockchain operating system is installed so that's why Parts like one of the reasons we're calling operating system because it follows very similar pattern where as a developer now you don't need to think about distribution the distribution is achieved by you know pre-installing this operating system in all those places and you really developed the app and then kind of gain usage from there so uh another example just to show is uh ZK sync so this is actually a ziki sync example with uh if we switch to it with a swap and bridging to error and so you can have this kind of official login with metamask here you can have a um experience and so you can keep building right again you can always go view source code see what's going on here and decide that like well actually you know dkvm is cool too maybe I want to build this fuzzy KDM and start iterating from there so really kind of pushing away from a web to we use still front ends in Lab 3 that very much webto right running web server need a domain making sure that uh it's like secure that nobody hacked it like what happened was curve the like uh last year where the front end got compromised and so all the transactions were compromised so this actually creates also a level of isolation because every component is isolated uh in the security sense so kind of there's a lot of things here I'll just kind of walk through just to uh we talk to all this what would be like a cool example right that you can build you know this weekend um like imagine you're a fictional hacker that building a fitness project right and so Fitness is uh about you know social engagement and individual it's about kind of how do we re-engage people and bring them back to the interaction it's about motivating them and really creating business around that as well and so there's four steps to building a business right first you test the hypothesis so first you want like how quickly can you learn if this is the right thing and you can actually like uh find that right thing that people are engaged with and so the cool thing here is as you're kind of navigating through this blockchain everything system you see different interesting things you're like oh there's an nft Mentor here there's a social feed there and you can pull it all together really quickly from these components and just make it your own with this redesigning them right so so you create accounts you see minbase which is nft Marketplace and kind of they have nft Minter called minsta uh and you like bring the take the code you know modify it a little bit to Mint Badges and boom your half you know mentor of badges for your fitness app right so kind of that's ideal like and I showed you four kid you know start start kind of changing the code the API is pretty much react and you have access to all the blockchain tooling you need so it's fastest way to prototype an idea right to get to some hackathon level uh kind of product and then start showing it to people because it's already published it's already on chain everybody's accessing it already you can put it at on on the social feed people will see it you can you know go in like Twitter and other socials to attract attention to this and people can start signing up right uh through you know can discuss this so on every component app right there's a discussion so you can think of it as like feedback form and you can share links right and so uh there's one more component of this called keep on where you can actually share a link that directly contains an nft so as I click on this link they will actually go create account and receive nft from that right so you can start creating more uh complex onboarding experiences which already include some interactions blockchain and so you can start sharing this you know emailing them in the notification so I showed you how the fast dos works it's a really kind of onboarding people extremely quickly very web tool like experience but having all of the cryptography underneath to power that uh kind of interaction with blockchain and you know you kind of just building this really engaging experiences uh to land people on it finally I showed you search so like people can find these things you know again search is really powerful there will be recommendations but also nowadays A lot of the interactions are happening through the social right so really important is to continue kind of interacting and posting your social the one thing we're planning to launch is the social feed itself will actually be able to embed components and so you'll be able to embed existing experience like nnft like an active nft like with buttons and things for example into the social feed as it was right this is something that you know Twitter or any other exit like kind of web 2 socials are not able to do so more efficient way to acquire users and kind of you have built-in feedback right people can interact on discussions you can onboard new users right that don't have any crypto and kind of start you know earning first nfts maybe start earning first crypto Emoji points and there's other ways to discover the supplications and finally you want to retain users right so retention is one of the hardest things not just in web3 but in web 2 as well and so you really want to get people to kind of transact And subscribe so the benefit here is you can kind of again social is already embedded you have all the apis and importantly you can start doing notifications right so you can start pushing doing push notifications to the user user can manage that on their side like what notifications they want to receive but this way uh you can pretty much re-engage user as there's new things happening in your app or with with their account itself uh the cool thing about this this all works in mobile web and this is first time like pretty much especially on Apple side you can actually do this in mobile web it just launched it last year uh the benefit is Apple allowed it on mobile web and they may not allow all the crypto apps on App Store so you're actually able to build the app level experience inside mobile web now and so this is an example in kind of the toolkit for you to do that I mentioned you can deploy on Gateway so there's actually a link you can just click on it and it will Deploy on Gateway and then you can configure parameters uh with a clone on GitHub but also there's a component for that and so boom you have to know you're now your own sit dot app hisit.app which renders the same thing right you just you just customize the menu and the home page now to be your Fitness kind of app interaction so you went from like I built a component I landed some people on like a full sled like page and then boom I build it on my website without actually running any of that code right like writing all that underlying kind of scaffolding of how to link accounts how to build all the linkage all the data processing that needs to happen underneath so increase retention you know ways to re-engage users and really kind of customize customizations you can do you can also serve it through ipfs on ens domain as well right so you have like a full decentralized stack used as well and so now that you have it fully done and you know how to engage users you want to grow uh the market right and so here you have abilities to go multi-chain and kind of expand with like partner with other projects build as experiences and geographies right so imagine you have you know for example some of the nfts on ethereum that you can actually engage and like link uh with your uh with your app and so you can have this cross linkage between multiple chains in one place you can work with other apps right so existing existing applications like sweatcoin which has millions of users uh you can pretty much engage with them they can either render it directly in or they can kind of send out to your app as you're partnering with them and you can scale geographically so there will be internalization added to this right which like really gonna power that as other people running gateways in their local geographies for example customized for that language and for that culture they can actually have your apps directly embedded there so work with any chain extend to an experience and you know a lot of the pieces are reusable and kind of can be scaled from there so this is what we call kind of community Commerce right is really engaging social digital kind of assets and value and kind of participation in one place right the Dallas the kind the marketplaces all the things we're building in web 3 is really powering that and so you can go from hypothesis to kind of a hackathon project to an app to you know engage with users to really start building a business and growing and partnering on this platform and kind of grow it from there and just finally to mention one more thing is uh we just launched Neo Verizon so this is actually an app built inside the blockchain operator system as well and if you go to [Music] um or just search for it uh it's near.

org Horizon you can actually see kind of the platform that's designed to really help startups to find broadly speaking contributors right so this is everything from developers Market agencies legal agency to investors and kind of advisors and supporters right so the idea really to kind of create one single place where all the people in the ecosystem can meet and start helping each other to grow the to grow each other startup and project and so there's like a few features already launched and more launching the important part actually is there'll be credits as well so as you on board you can receive some credits to to get services from like a marketing agency or legal agency to set up the company or have it marketed your project so this allows to kind of really bootstrap and this works for any blockchain but again it's not really specific to near ecosystem near blockchain ecosystem so try it out you know try to build a uh would love to hear your feedback you can leave feedback directly on social there there's actually a support line as well and that you can use it's just near the dark sign up it's not that hard um but uh you can pretty much build applications you know use ecd maps or any layer tools as well right there you can have decentralized front end that's not uh like gonna like be censored or stop running you don't need to pay for hosting to start with and you can really kind of get uh usage and distribution from there so again near started as a blockchain originally but it's not a blockchain not just a blockchain anymore right it's it's a lot of different tooling and pieces that come together to really provide kind of solve developer and like Enterprise uh use cases and problems and that's why we call in the blockchain operating system and the system where you can come in and really rely on to allow you to build your business and your applications thank you and uh yeah uh last to chat was here for instance was interested to learn more about it