Decentralized Front Ends: Better Tooling with Skynet and Homescreen

[Music] [Applause] [Music] uh without further ado welcome thank you very much daniel daniel's going to be talking about how to decentralize front-ends with skynet and home screen so daniel welcome and i'll let you uh kick it from here thank you so much for the introduction let me go ahead and get my screen sharing going and i assume everything can be seen now um so yeah thanks for kartik for the introduction um i also just want to before i get into things say thank you so much to eath global uh for inviting me to speak the hackathon and summits have been a lot of fun so far uh always good to learn from all the smartest people around um yeah so the talk name it is decentralized front ends better tooling with skynet and home screen i'm daniel helm i'm the developer evangelist at skynet labs and in lieu of doing kind of a personal bio i figured i'd kick off this session with a question should we decentralize ends in the web3 space so you know i work day in and day out in decentralized storage so i'm going to emphatically say yes but this is the question that developers have to make a decision about right and i think maybe it's better to reframe this question if we really want to get to the bottom of it uh and ask are we really building permissionless systems if they're centralized at uh the point of entry uh so phrased another way you know like are we really building open protocols if we're only letting our users access them or 99 of our users access them using aws netlife or cell digitalocean so these are kind of how i'm framing my talks if some of these terms are new to you um don't worry i'm going to do some back filling but i just want to kind of set these out at the very front so if you're unfamiliar with decentralized storage we can kind of start there maybe you missed yousef's great talk earlier today introducing some of the ideas of decentralized storage but we're talking about a core piece of web3 infrastructure where files web apps nfts basically anything not stored on chain can be accessed without relying on a single trusted authority at their best they're trustless permissionless and censorship resistant and they're really good ways to potentially wrangle control of data storage away from the amazons and googles of the world there are a lot of folks building in this space so we're talking about projects like skynet or ipfs or arweav and most of them take a similar approach at least to this kind of base uh data that you're gonna upload so you upload a file and what you get back uh is a unique identifier this cryptographic hash or merkle root that you know looks all crazy but what it says is that this is the contents of this file and if this file changes my url is going to change um so here i'm actually showing a skylink it's what we use inside the skynet ecosystem and it can be used to know that like once a file is uploaded you can share that url and no one's going to change it you're not going to change it the portal is not going to change it no host will be able to change that data that data is immutable it's not going to change and what this lets us do is take that and stick it on the end of a portal url and so again everyone in the ecosystem has portals or gateways ways of accessing this data through a web browser and so here we see the skylink stuck on the end of scisky.net which is the portal that we run or you can stick it on the end of a community portal like skyportal.xyz all right so if this is new to you um this might seem a little bit abstract so real quickly i just want to show what it looks like to upload something to skynet um we can jump over and i'm actually going to upload a web app because we're talking about website front ends and look i've already forked and yarn installed and yarn build the unit swap interface and so we have a build folder here and i'm going to open it up in explorer find my build folder and drag and drop it to the sky net uploader and so what happens when i do this is that file goes on to skynet it gets broken up to a bunch of into a bunch of pieces and stored on the scia blockchain and at the end of it what i'm going to get back is one of those urls right so i have this folder that has the index.html file and i get back a url that i can open and i've got uniswap here and once that file is uploaded and on the skynet network you know that is available everywhere so we have a url.cysguy.

net i can change this again to skyportal.xyz click enter and i'm able to pull up the exact same content so this is kind of the base idea of decentralized storage we're able to have lots of access points to this data that's not stored in a single location okay great let's see what this looks like though from the perspective of running a web app because i think a lot of developers say to themselves like hey it's just a web app like these are kind of overblown requirements we don't need all this to be immutable um but you know the stakes are real and they're getting realer every day in the web3 space and so we're seeing developers and web3 users get placed in really tight spots and they're having to kind of address questions like what do teams do if you know they're hosting a site that makes them liable for user actions or what if their hosting providers don't like the way that the wind is blowing uh with regulations or local social pressures and for users you know right now you're totally unaware when the code of a front end changes which kind of puts you at the at the whim of the security and product decisions that the dev team is making as they push out these changes to their website um so these aren't paranoid hypotheticals like we see this play out in the news right um uniswap had to you know they removed assets from their front end in order to protect protect the developer team and users during a time of regulatory uncertainty we had sushi's uh miso attack that put over three million dollars at risk um not because of a smart contract bug or some of the security issues we saw before but malicious code that was introduced into the front end um and one of my favorite things i've seen recently is one inches new feature um that i don't even know if it's live anymore but briefly you had to sign with your wallet a little message saying i am not a citizen of the united states and they also did some geo-fencing where if you then still tried to use their web app while being located in the u.s it would say like no no you're not in the u.s so make sure you disable your vpn which is telling us that you're in the u.s um and so if we're seeing all these issues developers uh can you know be asked why not decentralize uh and it's because there's lots of challenges and concerns that developers have you know not all web 2 patterns translate well to web 3.

if you've always used a back-end a back-end to you know handle server-side things like storing user sessions or doing database queries sometimes the new web 3 frameworks can just feel weird just like writing smart contracts can feel weird um similarly in the web3 space with this decentralized architecture we have limited framework support compared to traditional web serving so if you're only serving static assets because these things are you know immutable then your frameworks are going to be limited and most protocols don't even allow for writing custom routing rules which are usually available in on traditional web servers and the final kind of thing that i think developers have concerns about is performance and so i think this can take many shapes both in terms of things like time to first byte for users you want your website to load really fast and feel snappy um but there's also performance concerns about you know is the long-term scalability proven for projects that are going to be like storing all their files on the blockchain um or is data availability like that's a you know performance concern like if who can we rely on uh to keep data available and online so these are real challenges um and you know to these developers i shall uh why not decentralize with skynet you know um so it's true that not all web 2 patterns translate but the tooling is being built for really performant mutable data apis including one of my favorites is one that we've developed called my sky which is a cross ecosystem decentralized user identity additionally there is limited framework support um so some kind of classic both back-end front-end paired frameworks aren't going to work but at this point you've got full support for things like gatsby and react router and other dynamically routed client-side frameworks and lastly with regards to performance concerns it's probably a little bit out of scope to get like deep into the architecture of skynet or saya here but try it out i think you'll see that our speeds are already comparable to the experience of web 2 and what web 2 users expect and this level accessibility for our users is our primary concern we're always working to really reduce our time to first byte and and what that looks like um so with skynet you know all of these things are possible for users and developers without having to install a wallet or special software or really touch any sort of cryptocurrency okay so at the end of the day yeah this is our goal any developer can build a web3 app that anyone can use all right so i talked about some of the kind of like fundamental ideas there but if our web app is immutable you know if we have this folder of files that we stick on to are we've ipfs skynet um how do users keep up to date right we have this crazy url that is not very readable well let's take a look at an example here we have our friendly user and that user really likes this website that has daily builds um and they they use the decentralized web they're they're they're good um and so when they release tuesday's build it has a skylink like that and our user grabs that skylink and is happy using tuesday's build um they've been using it all the time but tomorrow rolls around and the developers roll out wednesday's build they shipped their dark mode update and you know our user doesn't have any way of knowing what that new skylink is or is going to be it's a cryptographic thing it's unpredictable everything else and so we have to introduce ways to you know fix this issue and for skynet this looks like resolver skylinks in ipfs they have ipns but what this does is let you have a mutable constant url that you can just then point and up make those updates when you sign some sort of certain proof that you are the owner of this piece and so what this looks like on tuesday is that our user has the resolver skylink and is getting tuesday's build and what this looks like on wednesday is the user still accessing the build through the exact same url this resolver skylink and never had to worry about the immutability of of the core underlying data and then in actuality like you know this is kind of ugly and terrible right this is not very usable and so what most developers will do is add in a human readable name and so this is going to use dns like traditional dns ens or h s to give us something like dailybuilds.com dailybuilds.eth those will have records pointing to the resolver skylink and then again you know the resolver skylink probably is part of like a github action when a new build gets created and deployed will automatically update to point to the latest build all right and again i'm using skynet here but uh all the other ecosystems i think have kind of comparable things all right so this is how easy it is to get a decentralized front end uh but then you know the next question is is decentralized hosting enough here um if a user is still just going to like app.uniswap.org which is hosted on ipfs that's great for censorship resistance it's great that it's decentralized and hosted that way but that still doesn't answer that question of the front-end attack and i want to kind of look at that a little bit in our diagram here so returning to the diagram let's assume you know thursday comes along and a bad build makes it through you know the developers have gone rogue there's malware everywhere worst of all dark mode has been removed from the application what we have is a situation where our automated deployment is still just going to go ahead and automatically point to that and our user when going to dailybuilds.

com is going to still in a decentralized way access this malicious build and unfortunately because the user so accustomed to accessing the website through the dot com.eth domains they have no history or recollection of the underlying immutable data that's still available but they just don't know how to access it and so you know for this reason um we've really started seeing a problem where it seems like we need to not only decentralize our front ends but also our upgrades for users need to be voluntary and our version history kind of needs to be accessible um and you know home screen has entered the chat this is the project that we've been working on we released home screen at the beginning of this hackathon and what it is is a decentralized application where users are able to log in with fully decentralized identity and access their favorite decentralized apps these are versioned builds of web apps they're fully controlled by the user and when they pin these to their own personal cloud it you know gets all the assets all of the code and stores it there so they always have access to these apps and then they can also upgrade downgrade share the apps with friends at any time um so i just want to like quickly show a little bit of what it's like to interact with home screen here i can go to homescreen.hns.cysguy.net and it tells me that web3 needs decentralized front ends great i'm going to go ahead and authenticate with my sky and this is what i was talking about earlier our decentralized identity and we can sign up i'll get a new passphrase this is never communicated to any server or anything but i'm able to use that passphrase across device anywhere to access my personal cloud and so we're sitting here interacting with immutable data layer of skynet and i can add you know apps if i want to whenever i want so let's say i want to go and add uniswap.

eth i told you earlier this is hosted on ipfs we have ipfs support here oh my god the live demo gets me um okay let's try app.uniswap.org let's see if that one will work all right cool also hosted on ipfs it finds the ipfs link uploads that to skynet and now i'm able to pin that dap to skynet and have it always accessible for myself um okay so and we can also kind of look at the details here you know it's gonna pull down our name our description and some other details and now when i go to click on uniswap i have a build of uniswap here okay i talked to you earlier about resolver skylinks and how those things can update um and you know i i don't have updates available for uniswap because if they host on ipfs but we do have updates available for skysend um and so i love sky send i'm using it i want to check for updates i can do so here it'll go it'll find that we now have a new skylink a new immutable file the resolver skylink is pointing somewhere else the the dev team is signed off on this version and i can then pin it it's then stored on skynet and then i will add it to my personal metadata here and i can access this new version of skysend instantaneously if i don't like this new version i'm also always free to go view the details come in and i can say better version and downgrade to my older skylink that i had before and that way that will always be my default when i come and click this here okay so if you've worked with decentralized storage before maybe some of this isn't new but also just like pay attention to how fast this is going we are interacting with mutable data um and it's performance um yeah it feels good if you're a developer and this is interesting to you um i really encourage you to look at what it takes to integrate with home screen um let's get this full screen again so for integrating with home screen there's kind of three main steps you're going to have to get an app that deploys on skynet you'll want to set up automated deployments using something like our github action which i can show a little bit of later and you'll want to add a home screen button and a reference to that app's resolver skylink so that users can easily find this and add it to their home screen so you can follow along any of this at docs.scienceguy.net integrations home screen and you'll also find a link there to the video that i did earlier for ethonline that you know i actually do this as live code and about 20 minutes to set up a home screen integration so we already deployed an app to skynet you know obviously when you're building code you're not going to want to go drag and drop a file every single time but just to kind of again say any directory with an index.

html file is going to be supported as a web app and then if you use kind of our deployment tooling you have additional gatsby and react router support that you can get working in terms of automating those deployments um like i had mentioned we have a github action which lets us build and upload our you know build directories straight to skynet whenever we push a new pr and we can also set a secret in there so that we can sign that code and update that resolver skylink every single time one of those new builds deploys um and you know the resolver skylink is very nice because then we can also point enf names or hns names or traditional domain names at that resolver skylink and we know that we have this kind of like fully automated deployment system and at no point do we ever really have to interact with a traditional hosting provider and then again step three here is going to be adding the add to home screen button and our resolver skylink and so like i kind of showed before when we're interacting with home screen you can go ahead and actually type in things like we're still tweaking the ux for uh the user side of things but you can also find repos where an add to home screen button has been added so you know i've worked with some kind of like unofficial builds here where i've made a repo for say balancer um and it now has an add to home screen button that has the resolver skylink that gets built every time something gets pushed to main so i have a github action that deploys to skynet and when that happens there's a step here that you can copy and paste from our documentation to get things automatically deploying to skynet so when i click on this add to home screen button i'm able to be taken to home screen instantly asked if i want to add this app to my home screen and we can see all the metadata that the developers provided including the resolver skylink where it's going to be updated and of course i can open up balancer here in the next tab and get going with decentralized storage and decentralized trading okay so um yeah one last little show here there's a 10 000 cya coin prize pool 2 000 cycloid for the best hack uh using home screen and so look into it if you are a last minute hacker still having to figure out how to get your front end live and on the internet we have a lot of skynet resources if you want to learn more support.scienceguy.net is kind of our intro guide but we also have developer guides available at docs.cysky.net along with sdk stuff for javascript and sdks available and quite a handful of languages if you're interested in joining the skynet community it's a good one we have a discord at discord.

gigi skynet labs and it is full of developers that have built with skynet and are super generous with their knowledge so come say hello tell us what you're interested in building and i'm sure some folks will help you get started thanks again for hearing my appeal for the web 3 needing decentralized front ends and i'd love to answer some questions from the chat thanks daniel uh this was great i think uh we have a couple minutes i think the static questions or follow-ups here are maybe just understanding where this uh what does this evolve to like hosting static content is great but uh include there's a lot more complex use cases of front-end applications how are you gonna think about the evolution of home screen or just kind and if you can share some things that will be possible in the future or or in the works right now yeah and so um i kind of glossed over all of our mutable data structures we have a good handful and my sky is a big one that we're kind of aggressively developing on the back end where users have totally user provisioned storage space that when they log in with mysky in different applications those applications can request permissions to other application storage so you can build a social graph on application a and just import it natively into application b as though it were an api even though it's a piece of storage that you locally own and beyond that probably a few more months out we are working towards monetization and so if you have content that you've put up on as part of your my sky identity and people want to help support you or consume that content we want to have a more equitable way for content creators to get paid for for their data amazing um and i know the answer but i'll ask this for the sake of others also knowing this is kind of free um yes and no so you know like it's free to use it's freemium um similar to you know to like web3.storage if you use scisky.net you get i think 10 gigabytes if you don't give us your email if you uh give us an email address or later on just sign up with mice guy you'll get 100 gigabytes um and then you can pay in fiat beyond that at this point but the whole storage stack or the whole portal stack is totally open source so if you don't trust us you don't like us please please run a community portal we love community portals and you don't have to rely on us at all and uh just so we uh have some clarity on this the limitations when you say 10 or 100 gigs is that storage or bandwidth and how does bandwidth work if it's not that is storage bandwidth is actually kind of like um on the consumer not on the original uploader or provider so once something's kind of on skynet anyone can pin that and so there's no like single owner anymore um and so you know right now the bandwidth is just kind of like part of the system and the portals eat that cost um you know maybe other portals will need to throttle that or something else but we have kind of some of those things in place but nothing that if you're not on a very impressive connection you'll probably ever notice so amazing well hopefully victor that was good uh enough for for your question to uh to be answered and then i want to thank all thank you again for doing this amazing presentation and making a live demo work thanks so much it was a lot of fun [Music] [Applause] [Music] you