# The Browser-Solidity IDE - Christian Reitwiessner

- Speakers: [Christian Reitwiessner](https://streameth.org/speakers/christian-reitwiessner)
- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2017-10-09
- Duration: 12:45
- Topics: blockchain, smart contracts, distributed ledger, Solidity
- Watch: https://streameth.org/watch/yt-gMNPN2ofAvM
- YouTube: https://www.youtube.com/watch?v=gMNPN2ofAvM

## 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/

## Transcript

this is uh yeah I think we call browser solidity and it's an fully functional IDE which uh does not require you to install anything it just it runs directly from the browser it is even able to run an offline context so it does not have to uh yeah load uh stuff from the internet and the you can find it at the following URL okay that's actually not the URL that's the offline version I saved okay um [Music] and yes so it's it's divided into two parts on the left side uh you see the the editor with multiple tabs um and on the right side you see automatically generate information about the contract you're currently writing let's start with a simple contract that's just a contract which has has a variable and a function and you can use the function to set the variable um here on the right side uh you see the currently loaded compiler which is uh 0.44 using this dropdown you can change it to an older compiler version uh this goes back yeah yes so for 011 we don't even have a date um it's a big confusing because that is not the active version uh if you want to see the current version you have to look here um and if autoc compile is is ticked here then it automatically compiles with every keystroke basically uh if you disable that then you can click the button to compile and the compilation result here is an entry for each contract um you get information about the of the bite 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 web3js um and then here's this JavaScript snippet you can use you can paste into the go ethereum console to deploy the contract and that's another snippet that is useful in other contexts um you can even get a lot more details by clicking this button here um it gives you a list of functions and their signatures or their their their identifiers the hashes of the signatures uh what is very important is you also get guas estimations here so creation costs 57 gas plus 30,600 um one of them is the gas required to run the Constructor function and the other one is the gas required to deploy the code um yes and then gas estimates for all the functions these are upper bounds [Music] um 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 uh infinity as an upper bound um another thing I have to say here is that they these gas estimates do not reflect the recent hard Fork gas changes so we still have to update those um yeah and then random bite code is the bite 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's always the the the instructions and on the right hand side you see the part of the source this instruction was generated from okay let's un tole the details yeah and then also very important below the compilation results uh you have a list of errors and warnings if I put garbage inside here then I'll get a compiler error and we should actually respect that warning um it says we do not specify the version of the compiler required let's add that here 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 um we 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 uh [Music] function okay that's a stupid example but uh 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 can do something like like this and then the warning silenced okay um that was the compiler part of the IDE um but that's only one tiny ECT of it and much more interesting is the um 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 okay let's try an older compiler okay um as I said yeah that looks better okay um 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 um functions that are constant which means that they 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 uh you get statistics about the actual transaction cost of this specific invocation and not the the upper bound and I decode the result and then you can yeah invoke functions that make changes to the state okay um so I called f with uh 34 the result is the empty string which is fine because it doesn't return anything and yeah we have the gas cods here again and now we can click the x button again to check the updated value and correctly results in 34 okay um one thing to consider or to yeah remember is that the the input boxes here always require proper Jon which means um if you have a large number here then this won't work but what you can do is you can uh put them you can basically Hax encode them for example and then it will work and you have to put put quotes around it so this is basically uh the stuff you enter here is directly forwarded into the web fre JS uh encoder okay what else do we have um there are some tabs here which I want to explain quickly uh here you can change the transaction origin if you want to test a contract that has to be invoked from different addresses then you you get uh 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 uh it will be valid uh until you change it again and you can also Al use browser solidity to interface with other blockchains than the simulated and that's done using the third tab here um if you load browser solidity from within Mist for example then you can click on injected web 3 and you get the web 3js that is available inside Mist so you directly interface with the attached node or you can use uh yeah web3 provider which means that uh it tries to connect to to this address using Json RPC and it doesn't work because I don't have a note running here oh yeah one one one important thing here if you load the website from HTTP https over SSL from GitHub then this doesn't work because browsers do not allow non- encrypted requests from encrypted websites so you have to load it from from non SSL GitHub okay then on on this tab you can publish your the source code uh you have here as yeah GitHub or you can copy it over to another instance of of the IDE and on this tab you get an interface to the debugger which Yan will talk about later and we have another tab which allows formal verification of contracts um uichi will give a talk about formal verification but it will be about bite code level formal verification whereas uh this module here is used for source code level verification and then the question mark here takes you to the solidity documentation okay that's all I wanted to talk about the IDE if there are any short questions I can take them otherwise uh I think y could show the debug yes so another question question just that's a compliment because I've been using that a lot in the last two three months and it's really great so thank just I think one last week or two weeks ago we added actual uh browser unit testing purple request which will result in this website breaking much less so it it's quite complicated to do browser testing because it has to load the compiler which is an 80 megab file and usual so the these hosted services for testing can't really cope with that so yeah okay [Applause]