Remix's latest release and live coding on plugin development - François Guezengar (GrandSchtroumpf)

are you ready Francois yeah I'm ready cool so feel free to go ahead okay great thanks Maurice hello everybody thanks my name is Francois from the 3dt I'm from notary detail actually I'm from remix team I come from with Yana which is also from remix and today is actually a very special day for us because it's really stay and we have been working the last six months on a new version of remix and I'm going to show you now so if you go to remake that affray on that org you will see the last version actually the version that you love that you know very well but if you look closely you can see here there is a very nice electric green button that we took like maybe 15 minutes to find the color let's say that now you can switch to the new version and I'm very pleased to show you the new version of rama's yeah as you can see everything change but if you like fur mix before don't fear nothing really changed so basically the idea what that remixes remix is used today by people that are really new to a solidity and also by people that are very well aware of 3dt because it's used every day by the solidity team in the office here in Berlin so we had this problem that we should we couldn't have everything on the same interface for this broad audiences so we need to make it like more modular like progressive application so you can learn and use what you need at the time you need it and that way we thought about a new more pluggable way of building remix and this is what we did actually so when you start you just the fine manager so you can create file and you have by default the most famous unused smart contract in the world which is the ballad that's all smart contract check you have by default on remix and nobody of course use it but everybody knows it I didn't steal here but there is this by default so you can just write smart contracts or whatever you want and if you go here you have the plug-in manager this is the bare bone of the new interface of romics basically you can create your own experience on remix depending on what really needs and in our case we are working with a solidity smart contract so what we need now is a solidity compiler and here now you have on the left part the 3dt compiler and you can compile your ballad that's all nice but that's not it that's not hope until now on Linux you could only work with solidity and from now you can work with Viper who has work with Vipers already only two people yeah hope with romics a new version of ramus you can work with more and yeah so basically as remix is now a pluggable we need permission because everything so typo plugging is actually not built inside Ronix it's an iframe that ran outside of phrenic so we need to ensure some permission level so like people don't abuse of your IDE and because we are working with solidity and connection with a freedom it has to be very careful handled so here in this case the Viper booking is actually asking you to manage your file manager it's actually for being able to know if the current file is a Viper file so I just accept it and I don't want it to come again so we'll remember my charts okay great so I didn't raise my hand because I don't actually know Viper so what we build is the ballots does not contract written in Viper which is here so if you have never written some Viper before its root like this okay you have like facts are going to read it and now you can compile the ballots in Viper okay great we have everything that we need the ADI the bad card run by code you also have compiled stuff nobody cares I mean not a lot of people use it sorry also yeah here the compiler is remote which if you want you can use it locally and now that we have compiled our contracts we want to use it and for that we'll go to deploy and run transaction here we go right yeah I need to recompile sorry with reboots and please look at the icon we do not that before and now you have double odds and this ballot come from Viper and it's actually what we want to do now is trying to have like more pluggable way of having people that want to develop with the tool that they love and they are used to if you look here you have like several plugins that we already have some of them are developed by the remix team like the debugger or remix D but also people from outside of romics like pipeline which is a developed by Loredana from writing team ideas so the idea now for us is that the community use these tools to create their own plugin and improve their workflow and inside remix and make this environment more usable we have already some plugins in in the load we have emits material plugins which is coming if a scan to verify your contract s doc that will transform your solidity documentation into MZ documentation and e-file a bunch of other plugin that are coming and if you plan to create a plug-in please come to me and now what I would like to show you is how to Bill the plug-in and five minutes so the idea is that you understand that it is super easy to build a plug-in on remix so I have here an alarm a timer I'll try to do it under five minutes and here as you can see I have no file okay so I'm going to do it from scratch you're ready I think I'm ready so let's do it so first thing what I need to do is create an index that HTML file because basically in tax profit so basically the plugging is going to live inside an iframe so I will cheat a little bit here because I'm going to use this knee pad and now what I need to do is import the library the client library for building a plugin for for that I will go to github.com slash free young / remix - plug-in I train all day writing this stuff okay so you can use NPM of course but in our case we want to use just a simple CDN so I'll just copy past this okay so now I have I can have a global variable on my HTML file and I will use it to create my clients so the global variable you school remix plug-in and I need to create an iframe clients okay great so with that I will have access to the IDE from my interface and now I'll create an async function that will just say hello typical a hello world and what I need to do now is right I want to write hello world on the file editor so for that I will do clients that call and then I will target the plug-in I want to call in this case is the file manager and then then thanks I will target a method from this file manager and this method is called set fight the third parameter is the name of the file so you need to know that but in Linux every file start with browser so I will call it hello - world that xgv and the final parameter is actually the hello world it's what I'm going to write inside my file manager and I will wait for it and lastly I will actually just do that and here I will I'm going to switch file to this so this is going to just focus the current file which is inside the editor to the new file that I just created okay let's save it and run NP excel which is just the basic NP sir okay so it's going to run oh yeah sorry I need a button of course to trigger this so I'll create a button click say hello don't make any mistake okay it's not it doesn't watch so I need to restart it ok so now I'm going to remix and in the plug-in manager here I have connect local plugin here I will read write the name of my chicken industry camelcase so it's going to be ello world and here is the name that is going to be display hello world oh yeah so here communication between iframes should be on the same HTTP version so here on localhost is going to be HTTP and here is HTTP so I need to go to HTTP as I'm walking locally is safe no problem going doing that again am i right on the time not sure low cost okay and here I just I need to say if I want to listen on event from remix because we don't want to flood everybody with event we need to be very specific about that here I don't need any event I just say I want it to be on the cyber no ok and here I have this magnificent icon of my new plugin that arrived ok and I click and come on here I have my hello ok let's try it it asked me as I say later permission for writing on the file manager except it tells me that is going to do it yes it did it 4 minutes and 40 seconds so awfully you can see it's very easy to write plug-in with remix of course this is very light plugins there is a bunch of other stuff you can do with that you can use angular react view Lita channel will try to do an example of spelt I'll answer just after that and yeah if you go to run explaining here you have all the documentation that explains how it works here you have the currents plug-in that you can call from the clients you have fire manager editor and more are coming of course now we are going to focus on improving and making much everything in cyber Amex accessible from those plugins yeah and also if you want to check for examples you just go to the example files and here inside plugins you have several example from the very simple one like just hello world which is just an extremal and X dot HTML to a more complex one with F F duck that is actually a web pack plus typescript plus little elements application and will build more clicking with that so you can use your favorite framework to make your own plug-in and build and make sure remix a better place okay thanks everybody and I will answer question now yes yes yeah so bro you know we want to change the world you know like we know about the politicians and the the mafia game that they are playing so under us you know nobody is listening how can we as like a community is like experts of computer science how can we change the world and your in your opinion bro maybe you can stop by developing a plugin for remix for example this will make the world a better place I guess any other question if it's ready to remix / i guess no okay so if you want to if you want to be all the plugins come or to me or you can find me on guitar it's gone poof and if you don't know how to write it it's very actually very easy you just write crunch from it's actually this guy yeah so everybody knows this guy everybody has is way of saying in his language I'm French you heard that so just translate to grow something you will find me on guitar yeah would it be possible to write a wallet connect plugin with that yeah I guess it will be but right now we don't have any we don't expose an interesting module to make it into to have a nice experience with wallets but yeah we were thinking about this for this meetup but we didn't have the time to build the API to make it interesting but I will do that for sure thanks any other question you are answering a last question yeah sure do we have a last question no no last question thank you so much for yeah for this great presentation and one challenging ourselves a little bit okay the official part of the session will be finished now so please feel free to stay here a little bit and again thanks so much for coming tonight even by this beautiful weather outside