dAppHero: Building Web3 with No Code – Dennison Bertram

so hello my name is Denison Bertram I'm with tap hero tap hero which we're going to talk about today you don't need to code right our good friend Abe sort of pitched in a comment for that basically what is the problem today when we think about interacting with web three when we think about interacting with smart contracts when we think about interacting with the future right the biggest thing is blockchain is hard block chain is has many different libraries those changing standards those few best practices this outdated documentation and getting help is also decentralized which sounds cool but when you're in a tricky spot it's very difficult to understand where to go to get help with what you're doing however number one the most difficult thing in blockchain is you need to code you have to know how to code to do any of the things that we're building and are any of the things that we're talking about this is a pie chart and I don't even need to label it for you but I think you know which slice of this pie chart is people who know how to code right so for web 3 when we talk about building a front-end for web 3 when we want to build an interface to connect to the future to the things that we're building it takes nearly 200 lines of code just to get started that is just to get your project to the point where you can say ah now I can begin from experience at the hackathon today there will be many people who come in here as experienced front-end developers and they will still spend hours figuring out the idiosyncrasies of using web 3 many of you who are using web 3 I'm sure you remember your first experience that you figured out that you called a function that returns a string or a number and you got a big number object and you were like what is happening so also adding new features as nearly as difficult right in blockchain we have web 3 but now if you want to use all the other things that we have out there it's even harder you need new libraries you need new documentation you need new sources of information about how to add this stuff we also have choice fatigue these are just a number of the tool sets that you can use to get started today they are all awesome projects but you have to think about it are we going to use jQuery or react or maybe we're a few maybe we're Rimbaud maybe we're gonna start with firebase all of these things go into the choice fatigue that makes it difficult to build on what we're trying to do not to mention if you are not a developer or a person that doesn't consider themselves a developer this kind of choice fatigue is lethal for our goal of onboarding people to what we are building so how do you feel if you're not a developer basically this right when we talk about 1 million developers we have to realize and understand that half the room mentally gets up and walks out because people sometimes hear developer and that's a scary word right like I think many people have dealt with the idea of imposter syndrome and imposter syndrome is real also for blockchain for many of us who've been here this feels like the obvious future for for a lot of people it feels like particle physics and it's something that can be off-putting so the solution stab me hero so it's a single simple interface to connect any Bakhtin application to your website with little or no code required so how does it work tags right so take a step back for a second when you build something if you build a smart contract right and you're connecting to decentralized exchange and you're gonna do some sort of zero knowledge proof and then you build the front end in my personal experience I would have an easier time building a multi signature contract gnosis back da that has auger prediction markets then I would be able to build a pop-up with a blue button that squiggles when you click on it and has a nice drop-down shadow right I'm not a front-end developer myself and it's a little bit much to ask for designers to be front-end developers and botching engineers blotching engineers to be front-end developers and designers and front-end developers to be designers and blockchain engineers right this is a big ask and as we go forward in our ecosystem we're gonna have to think about ok how do we support more than just the people who can build smart contracts so DAP hero it works with essentially anywhere you can play with V HTML so that means web flow glitch JavaScript Squarespace react Drupal PHP PHP may sound funny to us when we think rust is cool but PHP still powers tens of millions of websites around the world which are doing real work adding real value for real people right and so we need to find a way to be able to support these people who are building on these sites and platforms the other really important thing to remember about everything that we're doing here the technology stack the the different protocols that we're using the blockchain the fact that we're even on the FIRREA most of us is non devs don't care right the things that we think are awesome are not awesome to the people who would normally use a tool like Squarespace who would normally use a tool like Wix or something like that and to discount these people is to discount tens of millions of websites where real people are doing real work and that is part of the future of where we want to go so one of the core ethos about DAP hero is spend time building your thing not the thing you think you need to build for the thing you're trying to build needs in order to get built and if that hasn't resonated with some of you you will feel it if you if you're not like particle physics level web 3 before you can even get to building your front-end for your app you have to build first the smart contracts if not you're gonna be using someone else's smart contracts you're just fine totally cool but then you're gonna think okay so react or is it view am I using a starter template I mean using kit am I gonna use web 3 up maybe I'm using ethers up maybe I don't want to include the IP FS binaries because now my thing is 4 megabytes large as a download these are this is the kind of choice fatigue this is the kind of building the the canal to ship the product to just get started that is really keeping people away who are outside of this room from building on it as I mentioned before developer is a scary word to many people and at that pyro we're trying to get rid of that we're trying to really cut down that friction so we're an alpha right now I'm gonna just give you I think I have a couple minutes I'm not sure if I just blaze through this I have like four minutes so I'm just gonna show you a really quick example of what we mean by using tags and being able to use a no code tool like web flow to build web 3 DAPs and actually I have a challenge to put out there in general we believe that a non front-end developer non-technical person can build a front end for adapt faster with that Piro then a technical web 3 developer can build a front end for adapt using something like react so let me try and load this up live demo time so I'm loading up my web flow and what I'm gonna do is I'm just going to take you through one of the templates that we already have set up in our tutorial section to show you how that might work hopefully we can see this well ok so this this is a this is just a template it's cloneable in the web flow store so it's free anyone can use it and play with it the idea of this is to show you how to use three-box which is another feature that normally if you were going to build using react or view you would actually get this library you'd have to understand their documentation you would have to put this in it would be another part of that cognitive load that you would have to deal with and building your application and then you would have to be really concerned about how it works so in this example you can use standard tool sets one of the things that we're trying to do is allow designers creators entrepreneurs to build with the tool sets that they're actually comfortable with the things that they already know so we don't ask them to understand all of blockchain just to get started so for this example right I'm gonna play with it just to sort of give you an idea of how sort of simple a tool like web flow would be to use you can style it however you want blah blah blah the key thing is when you want to get web 3 into your template into your project what you do is you go to your script tag and we have a whole website that gives you your script tag and you can add smart contracts to it you add a script tag to it which is the DAP hero engine which runs inside of your Dom watches your Dom sees all the things that you label they tag saying hey I want blockchain here and then it automatically just does it for you so in this case placeholder name for example this is live demo time so you know this is our alpha we've been on this so you know go easy basically what you do is you just tag if you can see that I don't I hope you can see that properly I don't know if you can see it over there but you just add these attribute tags so you say here my feature is three box and the thing I want here is my user's three box profile name tag it and plain English here you'd say hey this is my three box three box profile image so you just tag it as okay this is the property image that's what I want this to be you add a web three button here which is akin to asking users permission to access their web three their wallets you just say that's the enable button that's what's going to enable my application and then you click publish hopefully the Internet's not to smile so you click publish here it's ready and what you have is you automatically have a web 3.9 all you did was label these elements saying I want this blockchain stuff here and you're finished the process is done and what this is really important for is is that we are reducing that cognitive load for people who are not in this room to being able to access the power of blockchain but for us who are in this room and do no react or view and love getting into angular and building it in Gatsby we can now prototype way faster you do not need to build the thing that you need to build in order to build the thing that you're trying to build you can just get started another example that we have of this since I'm gonna steal another minute from us is to show you as well you can also do this with templates inside of glitch which is something that we're also supporting right out of the box so this is adapt your interface so let's go into I'll show the same thing for the three box profile demo but in the HTML version so you can see because we're developers here what we're actually talking about under the hood so if you open this up this is all the HTML necessary to run a three box powered decentralized application you have normal paragraph tags normal h2 tags that's it and then when you go again click the enable button and you have a three box enabled app right like that you don't need anything else the friction is much lower so for us in the room we're able to prototype at a speed that you weren't able to prototype before and again we're really looking to enable this for platforms like Wix for Shopify Squarespace web flow so that we can bring in not just our creative energy but the creative energy of everyone who's currently building on the web to world because something that we tend to believe in the ecosystem is is that we need to rebuild everything that's already been built but the truth is there's a lot of lessons from web two that have already been learned and we should learn from them and put what we are building into the future using the tools that are already here so once again this is app hero we have some bounties the could this weekend basically if you do some templates using glitch or templates using web flow for whatever you're working on we're excited we're giving six bounties for five hundred die each um so if you see us walking around we have shirts we don't have a table because it's two of us here today but come check us out ask us any questions and yeah build with us [Music] you