Michael Bradley ~ Blast Off with the Embark Framework

[Music] all right I am Michael Bradley I'm here representing status I'm part of the team that develops the open-source embark framework and I'm excited to be here with you today over the next 30 minutes I'm going to give you a whirlwind tour of developing decentralized applications or DAPs with embark I'm gonna give you a 10,000 foot view of the tooling and with the remaining time work through some initial steps of building afresh DAP because time is short if you'd like to get hands-on with embark please check out a tutorial series just launched by another member of the embark team a Pascal pricked the link is there on the slide building a decentralized Reddit and you can check out the bitly link I'll put that back up on the screen in just a bit can you hear me okay is that better all right so what's in a DAP generally there are four fundamental components we have decentralized computation which would be the blockchain its consensus mechanisms and smart contracts there's decentralized storage that could be ipfs could be swarm may be some other technologies that come along too centralized messaging such as whisper and finally a decentralized name system those are going to be the four main building blocks so what's embarked embark brings all these things together it makes it easy to launch the processes for these components all together within one unit um it creates an immersive and interactive development environment that's going to help you develop debug test and finally deploy your DAP deploy your DAP when the time is ready so let's talk about some prerequisites to use embark you would need nodejs version 8 11.3 or newer i actually recommend the LTS version the latest LTS which would be in the 10.15 series I do not at this time recommend an ode version 11 install there are some API compatibility problems with the nodejs standard library you would need developer tools on your machine so if you're on Mac OS that would be Xcode for example if you're on Linux you would do it was a debian destroy you dap get install build essential if you're on Windows there's a Windows developers tools package that you can install directly fruit and freely from NPM as long as you have admin privileges on the machine you're gonna need an etherium client that could be parody it could be a simulator I'm gonna be using guest today or go etherium you also need to have a storage daemon installed right that's typically ipfs or swarm I'm gonna be using IP FS if you have any questions about the installation you have trouble with that I encourage you to check out our Docs at the link at the bottom of the slide there's a section for each of those components and you should be able to get up and running pretty quickly alright so that's it about it for the slides actually I'm gonna be jumping in to the command line to show off a little bit of what it's like to work with embark however I do want to mention something before we start that embark is undergoing some significant changes our current our current beta release is embark version 4 beta 0 we're gonna be releasing beta 1 pretty soon and we're gonna be changing making some important and exciting changes as we go through today through the demo you're gonna notice that embark has a built-in web pipeline that's basically babble and web pack working together to compile the front-end assets we found that's too restrictive many of our users have complained that our own pipeline is too restrictive it's not easy enough to adapt to a custom purpose or to integrate potentially with other tooling say if you prefer to use angular's tools so embark for the beta one which will be released soon is actually gonna make that possible and the embark team is actually working really hard right now on refactoring embark to make possible so watch out for the release it's going to be exciting times alright so let's open up a terminal I'm going to blow up the font a little bit here and I'm going to check the prerequisites really quick like I mentioned so one sec all right so we talked about having def installed and we can see that that's available PFS I have a compiler write node version like in the node and NPM version in my command line so I've got all the pieces in place the next step that people typically are going to take is to install embark globally this is what you would do now I already have it installed so I'm not going to run this command but what that would look like is NPM install - - global embark at next now note that next part on the end that's the package distribution tag if you leave that off you'll actually get embark version 3 which is are still our current stable release but today we're going to be looking at embark version 4 features and I would encourage you to go with the beta so if you want to explore what I'm covering so make sure to put that next on the end alright having already done that embarks on my global path right and I'm gonna go ahead and invoke it along with the version command and we'll see we've got 400 beta 0 now I'm going to invoke embark without any arguments just to give you a look here at the up a little bit alright there's quite a bit of help output embark covers a lot of territory and we're barely going to scratch the surface today for example it comes complete with a command line scaffolding interface for building gaps each of these commands has help as well so if we were to append - - help after a command we'd see commands specific help all right the docs have all the details and what these commands do and how some of the flags work so definitely seek out the documentation alright so let's get to the 10,000 foot view by spinning up the built-in embark demo taking a look like at the command line dashboard and at the web-based cockpit as we call it so I'm going to change to my adapts directory and I'm gonna run a command embark demo alright this is basically going to take a template and spin it up it installs all the dependencies on the fly with NPM we're going to switch into the demo directory and we're going to run it all right now the put on my dashboards gonna take over my terminal and it's gonna prompt me to open a web browser all right so um bars gonna start by firing up a bunch of child processes namely processes for Go aetherium an IP FS once it's completed that step it's going to deploy the contract that comes with the demo it's called simple storage once that's the point to the local blockchain it's going to invoke that pipeline I talked about and build out some assets and having completed that our adapt is up and running the front end of the DAP and the back end and I'm going to make this little bigger and we're going to look at our fundamentals again we talked about the four fundamentals of a distributed application so we're gonna kind of take a surface look here we're not going to dive into the code but we're going to interact with the blockchain and these other technologies so we could set a value by interact by invoking our contract and that's what the front end ties into storage methods dot set we send the value 103 and we can get it to come back around if we went back to the cache board command line we'd see that we're tracking that so that as you take actions and the gaps that you're developing you can kind of get a sense that you know okay what I'm doing is what I think I'm doing if we move on to decentralized storage we have the IP FS daemon running locally we can save some texts and we can retrieve it from the hash it gave us oops we can upload pictures what's a demo without some cat photos we can download it alright so we just went full circle with ipfs we have distributed messaging we can listen to whisper channels so I'm created a channel called ABCD and I'm gonna send it a message 1 2 3 4 5 and that's going to echo back around alright finally we have our naming system or name system in this case it's ENS we can resolve a name to a address on the blockchain and then we can look up addresses too and result and get a name back so in a nutshell that's the four fundamental components we see that we've done this through a JavaScript browser front-end the next thing I want to take a look at is another aspect of working with embark and it's called whoops it's called the cockpit so you'll notice that after the DAP fired up it told us access the web back-end with the following URL this is another process that's listening on uh localhost port five five five five five by default the development web server is listening on 8000 and this is going to require an access token alright so we log into our nice web UI I will note that some people have a strong preference some people are really glued to the command line and that's where they want to live other people really would like a more graphical interface and in we're trying to serve both needs with embark and you can use both actually they can work well together um just a quick look here I'm just going to do a superficial overview of the features I want you to have a sense of what you get with embark it really is a batteries included system for building gaps on the top right we've got some helpful links to our documentation and our home on github if you if you hate dark themes I'm not a big fan myself maybe I'm weird you can switch to a light theme we'll go back to dark for the demo we've got a repple here or the console we could also do this on the command line this is a live JavaScript environments we can enter expressions and we have top-level awaits which is really nice so let's create a promise a really trivial one with promise dot resolved and if we await that we immediately get back the answer so that that we don't have to wrap inside an async function although we could write our own async function if we wanted to here we can see the debug output of the blockchain process all right so this is coming from go aetherium alright so let's dig into some other features here well actually if I scroll down a little bit you'll see there's a summary of the deployed contracts I mentioned the demo has one built-in contract called simple storage let's actually go look at the the deployment page we see more more details we see the arguments that that was instantiating with the transaction hash how much gas it cost etc we have a suite of explorers and the Explorers view opens up to basically kind of a little bit of a montage of the Explorers let's drill down into the individual explorers we have an accounts Explorer there's only one account on the blockchain right now we have a blocks Explorer a contracts Explorer and a transactions Explorer now hyperlinking is employed throughout this interface it's easy to move back and forth between these different things that are out on the blockchain I will point out that right now in beta 0 our security token that governs access to the cockpit is a little too tight so if I were to open this in a tab it's not gonna work it's gonna say hey you you know you didn't have access that shouldn't be that way and we're gonna fix that so for today and if you work with beta 0 yourself just navigate through just use the menus to move around so we loaded a transaction then go see what block that correspond it to and get all the low-level details you know if we need them if we go back to accounts we can click on an account and we can see the transactions that are associated with that accounts all right so that's the explorers we also have a built-in editor all right all right this is a live editor if you make changes here in this source file they are actually going to get saved to disk on your on your local machine right it's not just in memory in the browser and it will trigger a redeploy so I'm gonna come here and I'm going to add something to the set method I'm gonna say it's gonna be plus three and if I save it will see that the contract was automatically recompiled from solidity and redeploy to the blockchain which is pretty nice it's gonna help keep you in the flow also the pipeline kicks in and we'll we compile any web front-end assets that have changed all right now we're not limited to just looking at contracts in this editor right so we could take a look at our test suite alright the demo comes with one test built in not gonna spend a lot of time here but you know basically you could edit anything we could actually edit the DAP itself each of the tabs and the demo corresponds to a reactor or a javascript file which is just using you know plain vanilla react to get the job done along with some api's that embark expose is currently called embark Jas although that name is gonna be subject to revision alright so there are also some advanced features which I'm not going to even touch today we do have an integrated debugger it is getting better and better it is a little buggy right now on beta 0 but it is there and I encourage you to explore with it that's gonna actually let you debug your contracts in this live development environments very nice quick look at the utils these are pretty simple but handy we have a units converter if you have trouble keeping track of just what the you know how the units work I mean obviously you can get the definition but then you can also plug in numbers and a live update we have a communications panel and a name system panel which are very similar to the demo tabs in the demo so I'm not going to show those again you have the ability to do one-off sign signing and verification of transactions if you need to do that or want to experiment with that and we also have a transaction decoder all right so let me catch up with my notes here I work on this stuff every day so some of this is coming just rolling off the tongue alright so that is it for the broad overview of the tooling there is more to explore but that's what I'm going to cover today with respect to the demo my hope is that having seen what's available you'll feel excited to dive in embark aims to give a true batteries included experience as I've explained before and I do want you to note I want you to realize that there are this we are in a beta release we just came out of alpha if you use beta dot 0 you're gonna run into bugs and a lot of those bugs probably are fixed in beta dot 1 which should be coming out really soon we have a getter channel where you're welcome to join us anytime come chat to us we're friendly and our teams distributed all over the world so odds are that there is a team member awake and in the in the lobby channel on the getter so come come chat with us also you know if you find something find some behavior that seems to be a new bug please feel free to file a github issue we will try and respond as quickly as we can and also you know everyone at status the bottom bark team included but everyone is deeply committed to open-source technology so pull requests are very welcome and I would encourage you to get involved we'd love to have you involved let's see how much time do I have left enough all right so the next thing I want to do is take a look at what would be involved in creating a fresh DAP all right I mean we worked from the demo let's see what it would be like to start more or less from scratch you don't have to start from scratch from scratch you don't have to create all the files yourself or embark one of our embark commands is going to put all the boilerplate in place for you so I directory down and I'm gonna run a command called embark new now embark new actually has some nice features it has the ability to reach out and go at a github repo or really any hosted git repo so that could be bitbucket or get lab right now but github seems to be most popular and it could so you can basically use a github repository as a template we have a number of templates baked in that's what I'm going to use today all right and I'm gonna give it a name which will be d reddit all right you may remember that at the beginning of the talk I mentioned there is a new tutorial series we just launched parts 1 & 2 are out part 3 will be coming soon I'm gonna mention that again um so I'm gonna quickly work through I'm gonna put some of the code from these tutorials in place and I would encourage you to do a deeper dive with that material all right so having spawned the D right adapt from the boilerplate let's jump in there and take a look real quick at what it did all right so I'm not going to go over all these files I'll leave it to you to explore some of this but I do want you to take note of the main three things and that is the app the config and the contracts and right now there's nothing in contracts because this is not the demo this is just the boilerplate this is going to be changing you but I talked about beta one is gonna change things it's gonna change how you develop right so when we release beta one it's gonna be it's gonna include a demo that uses create react app instead of the old built-in pipeline we're gonna deprecated the built-in pipeline um that's gonna mean that some of this layouts going to change a bit so what you see here today with this structure may get slightly revised but it should be pretty familiar still all right now as a good practice we want to initialize our directory as a git repository and the reason is of course that it's going to be easier if you do that so then figure out what you changed as you experiment and you could do the same thing with the demo and I would encourage you if you're gonna play with the demo go ahead and do that so then you can keep track of what you modified and get it back to Ground Zero easily you could also always just create a new fresh demo now rather than work in this directory with that with the code from the tutorials that I mentioned I'm actually gonna take some short short cuts because we are running short on time I'm gonna go to D reddit - and I am on I'm gonna go back to step 0 now step 0 basically corresponds to what we just did and that other D reddit directory so I just had run embark new and I get initialized and that's it the next step I did was to go to part 1 of the D reddit or distributed or decentralized reddit tutorial the Pascal put together and it recommends creating a contract it shows you how to do it it explains a lot about it if you're new to solidity if you're just getting started it's not a thorough introduction but it's a good probably a good way to start take a look and see what you know some real contracts do so I put that contract in place and I checked it in on the step 1 branch if I run tree - l2 now we'll see that under contracts there's D reddit soul I'm gonna bump the fun up I think it's just a little too small and I'm gonna open that I'm gonna open that file you there's not time to go over all of this like I said the tutorial part one is gonna explain all this to you and how it was put together but let's step back and think about what would be in a distributed I mean if you were gonna try and reinvent read it as a decentralized application what are the key things you would need well we're all familiar with writer probably most of us are there's posts there's users and there's the ability to up vote and down vote alright so all those things we can model at least maybe a little bit naively but we can model them with a smart contract and with wallet addresses wallet addresses would serve the place of a user account and then the contracts are going to manage how votes get recorded and then also they're gonna have hashes to material that's stored out on ipfs so again I'm not going to cover all this code but let's just take a quick look we have data structures for posts we have events that cover new posts and votes and we have some methods that deal with creating posts with voting we have some helper functions that determine alright can you vote I mean maybe that you were referring to a post that didn't even exist and on the blockchain or maybe you've already voted and then we have the ability to go get the vote counts all right so that's it for part 1 of the tutorial I mean in a nutshell you know I put that down last thing I'm going to do is I'm going to go to step 2 which corresponds to part two of the tutorial and what this put in place well as a test and I'm gonna open this up give a whirlwind tour and then run the test so you can see and pass so we always want to test our code right that's what we do is as developers one of the things that embark jsr embark empowers you to do is to use JavaScript and things you're already familiar with to test your contracts to test all your code actually and Bark's gonna make some global variables available and we're going to be able to test the contracts in the familiar style of the mocha test test runner so we have some preamble stuff and then we have a suite of tests you know we're gonna test that it should be able to create a post and receive it by a contractor then we should not be able to vote with a none existing post that's the helper method I talked about that we should be able to vote in a post if an account has not voted before and so on all these tests are really straightforward you can use api's that are exposed by web 3 or that are exposed by embarque itself through what we call embark j/s once you've got your tests written or even as you're writing them you can use embarks built-in test runner to kick off the tests and this is going to help you have confidence that the contracts you're deploying that that your DAP works the way you would expect it to so by default the test runner is going to use an aetherium simulator you do have the option to run the test out on your local chain and you could also run them against yeah yeah so you could run them against gasps if you wanted to you could run them against a new gift or even an external gift and you but the simulator is the default and it works pretty well so the next step for building building this out would actually be to implement the front-end that's pretty involved it's not terribly complicated but it does involve a fair bit of code and it's kind of beyond the scope of this workshop especially I'm bumping up against my time limit what I'm gonna encourage you to do is to seek out this again this tutorial series part 3 is going to be released soon in fact I'm going to talk to the author and see if I can't get him to go ahead and publish it today and then you can check that out and you can get the in in picture not only you know you got a brief look at the contracts and how to run the tests the tutorials going to tell you more and then you will be and then with part three you'll actually be able to dive in and implement that that web front-end like we had for the embark demo one last thing I want to mention is if we go to the docks all right a little bit in the top-left there is a version selector it always defaults to version the latest stable release which is still version 3 I'm going to encourage you to switch it to version 4 and then the documentation will be synced up with what version 4 does how it works so I want to thank the organizers that eat Denver today I know this was a quick tour of embark I don't know if anybody has any questions or time for some quick questions be glad to entertain them anybody yes so what was the motivation for what was the motivation for building embark as opposed to like using truffle can I use this in like congruently with truffle that's a common question we get that quite a bit I mean really there is a lot of similarity and there's some crossover and in fact we make use of some of the tools that truffle has so for example the simulator I keep mentioning is the ganache simulator but embark just has a slightly different aim toward it I mean we really are going for that batteries included type of approach and everything is really well integrated together so I think that you are welcome to use ganache components if you wish but I would encourage you to least give a shot so what comes out of the box with embark you may find that it gets the job done and if not it's very pluggable that the all the embark components put together as plugins even internally it's all set up as a plugin system so the sky's the limit as far as integrating with stuff that we haven't thought of yet no more questions all right again once again many thanks to the organizers that eat Denver I've been very happy to be here today presenting to you I'm gonna be around the conference the rest of this weekend so if you have any questions or you need any help please come find me again my name is Michael Bradley I'll be very very happy I would love to help you get started with embark learning how to build decentralized applications thank you very much [Applause] you doing fine are you you we want to use you [Music] you