Embark 4

Transcript

okay so we have someone again from Sydney next his name is Eric Mastro he'll be talking about embark or for status and welcome on stage please [Applause] sweet

what's up VidCon how's everyone doing alright so talking about it's sunny outside you guys are stuck in here with me my name is Eric Mastro I'm a cool contributor for the embark framework at status today is a talk on for all the DAP devs in here I'm gonna show you some of the cool features I'm embark for show of hands quickly anybody heard of embark oh wow that's good anybody used embark yeah nice that's cool thank you alright so for those of you who have not heard or used in Bach before and bark is a fast simple and powerful framework to help you develop

deploy and deploy fully decentralized applications and part embark puts the full web 3 stack in your hands allowing you to leverage things like decentralized storage like ipfs and swarm decentralized communications like whisper ENS SPARC contract compilation and deploy and puts all this packaged it up into its own JavaScript API called embark jeaious and makes it available in your debt but today I'm going to show you some of the cooler features of our latest version of embark so we listen to you guys listen to the community we spent months developing version 4 it was even back at DEFCON I think we were like we released the alpha version so this is

months ago and we've created a better version of embark honestly it's really cool since we've only got a few minutes together I'm sure you like the top 3 things first thing we've got is cockpit so what does cockpit it's it's a web based interface that gives you access to the embark process and all the processes it manages like like death and ipfs things like that it's it's your command center for building debugging and deploying decentralized applications I'm going to talk more about debugging stuff in a minute it's got a block explore you can view accounts transactions interact with contracts among so many others things but one of the best parts is the integrated debugger in the built-in

editor which we're gonna get to in a minute so debugger so we you can use inside of embark you can use in bugger at the debuggers the invoker you can use the debugger inside of the command line or you can use it in cockpit itself and again I'm going to show you this in a minute it's really cool and if that wasn't enough for its own version we now support front-end build tools like create react app or view j/s and this is kind of a yes there's a pain point before but now if you want to use crack tab UJS and by angular CLI that's all good go for it embark will do the rest for you alright so what have I got for you today so I've got a demo this is a demo this is like a screenshot of the

the actual demoed app it was created with create react app very basic little sites got very limited functionality there's three little things you can do with it on the top right you'll see a plus button you can create post first of all it's decentralized reddit so if you have if you have a problem with that then you know take it online go to Reddit and complain about it many people do it already yeah so you can create posts with that little plus button you can search for posts and you can upvote and down down below post using the buttons on each post so it's nothing crazy a little simple demo if you want to build your own d reddit just for like just for the experience and see how it works just scan that QR code on the left

my colleague pascal wrote like a series of three blogs they're really really good they get down into the nitty-gritty they explain everything step by step so I definitely recommend that and also if you want the source code for this demo that you're gonna see here scan that QR code on the right or just go to github embark framework okay so what we're looking at look and I do apologize if this video I want to start and stop it and sometimes it doesn't necessarily work so if it doesn't work I'm sorry but basically what we're looking at here is V is V s code it's our it's our favorite IDE loading up our depth right so what does this DAP have it's got a contract right so there's nothing crazy about it I don't want to get into too much detail

if this DAPA game is built create your act but notice another contract we've got two terminals running inside of es code on the Left we've got the output of create react app so it's compiled our files for us and started a web server on port 3000 one again bare-bones nothing crazy there on the right we've got embarks output so we ran embark over the DEP you can see that it started up get it started up by PFS and did whisper it's compiled and deployed our contracts for us and most importantly it started up cockpit for us so start up a web server on five five five five five and it gave us an auth token that we can use to get into cockpit so if we go to

localhost five five five five five you can see here that gets us into cockpit so this is the dashboard of cockpit what are we looking at quickly I'll just take you through a really brief overview of like some of the things you can do and it's not even all of it at the top you can see a list of services that have been started so it got the embark process itself got gasps they got an IP FS you got the API that runs cockpit and whisper just below that you've got the console so that's essentially a mirror of the output of embark plus an integrated interactive console at the bottom so this gives us like access to web 3 to our contracts to some of the custom commands that we've got from plugins you can write your own as well

so for example if we typed in that's exactly what I didn't want to happen excuse me sorry let's restart that okay here we are so our services now we type in help there it is so we've got a list of all the commands that we can run inside of embark alright so you can start and stop the API you can add plugins you can debug you can register subdomains three on this you can do a whole bunch of stuff like I said you can interact with web 3 so let's say we wanted to get the default account in the node web 3d that default account notice the autocomplete and there you go

we want to interact with our deployed contract we can do that going by saying okay dear edit which is our deployed contract let's say let's get a list of all the methods in the contract so do redick methods and it spits out a list of all the methods so you've got the create method you got get vote num posts vote cetera right so again noticing the autocomplete let's say we want to actually get the number of posts stored in the contract we can say dear edit methods num posts you can call it and we can get three so we've got three posts in our contract so that's pretty cool moving on down below that we've got a list of our contracts that have been deployed by the node so here we inside

the contract view if we drill down we can see a list of all those methods again but we can actually interact with them so a very quick example we can do the numbers interaction again just click it call it and again we get three so that's pretty cool go over to the details tab I've got our ABI our byte code we can expand the ABI I get like individual values we can copy out individual individual values we can copy out the whole thing copy out the byte code which is always useful and the cool thing here is we got a log so any interaction we've done with the contract we've got a log of it so if it's a call or if it's an actual transaction it's all listed here we can filter these transactions by the method that was called so for example we can say like

create because it's filtered by the create method and again we've got three so we have three pose for three create calls we can filter by events so this is I think someone at Def Con was asking about this you can actually filter by events that have been emitted in transactions so every time we we do a create transaction we emit a new post event and they're all listed there so next thing is the Explorer view so we go over to explore this is the Explorer dashboard this is just very briefly it shows you accounts blocks and transactions we can drill down into an account so you can see things like an account like the balance and transaction count if we drill down into it again show details of the trend of the account and all of its transactions we can drill

down into a block see the block details and all of its transactions and then finally we can drill down into a transaction so see it's details and again you can like deep link into associated objects like from into accounts and the block and stuff like that so I'll kind of linked up one thing to quickly notice is that there is this little debug button there on the transaction so any transaction that's debuggable it's got this cool little debug button and I'm gonna get to that coming up now so that's a quick overview of the cockpit now if we go over to the editor this is the built-in editor and cockpit right so it looks very similar to our vs code setup on the

left you can see the same file structure and you can see our contract loaded up on the right-hand side you can see a preview Abul browser so this is a hot reloadable browser so excuse me notice how we've loaded up localhost 3001 that's to create react app port that was opened up for us right so that's hot reloadable and you can see our DAP there running so what I've done is I've kind of broken it I broke it our contract on purpose we're gonna try to create a post it's gonna fail and then we're gonna debug it right and we're gonna do that all without leaving the cockpit I'm gonna show you how it works cool so let's add a post type in title description and probably try to publish that transactions been reverted by the

EVM so what do you do now so you start usually everyone they start commenting out lines of code they recompile redeploy and then try a new transaction and see if it see if it fixes it we don't have to do that anymore so let's check it out what Embarq has done for us so quickly we're gonna jump back over to vs code just to see the term you can see here that Embarq has picked up this failed transaction for us and it's pointed exactly to the failing line that's pretty cool right shows us here that the require this require failed and if you look at the bottom you can see some of the variables that were kind of involved in this failure or sort of that at the time of failure right so let's go back over to your cockpit yeah and we're

gonna go to this this log again this is the the interaction log with the contract and you can see that last that top line there that's the failing transaction that we just performed and conveniently it has bug button that's pretty cool so we click debug and cockpit will take us directly to the failing line in our source code right so it's exactly the line that embark picked up on 46 its that require statement and it'll show us on that on the right-hand side shows us all of the data that we need to help debug this transaction so we can see some of our contract variables like posts it's just just an array of posts in the contract it's some solidity Global's like block hash and timestamp

that happened at the time of transaction and some of our local variables like ipfs hash that were passed into the create function so now that we've got all this information we've got all of our variable information and we know the line of code that failed now we can figure out actually what happened and fix it so first we can kill our debug session and figure it out so what I was trying to do this is a bit of a contrived example like it's probably not gonna happen out in the wild too much but basically what I was trying to do with this require was say it was validate that the IVFs hash passed in was actually had a length you know that there was something passed in we want to make sure that we create a post only when we have an ipfs hash right so we've

got we're kind of ensuring that we've got this length of our IPA our PFS hash equals 0 that's wrong we should require that the length of our ipfs hash is greater than 0 again not a great example but it works right so let's fix it so let's change that equals to a greater than and then we're gonna save it so this saves the file it persists it to the disk you can see if we go back over to vs code we can see that these changes were persisted right and embarq picks up this change you can see at the bottom recompile is our contract force redeploys it and do you see how create react tap just refresh there embark will

also output some artifacts into our source code for us create rect at will then recompile and it will reload our hot reloadable DAP inside a cup pit so if we go back over to cockpit you can see that our DAP is reloading or has reloaded it's reloading perfect so now it's reloaded so what have we done we just we just had a failing transaction right and Bart picked up this failing transaction automatically for us we fixed that transaction or sorry we fixed that we fixed the require statement was calling causing the failing transaction we saved it persisted everything got persisted to disk and barque picked up those changes

it redeployed our contract for us after compiling create react app refresh starred app for us so now we've got a chance to try this transaction again let's give it a crack and boom it worked that's pretty cool I think that's pretty awesome I was happy to see that see you guys are - thank you thank you thank you so we did all of that we debug the transaction we saved everything everything got refreshed for us and we didn't have to leave the cockpit that's pretty cool so you can kind of see like the direction that embark is going to help improve the

developer experience this is just the tip of the iceberg we've got a lot more features coming and we're really excited to be able to share them with you if anybody has any suggestions or comments we're always willing to listen we're always available on the status app which is bridged over together as well so you can get us on Kidder if you want to try out embark please do just npm install it into your DAP if you want to try out some of the beta releases that we've got releasing all the time just use the at next tag and that should get it into your debt for us or for you thank you very much see you have some fans around here um sir it's really interesting so why is I really like that it's called

decentralized reddit and why did you say that people would not like it and would complain about it I sort of this is a good question yes sorry there's more of a reference like we so my colleague Pascal actually he released these blog posts on ours actually put it on reddit saying hey guys there's a tutorial on how to build a decentralized app and people didn't even look at - posted click the link as usual they just rolled right so they trolled Pascal and like it actually went viral on reddit people complain what would you do centralize read it doesn't make any sense you gonna you trying to ICO that kind of stuff and I was thinking about copyright law was actually I was like someone straight mom but that's the lawyer in just popped up yeah I'm so you

may not like this question but I wanted to and it's not like the main point of representation but how does what you work fit into status overall yeah that's a really good question and probably a lot of people are confused about this but status is so most people will know status based on their messenger so status got an instant messaging platform it's it's it's an app that you can send money you can you can buy things through daps so one of the one of the kind of big parts about that application is that it requires daps to really kind of fit into the big ecosystem and get a broad range of people so without dap sort of status you know is a bit on the backfoot so basically status invested in embark

embarked the project itself to try to help gaps become more developable it's like a it was sort of like they're gonna invest in developer tools to help dap devs build gaps because without them and we're not really not going to succeed so it was sort of like this yeah it's sort of like it's sort of like a public infrastructure you know without the infrastructure sort of everyone's gonna kind of fail so yeah thanks so much [Applause]