Lens Protocol 🛠 Building Full Stack Web3 Social Applications - Nader Dabit

foreign [Music] oh my schedule add this at 7 30 and I was right around the corner actually polishing up some of this stuff so um we have a lot to cover and what we're going to be going over today is going to be split up into two separate parts we're going to start off with an introduction to lens and then we're going to actually build a mobile app from scratch and I mean from scratch like literally from zero to one so that should be fun and we're supposed to do this in 30 minutes so we'll see um my name is natter I am the director of developer relations at Ave companies including lens protocol most of my focus has been on lens protocol so far I am kind of diving a little bit more into some of the stuff that we're going to be releasing soon with the go uh token mainnet as well as a lot of the new stuff that's tied in with Ave but today I'm here to talk about lens um I've been a developer for about 11 years and I've been in developer education for about seven or eight years and I've been in blockchain for about two years I'm also the founder of developer now if you've ever heard of that so first I want to kind of give an overview of what lens is and then we're going to talk about more of the technical stuff around how it works so when we look at our documentation we say that lens is a composable and decentralized social graph but I think that when the average person kind of reads that it doesn't maybe resonate that much with them but when we're talking to developers they'll often like to describe it as a protocol and a suite of tools and apis for easily building social Ops or integrating social features into existing apps I'll go back to that slide because it looks like someone's taking a picture of that but um that's kind of a better description to me because it kind of gives more of an overview of what you can actually do with it and we're going to job a little a little bit more into like exactly what that means as well so when we think about social applications these are features that you might consider being part of a social application you create a profile that profile allows you to kind of attach information about yourself and then you start creating content and all that content is kind of attached to that profile and then you might also follow other people and see the content that they're creating often that content is curated and presented to you in some sort of recommendation algorithm and you can also subscribe to other people's feed of content as well by following them and so on and so forth now when we think of a social application we might think of Twitter or Instagram or things like that but they're actually social features built into all types of applications that we use on a day-to-day basis so things like GitHub or actually social applications because you follow other people and you see a feed of all the the actions that they're doing you could even consider things like stack Overflow uh you know I'm speaking to developer focused types of applications but um really when we look at the number of people online today I think it's like 4.85 billion people are using social applications today so the really interesting thing to me about lens was that we're building a ux that is approachable by hopefully the average person whether or not they're crypto native and therefore we kind of are really broadening the scope of the type of user that might be able to be onboarded into web 3 via this mechanism that might not be that interested in maybe Financial use cases and then if we go a step further which is also something that we're kind of working towards like abstracting away even the wall of addresses and like all the complexity around externally earned accounts and stuff down the road what ends up happening is like through some of the design decisions that the lens team has made things like gasless transactions and also Timeless transactions um getting the average person to kind of use this type of application is a lot easier because they don't need to have tokens you don't have to tell them to go to coinbase to sign up and transfer their money into coinbase or some you know centralized exchange and then buy some token and then like transfer that token to the right Network and then download this browser wallet and then send those tokens to the wallet and then go to some other like exchange and swap the tokens and then pay for the transactions now like we might put up with this honestly because we're like crypto people and we love this but the average person this is a very very bad experience you know and I think like when we talk about this meme of onboarding the next billion people it's not going to happen before we were asking those people to do that we need instead really really simple applications that have a good ux and we need to kind of have use cases that make sense to them and then once they I get onboarded into these applications they might then be introduced to things like wallets and stuff and then we can kind of start talking about other use cases that are more like native to us that are really interesting so that's kind of why I'm excited about this as a use case and lens isn't an actual application it's just a protocol for people to build applications so we see that we have developers building all sorts of applications so lens tube for example is an application that came online and at school because when a new application comes online you sign up uh one time but then you go to these new apps and you automatically have all the followers that you've built over time across all the applications so when lens tube came online I had all the followers that I had built up from using linster and then you had things like butterfly and orb and um Ooh La La and all these different applications and it's cool because like every time a new application is launched it gives you a new way to to kind of express yourself and create content and new and interesting innovative ways so you might resonate with a new type of application that comes online or you might not but when something does happen to come online that you do resonate with you don't have to build up your following again from the ground up you automatically have that built-in user base and depending on the application and that content might also be displayed across other applications as well so even if you're only creating on Oola you might have that content be made visible on other applications as well which is really cool so let's talk about how lens works at the very core of lens is a set of smart contracts that's deployed to polygon but the real power around what uh lens has been able to do has more to do with the infrastructure and the design decisions around the API in my opinion so you know interacting with a smart contract again isn't that good of a user experience but if you can obstruct away the gas and you could have shocked away the signing of the transactions then you now have a user experience that's on par with something like Twitter and then if you start adding the features that are enabled only by decentralized Technologies like blockchains you can then offer a better user experience than and and maybe a better value proposition than what's possible with traditional infrastructure and I think that that is the true like unlock with this this sort of infrastructure because I don't think that web 2 social is that terrible like there's a lot of amazing things that we've been able to do so far but I think that we're not going to kind of win the average person over into these sorts of applications unless we can provide an equal or better user experience and maybe even like a better value proposition in general so in order to kind of make that happen our API essentially uh subsidizes the gas for transactions and our new infrastructure that we're rolling out is going to make this even faster better and cheaper because in the past this wasn't really possible because when you transacted a couple of years ago in ethereum it was a couple of dollars per transaction or even 50 cents or 25 cents and let's say even one cent that's still too expensive to treat like we treat traditional infrastructure because when we think of an application like Instagram when we use Instagram we obviously are not going to pay for any type of database update but that doesn't mean that Instagram isn't actually having a cost per user transaction or interaction it's just so freaking inexpensive that they're obviously not going to offload that cost to the user um we're getting to a point now though with decentralized networks not only like l1s and l2s but really other things like are we even bundler and things like that that you can start kind of considering treating these types of infrastructures like traditional infrastructure and kind of subsidizing that because if we can kind of get to the point where we're not asking people to pay for using our app then then we've unlocked a large number of people in the world that might not have been able to use our apps before um and then the the idea of a soundless transaction means you're kind of authorizing our API to perform certain actions on your behalf that are non-financial so these would be things like posting a comment or posting a picture or things like that where you're not having having to kind of put your financial like self at risk instead you kind of are saying I'm going to make this trade off and I'm going to authorize this API to to kind of uh post and think things like that on my behalf and I can revoke that at any time and then you end up again with a higher quality user experience so those are kind of some of the things that that are really really compelling that enable a good ux and then the other big Focus for us is the developer experience that I'll talk about now so the DX includes a bunch of work Beyond just the API we have a couple of really interesting things that have been launched really just in the last few months one of them is the react hooks SDK so the react hooks SDK of shocks away the graphql API so you don't have to kind of write out these long graphql queries you don't have to deal with things like authentication you don't have to manage your tokens all sorts of things are kind of obstructed Away by the SDK and it's really nice because in the past if you wanted to do some type of query it needed at least 25 or 30 lines of code and you had to set up a graphql client with the hooks SDK you can now do that in like as little as two lines of code so here we're kind of importing a recommendation algorithm called use explore profiles and then we're kind of pulling the data out of that query and and then we're just able to do whatever we want with it so the react hook react hooks SDK we have the react native lens UI kit and the react native lens UI kit allows you to create UI components that have abstracted away like certain types of functionality and just a couple lines of code as well we've seen a lot of people win hackathons with the react native lens UI kit because they're able to quickly build like a mobile app in just a few lines of code and then we also have our new widgets which allow you to kind of do Integrations with lens in just two lines of code as well so the way the widgets kind of look like this and and in practice like this is an actual like these are some of the designs that that you'll end up seeing if you use them and they have a very similar API as well you just import it and then you render that each component takes up to 30 or 40 different props but by default you don't have to pass any props in you can just render a component like this and you automatically get like something at default which is good enough to get started building we also have our graphql API which if you kind of have ever tried to build an application on top of a smart contract you realize that you're very limited on the types of queries that you can get there you obviously at that point uh often will build an indexer but building an indexer is like a non-trivial task especially for like just a prototype or a hackathon or even for a new developer so we have essentially built our own index here where we index all of the different data that's coming off of the events and then we also are offering up like dozens and dozens of different queries so when you think of a database a database is optimized for querying you can say give me the last 10 people that signed up that have the last name that starts with d that live in Maryland that blah blah blah you can't hit a smart contract with that type of query but you can hit a database with that you can also hit our API with those types of queries we have all types of arguments and and things like that that you can do filtering and sorting and things like that we also recently released a bigquery API or a bigquery table actually a set of bigquery tables we had like 50 different tables that are available to query with bigquery and this opens the door to a lot of cool things around analytics dashboards and machine learning and we're already seeing people build some really cool AI stuff with the bigquery API um we also have um a kind of a standard now with xmtp for DMS on lens so you can tap into the 100 x thousand users on lens using X and CP with just a few lines of code xmtp is a really great protocol as well um and then kind of the Integrations that you might build with lens widgets would be following lens sign in with lens share to lens profile view publication view things like that but uh but these are more like if I want to maybe open the door to more distribution for my app but it's not necessarily a social app but I want to kind of like allow people to share the lens you can do that pretty easily now so one of the really interesting things that lens enables that isn't really possible the traditional social media or really anything else that I know of is extensibility around the actual features of the protocol itself so you can actually build unique and custom functionality into lens as a developer this would almost be like if you were using Twitter and you were like oh man it'll be so freaking cool if you could do this thing on Twitter but obviously you're not going to send a pull request to Twitter and they're not going to merge it right you can actually do that with lens you can create a custom module you can then essentially submit it to our uh you know repository and get it merged and you can start using it but everyone else in the world can start using it as well and now you've added a new feature to lens and then um this is just a couple of examples of what that might look like so these are displaying some custom modules that are available that enable you to kind of set settings around your sharing of content and this is kind of an optional view that you can opt into depending on the app so this is linster you click a button when you're about to share something and you now have all these options you can say I want to you know set a limited number of collect for this publication and only for a certain time and I might maybe want to split revenue for anything that gets generated through this with this number of people and blah blah blah these are all custom uh functionality that's kind of built into a module and then another big component of lens is compatibility now this isn't really specific to lens this is more of like a web three I would say you know component but it's especially I think exemplified with like what you can do with lens because with traditional application development you're building out the client and you're building up the server you have to kind of come up with a front-end team and a back-end team you need devops and all this stuff on the back end but with lens you only need to worry about the front end because we're building out and we're managing the back end we're updating the API we're adding features and we're improving it on a daily basis and you can worry about building the front end and what ends up on being unlocked with this is that we have teams of one and I'll like not call out the app itself but it's one of the more successful apps on lens it's a single developer developer they were able to do this because they can only spend their time on one thing which is building a high quality mobile app um and yeah that's kind of that's kind of one of the general ideas that you don't have to kind of build anything on the back end you're just kind of focusing on the front end and beyond that you can also inherit a user base that isn't kind of something you have to boot boot stop from the ground up if you are a developer building a new app you might in the past have to start from zero but now if you launch an app into the lens ecosystem you have a built-in user base of 100x thousand people which once we release once we remove the permission access it will be even more than that and then there's this idea also I'll kind of call out for composibility almost for users and a good example of what that looks like is that if you are someone that is building up your following on one network and then for instance when Tick Tock came out you had to kind of start from scratch with uh with this type of protocol your followers essentially are following you around with you to every new app that that comes online so we'll talk now about the tech stack a little bit so if you want to actually build a production ready app like what would you need to use for lens you can choose either the lens API in a graphql client or one of the lens sdks the the sdks are just now coming to maturation in the past they were kind of like developer preview beta types of situations but now they are um you know basically stable so version one of the actual lens react hooks SDK was just really kind of like pushed out a few days ago we haven't really announced that it's uh now like officially V1 or production ready but um yeah you can choose between one one of one of the other there and then when you upload an uh a new publication to lens you need to store your metadata somewhere so most of the time people are using either bundler with rweave or they're using ipfs we're seeing more and more people kind of though leaning towards bundler bundler is a protocol in rweave that enables permanence and immutability whereas ipfs is more about immutability but not really per unless you use something like filecoin which is really a little bit more complicated I think and then you might also just use some of the same sdks that you've used in the past so wag me hooks ethers rainbow kit all that stuff you'll still be using all that stuff as well and then on the front end it doesn't really matter you can build with react native you can build with react you can build with Native iOS native Android whatever you want to build with and most of the applications are starting to implement uh the DMS so xmtp would probably be the way to go there because you can already tap into all the other uh users using xmtp on other apps so this would almost be like if you sent a DM on Twitter and you responder on Telegram and then you responded again on Instagram but it's all into a single inbox and a lot of people like really like that and there's even an app called Converse that is only for DMS on xncp allowing me to kind of pick up all the conversations from all the lens apps um so we only have a few more minutes so I'm going to run through these major Concepts and and then I'm going to actually start building that from scratch so we can finish this up but I'll call out a couple of the main Concepts one is a profile this is the main object and lens and this is like when you sign up everything that you do afterwards gets attached to this profile so when you create a publication when you comment on someone else's publication anything that you do gets attached to this profile and the TR the profile is transferable because it's essentially an NFC so if you want to move it to another wallet if you want to burn it if you want to sell it you have full control over that and Publications are creating content three main types posts comments and mirrors a mirror is kind of like a retweet a post in a comment is probably self-explanatory and these are posted directly to the profile and the content UI points the content URI points to a decentralized storage protocol typically like again R Weaver ipfs wherever you store that metadata and you can even add gated conditions to these Publications too which is pretty cool so people are building only fans and those sorts of things but they're also building like um gated things for like a dow or a token or whatever on chain interaction that might be there uh collects are oops we go back sorry um collects are really interesting actually because like in uh in lens okay let's say in Twitter you have a like a comment and a retweet and lens you have a like uh comment a mirror and you have a collect and a collect is when you take a piece of content that someone's put out there and you meant that into a digital asset which is uh essentially like an NFC and this is where you can add a lot of really interesting custom functionality so a good example of like what people are doing with this Beyond just you know whatever you might already assume like with nfts and stuff is that you're able to support people and at scale this is actually a lot of money for a lot of people but it also enables everyone to kind of participate so when you think of digital Collectibles you might think of a thousand dollars or ten thousand dollars but on lens since we have hundreds of or tens of thousands of people over a hundred thousand people using it then you only need a few thousand people to collect a small amount to make a large amount of impact so two good examples of this we had a an artist a few days ago drop a song that they had written years ago that they had kind of forgotten about and they said hey I just wanted to kind of throw out this this song I'd created a while ago if you want to support me you can collect this for like a dollar or two dollars and he had like I think three or four thousand dollars worth of collects from that drop that he just threw out there on there uh we also saw a developer who was quitting their job to go Focus full-time on lens just post a tweet or uh whatever a post on lens that said hey I'm quitting my job I'm gonna go work full time on on this lens front end you can collect this to support me for two dollars and he had I think around thirty thousand dollars of Revenue that came in through that publication that uh you know obviously since it's a on chain transaction goes directly into his wallet and it took him five seconds to write that so you can do stuff like that and when you think of the scale that we're kind of going to eventually see millions of people possibly tens of millions of people using this stuff 50 cents 25 cents a dollar types of collects will actually add up to a lot of money and this just isn't possible on traditional social media so what I want to do now is show you how to build a app from scratch and we only have a couple of minutes so we're going to do this in just a couple of minutes so this is a mobile app that is built using Expo which is a react native framework and I want to build out a simple social media application so I'm going to start by importing a feed of profiles oh yeah that's not showing is it I'm going to mirror my screen sorry about that all right can everyone see that now okay so we're starting off with a basic mobile app with nothing there this is literally what you get when you scaffold a new Expo project and this is where I was so this is the app what I want to do is start building out our mobile app so I'm going to first import from lens protocol this profiles component and this is going to start us off with a feed of profiles now when you log into Twitter you get a feed of Publications and when you click on someone's profile you get their profile details we're building out a similar type of view but we're starting with the pro the list of profiles for us to view first um so I'm going to go ahead and just add a potting top of like 70 units and I'm going to save that see if my network connection is working okay okay I don't know if my network is no it's working good Okay cool so this is what we have now and then like two lines of code we started off with just a single component this is rendering a list of profiles and what we can do is we can extend this component with all types of different props so we can style this component we can attach click handlers to follow and on press and we're about to do that as well but um you know this isn't that interesting instead we might want to click on a profile view the profile details and go even further than that so what I want to do is start off with um some navigation so instead of just rendering the profiles component I want to import a navigator and I want to render that Navigator and instead of just rendering the profiles component I'm now rendering a navigator that's rendering the profiles component it's kind of the same view that we had before but now we have the profile header we can click on a component and navigate to the details of that so what I want to click on is a user and I'm going to navigate to that user details so to do that I'm going to create a new file called uh view profile or we'll call that profile view whatever and this is uh importing this profile of you so we imported the profiles component plural now we want to import a singular profile this is going to render an individual user's profile with this component we can pass in the profile ID the handle or the wallet address and this is going to render out everything for a profile that we'll need and this takes in a few dozen different props that we'd like to pass in for us though we're only going to pass it in the profile and a function that will handle an on comment press meaning we want to view the comments of the Publications details that we're about to see so I'm going to go ahead and save that and then we need to go ahead and import that here thank you and then we're going to add another screen to our navigation that we're going to call profile view and now what we want to do is click on a profile and then boom we're now navigating to that profile and we see that we have all the profile details and we have something nice that kind of gets us started off I don't like the the way this looks though I'm a big fan of Dark theme so I'm gonna go ahead and import Dark theme from the navigation but I'm also going to import a component from lens called the lens provider and this allows us to pass in global configuration to a lens application and all we need to do is wrap our main component there and that can also import the theme component and then I can now set the theme as theme.dark and now we have a dark a nice Dark theme and if I click on a profile then we see the darkness I want to now view comments though because I see that there's like let's see here 100 or a thousand comments whatever there so the last thing we're going to do before wrapping this up is we're going to have a comments View and we are going to render a feed component from the lens UI kit and this renders either a feed of profiles or a feed of Publications in this case we're rendering a feed of Publications and to set up the query and everything correctly we're passing in two props one for the query itself and uh the other for another on comment press so we can have a recursive view of the different public different comments and I'm over on time so I'm wrapping this up now um I will go ahead and render this and then we'll be done so profile view comment from comments View we click on comments and now we're viewing the comments if they load there we go so um that's kind of it as far as my presentation is concerned I had maybe one other thing I was going to go over but I think we're done on time so yeah that's kind of it so we're going to be hanging out at the lens Booth the rest of the week we have swag for anyone that's building on lens or that's active on lens we have bounties that are set up for lens and for Ave so we have a lot of ideas that we'd like to share for anyone that is looking for something to build you can go to the lens Twitter or the lens uh lens lens on lens or lens on Twitter and kind of see a thread that we publish that gives a lot of ideas for developers on what they want to build um and if you have any questions like come talk to us and then also one last thing I'll throw out we also have a grants program so if you want to build something beyond the hackathon we have up to fifteen thousand dollars initially available for developers that want to get started building on lens and need a little bit of money to kind of like uh take it all the way there so that's it thank you