 Okay, welcome back from lunch Now we will be speaking about web 3.js 1.0, which is a major re-factor from the early version Which was around for the last two years Shortly about myself I'm Fabian Vogelsteller. I built the initially a theme wallet the miss browser and worked on web 3.js since There are two and a half years roughly Build a few other things also initiated the year C20 token standard together with italic and Did a lot of other smaller things in the space So webs 3.js Where 3.js is basically a library JavaScript library, which allows you to interact with your theme node Normally as a JavaScript developer, you don't want to deal with low-level API decoding encoding You want to basically have a nice JavaScript object which you can interact with and Easily write your applications and web 3.js is exactly this kind of middleware It's widely used and actually the core piece of a lot of different libraries built on top and and Working for two years on it and it grew over time. I Found it very necessary to do a overhaul so to say It was initially created by Jeff Jeffrey Wilker to go Ethereum Founder core developer and Mara Kotowicz are but worked Later on it. I joined in 2015 Working on it since then and we have also a lot of contributors and there's a lot more than on this list here So it started out in 2015 grew quite a lot and Now restructured a lot in the 1.0 refactor So how exactly the theorem communication to applications work, right? The theorem node itself and the EVM especially only understands bytecode bytecode is not necessarily easy to work with for most application developers and Everything which goes into the EVM has to be first translated to the bytecode to be able to be executed so for example This happens over the JSON RPC API, which is a low-level JSON API Where you have to send all of your requests and this has to be pre encoded to be understood by the EVM and this is exactly What web3.js does for example if you look at this example here if you want to call a function in the EVM For example, we want to call the transfer function with two parameters on a contract. We would have to translate this by hashing the function including its parameter types and Then taking the first four bytes of that as the function name and then appending the other parameters after that Web3.js is exactly like taking care of that So you don't have to do it and you can easily conveniently work with JavaScript objects and The 1.0 refactor is actually a major overhaul To make that even more convenient and even more intuitive and give you a lot more features and tools so that you can Care building about your application rather than thinking about How to encode what and what kind of How to watch for your transactions and building all of that logic for yourself So I hope that 1.0 fulfills all of that needs and is kind of the depth developers best friend So the 1.0 refactor is a major refactor in the sense that I restructured a lot of the the tools Everything before was on the major object kind of like disperse this way and now we restructured it in proper elements Utility functions are for example under the utility objects and all of these packages are also separate packages So you can load either the ones you need or you can load it all together in the umbrella package So I will now go through all of these Package separately and show a little bit of what it have and what new features to have one obviously very important piece in This is that we now have promises something which was Something which probably took way too long This is all due to the way how it grew over time and we all had to figure out what works and what doesn't work initially think thinking also that the Connection to know it will be way faster and way more smoothly than it actually is with like large Network which we crew today to Basically promises allow you simply to Chain your functions, which makes it more convenient and more easy to use and to see But we have a special case in web 3js and especially with blockchains. We have the case that You have an event which is not necessarily final so it cannot really come with one result only Especially when you send the transactions, there's the possibility that you can You get the transaction hash But you're also able to get the receipt and there's also a lot of other things you have to take care For example, the chain can reorganize For certain amount of blocks with a likelihood So you have to take care of all of these things yourself So when you just use the promise for example, you get the receipt, which is what most developers want They want to simply send a transaction and act once they're a mind But in most cases you actually want to have a more complex and more detailed response to your to your transactions Maybe you want to wait for five confirmations Maybe you want to actually do something with the transaction hash directly So this prom event construct basically allows you to Get all of these different types you can get back from one transaction and do something related to it So it can be a promise, but it can also be an event Where you can wait for a transaction hash to receive confirmation and we can even add a lot more in the future Web 3js 1.0 has subscription and this is something I worked on quite long And it always takes a bit of time to convince many parties to do something and you are different or a certain way and Subscriptions are important because we have a lot of events coming from the node and the old way of doing that is that your Application is polling that node that works quite fairly well if you have one application and you pour for a few events But it doesn't really work. Well, if you have many applications polling on the same node so Subscription basically allows you exactly this pops up model where you can Wait for events and you have to do nothing best but waiting until it happens This reduces a lot the resource load you have in the node and this also Improves the the processing you need to do on your node itself on your application itself So IPC sockets is basically the local socket you have when your node is running locally and web sockets is when you would You talk to a remote node The HTTP still works as well, but for subscription it can't work There we are thinking about Using also some kind of polling again But ideally you make it work with web sockets or you actually have a local node running directly So for example as subscription could be locks or pending transactions or If you notice sinking or not The advantage of that over the previous way how we did it is that it's a lot more intuitive and a lot more clean right now You can basically subscribe for information, which is a pattern most people understand Before we had like filters and watch and get watch and which was very unclear of what it even means Now everything is under the subscribe namespace, and it's pretty clear that this will be an event your you retrieve But also here we have special cases that in some cases you can have an event which actually can change For example, you can have an event coming from a smart contract, and it might be different after chain or your conversation so That's why we also here need this kind of pattern that we are able to Wait for it the data the actually event or we are also able to wait for the changed event so we can reverse that in our DAP and we can Apply the new to new lock which might look different. It might have different results The way smart corners are initiated and then you web 3 1.0 It's more The way we would expect it when we actually initiate in a class object So you have to use the new keyboard a keyword and you have to give it a JSON interface This way you instantiate the object, and you can give it an address Optional or additional options Therefore also the options are in a separate options object So you can easily see what are the current settings of your contract object Also to note here is that all the addresses returned from web 3.js are now check some addresses You cannot see this here in this example but Actually, you can see the from it has an uppercase d for example uppercase f So when you use an address and you pass it in You send it into any kind of function in web 3.js. It would check to check some and if the checksum is invalid It will fail If you pass in a lowercase address, it would just accept it as is because it cannot check to check some now in the smart contract object itself all the methods and all the events are separated in its own namespace this helps with Things like where you have an event may be called the same way than a native event on the smart contract object and When you call that event it gives you back a object with multiple actions you can now do with that function So for example, if I call this do something I get an object back Where I can also later even change the arguments or I can decide to do I call that on my note? Do I send the transaction off to the node to be mined in the network? Or if I just want to estimate the gas of this transaction Or I maybe just want to encode the API to be used in as a parameter in another function and Also here we have the ability to add even more if we need to in the future and extend whatever the Method the methods of a smart con can do So if you for example call that it would look like this you call the method on the methods namespace you paste in the parameters and as we also now Paste only parameters of the smart contract function in the parameter space We are also in the future able to allow structs, which we are working on right now Before the struct was always meant as the transaction object, so there was a bit of a confusion And if you then want to send it you give it your the options object of the same transaction for example For example, if you then get this back and you wait for the receipt or you just like resolve the promise You would get back the receipt and it would be decoded parameters also the raw data and Everything else you need so the structure is a lot more clean and a lot more accessible than it was before Same here if you have an event, so if you have an event, it's under the namespace events You could have an additional options that you want to fill the first specific events For example, you could say I only want to have events which matches the my index parameter with the value 20 and 30 and My other index parameter has to have an address so-and-so and It would then only retrieve you these events matching that and you would get them basically once they're happening And this is under the hood using for example subscriptions Which right now it doesn't work for HTTP so we have to add the polling here Web 3 is accounts. That's actually a complete new thing because web 3 is accounts allows you to actually generate accounts and sign data Sign transaction encrypt these accounts decrypt this accounts import key store accounts and basically gives you all the tools you need if you want to interact with a public key private key account and And having these signing functions in web 3.js directly allows us to do a lot more What you before would have to do with multiple libraries a note here. This is still in beta There's no audit run on that. So use it at your own risk We will ideally have an audit on that and Then it's probably more safe to use we have ABI directly a bi encoding decoding functions. I think this is very important Because you are able now to like encode your own a bi Calls a decode them and you have all of these was was before in web 3.js internal Exposed and nicely named and so on It even can decode you a whole lock automatically We have now the new swarm API as well. So you're able to interact with swarm Swarm works a little bit different than the Ethereum node. So the provider is different. It doesn't use the IPC connection. You can either use Directly HTTP or it connects to your local swarm node, which opens a local host 8 5 something Endpoint and This basically allows you to upload files download files and Even opens a file pick away can file pick So if you're in the browser, you can pick your files and upload them to swarm directly and you get the hash back to interoperate with it Whisper is currently the whisper version 5 API in web 3.js There's right now a discussion about refactoring to version 6 Which will also be supported by parity The current version 5 is basically in the old web 3.js and Oswell and the new one and you can play around with it and Experiment and the utils function. Obviously, there's a lot of extra utility tools you can use There's a lot of things you would use as a Adapt developer especially here things to check for example for some check some addresses encoding and decoding to a certain extent especially from utf-8 converting numbers and Internally right now we are using always a dbn library, but when it returns a number it returns the number as a plane string So that you can actually use whatever library you want to interact with large numbers and it's also for debugging reasons a lot easier to see the number rather than a big number object and Very important probably also You are able to Hash exactly the way Solidity hashes So this allows you to basically generate some hash and then knowing that the smart corner itself would come to the same hash So this is tightly packing the arguments. There are multiple ways of how you can do that You can use the auto detection, which is probably not very safe for things like numbers which simply convert to you in 256 It's easy a string would be converted right from a utf-8 and Obviously bytes would be bytes 30 by 32 right now I think but you can also give it an object and tell it to the exact type So this can be vnt, but it can also be value and type and you can basically tell them Hey, this is my arguments. This is the type of the arguments and then hash them Yeah, here. This is the longer version and this is another version So yeah, actually it works right now I think for the reason how npm works it will right now by default install the beta version Which is probably not very wanted, but this is the fault of npm I guess and There's a extended documentation now Which is a major improvement to the documentation we have before Basically all the functions are documented and they're all with examples and everything So go to read the docs right now. You have to go to the 1.0 branch if you want to see the 1.0 documentation the old one the old branch doesn't have any so go to EN 1.0 and you can Read the docs and that's the end