Light.js: Sådan bygger du din Dapp på en Light Client

Denne artikel introducerer et nyt JavaScript-bibliotek, light.js, som giver et sæt værktøjer på højt niveau til at opbygge lette klienteffektive Dapps. Det er primært rettet mod Dapp-udviklere, der leder efter et alternativ til web3.js.

Hvorfor bygge oven på en lys klient?

Det er besværligt at køre en fuld Ethereum-knude: det er ikke tænkeligt i dag at have slutbrugere til at køre fulde noder på forbruger-bærbare computere. Som et resultat er Dapp-udviklere afhængige af eksterne tjenester til deres backend-infrastruktur. Disse tjenester kører i skala, hvilket i nogen grad er et skridt mod centralisering.

Lette klienter løser dette problem. En lys klient er en speciel type Ethereum-knude, der er, som antydet af dens navn, lys. Konkret betyder dette:

  • lav på ressourceforbrug: CPU, hukommelse, opbevaring, I / O-operationer ...
  • integreret: i en desktop-applikation, på mobil, i en webapp.
  • men forbliver stadig tillid.

Hvis en Dapp er parret med sin egen lette klient til forespørgselstilstand og foretage transaktioner, behøver den ikke at stole på centraliseret infrastruktur mere. Hos Parity Technologies ønsker vi at integrere lette klienter overalt: i desktop- og mobilapps, browserudvidelser, webapps… Vi mener, at lette klienter vil spille en nøglerolle i Ethereum-masseadoption.

Mød light.js

Vi har bygget over femten Dapps til vores nu defunct Parity UI. Da vi byggede disse Dapps, stødte vi på udviklingsmønstre, der dukkede op igen og igen. Hvis vi f.eks. Konstant ønsker at vise den seneste balance i en ERC20-token for en bestemt adresse, kan vi gøre et af følgende:

  • poll kæden hvert 5. sekund
  • laver noget smart-polling, f.eks. foretages kun et nyt opkald, når det forrige opkald er afsluttet
  • lyt til indkommende blokke via pub / sub og ringe kun til en ny blok
  • lyt til tilstandsændringer via pub / sub (kun paritet, se dokumentationen)

Disse mønstre vises ofte i Dapps-økosystemet, hvis du er en Dapp-udvikler, er chancerne for, at du bruger et af dem.

Dette er imidlertid empiriske mønstre: De er velkendte blandt Dapp-udviklere, men håndhæves ikke altid.

Målet med light.js er enkelt:

  • vælg det bedste mønster, der fungerer med lette klienter: lyt til headers via pub / sub og foretage API-opkald på en ny header, mens du sørger for, at mængden af ​​netværksopkald ikke er for høj.
  • læg det i et højt niveau-bibliotek, så Dapp-udviklere bruger et simpelt API i stedet for at følge et angiveligt velkendt mønster.

Konkret betyder det:

// Før med web3.js

const kontrakt = web3.eth.Contract (ABI, '0x00..ff');

async-funktionopdateringBalance () {
  const balance = vente på kontrakt.methods.balanceOf ('0xabc'). opkald ();
  console.log (balance);
}

// Dapp-udvikler: "Dette skal være let-klientvenligt ..."
web3.eth.subscribe ('newBlockHeaders'). on ('data', updateBalance);

---

// Nu med light.js

import {makeContract} fra '@ parity / light.js';
// Dapp-udvikler: "Jeg er sikker på, at dette er let-klientvenligt!"
makeContract (ABI, '0x00..ff')
    .balanceOf $ ( '0xabc')
    .subscribe (console.log); // Registrerer resultatet, når balancen ændres

Reaktiv programmering på højt niveau

light.js skal være på højt niveau: Dapp-udvikleren kalder en funktion, og biblioteket vælger det bedste mønster, håndterer cache og udfører alt det beskidte arbejde bag kulisserne.

light.js udsætter kun 10 funktioner på højt niveau, blandt dem:

  • spørge saldoen: balanceOf $ ('0x123');
  • interagere med kontrakter: makeContract (abi, contractAddress);
  • bogfør en transaktion: bogfør $ (myTx);
  • administrere konti: konto $ ();
  • osv. (du kan finde den fulde liste i dokumentationen)

Vi udsætter kun ti funktioner, men de skal imødekomme behovene hos de fleste Dapps i dag. Som reference byggede vi en fuldt udstyret Ethereum & ERC20 tegnebog oven på light.js, kaldet Parity Fether. Baseret på feedback kan vi naturligvis tilføje nye funktioner - du er velkommen til at oprette et problem, hvis du har brug for en.

Du har muligvis bemærket $ -tegnet bag navnene på funktionerne. Dette er en JavaScript-konvention til at repræsentere Observables. Observabler er en JavaScript-struktur, der dybest set repræsenterer en løbende asynkron datastrøm, der er bestilt i tide. Nogle eksempler, der kan udtrykkes i Observables:

  • klikker på en knap
  • tweets på dit Twitter-feed
  • nye blokke på Ethereum blockchain

Datastrømme er en intuitiv måde på højt niveau at udtrykke ændringer, der sker på Ethereum blockchain. Observablerne i light.js fyres, når noget ændrer sig, og Dapp reagerer på disse ændringer. Desuden kan Dapp-udviklere udnytte det enorme økosystem omkring Observables til at bygge komplekse Dapps med de grundlæggende dem, der leveres af light.js.

Hvis du vil lære mere om reaktiv programmering, skal du gå mod vores dokumentation.

Begynd at hacke med light.js

Den bedste måde at starte hacking med light.js er at:

  • download det fra npm: garn installer rxjs @ parity / light.js
  • følg vores 6-trins tutorial: https://parity-js.github.io/light.js/guides/tutorial1-set-up-a-light-client.html

En vigtig ting at bemærke er, at selvom light.js er optimeret til lette klienter, vil det naturligvis arbejde med fulde noder, lokale eller fjerntliggende. Især fungerer det out-of-the-box, hvis du har MetaMask installeret:

importlys, {balanceOf $} fra '@ parity / light.js';

// Vent til web3.currentProvider indsprøjtes
window.addEventListener ('load', () => {
  // Fortæl light.js om at bruge MetaMask-udbyderen
  light.setProvider (window.web3.currentProvider);

  balanceOf $ ( '0x123) abonnere (console.log).; // Registrerer saldoen
});

Selv hvis du ikke kan integrere en lys-klient i din app i dag af en eller anden grund, fungerer light.js godt med eksterne, fulde noder, så vi anbefaler light.js til enhver form for Dapp. Den dag, du beslutter at endelig skifte til en lys klient, behøver du ikke at ændre en enkelt kodelinje.

Hvis du skriver din Dapp med React, leverer vi også light.js-react, et lille bibliotek til let at integrere light.js med React-apps:

import * som React fra 'react';
import {balanceOf $} fra '@ parity / light.js';
importer lys fra '@ parity / light.js-react';

@lys({
  myBalance: () => balanceOf $ ('0x123')
})
klasse MyComponent udvider React.Component {
  render () {
    Vend tilbage (
      
        Saldoen på "0x123" er {this.props.myBalance.toFormat (2)}.            );   } }

For at se et eksempel på, hvordan light.js bruges i en app i den virkelige verden, skal du se, hvordan vi byggede Parity Fether ovenpå.

Næste skridt

light.js er et lille skridt i retning af vores bestræbelser på at fremme brugen af ​​decentrale lysklienter. Vi vil meget gerne høre feedback fra udviklere, så hvis du har spørgsmål eller ideer om dette bibliotek, skal du sørge for at sende et problem på Github-repo: https://github.com/paritytech/js-libs/tree/master/packages /light.js.