Web3.js v4: Simplifying DevEx With Web3 Plugins | Santiago Trujillo Zuluaga - ChainSafe

[Music] hi everyone thank you so much for coming today and this is no way day I'm Santiago from chains saafe and I work as a dep ra for web3js today's talk is about simplifying the developer experience with webrip plugins I would like to start by quoting the latest Electric Capital report which says that developers overall are down by 24% New Commerce developers have dropped 52% year-over-year and in 2023 the monthly active developers fell by 25% so the question here is what can we do to bring more developers to building web Tre and of course to keep the ones that we already have if you don't know why developers are important for the industry um I will read this from Electric Capital as well which says that developers build apps that deliver value to users apps attract customers and new customers bring more developers so if if all we want is crypto adoption then we need to attract more Builders they will attract more users and this will fit the whole cycle and everyone will be happy so today's talk is all about developer experience um and how we can bring more tools for the developers to engage in blockchain and to build in in web tree so I'm going to start with a short introduction to web 3GS then we are going to see how we can Empower developers to build more tools uh and and use our products to build more dabs in web Tre as well after that I'm going to show you a game changer versatile development tool which is web Tre plugins after that we are going to see a couple of examples that is the chain link web plugin and the super fluid webt plugin as well and at the end we are going to explore some opportunities for projects and Developers ERS and to see what the web Tre plugins bring into the table of the blockchain industry so let's start with a short introduction to web3js uh for those who don't know what web3js is web3js is a JavaScript typescript library that provides an abstraction over the ethereum RPC API this RPC is basically like the language that you need to speak to talk to to ethereum so every time that you want to interact with the blockchain you need to send these RPC calls above in the slide you can see a an example of a Json R Json RPC call that you need to send if you want to get the get block number um of the of the blockchain and below in the slide we can see the example of using web3js to install web 3js you just need to to run in the in the console mpm installed web Tre after that you are able to import the web3 module when you import the web3 module then you are able to to initialize a provider and once you ini initialize a provider you ready to go using web3js in this case I'm using webt tree. it.get blog number and this will retrieve the latest uh blog of the of the network this is a basic dab communication flow uh just for you to get the whole picture of the dab interaction so everything starts when the developer triggers an action in the dab if the dab is using web 3GS this will connect to a provider and then the provider will be in charge of talking to a blockchain node and then the blockchain will either execute the transaction or it can just retrieve the value that you want uh if you make a call in this case so this is kind of the back and forth communication of a dab interaction flow a short timeline of web 3GS everything started back in 2014 with Jeffrey WL one of the ethereum co-founders uh then mer from par Tech joined him in 2015 to to took over as a lead of the the the repository then in 2015 the legend Fabian vul Stellar the year C20 standard Creator took over the lead of the of the repository uh and he's still until until now the number one the alltime number one contributor to the web 3GS repository then back in 2020 thanks to the ethereum foundation and the nomic foundation chains saafe took over as a lead maintainer of the library and since then we have around 1,000 pull requests for from external contributors 18,000 stars in GitHub and we just released the latest version 4.5 a couple of weeks ago some of the Milestones that we have um at chains safe with web 3GS is that we refactor and rewrote the whole library from JavaScript to tsrip so we released the version four in August last year uh now web 3GS is compatible with Eggman scripts and commonjs builds uh we also reduce the library size from 329 kilobytes to 156 we reamp all the documentation so we have all the apis some new guides and tutorials and we have also videos if you want to check them out on YouTube uh the current usage of web 3GS that we have is around 2 million of mpm downloads per month and we have 12 millions of CDN requests as well so now let's see how we can Empower developers to build in webtree here we have a list of some wellestablished webtree projects in the industry like Sigma Axel arbitrum Avalanche chain link Unis swap Etc and all of them share one feature in common this feature is that all of them provide multiple ways for the developers to interact with their products so if you want to engage with developers you need to give them resources to be able to interact with your products so no tools no developers and no developers no Patty so all what we need in this industry and all what we need to give to the developers is sdks software development kits that's what we need to to give to the developers but also we need to provide them with learning resources so they are able to learn this sdks right and why sdks sdks provide accessibility to your project since you are pro you are given different ways for the developers to use your product um this will also drive more adoption sdks are really scalable since this is reusable code that can be used by thousands of people at the same time and the short learning Cur of an of of learning an SDK is way easier than learning a whole protocol from a scratch now let's talk about the game changer versatile development tool which is webt Tre plugins so this web Tre plugins is a new feature that we just released in the in the web 3GS version for last year uh we came we came up with this plug-in system to provide to projects and developers to create their sdks so with this sdks you can give interfaces to the developers you can extend any web3js capabilities without the needed of doing a Forks a Forks on on the web3js repo so if you want to create a a plugin you just need to install the library by running mpm install web tree then you are able to import the web tree plug-in base module after that you need to create a JavaScript class um that inherits from this web Tre plug-in base then you can put a name to your plugin and after that you are able to create any method with any functionality that you want with your plugin you can deploy contracts listen to events interact with contracts send in transactions or you can also add your own libraries or external libraries as well so this is how you can create web Tre plugins it's just as simple as that as as importing the web Tre plug-in base and inherit uh the inherit this module to your JavaScript class why um these webp plugins are are good for the industry because the web plugins improve the developer the developer experience since this provides a really easy way to interact with your products uh the web Tre plugins also gives a some modularity approach to the ecosystem because this Implement you this allows you to implement any feature that you want with or any functionality like a plug andplay tool that you have um also this is a lot of reusable codes so this will improve uh the development process and will make it faster for developers also web plugins are really easy to maintain since the web 3js version for release web 3js is really stable now so you don't have to worry about breaking changes or critical issues so we watch your back here uh for some specific cases like the super fluid you will see later we also provide um some kind of offchain interface so this can help you to to save some gas fees as well and web 3 plugins Brides the gap between web web 3 and web 2 um since we this will give like a really easy way for web to developers to get started building web tree now let's see some example of plugins the first one is the chain link data fit plugin so for those who don't know what chain link data fit is chain link data fit is basically a bunch of contracts on chain that allows you to retrieve the the price of a specific pair so if you want to know the price of Bitcoin you can call the the contract that has the btcusd um price and then they will retrieve the the Bitcoin price in USD um the standard way to interact with the chain link data fit Services you need to First search for the API of the contract after that you need to search for the address of the contract that you want to call once you have the ABI and the address of the contract you are able to initialize the contract and once you initialize the contract you can make the call to the contract and finally you can show the result or whatever that you want to do with this with this result but using the web tree the chain link web tree plugin you don't need to search for any abis you don't need to to search for any contract addresses because these things are already stored within the plugin so you can just directly initialize the plugin you can make the call to the plugin and then you will get the result if we translate this into code the standard well will look something like this you need to import the AI here after you import the AI then you have the contract address here um then you can initialize the the contract by Typing Web tree. it.

contract and passing as a parameters the ABI and the contract address after that you can call the contract and finally you will get the result and then using the chain link web3 plugin you just need to First initialize the plugin by typing new chain link plugin then calling the plugin by by typing chain link plugin. getet price this is the function that will give you the price that will make the call to the contract in the background and then as a parameter you can send the pair that you want to look for in this case btcusd and then you can just show the results super fluid example so for those who don't know what super fluid is super fluid is a net streaming protocol that allows you to to do realtime crypto transfer and this is used by Dows games Defi and web Tre businesses so super fluid super fluid is much more complex than this but in a really easy way to understand uh super superf fluid has a main host contract this contain all the core functionalities of the super fluid protocol and it has some forwarders that allows the developers to communicate with this host so if you're a developer and you want to build in super fluid you need to call this for weather's contract then the for WEA will talk to the host and this is the the back and forth communication so with the super fluid web Tre plugin these functionalities of of the forwarders are stored within the plugin which is on of chain so developers can't talk directly to the host skipping this step of of talking to the forwarders so this will improve the developer experience because this will allow the developers to talk directly to the host since direct communication to the host will require more knowledge of the deeper mechanisms of super fluid but with the web plugin you don't need to to know everything about super fluid to be able to use it this will also reduce the the blockchain interactions that you have so that that will that will have less transactions by using the webt plugin because the web plugin is off chain and we don't have the forwarders anymore and finally this will reduce the gas fees for the final user because we have less less blockchain interactions uh now let's see some opportunities that the web Tre plugins are bringing into the table for projects and developers so some of the use cases that we have found so far are for oracles dexes layer ones layer twos Bridges and even gaming as well but we are exploring more opportunities and use cases for the for the web tree plugins uh what you can do with the web Tre plugin is custom RPC calls cross chain Communications you can build the SDK for your project for your protocol um or even for your specific game whatever that you have uh you can make Oracle calls the contract wrappers as well to store abis and contract addresses in the plugin uh this is a really easy way to provide web3 apis to web through developers so they can get started faster to build without knowing all the deeper mechanisms of blockchain or specific protocols so it's just like giving in a in a really easy way to the to the web to developers these apis that just require some jav JavaScript knowledge and then they can start they can get started building DBS uh you can also do automated transactions or reactions complex function arguments and custom logic or any functionality that you want to add even your library as well and for developers we have um an idea ton with learn web 3 out that we are hosting in March uh so in case that you want to participate you have some ideas of plugins you don't need to develop them but we have some specific criteria for this idea tone uh that starts in March 18 if I'm not mistaken uh we also have a buildon with build with push protocol in case that you want to implement some plug-in ideas that you already have and if you want to get a started building plugins so you can visit docs um docs. web3js dorg um and to answer the initial question of this presentation is what can we do to bring more developers to building web tree so the final answers are tools sdks and learning resources so the developers are able to learn these tools so you can find us here on Twitter chains safe th at the end uh also web3js uh you can also text me if you have any question if you want to learn more about web tree plugins if you want to build with web3js wallet integration blockchain interaction whatever that you need um and if you want to get started using some some plugins that we already have you can go to web3 js. org plugins and to finalize this presentation I would like to to come to to talk about this analogy that came to my mind when I was planning this presentation um which is that we don't really know to understand all the all the mechanisms all the deeper core functionalities of everything to be able to use it for example as a developer sometimes we don't know everything about Unis swap but we just need to know how to to create a pair or make a swap or to be able to remove an ad liquidity to to create an app using Unis swap right or for most of the users or even developers we don't need to know all the latest and all the deeper mechanisms of encryption we don't know how the elliptic curve signature algorithm works but we all use metamask we all use encryption we all um interact with contracts and send transactions right so we don't need to know how things work we just need to know how to use them um thank you