Documenting our work of the past 6 months
By: Rob Stupay
Tags: Smart Contracts, Ethereum, Remix Ide

In the past 6 months, Remix Project has undergone more than a modicum of developmental loveliness. We’ve updated the functionality, the quality of the codebase, and the ability of the IDE to work with other projects. We have also been preparing for future iterations of the IDE. And yet, the totality of our programmatic handiwork would mean nothing if we didn’t reach out to teach new users, partner with other organizations and grow our community. So we did!

Remix IDE is used by both newcomers to Ethereum and by experienced devs. We have fortified the tool for both types of users. We have also been striving to improve the DevX for those coding plugins for IDE as well as ensuring that their plugins look good and continue to function well.

There are some large changes coming to Remix. Currently the IDE uses the yoyo framework, which is no longer being maintained. So we are moving on and have begun the transition to React and also to Theia — a framework specifically for building IDEs. In addition, we have finished the first iteration of a Remix plugin for VSCode.

Let’s go through some of the updates:

Keeping Remix in Fighting Form — AKA code refactoring

We have moved a monorepo: https://github.com/ethereum/remix-project.

We have cleaned out the Legacy AST which has allowed for better code highlighting.

We have done major refactoring in the remix-debug and the remix-simulator libraries.

We have moved all but one of our libraries to Typescript.

Keeping Remix’s Users Informed and Happy — AKA Communications

Ongoing Documentation updates

We continually update our documentation not only to keep the information up to date but also to edit the text for clarity.

Translation of documentation

We are setting up the process of translating the Remix docs into French, Spanish, & Mandarin.

Matomo is coming to Remix!

We want to use the tool to improve our UX. We will have the total control of the data and will fully respect the privacy of our users.

Remix as a DApp Dev Tool

Running Scripts

Remix is a great tool for mimicking a DApp by running JS async/await scripts that use Ethers.js or Web3.js. It has been working with metamask & external providers. Now these scripts can also run in the JSVM Environment. This means that now devs can improve their web3.js & ethers.js skills by quickly experimenting with the libraries. And functionally, it means they can get a script working ( one that will end up on the front end of a DApp) on a the fast and simple JSVM or Ganache and then move it to more realistic networks in preparation of deploying their DApp to the mainnet.

We have also added a shortcut to running a script — In the File Explorer, when you right click on a JS file to get the popup menu, you see the option “Run” to execute the script.

Of course the old way still works — typing in remix.exeCurrent() in the console while the script is the active tab in the editor.

MetaData

There is an additional metadata file generated when the generate metadata option is checked. The original metadata file is for linking a library. The new file captures the output from the Solidity compilation. This file is named with the suffix _metadata.json.

Take a look at both — there’s meat in that meta…

Updates to our core functionality

Code Highlighting in the Editor

We’ve improved references in the Editor using the latest AST — so that when you click on a variable name, all the instances of that variable will be highlighted.

We’ve improved the source highlighting in the Editor. Now when you switch between plugins, the context highlighting will change to match the instructions from the active plugin .

will change to the instructions from the . We’ve improved the code highlighting in the editor that when stepping through code in the debugger.

that when stepping through code in the Tabs in the Editor will now show the path difference if the names of files are the same.

Solidity Compiler Updates

We have updated the UI for fine tuning the use of Solidity’s Optimizer. Now you can specify the number of contract runs when Enable optimization is checked.

The default value for the number of contract runs is 200.

Remix now uses WASM builds of Solidity compilers when they are available. And when a WASM build is in use, you should notice the compilation speed improving.

Unit Testing

Clicking on a failed test will now highlight the relevant assertion code.

Clicking on a Check failure will trigger a highlight of the line causing the error.

A failed test will now return the method name where the failure occurred. This feature is also available when using remix-tests as a CLI.

Now you can choose the folder where this plugin will place the test files that it generates. If the folder does not exist, the plugin will now create it.

Debugger

The debugger is now a plugin. And on top of that, it is our first React plugin. The File Explorer is going to be our next React plugin.

In the debugger, you can now fetch older verified & deployed contracts for debugging. We have connected the debugger to an archive node for the retrieval.

And in other debugging news, the Remix AST Walker library is now used in Remix Debug.

Solidity 0.7.2 brings Generated sources

The Debugger now has the option to use generated sources. This option became available with Solidity 0.7.2. See the solidity blog for more details about generated sources.

The short story here is that these generated sources will make it easier to audit your contracts — and that is a good thing!

In the Debugger, when the Use generated sources option is checked, you can step into those compiler outputs — while debugging.

These compiler outputs will appear in a separate .yul file in the Remix editor.

Playing with others & Externally built plugins we are excited about

Remix has continued to develop new ways of being a useful, accessible, and a customizable tool in the ecosystem.

But with the freedom of having Remix IDE be a playing field for externally built plugins, comes the responsibility of keeping in contact with their developers. The external plugins ( well in the internal ones too) need to:

Fit our design and functionality standards

Have good documentation about their use (and not just their development)

Be periodically checked to make sure they continue to work

We have written a set of guidelines for plugins devs. We continue to prompt & work with the plugin developers to ensure that their code works, that they provide good documentation, that they have a consistent UI with Remix’s, and that they promote the use of their tool. On our side we have been continuing to update our API to respond to the plugin dev’s requests.

Customizing the IDE with URL Parameters

Here are some exciting examples:

Remix IDE is often used to demo code. Now a teacher can give a Remix URL to her students that will:

Load a GIST file in the Editor.

Load the LearnEth teaching tool and then load a specific tutorial from our repo or from theirs into it.

More generally, from the URL, a set of plugins can be loaded with a specific one gaining the focus in the side panel.

These URL parameters can also collapse panes which can make Remix more attractive to embed into other groups’ sites.

Updates to LearnEth- the tutorial plugin

We’ve updated the UI, the UX, and the devX of the plugin. LearnEth is a tutorial platform inside of Remix. Tutorials can have Solidity Unit tests in them — to test students’ work. We have a growing set of tutorials on our repo- but others can build tutorials on their own repos and have their students load them up!

Plugins can now add a Providers

Plugins can now provide their own web3 provider. This provider will appear in the environment select box in the Deploy & Run module. This will add a lot of exciting possibilities for plugin developers.

The new Walletconnect plugin which makes use of this!

WalletConnect Plugin

The WalletConnect plugin allows you to use a wallet on a mobile phone to authorize transactions in Remix. For more info about WalletConnect — see: https://walletconnect.org/

Previously, a typical development workflow in Remix was to use the Injected Web3 environment to connect to the Metamask plugin. Now, you can connect to a wallet on another device.

This plugin is a big deal because:

It will allow Dapp developers to mimic how a user would use their Dapp — but all inside of Remix.

It will greatly expand the usability of Remix-Desktop because it adds a new environment. (adding to JsVM, Injected Web3, & Web3 Provider). Remix-Desktop users cannot use the metamask browser plugin because Remix-Desktop is a desktop app and not in the browser. But now, with the WalletConnect plugin, Remix-Desktop users can pay for transactions with a mobile wallet.

Sourcify

We have worked with the sourcify team to develop a plugin for contract verification.

Protocol Explorer

Currently this is the Defi Explorer — but it will become generalized to be a protocol explorer so devs can load a set of files from a repo and deploy them in the appropriate order.

Layer 2 Optimism compiler Plugin

Solidity Compiler for the OVM

Celo Plugin

Celo plugin will deploys to the Celo blockchain.

Git Plugin is nearly done!

Special thanks to our external plugin devs!

@bunsenstraat @0mkara @EdsonAlcala @edisinovcic @daoauth @loredanacirstea

Preparing for the future

Remix was built with the yoyo framework — which was a big deal when Remix began, but now is uhhh dead — it is not being maintained. So we need to move off of it. This transition has begun and it will be a two pronged approach. One prong is to move Remix IDE to the React Framework and the other is to move it to Theia. We are also making a Remix plugin for VSCode.

React

The Debugger is now in React. We will be rewriting all the internal plugins with a UI to be React plugins. This will allow Remix to leverage React huge community of dev and libraries.

Theia

Theia is a Eclipse based framework for building IDEs. We have been contracting with an external team, Itemis, to build the Solidity Compiler in Theia. At this moment, is it not clear if the entire IDE can be ported to Theia. In the next year, we will find the full extent of the integration.

Thanks @Itemis !

Remix Plugin for VSCode

We have a working prototype runs Remix inside of VSCode. Thanks @0mkara!

Interoperability with other tools

We will be working to Improve how Remix operates other tools in the ecosystem like Waffle, Hardhat, Truffle, & OpenZeppelin.

Outreach — Community Organizing

Remix Talks & Workshops in 2020

EthCC

Solidity Summit

Berlin Meetup in AltSpace

EthOnline — 2 workshops

EthLagos 5 workshops — EthLagos is an ongoing event -and we will be mentoring 1 of the winning teams as well as working with other devs from the event to put additional meetups in Nigeria and in other parts of Africa. In EthLagos, we were working with the GIZ, the IEEE, and the African Blockchain Alliance

We are also organizing a meetup in December in Jos, Nigeria

Work with the IEEE

Part of our presentations with EthLagos was with the IEEE’s Transactive Energy Blockchain Initiative. The IEEE is an organization with 500,000 members. Remix developed a proof of concept of a smart contract about peer to peer energy trading with the chair of their initiative. We will continue to make tutorials with our work with the IEEE and will also get to have many opportunities to give workshops with them and with their rather large network.

Workshops currently planned for 2021

Preparations have already begun for the events list below.

A series of workshops for a non-technical audience of medium to large NGOs to go over issues in onchain voting.

A series of workshops for a music producers and musicians to introduce them to Ethereum

A series of workshops with the IEEE, EThLocal, U of Pavia, U of Turino, and the office of the Mayor of Villar Pellice, Italy about peer to peer energy trading.

And there will be more…

2020 is nearly over

It’s been a busy year at the Remix Project. The coding, recoding, reworking, rewording has been rewarding and rendered Remix ready for the new year. Looking forward to seeing you on the other side! Really!

Thank You Esteemed Users!

Please report any problems you see in Remix and also please share your suggestions.

We strive to make the IDE more convenient and easy to use. You can reach us on Twitter, Gitter, and via email (remix@ethereum.org) TIA!