Lens Protocol 101 🛠️ A Workshop for Building Full Stack Web3 Social Applications - Nader Dabit

foreign [Music] I'm going to be talking about lens protocol and I want to introduce myself I'm natter David I'm the director of developer relations in Ave and men's protocol I've been a developer for about 11 years I've been in the traditional space for about nine years like non-blockchain and I've been in web 3 or blockchain for a little over two years and today I'm really excited to just make a quick announcement we launched the lens SDK which is a really really big deal for us so [Applause] I had so the the workshop that I'm going to be giving at the very end is a very short Workshop mainly because the limbs SDK it lets me do this in just a couple of months of code if you want to try it out uh you can check out some of the links down on the show Lander you can go to our Twitter and see the blog post that kind of goes over this huge team effort from everybody at Linds and Abe from designed engineering so we're really proud of what has come out of this and hopefully you'll really kind of like how it allows you to really quickly build and get started without a lot of code or without blockchain knowledge which is a big deal and at the end I'm going to be doing a quick Workshop that is a code along from scratch building a full stack application with next.js server-side rendering routing everything and it's a really great way to get started with lens along with some of the tutorials that we have in our documentation this is all the code that you'll need to build what I'm going to build so example code base is there along with a step-by-step guide so with that being said I want to talk about lens and I want to answer the question of what is lens I think the most succinct way to put this for the just general average person is it's a social layer of web3 but here I'm speaking to developers so I want to describe it more from the terms of how you might build with this and with it being a social protocol we offer not only the actual underlying infrastructure at the blockchain level that you might assume would be there with a web 3 product but also a suite of tools and apis that allow you to really easily and quickly build social applications or integrate social features into your applications without a lot of code and without needing to manage the back-end infrastructure and this is a big deal because we talk about Mass adoption in web 3 but a lot of the use cases that come out are actually really targeted back at us like we're a big blockchain Maxis often and we like dealing with tokens we like doing all this stuff but when we get outside of our bubble we realize people just want to use highly uh like polished applications that bring a big value proposition to them and therefore we need to kind of build for those people and with social they're 4.9 billion people that are using social applications today so when you think of building for the masses you need to think of a use case that will appeal to the masses and this use case obviously resonates but it's one thing to kind of have an idea and another thing to actually build and execute and have a product that allows people to actually use it and for developers to build on it and that's really what lenses and when we think about social applications we're not only talking about Twitter Tick Tock and all these other things that we consider social apps when you start diving into the average application that you use on a daily basis you start realizing that there are social features built into so many of the apps that we use every day GitHub has a way for you to follow your friends and see the feed of the apps that they're building things like stack Overflow again I'm speaking to developers have social features and social components kind of built in and instead of having to kind of build out all of those things from scratch you can easily start integrating these things using a manage infrastructure like lens similar to how you might use auth zero to implement authentication in your traditional web 2 applications or you might use serverless functions to implement some type of custom executable code without running your own servers is you can use lens to implement social features without building or maintaining or dealing with any of the back-end infrastructure and that's what I want to talk about now is like how does this actually work and really to kind of job just make this succinct you could think of the base layer of lens being a set of smart contracts deployed to polygon but the value proposition really comes from all the things that have been built on top of that as well things like a really simple to use API that gives you a lot of flexibility on querying the data and getting different selection sets for the data that you want to present to your users graphql is what we use and this allows you to choose and and filter and do sorting and pagination all these things that you need for a polished ux like Twitter when you think of a smart contract you're typically Limited in what you can do there you have a couple of API calls but you can't say give me the last hundred users that have signed up that live in this city that first name starts with P that have all these different characteristics similar to how you might query a database you can't really do that with traditional blocks and applications but with our graphql API you can we also have implemented gasless and signless transactions for users to use our your application without having to pay gas and without having to sign transactions and that is one of those are like the two in my opinion uh biggest barriers along with walleye ux for the average person actually start using these applications when you tell a user hey I launched a nap go use it you know you could excite them about it but once they open the app and you're like oh by the way you have to go and buy tokens and then you have to transfer them to this network and they have to be on the right Network and they have to be the right token on the right Network and then you have to like create a wallet this is a massive massive area entry for most people what if instead we were like you can just go use the app I mean that's that's kind of like where we want to go and in the past this wasn't really possible because transactions cost a dollar or five dollars or even 10 cents per transaction and it's scale that just doesn't make sense but with our infrastructure we recently we even rolled out a more scalable infrastructure called the mocha the last 65 000 transactions have cost 26 dollars combined Which is less than a single ethereum transaction on a bad day so at that scale you can start thinking of subsidizing transactions the same way that AWS and Google are being used to subsidize transaction on Twitter and Instagram there is a uh there is an infrastructure cost but they're not offsetting it by asking the user to pay for it they're dealing with that themselves and the user gets to use the app for free and everyone wins uh soundless transactions are also a big deal every time you make an interaction you don't want to have to sign a transaction with lens all these actions are covered and handled by a dispatcher which you can enable and disable for non-financial transactions which are things that you shouldn't have to worry about if like you post something it's not a big deal if it's just a comment or something but it's not something that will ever enable it's a financial transaction on your behalf and then the developer experience as a developer that's focused on devrel for a long time this is the thing that I get the most excited about because we focused a lot around developer experience so we continue shipping new products and updates just like today with a lens SDK and I want to go over some of those things I mentioned the lens API which is just a really really great way to query for your data at the very base level gives you a ton of flexibility pretty much anything you want to do any selection set you want for the most part is available there and then to make that even easier we've recently as of today officially launched the lens SDK and this is kind of how the lens SDK fits into the stack I mentioned the set of smart contracts which is the lens protocol base layer and then we built the graphql API on top of that but to use graphql there is a learning curve for certain developers because you have to actually understand how to query for the data you have to deal with setting up a clients things like that and also the queries can sometimes get kind of verbose they can be tens of live of code or even hundreds of lines of code so the lens SDK sits on top of the graphql API so you don't need to know anything about graphql and you can actually query the data from the lens API with this many lines of code import call it query you have the data coming back and this is what we're going to be using and the tutorial that we do in just a moment we also have the react native lens UI kit some of the most successful apps on lens or mobile apps and we want to make it really simple for people to build mobile apps so also with as few as two lines of code you can start building mobile apps a couple of the apps that have been winning hackathons have started boot shopping their app using the react native lens sck and have moved on to kind of continue building and iterating and even getting funding and stuff like that so this is a really simple way to kind of bootstrap the mobile app with only a handful of lines of code we also have a way to do Integrations so the lens SDK and the react native lives UI kit and the API are mainly done to actually build uh you know social applications though they can be used for Integrations with the widgets are focused at mainly Integrations so if you want to say I want to add a sign in with lens button to kind of have this digital identity layer without having to build it myself or I want to allow a share to lens button so I can get a large number of people their eyeballs on the thing that I'm building without having to kind of build my own distribution Channel you can do this also with about two lines of code so we have shares a lens sign in with lens follow on lens we have Publications that you can kind of drop in similar to how the Twitter have Twitter embeds all types of stuff there you can embed profiles and a lot of things and the the UI for this looks really nice these are actual pictures of like what it actually looks like you know when you render that so there's a lot of pre-built design in but you can actually configure about passing props and things like that and then finally what we've been really excited about lately is the lens bigquery API and data set which was released a few months ago that has all of the data from all the transactions and interactions that have happened on lens available in a bigquery data set with over 50 different tables that you could query from so people are building Ai and machine learning and all types of recommendation algorithms on top of lens Now using this and the great thing about this is you don't have to really be an expert at anything to get started with this all you have to do is actually go to chatgpt and say hey how can I create this query on on bigquery it'll literally give you the the code you can paste it in and people are starting to build some really cool stuff and another thing that we're seeing adopted a lot is direct messages that are encrypted using X and TP this is a really great protocol you don't need a lot of code and the cool thing about this is all the messages are interoperable between between all of the lens apps using a special namespace that we have that has been adopted by most apps in the ecosystem and people are even building like a Unified Inbox so you can think of what if Twitter Instagram and Tick Tock and all these different apps all share the same messaging protocol so you didn't forget where the message left off every day I meet someone and they're like oh we talked and I'm like where do we talk telegram slack I forgotten one of us forgot but what if it was all in one place and this is kind of what's happening with xmtp and lens ecosystem I would say um beyond that I'm going to just talk about composability and extensibility a little bit because these are like a couple of poor things that are not really lens specific they're more like web3 or blockchain specific but they shine really well with lens so with with lens you can actually build in custom functionality into the protocol itself almost like if you wanted to send a pull request to Twitter and you knew that you could actually get a feature at it or if you wanted to add a featured Instagram that's kind of what's enabled through custom modules so a custom module really is wide open for anything on chain so you can program things like you have to be following my friend to follow me or you have to have collected one at one of my nfts there's a lot of stuff that you could think of that can go here so an example of what this might look like is this is an app that has implemented a few of these custom modules and you can program and specify all these different functionalities optionally for someone wanting to publish a uh any type of publication to a link app so in this example you can absolutely open this window and say hey the person that is collecting this has to be following me and it's going to cost a dollar and I'm going to limit this to 50 of them or with something like waves you can say I'm going to put ten dollars and into a campaign and everyone that mirrors this gets one dollar but they have to have at least a thousand followers there's a lot of things that are happening there that are becoming like really interesting another example is split Revenue so let's say you see someone has built something or you want to do a fundraise for someone and you both have split the work or whatever scenario you could think of you could put all these different addresses into a publication and you can say I'm going to split the revenue from every collect here and all of that Revenue gets split immediately when a collect happens you know because it's on chain it's just all permissionless and there's no middleman and it's really simple so beyond that composability I'm going to speak about composibility at the from the developer's perspective but also the user's perspective from the developer perspective I've mentioned um like this idea of managed infrastructure I just want to underscore this this is kind of huge because when you're building a startup it's very expensive to hire devs today and it's also very kind of hard to find high quality devs and most Dev teams need a front end and a back-end team at the at the least and a back-end team often includes infrastructure Engineers devops back-end apis like all of these there's often separate skill sets but instead with a managed infrastructure like lens you don't need anything on the back end you only need the front end and therefore you're eliminating a large number of devs that you need on your team or if you take that same number of devs you can focus more on building a higher quality polished front end so we have developer teams of one shipping amazing outs like butterfly owned lens that are just really really great and you you would be blown away that there's only a single developer on some of these teams um so that's a big thing I wanted to kind of point out there and also you inherit the existing user base in the ecosystem of lens so if you are trying to bootstrap an audience that's often kind of hard but with lens when you launch you have that built-in 100x thousand number of users today and then in the future as we onboard a lot more and scale that up you're starting off with a big number of users instead of having to kind of start from scratch which is a big deal for a lot of developers and then on the user Assad there's a couple of different things that go that are a big value prop you know not being able to lose your account because some random person decides that you said something wrong or your government shutting it down for whatever reasons but the really cool part is that every single app that comes online you're now Boot shopping that audience across that app a good example of this is if you built a big audience on Twitter or YouTube and then Tick Tock came out just starting from zero but every time a new app on lens start launches you're starting from X number of followers and you're building upon that and the outcome of this is that every time a new experience comes online you can choose to buy into it or not buy into it and you have a new way to be creative without losing your audience you could just try some of these apps out see how you like them they're around 100 or so apps that are live today that I would consider like somewhat high quality that you can try out um next I'm going to touch on the technology stack and then we're going to jump into a demo and then we're done so when I talk about the technology stack I've already talked about that from the protocol level I want to talk about more from the user like if you're a developer what's your Tech stock going to look like it's going to look very similar to what you've probably done in the traditional blockchain space in some aspects but you can also again abstract some of that away with like the react hooks SDK or the react native lens UI kit there is one area that you will need to deal with that isn't built in just yet that I know of it's uploading metadata to store it in a permanent way or to sort however you would like it so if you're posting a publication almost like if you're creating an ft you have to publish the metadata that is on that is for that publication somewhere most of the time we recommend using bundler with Roe because it's very fast and it's very it's permanent you could also consider using something like ipfs we have a lot of apps building live video streaming or just video applications using live gear and that's being adopted more and more and that's something I would also recommend if you're looking to build a video application the traditional libraries for making actual contract calls are often used so if you want to use either JS wagney rainbow kit all that stuff works great on the front end we're seeing flutter apps we're seeing native iOS apps react native is a big deal there's a lot of people building react native apps so anything that you want to build on the front end is pretty much supportive I don't think we really have a lot of flutter like support on our end but we have a lot of high quality flutter apps that are out there they're just using existing libraries that facilitate API calls so I want to touch over a couple of the major Concepts and then this will be it to you before we do the demo so who here it has used lens by the way okay cool and if you're a developer by the way and you want a lens profile come down to the booth we'll get you set up so one of the cool the main Cornerstone I would say of lens is kind of this idea of a profile because the profile is what everything you end up doing is attached to and therefore you can kind of take this and move it around and have somewhat ownership over over it so the profile of like your username and then the comments posts and stuff or essentially attach to this profile and then under a profile you will create a publication and a publication is either a post a comment or a mirror this is just data that you're publishing to the network and this is essentially a Content URI that's attached to the publication that has all the content that's associated with that again I recommend something like bundler with rwe because it's permanent immutable um but you can also use something like ipfs and you can do a lot with Publications one of those things is data to access built directly into lens sdks or this ability to build out a gated publication so you can say all of my post Republic by default but for this one I might say if you're part of developer now you can read this but everyone can or maybe you've collected my nft and this is for my nft holders all that stuff is optional with the get it access and then collects are kind of how you take a publication and turn it into an on-chain artifact so every publication isn't actually like an nft but if someone collects that then it kind of turns into an nft and therefore you can add a lot of rules around collecting you can say I want someone to pay me a dollar to collect this or I want uh you to be following this person or whatever a couple of examples of really cool things that have happened you know recently on men's an artist that is a musician had an old MP3 or something that he created five years ago he was like hey uh I just want to put this out there if you want to support me this is one of the songs that I made early on it's a dollar to collect he had like 3 500 people collect that it took him five minutes to post he made 3 500 bucks a really great way to connect to his audience in a really great way for the audience to kind of support the Creator and um for the 3500 like users you know and at scale you would think oh a dollar collect like that's not a big deal because people are used to like five thousand dollar nfts but at scale you can say something could be 10 cents or 50 cents and you can actually have a reasonable amount of collects that would make up a valuable value proposition for uh an individual so with that being said I want to jump into the demo the GitHub repo for this is at github.com3 Lens protocol Workshop it looks like this and I'm going to just start off with this empty nexjs application and what we want to do is we want to use the lens SDK to build out a social feed oh it looks like my thing is off sorry about that GitHub repo github.com3 at the very top should be the lens protocol Workshop and this has everything you need to build out an xjs app from scratch with server side rendering and rallying and everything like that and we're basically starting off from this empty next.

js application this is kind of what you might expect and we want to just open this code base and it is what you would expect from a typescript project with xjs nothing really going on yet I want to start just by importing the react native I'm sorry the react lens SDK one of the different apis from there is called use explore profiles this will just return a recommendation algorithm type of preset for you to get a bunch of profiles and by default it will give you a selection set but you can also pass in props to identify and Define like what you want to come back but at the most basic level it's very simple to use you could say const data and then you also have this loading variable that you can use and you could set that as use explore profiles and then we might just log out this data just to kind of get a view of what this data looks like whoops and then one other minor modification I need to make is because next.js recently moved to version 13 you have to define a client-side application by saying use all right so our app is loaded obviously nothing's changed because we haven't updated our user interface but already with two lines of code we have this data that's coming back we have 10 profiles that have come back from the recommendation algorithm and we can even say Okay I want to actually limit this 2 25 and now when the app reloads we should have 25 come back let's see if that works um maybe yeah there it goes okay so we have 25 profiles coming back um now I want to actually render these profiles to the screen and um show the metadata associated with each profile so I'm actually going to go back here and like delete a lot of this code and we kind of want to start from scratch so I'm starting over essentially from this empty this empty component here I'm going to go ahead and import a couple of things we're importing that same use explore profiles API where I'm putting a link which allows us to link to pages from next.js and then this format picture utility which allows us to format an ipfs hash or an R weave hash into an uh Gateway and actually I think it would be nice for us to build this into the SDK at some point but for now we're doing it manually but essentially it'll just say ipfs hash okay we want to say ipfs Gateway slash ipfs it's just a very simple function and then once we have all those things we're going to create the body for this and if you look at this entire component it's 38 lines of code including a couple of white spaces but to start off uh we're just taking the data that we're getting back from the use export profiles and we're limiting that to 25 and then we're just rendering those in our app by mapping over the data returning the profile image and that's about it so if I save that and I go back to my app and I'll re reload we now have a social app and the data fetching part of this was only three lines of code with including the Imports of the before lines but we already have a very nice so selection set of data coming back and there's a lot more data that's with this so you have like the cover image of the user you know a lot of other metadata about that person so that's the simple intro because I don't have a ton of time if you continue with this Workshop you can actually drill down and click on a profile and view the metadata and all those Publications for that user and I think I'm running out of time so I'm not going to go into that if you want to learn more about lens definitely check out the lens documentation that lens docs.lens.xyz if you want inspiration for other apps that are out there you can go to lens.

xyz slash apps if you want even more inspiration about what we want to see built you can go to lens.xyz slash apps and click on lensbursts there's a hackathon entire section there there's a lot of ideas that we'd like to see there and there's even links to things like our grants program and stuff like that if you want to see some of the most recent updates like we made including the lens SDK announcement you can go to mirror.xyz lens protocol.edu and that's it thank you so much for checking out my talk