Essential Eth

Hey, everybody, welcome to what's going to be another great DevNTell. If you didn't know, DevNTell is a 30-minute window for members of the DAO to showcase something they're 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 Dawson, who will be demonstrating his project, Essential Eth, to us. Take it away, Dawson.

Sweet. Can y'all hear me?

Yep, yep.

Super. Hey everyone, I am Dawson, daws.eth. I'm the founder of Earnifi, which is the website for checking your airdrops, and I have been a member of DevDAO since genesis.

I minted two and I tried to collect ones that looked really hacker and cool, but I don't actually know if they are.

But yeah, you probably not see me much around the Discord because I do try to keep my notifications down, but I've always been wanting to see and plug back into this community. And yeah, voice chat sounded like the right method because I get to chat with you all directly and yeah, we don't have the spam of messages flying through of 25 different threads, which I do want to learn how. If you have advice for how I can navigate that, let me know.

But yeah, I'm here to tell you about Essential Eth, my JavaScript package. It's TypeScript and JavaScript. This is public on GitHub, and I can get into the pitch of it for just a sec, but I also kind of want to do interview style back and forth because I have never done these nor listened. And so maybe I can pass it back and actually get a couple starting questions or maybe some guidance of how you want me to go into the description.

Yeah, for sure. I guess the first thing would be what made you want to join Developer DAO?

Oh, that one was easy. So I have been waiting for a developer community to join and plug into. I'm a nerd through and through and although I ship products and, you know, have made a business, I'm definitely a software engineer at heart and I'm always looking for the hacker mentality and competing in ETHGlobal stuff just nonstop. So when I heard that there was going to be a community of all of us coming together, I was like, oh, this has to be what I plug into from the beginning. I'm ready. Even though I think the gas cost, the transaction fees to mint a genesis were actually pretty high. It was like $75, maybe it was $50 just for the mint. I was like, this is totally worth it. I'm definitely looking to plug in here. So and it has not lied. It's been an amazing experience so far. At every conference, there seems to be cool DevDAO stuff, so I'm happy to be a part of this.

Yeah, 100%. I've only been to one conference, but the only one I went to, I consistently was swarmed by people asking about Developer DAO. So I think you've made the right choice, as did we all. And yeah, I guess what was your inspiration, or maybe you can go a little bit into what your project is and maybe what the inspiration was behind you building it?

Totally. So what I've been building is called Essential Eth. It is a drop-in replacement for ethers and web3.js. It's 10 to 25 times smaller. And so this drop-in replacement is something all of us should consider for our front-ends and for our websites because it allows the pages to load way faster. And that speed translates to both customer drop-off and folks in emerging markets unable to use our websites. So I saw this firsthand experience while building Earnifi that when I'm trying to create a really lightweight website that's fast to load, there's a hard cap, a limit you run into when you're using ethers or when you're using web3.js where there is no extra performance you can eke out of it. You're at this limit where ethers is optimized already to a massive, complex, really good quality codebase, but it doesn't have the necessary separation in order to create extremely lightweight bundles. And so I started from the ground up in the ETHGlobal hackathon nine months ago building Essential Eth and I've been working on it ever since.

Oh, awesome, awesome. So would you say it's in a usable state or is it still, are you still building it out?

I'd say both. So I've been using it on Earnifi. There have been millions of requests passing through it. There's hundreds of thousands of requests that pass through it every day. But in addition, it also is still undergoing and I've made that very clear in the README for the given functions which are work in progress. So there's a massive amount of functions that are 100% production-ready. I can very confidently say they work properly. An example of that is let's say you want to convert ether to wei or wei to ether. It's actually a really simple operation, but you need to use a library in order to make sure that you have decimal precision and you don't have floating-point rounding errors. If you use just JavaScript, you reach a limit very quickly where you actually get incorrect data coming out. This is an example of, you know, if you have a wei, like WEI, if you have wei values, you could have like, whatever, 11 zeros, and that's actually above what JavaScript can handle on its own. So now I've pitched why you have to pull in a library for that. So web3, ethers, and Essential Eth all have a function call for this. The function call in web3 pulls in, I don't even know how large of a bundle because it wouldn't calculate on my computer it was so big. Ethers pulls that in at 16k, that's kilobytes, and then Essential Eth pulls that in at 3.3k. So this is an example of a really simple function that should just work, should be easy for you to remember, and it should be just easily importable. And so I've also done a few easy name rechanging, name updates to function calls. So, you know, if you have ether and you want wei, why not call etherToWei? Versus to this day, even though I've been full-time in Web3 for a year and a half, every single time I need to convert ether to wei or wei to ether with web3 or ethers.js, I have to pull up the documentation because it's called parseEther and formatEther in ethers.js.

Oh, I see. Yes. Interesting. So what would you say was, some of the challenges you may have faced like during your development of this? Obviously, it seems the package size was one of the key points you were trying to solve for, but did you run into any challenges while they were doing that or any other things you wanted to see improved from ethers.js or web3.js?

Absolutely. So this is a problem I think a lot of developers and hackers like us struggle with, which is once you start to rebuild something or you try to reinvent something else, it's really easy to just say like, why do they do it that way? I'm not going to do it that way. And you end up reinventing more than you need to. And so that was my initial issue is I was making a library that was completely greenfield, which means like if you wanted to replace ethers.js with my library, that was going to be impossible, or that was going to be a really slow process. And so yeah, just a couple months in, like right after the hackathon submission actually, I had to like pull myself back and actually say like, okay, these function calls should actually mimic ethers as much as possible. They should look the same as ethers as much as possible and just be like a drop-in replacement. And so I think the, yeah, that was the primary concern was being overaggressive in how much I was going to replace and like try to fix because there's this quote that I really love to live by which is, don't fix it if it ain't broken.

Yep, yep. 100%. 100%.

But sometimes, sometimes we can break these rules. I guess did you have a demo or whatnot that you wanted to take us through?

Yeah, absolutely. Should I screenshare? How does that work?

Uh yeah, you can screenshare. So there should be a button, the second one to your left, that should pop up a menu for you to share the screen. No, that's the one for your video.

Hello, hello. I got that going now too, though. I'll just leave that going actually because I think it's a little personal.

Yeah, that's fine.

Okay, can you see my screen? Sweet. So before I jump into an actual demo showing you what it looks like, you can basically imagine this as ethers.js. So you pull in functions then you call functions for converting to wei, calling smart contracts directly, getting some like read-only data, and then it's not that it reinvents that part of the process, it's that it does that in an incredibly small amount of code.

And so right here is a screenshot of just the different download times within the options you have as a Web3 developer. So this is the package we're talking about that I'm making, Essential Eth. The download time for the entire package in a slow 3G network is 362 milliseconds. So that's a third of a second. Ethers.js is 2.38 seconds for the same thing. And web3.js is 12.77 seconds. So if you've learned anything from this, it's use Essential Eth. But then if you don't want to learn that from this, don't use web3.js on your front-ends. That's the biggest tip I can offer everyone starting today. If you can replace web3.js on your front-ends, you should because web3.js is not optimized for front-ends. It's not bundle split or tree-shaken properly, which means that your package manager, your bundling system, so like webpack or esbuild, those package builders do not know how to optimize web3.js. And then in addition, they don't know how to optimize ethers.js either as well as Essential Eth is. So those are the like quick descriptions of these loading times.

But I'd also love to offer everyone up, you can read more about any of this at e-eth.dev. So that's E as in Essential Eth. And e-eth.dev is just a typical landing page for tech products where it outlines a couple of things you can do and then examples. So this is the one I was describing earlier with ether to wei and wei to ether. That's just a super simple function call that you need a library like this in order to avoid floating-point precision errors. But then there's a bunch of other utils. So not only are those documented here, this is going to be the most verbose documentation. This is not going to make sense to some people because of how elaborate the TypeScript docs are here. So if you need something simpler, the README actually has a trimmed-down version of all of the functions. And these are pulled dynamically and examples are put in.

And so I'd say the README is actually probably the best place to go to for anyone which is just github.com/Earnifi/essential-eth. You can also get to that really easily from e-eth.dev. But yeah, so those are the super simple utils I described, but where it really gets powerful is when we talk about JSON-RPC provider. So this is where you can actually connect to a smart contract or call on-chain data. And at the moment the library is read-only. So if you are looking to put this into your front-ends to like mint an NFT on behalf of people or allow them to interact with DeFi and write data, that is not yet enabled.

And so the reason that's not yet enabled and why I'm kind of going on this global tour to try to tell the world about Essential Eth is that that part requires a ton of extra time and work. And that part is coming soon. But before that has come, it's also still very usable as read-only. And there's plenty of sites that need fast read-only functionality that are not yet using this. Like for example on Uniswap, if you're looking at Uniswap's analytics page, the analytics page could be using Essential Eth and that would make everyone's load way faster. Yeah, and then I can mention the fall-through provider real quick or we can go back and forth on questions again.

I guess this is a great point to pause for any questions from the crowd. Does anybody have any questions for Dawson?

Yeah, definitely. Hi, Dawson. The load time across DApps generally sucks, right? I always kind of thought it was because people wrap entire Next.js apps in like providers for these libraries, but I never kind of really realized the weight that we're kind of loading into the page. Is your library doing anything differently or are most of the performance optimizations in terms of like page load and whatnot coming from the massively reduced bundle size?

Yeah, good question and I'm glad you've dug into the bundle to know that that situation as well. So that is the core problem that we have with slow page loads is either the whole application is wrapped in a provider or like most of the application is wrapped in a provider. And so the reason those providers are so heavy and the reason those providers slow down the page load so much is because of ethers or because of web3. And so the provider itself is a part as you see on my screen here JSON-RPC provider. This is the, you pull in a, it's called a web3 provider I believe when it's in your browser. Но this provider is the cause and source of that slow page load. I actually do have other graphics I could pull up for that but it would take some poking around so maybe I'll do that near the end if there's time of the current Earnifi bundle of how large the provider really is. And so Essential Eth like the very next thing on the roadmap is to make a web3 provider such that you could fully wrap your application in Essential Eth instead of ethers. And so for the time being because there's not write functionality anyway, it doesn't make as much sense to wrap your application in this. Но also for the devs out there again the best thing you could do is like not need write functionality but that's a really crazy thing to tell a full application to do. So instead the best thing you can do is don't wrap your entire applications in a provider and if you need to, there's a certain library, I forgot who it was but maybe I can find it later for optionally opting into when the web3 provider is enabled around your application such that on initial page load you don't need to load all of the provider. Did that help answer the question?

Yeah man, totally. Like I never, I hadn't been really coding a huge amount since like November, but was like hating the slow UX on DApps and then looked into it and saw that so like anything that can solve that problem is amazing. You've just had one of these solutions architects respond on Twitter by the way from seeing the library to say like this is amazing. I'm going to use this right away.

Oh yeah, this is the way.

I believe there was a question in the chat here. What kind of optimizations did you make? I.e., how is your library smaller than ethers and web3? This is from omniflent.

Yeah, great question. I love this question too because now we can get into some of the technical details. I'll try to make sure it's understandable for folks that are not really deep on there's almost no one actually that's deep on this exact part of the Web3 stack because we just use tools like ethers or we are a smart contract developer or we're like maybe you're like a core developer on Ethereum. And so there's this gap in between which is the JSON-RPC spec, which is exactly how the ethers library interacts with an Ethereum node. And so that part is what's mostly rewritten. So I'll make it actually way simpler than how I just described with the pretty technical terms. Your library whether you choose ethers, web3, or Essential Eth is just doing a bunch of really well-formatted HTTP POST requests. So it's literally just a bunch of posts. Like this is a in a way this is just a like API wrapper. Like the API to an Ethereum node expects these certain things for these certain function calls like getBlock returns the most recent block. But getBlock also then has certain. Oh there's a lot of audio coming through for John-Mac.

Yeah, are we ready?

Thank you to whoever muted. Someone's ready for something else, it sounds like where he's at. So it's like an API wrapper the way you'd have like a Coinbase API node module, the way you like npm install this. And so again Essential Eth you can npm install it. And so that was like the foreground of like why this is faster.

But I've also gone into. No, actually don't have it described well here. So let me just tell you verbally which is that the first biggest thing is that the BigNum library, so the library that handles that floating-point precision I've described is a four times smaller BigNum library. And so already practically every function within these libraries requires a BigNum library. That way you don't have floating-point precision errors. And so that already is what cuts the function calls like etherToWei and weiToEther down so much in this pink screenshot. But that's like the layup. That's like the easy first step. That was what I did like day one of writing this library. What was found after that was there's a very large amount, like a very large amount of the bundle size comes from these crazy encryption and like crypto libraries, like crypto as in real cryptography. And so those real cryptography libraries are often times only used in the write-only functionality. So if you are doing read-only, you really only need just this like fancy post interface, this thing that makes post requests really well formatted for you. And so that is what I focused on and that is why the library is so small. And so as I'm adding write functionality, which there's no read-only functionality yet, that's when the heavy parts of the library will come in and there will actually be a separate module for like Essential Eth Read and Essential Eth Write.

Gotcha, gotcha. And there was a follow-up question asking I believe what big number library you used in Essential Eth.

I use Big.js. So let me show you that on Bundlephobia is kind of like the bible for me as far as bundle sizes. So Big.js comes in at 2.9 KB minified gzip. This is the number that matters here on the right assuming you have a proper like build system and bundling. Also just a real quick performance thing for other folks too, if you're checking out libraries online, consider a site like Bundlephobia before you ever npm install stuff especially if it's going to your front-end and you run like a even small size project that there's visitors. You also want to look and make sure that it's tree-shaken. So right here this little leaf or right up here, tree-shakable. That means that assuming you're using webpack or a moderately advanced bundler, each function call you want to use can be separated out.

And so let me show you what I mean by that with Essential Eth. So down here this exports analysis, I know this is a lot to see and maybe overwhelming, but let's say you want to pull in just the Keccak-256 function. If you want to pull in just this and the library has this little tree right here, tree-shakable, that means that in a proper bundling system this will only cost you 2 kilobytes. But if you are using, let's say you're like on a WordPress site and you want to pull in a library like this, you have to pull in everything because WordPress is not set up to split bundles. If you're doing that then you pull in 18 kilobytes. And so this is the advantage and why we've moved towards really advanced and difficult tools like webpack. Luckily for those of you using Next.js, all of this is handled for you and like Nuxt.js and those build systems solved already for you.

Interesting, interesting. Yeah, I had no idea about this site or these types of optimizations. So that's pretty awesome. Thank you for sharing that. We have about seven-ish minutes left. Is there any other questions from the crowd at this point?

Yeah, I've got a product one about Earnifi, Dawson, if that's all right mate. It sounds like when you were telling the story that the motivation for doing it was the problems that you found when you were building Earnifi. Have you got like a sense of the like impact on metrics from switching from one to the other? Like did you track that?

That's a great question. So for folks that don't know Earnifi is the website I mentioned earlier that I run. It helps people find airdrops and I've been using this since day one, like since it was irresponsible to use it because I wanted to know if it worked well. So there's been yeah hundreds of thousands of requests pass through Essential Eth per day and I do not have like a AB or like before and after on like how it's impacted users. I do have a before and after on the bundle size which is that it reduced the bundle size between I think it was 10% and 15%. And so that's great because that's basically a 10% faster page load. And there's actually some metrics out there that AWS and Amazon did a study on. For every 1 second of page load you have 10% of your users drop off. And so that's an issue if you have like an e-commerce site but it's actually in our world the biggest issue because all of us need to be making sure that Web3 works around the world. If we're trying to be the global financial system we have to have things that load quickly in emerging markets. And so I don't have metrics on like what that drop-off improvement has been for Earnifi but I can say that like this is a valiant effort that all of us should be working towards such that what we build can be used by anyone around the world.

Do you have like a sense of like the impact to the bottom line, for example, like did you notice like a difference after you launched or after you removed those old libraries?

Yeah, I definitely noticed that the pages were loading way faster. And if anyone's visited Earnifi before it's the takeaway usually is folks are like, did it really do a lot of hard work? Because it worked so quickly. It's like, oh, it's such a simple thing, like it's so easy to do what Earnifi's doing and that's not the situation actually. It's just architected in a way that is blazingly fast. I've spent 16 months optimizing the speed for it. And so yeah, I just noticed that and if you load the page you'll see as well on any Earnifi URL it's earni.fi. It's very fast. Like compare that to any Web3 DApp out there, I don't think I mean I haven't seen really like faster ones actually.

That's awesome, that's awesome man. Well said. I guess you mentioned that you were still building out Essential Eth. Is there an opportunity for folks here in the DAO who might have been inspired by your presentation to hop on in and help you out or?

Yes, I'm glad we followed up with that because it is both a fully open-source project but it's also a funded project. So I'm receiving grants, it's been in Gitcoin and I'm interested in both free or paid help from developers who know this stuff well or who want to start to learn to know this stuff well. So there is a full roadmap built out on the GitHub projects page called main issues, start here. There's certain functions that, you know, are definitely like first-time friendly, good first issue. And yeah, I could definitely do better effort of cleaning that up and making it like assignable as well. So if you're interested in getting involved here, whether paid or unpaid, hit me up. Twitter is where I spend like literally all of my life. And so there's my Twitter, please DM me. And yeah, we'll get you involved and it's a big project already, it has 136 stars. So like if you're looking to bolster your profile as well and like have something on your homepage that you can show off, like I build in the Web3 space, I think this is an amazing place to do that.

Yeah, 100% man. Well said. We have about a minute-ish left. Is there any final questions here from the crowd?

Going once. Going twice. Sold. Well thank you so much Dawson for coming on and giving us this awesome overview of Essential Eth. I had no idea around the just how slow all the other libraries were in comparison, so that was really eye-opening for me at least. And yeah, I'll definitely be looking to integrate essential-eth in some of my projects as well.

And with that, I'd love to wish everyone a happy Friday, happy weekend, wherever you may be, and that will catch you here next week.

Thanks everyone.

Alright guys. And I'll be dropping a link to POAPs for the attendees to claim in the chat window at the top right. And Dawson I'll be reaching out to you to give you your special MintKudos for being a presenter today.

Fancy. I love POAPs, I love more tokens, so let's do it.

Let's do it. Exactly. Alright gang, and with that, I will stop the recording.