Quickly Develop Data Driven Reactive DApps by Richard Ramos and Iuri matias (Devcon5)

Devcon 5 · 27 Nov 2019 · 7:20

Richard Ramos and Iuri Matias cover how to quickly develop data driven, reactive decentralized applications at Devcon5 in Osaka. The talk covers tooling and patterns for building dApps that update their interface automatically as the underlying onchain data changes.

Speakers

Topics

From Devcon 5, hosted by Ethereum Foundation.

Transcript

[Applause] so you know I'm rich Ramos is yes we are from strangers and they are going to talk about it we have to tax so we need to give some comments we are working on an idea called the terminal which is sadly surprised that it would be the under Greek no gateway where you sustained repetition and bias and in the development of the sphere we faced some

challenge being the main challenge access mark on the data they need in the terms of tracking smart pocket events and performing that sources so here are some streets were we can see there is work we need to do some battery for example in this screen with E - a - t all the active and masked rates for a specific user and a problem well and recent you know some support basically

to see in this 100 events and as well as try to repeat all the data in case the user refreshed and maybe we can have some lack of readiness to refresh the manga as well as it is hard to decide to do simple words because sometimes were not using existing data and interpreting the data over again so we come up with a simple solution which is subspace image that is already available this is a big library that lets the DM developers be able to track pants a variables a functions and

busses it will synchronize all this data into a local database and also resume the logging of the corporate events it that means that if the user refreshes in a media it will not start from scratch it will start from the gospel from the last event that it has summarized and it also is built around our experience of semo's meaning that you can have a react parameter so to reduce subspace so first we need to require the library during the show is it giving provider and and we need to English was

very pernicious because it's make sure to start with our base things while it needs to be sink before starting now if we want to two traffic lights first thing to do is we need something initialize the new contract there's two ways to do this it can be either busted back three for that instance or as a day behind address and what's more it will still be a battery contract but you will have some extra extra things namely that will have the equal of a New Mexico to track and this max methods you it will tell the subspace exactly what to talk what to track you can also pass it some

there's some filtering options for instance in this case we want to track readings with only for a particular private buyer and it will return an observable then this observer will it will be on our oxygen form we can use the operators available and Crotona operators in this case because an average over here and then whatever everything is done the subscriber will will be triggered with the latest average and for those ratings I mean again it's important to emphasize if you

use this on the top and you you know refresh the that it's not going to stick all over again the last-known location it's show and it's it's much easier this way and you can track their properties so it's so usually will do doc pol communities it has a which you guys still do because it's the same API but you can't you tell from the observable and you can do the same thing with balances so you can you can track the ax balance or see token balance and this is framework with most things only thing is with the framer

issue with react or angular or whatever so sorry we are here is just an example would react so you could use this you can use this with redox or without with us is not your forced for any particular solution so in this case we provide that Robert to to come out and finish this property rather a react components and what this will do is that it will make the relevant components recognized the properties that are observables automatically subscribe to them so for

her there's something here it automatically crushes the component and then to use this again use initialized subsets contract and again this is a very simple example here we want to track that already in advance and we're just passing about the main and the maximum for for the rating and yeah so that we also support integration with graphing we only have to define the resolver and with this resolver you need to pass a subspace of several and after creating the scan and you can start using the graphical queries to obtain a

specific data and the good thing about using subtrees is that each time and you haven't even read the query we will take that automatically and you will receive the latest data and so here are some useful links in case you want to learn more about subspace the distance of the documentation where you can find examples of iteration with different frameworks so many prevention [Applause]