Mix

Devcon 1 · November 2015 · 17:06

Arkadiy Paronyan gives an introduction to Mix, Ethereum's integrated development environment. The Devcon 1 talk shows how developers can write, debug and test smart contracts and build dapp front ends in one tool, as part of the early toolchain for building on Ethereum.

Speakers

Topics

From Devcon 1, hosted by Ethereum Foundation.

Transcript

Uh yeah, let's talk about Mix. My name is Arkady Paronyan. Um and Mix is an IDE for developing distributed applications on Ethereum platform. It started about a year ago and we've been working on it in Edev Berlin. I did some work on it a few months ago, but nowadays it's been mostly programmed by Jan Lehnardt. Who couldn't be here today. So still um credit should go to Jan and of course Yuta and Alster for providing design.

Yeah. This will be a live demonstration. Just a sec. Let me try and make it work. Okay, this is inconvenient. I can't really see what's going on. Hey, hope you can see it. So the idea behind Mix is to provide um environment for developing distributed applications and to support

a full life cycle for the application development starting from the smart contracts and then moving to user interface and then to testing, to deployment, and to updating. Okay. So Mix is a desktop application. It doesn't require any network connection to work. And yeah, let's take a look at what features we have here. So, the basic is this simple editor we have for contracts.

It has all the features you would expect from code editors such as syntax highlighting, auto completion. Now, it also um highlights errors in the code. So, let's say I would make an error here. Yeah, it would it would show the error immediately. I can navigate between errors, fix errors. And auto completion also works here. So, that's the first step I did here is I entered this contract.

Now, this is a basic token contract. It's the very same idea of what's mentioned in the previous talk. And this is the simplest form of the token contract you can have. It only has the send function which transfers tokens from one account to another right here. Now, after I've done writing my contract, the next step would be to test it. for that, I have this scenario panel here.

Now, scenario is basically a sequence of transactions executed in the same way they would execute on an actual blockchain. So, this is in fact um sandbox blockchain very much like in the either camp IDE you've seen earlier. But, there are some key differences So, I can set up a number of transactions to test my contract. I can have multiple scenarios and to test various aspects. Now, let's see what we can configure So, this particular testing blockchain has a genesis state, which can I can import from a JSON file,

which I can generate from an actual blockchain. Or I can just list accounts here with some balances. So, yeah. I have four accounts here. And I also have two transactions here. Each of them goes into a separate block. So, the first transaction, what it does, it deploys my contract on this sandbox Here, I have a UI to specify transaction parameters, and that includes this.

As you can see here, my contract has a constructor, which accepts a single argument, and I can provide a value for this argument right here. Uh also, it allows to set basic transaction parameters such as gas and gas price. Uh yes, I have this. And the second transaction just sends some tokens from current account to another account. So, uh I have the send function here, and it also accepts two parameters, a recipient for the transfer and the number of tokens to transfer.

Here it is. Now, with the click of the button, I can execute these transactions and get result. So, this is my current state displayed here. It shows contract storage and the configured accounts as well. Okay, so this is a simple contract, but I've seen people writing really complex contracts in Solidity and what if something goes wrong?

And we might want to debug things. And what Mix supports is building debugger for Solidity. Let's take a look at that. So, I have this debug transaction. And I can I'm debugging this send function now. I can step through the code and see how it gets executed. This operates on an expression level, so I can step not towards the lines, but individual Solidity expressions.

And as I go, I can see how much gas the function the transactions consumed so far. As you can see, it's slowly growing And notice how steep it went from 300 to 5,000 something. That's because storage writes are expensive in Ethereum. Yeah. So, I can step forward and backwards, so basically, I can navigate to any point in time here during transaction execution and examine the state of the contract at these point of time. So, it shows me here my local variable and so

contract storage as well. So, yeah. This allows contract debugging. Basically, you can figure out what's going wrong with your contract here. And if it's not enough, you can go deeper to this um EVM assembly level debugging. You can view which instructions are executed and step in and out of functions and over instructions. And also shows the place in the code which corresponds to current instruction.

As you can see here. Well, that's also great tool to study how Solidity compiles into EVM here. Let's get out of it. Reset. So, I can have multiple of these so-called scenarios here and I can have one, for example, that tests if the funds are sent correctly and another one which tests if this condition is checked correctly, for example.

Um okay, let's move on. after I'm done testing my Solidity contract, I would probably want to create a user interface for my DApp so that actual users could interact with this simple stuff. Oh, yeah. One One more stuff. Where did it So, as in regular IDE, this has a notion of a project, so I can have a list of files here which essentially form my DApp.

And also have this little um web page which acts as an interface. Let's hide that. So, this works basically in the same way it would work in Mist or regular web browser. It communicates with the with Ethereum network using web free API. In this case, the API is implemented by Mix, so it works with this particular or a sandbox blockchain as well.

Oops, sorry. Now, here at the preview of this little web page. Yeah, it has web 0.0 design as well. let's test how my DApp works through the user interface. I can pick an account. Oopsie. That's weird. Pick an account to send to and enter the value.

Okay, that's weird. Mhm. Again, my send send button disappeared somewhere. Let me restart it. Anyway, whatever I do in the user interface also ends up in this transaction list, so I can Let me check if I I see it here.

Yeah, so here's a call made from JavaScript. This is a call to request the balance for this account here. If I change an account, it makes another call. And I can see these calls here. Right? I can save them as a part of my testing scenario, and I can edit the parameters, or I can even debug them the same way.

Now, there's nothing to debug here since it's just a single line. So, yeah. That's where it came. Okay, now after I'm done testing my web interface, I can package and deploy my dapp dapp to a real network. This has this deployment wizard. I'm not going to demonstrate it now cuz it requires an actual network connection.

But, the idea is it packages your dapp and pushes it to swarm or IPFS or whatever. It's not supported yet, but for now it can only deploy to regular HTTP server. And it also registers a URL for the dapp in the registry contract, which is already on main Ethereum network there. So, this allows pretty complex deployment scenarios.

You can have multiple contracts depending on each other. You can set up a sequence on how these contracts are deployed and which transactions are called for deployment and so on. Another little cool feature I can demonstrate here is gas estimation. Yeah. For Solidity. So, I can basically see which statements and which expressions consume the most and the least amount of gas.

And it also shows the estimations for functions. This is a lower bound estimate of how much gas this function can consume. Yeah, which can be pretty useful. as you can see, the focus so far has been on Solidity features. So, we don't support web debugging yet and stuff like that. And if you would like to use web frameworks such as Meteor, for example, this would be complicated But, the goal is to support that as well.

And so, yeah, you can use this tool for prototyping your dapp really quickly. I mean, it should just work. What else do we have here? Let me So it's just a stick.

Now there is a number of features we want to add to this program including JavaScript debugging and so on. You can use your regular browser for now to debug JavaScript things and you can use Chrome developer tools for example. Um another thing we want to add is um test-driven development. So we want to use JavaScript to provide a way to write the unit test for your contract for both Solidity contracts and the JavaScript web interface in in JavaScript itself.

Let's see. Now this is what we've been we've been over this so far. Uh yeah. So um that's basically it. So we really need feedback from developer talk now and you can get binary releases. You can visit our GitHub page or Gitter chat and let us know what you think of it. yeah, that's basically it. Thank you very much.