web3.js Modernized To TypeScript In v.4 - David Ansermino

Transcript

[Music] chainsafe's very own David ansermino David is our chief technology officer at chainsafe and if there's ever an inspiring story to follow it's his why because he put up a giant middle finger to institutional education dropped out and then learned blockchain engineering on his own he now leads over 70 plus engineers at chainsafe so good job David um but before dropping out he was studying

computer science at the University of Toronto just around the corner and he has been very active in the space since 2015. having held leadership positions at uft's comsci Student Union as well as U of T's decentralized Tech Association so David is also a good friend a great dancer on the dance floor and today he'll be speaking on the recent release of web3js version 4 which has been recently modernized to typescript it's a huge accomplishment for our team and when the EF reached out to us a few years ago to give us this grant it was it seemed like a long journey ahead so without further Ado I'd like to bring up David answermino and let's give him a round of applause

[Applause] okay let's see how this goes hello everyone thank you Tim so much for the introduction um so yeah I'm David I work here at chainsafe been here for a minute um and today we're going to talk a little bit about the history of web3js and what we hope to accomplish with this latest release for those of you who are maybe not familiar web3js is a client Library specifically for ethereum and so you know when you're interacting with the network you're

typically interacting uh through RPC directly with the node on the network and so this really provides a layer of abstraction away from that so that you can build more complex applications without having to worry about the underlying RPC interface that it depends on uh webviewjs uh has done pretty well for itself um today we have about 4 700 dependent packages and 2.7 million downloads per month it has definitely been a Cornerstone of ethereum development for quite some time um although it's kind of interesting to

see lately the different developments in this space we're certainly seeing a lot more competitors come out it's a lot more specialized tooling and so certainly it's kind of survived a long haul of changes in growth within the ethereum ecosystem it was the first ethereum JavaScript client started in around 2015. and it's really passed through the hands of a number of different maintainers contributors and whatnot over the years which is both beautiful and challenging at the same time so there's definitely been some turbulence so as I mentioned it's it

really has been a Cornerstone of ethereum development but certainly in sort of the latter part of its life it really it became sort of stunted in its growth due to a lack of coordination and planning primarily um just with you know the open source nature of the community and you know everyone really trying to get in there and contribute um it really did just start to fall apart and and break in certain ways um so we certainly saw a lot of bad software engineering practices you know pretty basic stuff but just nobody was really there to sort of enforce the rules and maintain a high level of Standards um you know the initial migration to

typescript was definitely very Troublesome and broke many many times and there's just a lot of outdated code right JavaScript has obviously changed a lot since 2015 and so we really need people to come in and and just kind of revitalize that and rewrite a lot of it foreign and that's where chainsafe kind of comes into the picture so in about 2020 um the EF reached out to us and asked us to become the core maintainers um and so we have been doing that ever since um and so you know we initially picked up the project and started kind of pulling things apart and and seeing what broke and what stuck

and it very quickly became apparent to us that the whole thing really needed to be Rewritten um and so that's kind of what we've been doing so we are very happy to have finally released V4 you know it's taken us uh almost three years to really work through everything understand the challenges come up with Solutions and work with the community to really build that out and implement it but it is finally here I definitely want to give a huge shout out to our team who's been working on this this is definitely being no small feat and will hopefully kind of bring new life into the library and create new opportunities for people to be building with it

um I do also want to just point out that the predecessor to V4 is technically V1 there was a V2 and V3 kind of floating in there but today most people are still using V1 and will be migrating directly to V4 um so one of the big features of this release is that it is a complete rewrite um we re-architected the entire library and made sure to write it in typescript this time as you know that's definitely the place to be these days um and similarly we support uh esm and common JS Imports now uh we also wanted to put a lot of

emphasis on the developer experience certainly very critical being developer tooling Library so we've added some some fancy things like custom data formatting to really give more control over the data types that you're interacting with throughout the library we also have Dynamic contract typing to make the contract interactions a lot more friendly and one of the most exciting things is we've also added a plug-in system which creates a whole new host of opportunities which I'll talk a bit more about just now um and one of the other really important things for us was shrinking the bundle

size uh certainly you know with all this sort of turbulence that I mentioned earlier this kind of ballooned out of control um and so with the re-architecture was able to kind of break out certain modules that just you know not everyone's using and just kind of um reduce the overhead there and so yeah we've gone down from about 327 kilobytes to 177. and this is definitely going to be a metric that we're paying very close attention to and continue to push the bounds on uh you know most of the time this is being bundled into a front-end application and so obviously the the bundle size there is really critical and certainly some of the competition in the space is really pushing the limits so

um so I'm going to talk a little bit about the plug-in system and kind of show you guys some examples of what it looks like to build a plug-in and to use a plug-in when we think about these there's kind of three really interesting categories of uh use cases to consider um one of the biggest ones is contract wrappers um so for anyone who's maybe never built a Dap before if you want to interact with a contract on ethereum you need a few pieces of information like the contract address the ABI you need to go ahead and instantiate that into a contract instance then you discover the methods of it and there's kind of like multiple steps to really being able to

interact with something that is actually in many ways become standardized right we have ERC standards now and so a lot of this is pretty um repeatable and so the idea here is that we can now actually just write a small bit of typescript code that everyone can import and so as opposed to having to interact with kind of the solidity output you actually have some abstraction in the middle to make your life a lot simpler um another big use case here is custom RPC supports um so you know we've seen a lot of evm chains come into existence over the last few years and one of the big challenges

they have is you know a small change in their tooling whether that's types or you know the actual RPC interface itself or whatever it might be forces them to basically Fork whatever libraries exist in ethereum make these changes and you know maintain that forever so hopefully with this what you can instead do is actually just modify a portion of that interface and kind of hold on to everything else and ideally that allows us all to contribute to the same code base and kind of you know all collaborate on something as opposed to having these sort of discrete Forks of it that different people are trying to maintain and this kind of also is the case for

extending the webview JS methods so in addition to you know building the sort of external facing components also internally you can actually modify how certain methods and features behave within the library itself so if you do need to customize it for whatever reason you know add different types add different formatting whatever it might be there is the methods exposed to enable you to do that um so here's a pretty simple example of creating a plug-in uh it's really quite simple you can see here plug and example is extending the web 3 base web3 plug-in

base which is where all plugins are born you need to define a namespace so that's ultimately the name that references the plugin and then you can basically go ahead and Implement whatever functionality he wants this does have exposure to the providers and all the other components that would kind of exist within a traditional application and so you can interact with those modify them and and do whatever it is that you might need to and then here's a simple example of just using a plug-in so really all you need to do is instantiate it register it with the web3 object and then that becomes a

part of it and you can continue to develop as you normally would so all pretty basic easy to use uh recently at eth Prague we had a bounty um for hacking on web3.js and one of the the bounties was specifically around plugins and we had two awesome uh projects come in one of them is web 3 tokens um I think this is a really great example of what you can do with the plug-in system and so you can see here that you know they're registering their token plugin they've got a a die

contract address and a wallet address and now as opposed to having to instantiate the ABI and actually set up the whole contract instance they can basically just interact with web3.tokens which has support for the erc20 interface and so just by querying that they can create an erc20 contract instance and be on their way so this is like considerably less code and just a lot easier you can imagine somebody coming into the space their first time building adapt perhaps this is going to be a way simpler experience for them than what many of us have gone through

um so really cool stuff you can check out the repo here if you want to dig into this a bit more uh this is another example um so we built a uh a plug-in for chain link and so kind of a similar concept here you can see we're instantiating it we're registering it and now we actually have the ability to just call get price and everything's kind of uh abstracted away for you and this also kind of demonstrates another aspect to this which is that you can start to Define constants and you know perhaps even remove even more ambiguity for the developer just to make things really streamlined and easy to use

and so lots of potential there still to be discovered definitely recommend taking a look and you know thinking about what you can build there um yeah certainly happy to chat about ideas or anything like that now I'm going to talk a little bit about the future of web3.js Beyond this obviously we've just gotten this big release out but that's certainly not the end um one of the things that we would like to do and this is still kind of in discussion but we do intend to deprecate V1 um it's really difficult to maintain to be honest that's one of the biggest challenges in actually getting V4 out

has been maintaining V1 alongside of it as I mentioned you know it's really it's not code that's written to be maintained and as a result it requires a lot of time and resources we certainly will continue to implement critical bug fixes and you know support everyone in that migration there's it's it's rather trivial but uh certainly for specific use cases it can be a little more involved so we do want to provide a lot more documentation guides tooling around that um stabilize version four so we do have like a full release out uh but obviously there's still more that we can do there

we do want to continue to increase our test coverage and again just build more documentation and Community Resources we definitely hope to go to more hackathons and just be more Hands-On with the community obviously you know as the space continues to grow and as the kind of variety of tooling grows and grows we really do want to be on the Forefront on the ground like working with developers coming into the space helping them navigate it and really kind of getting them off on the right foot um and then of course the plug-in ecosystem so we hope over the next year to see a whole host of plugins being developed uh both by chainsafe and by the community

hopefully kind of reduce the the duplicate code that exists in the web 3 space you know if more of us can really leverage the same code base we all win and so really want to look at what we can do to just ensure that the different sort of view cases that are currently being supported can continue to be within side you know a plug-in supported web3js sort of system and then another really big part about plugins is discoverability and so we believe that there's a huge opportunity in kind of giving developers a toolkit that they can then kind of pick and choose from so you know we're kind of imagining some sort of repo or some place where people

can go and say you know these are the 50 different applications I can interact with or even just like different Technologies right like there could be a plug-in for lib P2P or you know d-rand or whatever it might be and it just makes that developer experience far more streamlines and allows people to build more complex applications in a simpler way and so people need to be aware of what they can build and that's that's really what we're hoping to do with that yeah we are hiring fun fact in case you didn't know chainsafe.io careers but yeah that's all I have thank you so

much happy to take any questions any comments any questions any plug-in ideas it depends yeah we are we are huge fans of ethers so you know they both have their time and place cool yeah it works

if I can throw a question back at you what are you trying to do in Python it's like a decentralized okay very cool very cool nice yeah we don't do a lot of python unfortunately but uh you know right time right place any other questions all right thank you very much

foreign