EthCC 2: Amaury Martini

one two one two can you hear me yeah hello everyone hi uh my talk today is about building dabs uh but more specifically building dapps on top of a light client so uh first of all i want to start by uh by show of hands who here is a dap developer has built some dapps in their lives some of them okay cool so i'll present myself my name is amari you can find me amore martini on github on twitter on reddit etc i work at parity technologies i mainly do javascript and dab stuff i'm also the author of light.js which i'll talk about and i contributed on feather which i will also talk about and i'm currently working on polka dot js javascript on polka dots and subtract and some ua stuff so uh today uh my talk is gonna be separated into three parts first of all i'm going to like answer the question why do we even want to build apps on top of light clients uh second part like how to hack with light.js javascript library and third part a small and quick demo of of uh feather which is a light node inside an electron app using igs so let's start then with the first part why are light glands important why to build gaps on top of flight lanes so today running a full node as we all know is a pain in the ass some stats about inferior which is the main provider for dabs today they are at the beginning they they helped allow the dab community to grow because it's super easy to configure just have one line to add and you can connect to infer pretty fast however uh these are some figures i found on the internet they serve around 10 billion requests per day uh and 35 000 dapps depends on infera which this kind of creates some kind of centralization over this you know massive services and the idea is can we be a bit more decentralized like client can offer such a solution so what is it like i'll go pretty quickly on this because i suppose you all have more or less an idea so like clients are nodes on the network that only store headers uh so no states but still uh can guarantee some sort of trustlessness and some sort of uh security so comparing to a full node the sync time instead of days we have a sync time of about less than a minute couple of seconds state size a full node has a couple of gigabytes on your hard disk with a light line there's no state uh and the db size uh the total database size of your note however phone notes uh also tens of gigs and with a light client it's a couple of megabytes so you can totally live in a low resource environment like a mobile phone so why should we build on top uh should we build apps on top of a light client let's say this is my dap today when you create a dab you don't you know think about the node you just uh look at some centralized service typically infera or metamask which also uses infra on the back end and you just tell your dab to connect to that provider well they the provider kind of controls your dab in this case so what could we do we could also look at the other kind of nodes that are in the network that are called light nodes the ones that i explain and transform your own dap into a light node so that in this case if your dab is a light node it's like a other light any other light notes in the network it can connect to any other nodes on the network so you can have a lot of other providers on the network which means that your dap no longer depends uh on the centralized services so i heard yesterday about i learned yesterday that status is planned to do something called uh chaos unicorn day i don't know if you heard about it basically the idea is on april 1st of this year they will try to shut down all centralized services including infuria ether scan and now big ones for 24 hours uh to make it as an experiment to see if the ethereum network will survive this 24 hours what will break what will not break if ethereum is really centralized as we think about or if there's some stuff to do on this way so typically light clients would be uh a solution to this uh any dap that's worked on top of light plants will still work on that stay it's got chaos unicorn they look it up on google you'll find it so now let's get a bit more technical and uh talk about slide.js so uh like the dap when you're creating a dab the stack like today before your dab is basically an ui and a library typically web3.js or similar library that will manage the provider and provide you with all the functions that can communicate with the blockchain and so this web3.

js or this library will connect to a centralized service node and the node will talk to the network so that's the current situation today and with light clients it's a bit different because your dap will now be a bit more it will include a light node inside it and instead of using web3.js at parity technologies we made a special library called light.js that will communicate with a light node inside your dab so when you create your light your create your dab the provider will be the local light note and it will be the light node that will communicate to the rest of the ethereum network so on your side on the dab developer side there's a bit more work because you need to take care a bit of the of the light node uh so light.js concretely what is this what is it it's a javascript library it's high level it's reactive it's easy to use that was our first objective when creating light.js so as easy as npm install at party slashlight.

js so here's some code on how to use it first of all you import lights and some functions that are inside light.js the the second line here sets uh can i set the provider uh sets the provider here so the provider typically will be your light node it won't be inferior or it won't be a meta mask it will be your own light notes or local host and some port and then uh i'll remove this mouse and then to call for example the block number here we call the block number function and here the block number returns an observable i'm not sure if you're familiar with observo uh in the javascript world they're like promises but a bit more uh complicated and a bit more performant and more way more uh with way more functionalities so here the subscribe you can just imagine as a van in the promised world but instead of returning only one value the observables will continue uh returning values as they change so the block number here on each new value will consol log the current block number and the block number same thing for the balance of function which takes as parameter an address a public address and with the observers you can also pipe some functions which means that you uh take the value the first value and you apply some functions in a sort of a functional programming way you apply some functions and the result at the end uh and on the subscribe will be uh the first result with all the functions uh pass through so here we we log the balance and we format it a bit nicely with two digits so the result will be on the first log we'll have the con block number and my balance and each time your light node receives a new head it will log a new head number and each time your light node receives a new state your new balance it will also lock uh the new state here so uh it will do this reactively it seems like it's a push mechanism but it's not really a push mechanism uh light yes handles all the tricks behind so that it's easy on the lights uh on the light note today light.js only has 12 functions that's all we still have the keep it simple um mentality with it but with this 12 functions there's a lot of functionalities that can be built on already uh and the proof is that we'll i'll show you a demo of a wallet fully functioning wallet that we we've built and if you're into react we also have a specific library called igs-react for easy integration with react so you may see that it seems similar to web3.js it's kind of similar there's some difference also it's definitely a replacement for web3.js first of all the sync how do we manage a sync calls with web3.

js it's promised with light.js as i said it's observables json rpc coverage web3.js has all the json rpc lite.js we keep it simple and we listen to the community so if you want to see something inside light that just uh adds an issue on our github repo and is it like client friendly web3.js could be like client friendly which means it could be uh you know uh if the dapla developer does it it could be not so resource intensive on the light node uh and light.

js by default if you use any function inside the light.js it will work well on the lights on the light node so i'll go more into this point more specifically why is it while i just is likely friendly so behind the scenes light.js basically managed to use the last the least possible resources uh it can to make your dap work so for example it's only fetch states on new head and only five states when you want some state in your in your dap if you don't want it doesn't even fetch the new head it creates and drops subscriptions either http subscriptions or websocket subscriptions only when needed and if there's no one listening to any subscription then drops everything it handles cash and overall it's the least amount of network calls that are made because network calls over the on the lights node are quite expensive sometimes so the least amount of network errors are made and that's uh that's the goal of light.js and third of all light.js does not track users at all uh there are some articles about infrared tracking users and and uh and handling some statistics about them like just done nothing about this if you have your own light notes uh it will not track your users at all your app will not track uh so there's a fourth point but i didn't want to put it here because i don't want to advertise so much but if you want to try 2-day without the line node it's still possible like gs also despite the name works with a full node works with metamouse works with infira works with everything but the way we want to see the community grow is to get away slowly from this centralized services so if you want to get started now just go to this url there's a readme there's a couple of guides i'll leave five seconds for you to take a picture okay so the third part is a demo i'll show you a demo so the internet wasn't so good so i'll show video demo of this um our goal is basically like as i said before is to embed light clients a bit everywhere in mobile phones and browsers and desktop apps so that we can facilitate mass adoption of ethereum while maintaining the centralization and our proof of concept today is feather uh feather so which i will demo right now so to quickly um to quickly present feather feather is just a simple wallet it's just the wallets uh to manage your ether your your eth and some erc 20 tokens that's all you can send receive and that's basically all so if i play this this is when you download feather you see some terms and conditions it's downloading you'll see basically up there that feather is basically a menu bar app so that it will always live on your desktop it will always be connected it will run on startup it will always be sync so and it doesn't consume much resources on your computer so this is our go with feather it will download and here we'll download the light node and here you'll see it will start syncing uh now it's one percent you just wait a bit for it connecting to piers uh so this is a live screen that i took yesterday and it will take like 10 seconds 15 seconds uh maximum to be sync here you'll see in 15 seconds it syncs on the kovan uh test net so uh the trick we use in parity is that we actually hardcode the latest headers uh for the lights uh for the lightheaders we hardcoded in the light note that's why it syncs in like less than 15 seconds our aim is to always keep it under one minute so that it's not such a big user you know ux flaw and after that you can just start hacking on feather so let me see here i have a synced feather so when you open it you have your list of accounts as you see it's a menu bar app if you go on the main page you can see here and you can add uh and remove tokens i think if i try like gaf coin or something like gaffcoin uh whatever so you can just basically send receive tokens here it's taking a bit of time because i think the internet's not so good so it has trouble fetching the balance uh hopefully it will show it sometime soon if not it's not a big deal um oh anyways i'll continue with my uh with my slides so this was feather so feather is the first truly decentralized wallet there are other wallets out there but they rely on centralized service this is the first one that is completely decentralized because it has a light note and by embedded in it it uses light.

js it's bundled uh what bundled like as you see it downloads a parity uh ethereum lite client everything is done under one minute it uses another library called parity electron also inside us which will manage the light node was started fetch it will stop it whenever we want from a node.js environment it's a desktop menu bar app it will always be running and always sync on your computer and we try to make it a as a simple ux so here are like some screenshots the same that i showed you before if you want to download feather you can download it right now so uh it's still uh in a beta stage there's a lot of work going on we're planning to have it audited in the next month uh we're planning to also launch it on main net because today we are still in like beta stage so still on covant testnet uh in the next month we'll have uh a pretty well functioning feather and for example for the chaos unicorn day feather would be a perfect solution to uh send your uh send your tokens and send your eth so uh quickly about the feathered technology stack so it's an electron app and as the one of the first slide i show it has a light node embedded inside the electron app and it used like js to communicate with the light nodes [Music] so it also uses some other parity javascript libraries if you want to have a look at this url these are all where we conglomerate all our javascript libraries so light.js slide.js reacts i already talked about it uh uses a bit of parity api which is kind of old uh it's our own web3.js it's promise based it has pub sub support we still use it and also pair the electron to manage start and stop the node from electron uh so where to embed next our plan as we said to embed everywhere uh this slide note so now we have the electron app next step uh we think is android and ios we had a third party which we're in touch with which uh tries to do it on ios with the parity lite client on android we managed to have it running so we managed to have a lightning run android a ui that communicates with the light note and fetches balance etc so it's working but we don't have actually enough resource to work on the ui stuff and the android app itself then in the further future we would like to see feather as a browser extension a bit like metamask with a light note inside the browser extension this requires some work on the node side so we need to compile protein ethereum into wasm so that it can live inside your browser and even in the further future why not to have feather as a pure website where you go and then syncs in like less than 10 seconds and you have a functioning decentralized wallet as a web page so if you want to have light client inside your project come talk to us we'll be around here either me or tebow which is sitting also in this room we can talk to you about feather about line nodes about light js thank you thank you very much [Applause] any questions hi um i was just wondering on the on the feather list we had the actual website example as like at the bottom of the list um what was what was the big challenge in demonstrating that over like the download um so you mean this one yeah these one are next steps so we don't have actually the stuff [Music] for the feather as a website the biggest biggest challenge is to have a node inside your browser so it will be it can only be two solutions either in javascript but javascript is slow it won't be super performant if you write your four lights node in javascript or the other one is called wasm uh which is a new language kind of new like already five or more years old language that has native capabilities almost native capabilities and that run in your browser so that imagine you you have your javascript library that has some native wasm code your light client will be in wasm the website will run this code in native performance and will sync your like clients in 10 seconds so that's the idea but the biggest challenge is today to compile parity ethereum into wasm so it's written in rust it should compile to wasn't pretty easily but because of a couple of libraries and incompabilities and also because of devp2p today it's quite hard to compile to wasm so i would say it's not for the next six months but it's something that we're working on and we would like to see thank you thank you very much