Ethereum Foundation Ethereum Berlin Meetup, 3 Nov 2016

Previous Meeting

⏯

youtube image

►

From YouTube: The Browser-Solidity IDE - Christian Reitwiessner

Description

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on IPFS and more.
https://archive.devcon.org/archive/watch/2/the-browser-solidity-ide

Christian Reitwiessner gives his talk on the Browser-Solidity IDE.

Speaker(s): Christian Reitwiessner
Skill level: Advanced
Track: Developer Infrastructure
Keywords: tools, code, compiler, gas, functions, workshop, formal, verification, testing

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers.
Devcon 2 was held in Shanghai, China on Sep 19 - 21, 2016.
Devcon is organized and presented by the Ethereum Foundation, with the support of our sponsors. To find out more, please visit https://ethereum.foundation/

A

This is yeah I think we call browser solidity, it's a fully functional IDE, which does not require you to install anything. It just runs directly from the browser. It is even able to run an offline context, so it does not have to yeah load stuff from the internet and the you can find it at the following. Url.

A

Okay, that's actually not the URL, that's the offline version, I saved.

A

A

Yes, so it's it's divided into two parts. On the left side, you see the the editor with multiple tabs and on the right side, you see automatically generate information about the contract you're. Currently, writing. Let's start with a simple contract.

A

That's just a contract which has a variable and a function, and you can use the function set the variable here on the right side. You see the currently loaded compiler, which is suited up for for using this drop-down. You can change it to an older compiler version. This goes back yeah, yes, so for 0 1 1, we don't even have a date, it's a bit confusing, because that is not the active version.

A

If you want to see the current version you have to look here and if auto compile is is ticked here, then it automatically compiles with every keister. Basically, if you disable that, then you can click the button to compile and the compilation result here is an entry for each contract.

A

You get information about the off the byte code. You can copy that the that's the the JSON API interface that you have to you can use that. If you want to interface with your contract using about three GS and then here's this JavaScript snippet, you can use, you can paste into the go with um console to deploy the contract and that's another snippet. That is useful in other contexts.

A

You can even get a lot more details by clicking this button here. It gives you a list of functions and their signatures or their their their identifiers, the hashes of the signatures.

A

What is very important, is you also get guest estimations here, so creation costs fifty-seven, gasps, plus thirty thousand two thousand six hundred one of them is the gas required to run the constructor function and the other one is the gas required to deploy the code.

A

Yes and then gas estimates for all the functions. These are upper bounds.

A

Which means that they are not always accurate and especially, if you put a loop inside a function or something which is a bit more complex, then you will get infinity as an upper bound.

A

Another thing I have to say here is that these gas estimates do not reflect the recent heart forecast changes, so we still have to update those.

A

Yeah then random byte code is the byte code that will be deployed in the blockchain. Then the same. The full code is a list of up codes and the full code as assembly, which is sometimes also quite useful, especially because you have the so on the right hand, side. So, on the left hand side there always the the the instructions and on the right-hand side, you see the part of the source. This instruction was generated from.

A

Okay, that's I'm totally details yeah and then also very important below the compilation results. You have a list of errors and warnings. If I put garbage inside here, then I will get a compiler wrong and we should actually respect that warning.

A

It says we do not specify the version of the compiler required. Let's add that here.

A

Yeah now it's so there's no warning! You should always try to create source code without warning because most of the warning, so we we try to be really.

A

We try to generate as few warnings as possible and, if there's a warning, then it's usually quite severe and any warning that is generated by the compiler can be silenced by some way. So as an example, if you use the send function.

A

Okay, that's a stupid example, but it just sends one way to the address zero and there will be a warning that that we ignore the return value of this function. And if you, if you really know yes, I, really want to ignore the return value, then you could use something like like this and then the warning silence.

A

Okay, that was the compiler part of the IDE, but that's only one tiny aspect of it and much more interesting is the kind of the the blockchain simulator that is part of the IDE, and you can click this red create button to create the contract which does not work. Now, let's see.

A

Ok: let's try an older compiler.

A

Ok, as I said, yeah that looks better, ok and so this this creates the contract at this address in memory, which means it's just a simulated blockchain and you have buttons for all the functions in in the contract.

A

Functions that are constant, which means that there that do not have side-effects are evaluated immediately and you get the the result here. So that's the value of the of the X variable. You get statistics about the actual transaction cost of this specific invocation and not the the upper bound and a decode the result, and then you can yeah invoke functions that make changes to the state.

A

Ok, so I called F with 34. The result is the empty string, which is fine because it doesn't return anything and yeah. We have the gas costs here again and now we can click the X button again to check the updated value and it correctly results in 34.

A

Ok, one thing to consider or to yeah remember is that the the input boxes here always require proper JSON, which means, if you have a large number here, then this won't work.

A

But what you can do is you can put them. You can basically hex and code them, for example, and then it will work and you have to put put quotes around it. So this is basically the stuff you enter here is directly forwarded into the web for ejs encoder.

A

Okay, what else do we have.

A

There are some tabs here which I want to explain quickly. Here it can change the transaction origin. If you want to test the contract that has to be invoked from different addresses, then you you get five preset addresses here. You can modify the gas limit and you can send ether together with a function call. So if you set it here, then it will be valid until you change it again, and you can also use browser solidity to interface with other block chains. Then we simulated and that's done using the third tab here.

A

If you load browser solidity from within mist, for example, then you can click on injected web 3 and you get the web 3 j/s that is available inside mist, so you directly interface with the attached node or you can use yeah web 3 provider, which means that it tries to connect to to this address using JSON RPC and it doesn't work because I don't have a node running here.

A

Oh yeah, one one one important thing here: if you load the website from HTTP HTTP over SSL from github, then this doesn't work because for others to not allow non encrypted requests from encrypted websites, so you have to load it from from not necessary, github.

A

Ok, then, on this tab you can publish your the source code. You have here as yeah github or you can copy it over to another instance of the IDE and on this tab you get an interface to the debugger which Jung we'll talk about later, and we have another tab which allows formal verification of contracts.

A

Yuuichi will give a talk about form of verification, but it will be about byte code level, formal verification, whereas this module here is used for source code level, verification and then the question mark here takes you to the solidity documentation.

A

Okay, that's all I wanted to talk about the IDE. If there are any short questions, so I can take them. Otherwise,.

A

Just I think one last week or two weeks ago we added actual browser unit, testing, purple requests which will result in this website breaking much.

A

So it's quite complicated to do browser testing because it has to load the compiler, which is an 80 megabytes file and usual. So the these hosted services for testing can't really cope with that. So yeah, okay,.