Building a DApp: What are DApps and why Meteor

Transcript

okay hello I'm Fabien I'm the lead developer I'm also created the current mist and the current wallet and I'm also worked partly on web 3GS and other things I want to talk today about what are that because I think a lot of people have this question general because it's a new term we coined and also why you should use meteor to build them so adapt like in its simplest case it's just basically an application talking only to a blockchain so the main source program okay information information basically

the main back-end is a blockchain because this is trusted source of information obviously this can be a native tab also but this will be most likely a JavaScript html5 based web application because we have missed where you can run it which automatically gives you the access to the blockchain and it's also extremely easy to build interfaces in a JavaScript environment in html5 based environment so what basically makes it that so the main three components and the main component is obviously an interface build somehow like in this case is JavaScript html5 CSS it has a local storage so the data is kept locally which could be local

store it could be the process index to be could be web SQL and it comes from a place where you can verify that the app is exactly what it's supposed to be so this could be swarm ipfs any kind of content content addressable storage and obviously it needs the access to the CM blockchain which is what we deliver the web 3 of so the web 3 object is basically like the API for JavaScript applications to interact with a blockchain and it will be the object you will have missed available and it's pretty simple to install just I'm convinced our three or meteor atmosphereum web 3 so now a few people already probably had the question

why meet your so meet your act is a full stack framework allowing cross client reactivity of all the server infrastructures on sun the reason why meteor like this is not the main reason what one reason is because I know it and because I wrote a book about it and we we build all our interfaces using meteor but the main reason actually it is it is ideal for Deb's because meteor is built to purely build single page applications single page applications doesn't mean they have only one page it just means that all the logic is contained in the Java Script which will run in the browser it also has a command-line tool

for like loading a development server for package management and bundling so currently if you would do this you would have to learn a bunch of tools you would have to learn crammed and gulp and browser fry and whatever and it's a pretty like step learning curve to get into installing building web applications so meteor makes is easy and that's why we are recommending actually using meteor because it is so easy you basically just write one line of code and you can already have something visible you can change it and you already see something happening another major point is reactive template so this basically means when your data sources

changes so anything you get from the blockchain when this changes you have to up your interface will update automatically so this means your interface will always be consistent you don't have any kind of spaghetti code where you try to keep track of things or you have to write endless bindings to get things right it's just always displaced chord data and the major point is it has mini which is an in-memory database it's basically exactly the same syntax as DB but its basic just in your memory in the browser and there are packages like the package I have is called persistent minimum which out persists all of this either into local

storage or into the index to be a web SQL in the browser so you're basically just talking to this like database you're writing things stands automatically in your local storage persisted and when you reload the application it's it's just back there and one major tool as well is the meteor build client which allows you to basically get purely declined part of your application so you get a JavaScript file a CSS file and index file which you can in some static assets you had and you can just put the wherever like either on a server or later on swarm in mist and we also provide some package which we use to build our own tools you

can use them immature but some of them you can even use without me cure for some of the east tools which gives you conversion with number formatting and so on and some nice interface packages so they need meteor because they use the reactivity of meteor and we highly encourage using the identical because the identical is basically the user's way of recognizing his address and his accounts by his identities he uses a mist so we use this in mist we use it in all our depth we build build and with other depths you said to it's easier for the user to recognize so we saw this example before of the smart contract where somebody want to buy something they all both put money on the smart

contract exactly twice the value of the product and then when the package was sent successfully and he is happy he can initiate that the money goes back except what he paid for the package so clever nice interface you have can build this in mist and I will not live code right now because that takes a little too long but I will show you how it behaves it looks oh that's okay so this is mist and I will start mining here on my private net to avoid any chances of no internet so

this is basically exactly the button Alex was talking about the nice thing about this is kind of like the Internet of Things but it's the Internet of components you could say because it's kind of like the button is the escrow so the button gets the money and the button pastes the money out and all the rest around and wherever it is but in this place basically doesn't matter because it's the button is the internet of thing thing so we here and this is basically a miss preview at its current state and I selected that I want to be the buyer or some random person who has money on his account in this case is here the buyer and the buyer can basically he sees the

button the contract or like this this component sees automatically who is there and what address he has and he sees okay there's nobody I know so probably somebody want to buy their the item so if I want to buy the item I mean it's just click on it decrypt my password and sent this magical comments duty and blockchain and I bought the item basically so now I would wait for the package from wherever he sends it once I like it I would actually press confirm and the money would move to me back my deposit and the price plus the two deposits of the seller so the same thing would look

different the same pattern would look different if I would be the seller so if I'm now switching to be the seller it would look actually different because now the button recognizes that I am the seller of the button and I now have a different function I can do I can refund the buyer if I think like whatever he sent the package back can whatever or if I'm somebody else I would basically see the items already sold so if you go ahead so just to like to make that clear so here we look our accounts we see there's two by over a thousand either and the

seller has thousand either this is actually correct it's actually good question doesn't yeah so we go back to the sales page and we basically confirm that we got the package and you also can see here in the confirmation window what actually is having under the hood so I'm the buyer sending an action to the contract to the patent itself here I'm sending no uta' because I already sent ether and I'm executing this function which is hex encoded the function name with some gas

provided once it's done all the money moves back to the people who which should happen if my private network works ok so now the item is actually sold for both parties and that everything works I lost I paid and this fella got his money and the interesting thing about this is it's basically this is just the HTML here and you see it's basically simple thing down here I know not sure if you can see that right so it's basically this simple thing here it's the Buy button and a pass in a

contract so obviously when we are building a real web shop we're not having one contact her Buy and her per sale and per product we would write a contract which have multiple products which can be bought X amount of times at the same time so this is just to show like a very simplistic approach here so in this case we just give it the address and the button itself looks simply like a button which gets a specific text and a specific class and a subtext here and the whole cord itself so the self-content thing is this snippet here

and I basically just have the avi of the contract we are interacting with this is readable I hope so this is the avi which tells basically web 3 how to interact with this contract then a function which will check the states it will call all these contracts function like example who's the seller who's the buyer what's the value and what's the current state and then we have this object which is the different states so if I miss the seller and I'm state 0 then use these classes and this text if I'm the instead one use this and so on and basically what happens if the country if the template is initiated we just check the

state at the beginning reading from the theorem blockchain and then we watching all the events which come from this contract and if there's an event coming something happened and we will check the state again so this will update the state will update our reactive function you're called template bar by our value and so on and this will rerun all these template helper functions we have here which is only one the get state which gets the state from this one state object and returns the right text or the right class or whatever does so busy dysfunction we rerun if any of these template bars you would change in the same when I click the button I'm just checking if I'm the buyer or the seller

or if there is buy or sell account and then it will call the right functions and once you call in websley web will send transaction or whatever and you pass the right data miss will pop up a window asked to confirm this transaction and there you go this basically allows you to have the Internet of web components box so what you also see here is using our little CSS framework we are building which we will use for our tabs to pan tabs we will build if you want to use this framework you will always like a look into our like similar like our

design which makes you look good by default and it's rather simple it's like simple HTML you write very simple classes and then you immediately have like a good-looking application but this is still in the making or use of caution so just check the cellar we see the same stop mining yeah hello can we open can

we turn this on okay I think it's him testing testing okay okay yeah that's basically it so this is the DEP you can try yourself if you just go to this address and you have a local node running and you start it on low blows with the RPC started localhost 8545 you basically be able to do things you would have to change in this case you wouldn't be able to do anything except buying if I would deploy it with a write contract or you just like clone the application yourself look how it looks like and if you want to start building gaps our wiki page I shifted it a little bit around or this page here

actually gives you a good entry point on where to look like building tabs on meteor thank you you