Dappify

Welcome to another great DevNTell. DevNTell is a thirty-minute window for members of the DAO to showcase something they are passionate about or have been working on. This could be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure a project, etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community. And today I'm happy to introduce to you Giancarlo who will be showing us his project Dappify. Take it away, Giancarlo.

Hey, thanks Narb. Super appreciated. Thank you for having me here. Thanks everyone for taking a bit of your Friday to come along. So I want to take the most of this and show you what I've been building on. Everything I'm going to show you here is half demo, half going through data and trying to figure out problems and how to solve them through the prototype at the end. We're going to dive into the technical aspect on the second half. I would advise if you have any questions as I go along, don't leave them for the end, just ask me in the moment so it's easier to track. So yeah, feel free to interrupt me if you have any questions. What I'm going to present to you today is Dappify and builder.

My name is Giancarlo Sanchez. I'm a software developer from Venezuela. I'm currently living in Dublin, Ireland since 2014. I'm a co-founder of Dappify.

One of the problems that I want to showcase today is how critical are developers for the whole technological ecosystem. There are two problems that I can see today. Software is needed everywhere and it's very slow to build. You need developers, you need a lot of manpower and basically that's how all the software and technology gets built today.

The second one is limited engineering resources. That makes coding the universal bottleneck for creating new software and new solutions to problems through coding.

So I'm just going to run through data here for the next ten minutes. This is data from different places and it's just to give a sense of direction. This is for example the Web3 developer supply. I was super amazed to know that up until the end of 2021 there were only around twenty thousand developers that were focused on Web3. And if you dive deeper into the data, the full-time developers on Web3 are even smaller.

If you put that into perspective, let's compare the developers that we have on Web3 versus the traditional developers all over the world versus the total world population. We have around twenty-five thousand on Web3 versus twenty-five million developers all over the world, which is a thousand X. And then the total world population is eight billion people. I'm going to share the links I put below at the end of the presentation.

Out of those twenty-five million developers we said for Web2 or the traditional web, most of them are in China, India, Europe and the US. For Web3 developers if we manage to allocate the same number of developers as we have in Web2 per region, this would be something like this. Seven thousand in China down to one hundred twenty developers in Australia. They could probably just create a DAO for the whole country.

So let's figure out now what we build and what exists today. One of the most amazing metrics that I found is there are one hundred million active websites today. And there are two hundred fifty thousand websites created every day. There's one hundred thirty million public repos on GitHub, three million apps on Google Play Store, two million apps on the App Store and so on. There's a lot more contribution than developers that there are.

In Web3 then these numbers are very difficult to get. But you end up having around one hundred seventy to two hundred repositories for blockchain and Web3. The most used language is JavaScript for good reasons. And that's basically it.

And if you compare now the ecosystem and what's the contribution ratio per developer. Let's say we have twenty-five million traditional developers and three hundred thirty-six million artifacts. Every developer contributes to 13.4 artifacts in their lifetime. Compared to Web3 you have twenty-five thousand developers and one hundred seventy-two thousand artifacts, so that's 6.88.

Two hypotheses here. The first one is Web3 lack of maturity around standardization leads to reinventing the wheel. It's a very new space, we're building something from scratch. We need time to mature and we're going in the right direction but we're not there yet. And Web2 maturity around low-code and no-code solutions that empower citizen development. So it's not only developers that are building the Web2, it's also people that don't know how to code. That gives a lot of power. Out of this artifact per dev ratio, there's a lot that comes from citizen development.

No-code/low-code offers a faster and cheaper alternative that let more people build better software. That's the premise that I'm trying to validate basically.

Lessons learned from Web2 is some weird statistics here. Businesses spend three point sixty-one dollars per line of code. Low-code and no-code tools have a potential to reduce up to ninety percent the time it takes to develop. Seventy-three million or thirty-three percent of all the websites are built using no-code tools.

But what are the challenges today? Why is not everyone just using no-code and low-code? Forty-seven percent of people don't understand how to use no-code solutions. Others are concerned if they develop in this platform then they're going to be stuck to this vendor. Others question the flexibility, the scalability and also the security.

So what's the holy grail for a no-code low-code solution? It needs to be intuitive, portable, flexible, scalable and secure. This is where I'm going to start then presenting you the solution and the prototype that I'm trying to aim to get. Brace yourselves, we are going sci-fi.

The vision here is to create an ecosystem to support one billion builders. I told you we were going sci-fi.

How are we going to do this? What is the strategy? A decentralized model would be something that could empower something at this scale. Let's start from the user. People use tools, websites, applications. The way that we think of building them is from templates. You can get something similar to what you're trying to build, just edit it and then launch it. These templates then are built from modules. These modules can be created on any language and once they're implemented they're interoperable. So they can talk to each other, they can add context to each other.

And the way that we want to do this is have developers create interoperable modules that's validated on-chain and validated by curators. These modules can be packaged into templates for any use case, styling, layout, any modules by citizen developers. And validated by curators also. These templates can then be launched as applications and then users can act to it. It's a two-way door in which the contribution goes to the left here, you have developers and citizens creating content and then having users use them and that revenue that gets generated be distributed back to all the contributors. I'm going to explain a little bit how this interoperability works later on today.

How do we try to fit the holy grail in our prototype? How intuitive? Let's use a drag-and-drop builder so people don't need to code. Portability? Let's have people if they build something they just have it exported and they can continue that on their own. Flexibility? The community will do it. If we have developers creating modules and we have community creating templates, then it's the same community that's creating the content. Scalability? If you have granular enough modules it can be achievable. Security? On-chain verification could be a good start.

What is builder or the prototype that I'm trying to work on? Builder is a multi-purpose web app builder platform with composable modules like Legos in which people can just drag and drop components into the canvas. And these modules can talk to each other. In here you have a link to our ETH Global showcase with builder. There's a lot more information there if you want to see the source code, videos, goals.

So let me give you a live demo time here and tell you how this works.

This is the drag-and-drop builder. There's a few components that I built for the prototype here. These are all components for Web3. Let's build a use case in which we're going to create an application that a person can log in using their wallet, they can call a smart contract and they can see data from another smart contract. And they can talk to me because I'm the admin of the website.

The first thing we can do is just get the connect wallet here. It adds a button and there's configurations. In this case we're using Moralis to give the context. And then we're going to inject the smart contract UI. This is already pre-made and the way it works basically is you can set up the contract address, the ABI and from that ABI what's the method that you want to have access to. So it would render what are the attributes that you need to fill in and just put a button.

Now that we can mint stuff, let's add a way to visualize. We're going to add a chart powered by Chart.js. In the back it's using a subgraph from The Graph. Specify the API, the query and from the response specify the title and X and Y labels. You see that the pricing here that we have on the left side is native tokens. Let's do something about it. We're going to import this price context from Covalent. The price context now adds and displays in USD. These components don't know about each other, they're just injecting and emitting events and the other components listen to those events and they react to that.

Last we add a chat support. This is similar to the Intercom widget. Let me just sign into MetaMask. Last step here is just launch it to IPFS.

I'm using Magic Link for an email to have a Web3 authentication. It's simple for users to get. Now we have our site live in IPFS. It's a full app already using the context from each other components. That's how interoperability and composability works.

Another example from XMTP. A user can come in, open the website and talk to me because I was the address for the administrator. And this uses XMTP in the background. Similar to Intercom widget like I mentioned.

Now let's use our address. I'm doing this currently on Polygon. Sending the transaction. Showcase the ability here to add context. Each component can enhance other component's ability and you can create more than just one use case in which you don't need to know how to code.

How does it work? These are the composable and interoperable modules. This is the canvas where you can drag and drop stuff but each of these modules is a wrapper of HTML, CSS, JavaScript and vendor-specific logic. Each module has a specific namespace and this namespace gets validated on-chain. When someone submits modules to the platform to be usable they need to be on-chain. Definition of namespace and events they send and receive. Each module can emit events and listen to events that are on-chain validated to support this. And that's how you basically enable composability with certain level of security.

So a little bit how it works here. Wallet connect using Moralis, JavaScript, CSS, HTML. Smart contract UI which is just Ethers.js and JavaScript. The chart is Chart.js and leveraging The Graph API. Price context is using Covalent. Chat widget is XMTP. For the builder and packager I'm using GrapesJS, an open-source drag-and-drop builder. Everything is just super modular. And then on the publisher side I'm publishing to IPFS and using Moralis to track users.

You can see the source code on gianksp/builder. A module is just a plugin that receives the editor context and you define a block with the HTML, how it's displayed, category. Type of properties you can configure from no-code part. And a script for custom logic. This is kind of the super minimal example.

That was everything I have today. And as a memento for everyone being here I created this POAP called Dappify DevNTell at Developer DAO. We're trying to build this community of developers and citizen developers that will create all this. You can see it in this gallery. An easy way for you because I just minted one hundred fifty tokens, so I need to distribute one by one. I need to do better POAPs. An easy way for you is come over to our Discord and go to the giveaway channel and click on the thread for DevNTell and I'm going to distribute from the set of URLs that I have. I don't know if you have any questions.

Giancarlo, that was amazing man. So you basically launched a dApp with drag-and-drop in like two three minutes. If what I saw wasn't magic. So that's really awesome. How long have you been working on this before you got it to prototype level?

Look, I was a software developer in Amazon until end of May and then I decided to just move to this space so June and July basically. I built this prototype for HackFS. So it took me around the last three to four weeks because HackFS finished last week.

Ah, gotcha gotcha. So this is pretty fresh. That's awesome man. Yeah, well done. And I guess one last question for me before I open it to the crowd. Since it's an early prototype mode and you're in Developer DAO, is there a particular set of skill set that you need from folks here if they're interested in helping you building out? And how would people get started if they want to contribute?

Yeah, look guys I would be super honored if you get to kind of look at the code. It's going to scare you guys, it's not clean, it doesn't have much tests, so I'm going to work on that. So the best way I would say I'm going to keep in touch, you can join our community here on our Discord. At the moment there's no clear structure for that.

Gotcha gotcha. So just jump right on in. So that's awesome man. Any questions from the crowd here?

I was just curious about versioning. What happens when the program changes?

That's a good question. I haven't thought that far. I think we could implement versioning through IPNS. For the applications themselves we can use IPNS. For versioning inside we can implement some kind of NFT in which each module becomes an NFT. That gives the ability so that if you want to sell your modules other people are getting revenue from it. On the metadata part we could use a version system in which the owner of that NFT can add new metadata and update it.

That's interesting having an NFT possibly as a way to sell your code. Yeah, thank you.

Awesome question. Anyone else from the crowd have a question for Giancarlo?

I was curious about there I saw part in the slide about curating the modules. So is that community curated and how exactly would that be facilitated?

Yeah correct. So in the curation part, what happens here is one thing that we know is whenever someone is submitting a module or whenever someone is creating a template, there needs to be some kind of verification that that module doesn't have any vicious code inside. It needs to be kind of open source validated. The best way of doing this is through a DAO in which everyone is incentivized to make sure that things get filtered the right way. And if you want to make it scale so that one billion builders get to get in this, there needs to be a decentralized way to do that. That's why I'm leaning towards Web3 as the only solution for this.

Nice, thanks.

Okay we got time for one more question before we wrap up. Great job man, thanks. Awesome, thank you very much guys. I'm super super thrilled, super excited to be presenting this to you. Thank you for coming on, this was a wonderful presentation. Like I said that was awesome. We launched a dApp in like two three minutes. Drag-and-drop. Sick. Yeah and with that I want to wish everybody very happy Friday, happy weekend and today's DevNTell POAPs will be driven through Giancarlo's POAPs because they look much much nicer than the ones I create. So be on the look-out for how to claim those. Giancarlo are you going to post them in the chat here? Ah yes, he has posted it in the developer's voice. I think it's simpler if you join the channel and go to the giveaway. If you don't want to join just DM me and I'll send you a link. Excellent. And with that we will catch you all here next week. All the best gang. Thanks Narb for having me, thanks everyone. My pleasure. Thanks guys.