107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
---
|
||
layout: post
|
||
name: "Presenting JS-Waku: Waku v2 in the Browser"
|
||
title: "Presenting JS-Waku: Waku v2 in the Browser"
|
||
date: 2021-06-04 12:00:00 +0800
|
||
author: franck
|
||
published: true
|
||
permalink: /presenting-js-waku
|
||
category: research
|
||
---
|
||
|
||
<p class="post__intro">
|
||
For the past 3 months, we have been working on bringing Waku v2 to the
|
||
browser. Our aim is to empower dApps with Waku v2, and it led to the creation
|
||
of a new library. We believe now is good time to introduce it!
|
||
</p>
|
||
|
||
<div class="post__block">
|
||
<h2 class="post__subheading">Waku v2</h2>
|
||
<p class="post__text">
|
||
First, let’s review what Waku v2 is and what problem it is trying to solve.
|
||
</p>
|
||
<p class="post__text">
|
||
Waku v2 comes from a need to have a more scalable, better optimised solution
|
||
for the Status app to achieve decentralised communications on resource
|
||
restricted devices (i.e., mobile phones). The Status chat feature was
|
||
initially built over Whisper. However, Whisper has a number of caveats which
|
||
makes it inefficient for mobile phones. For example, with Whisper, all
|
||
devices are receiving all messages which is not ideal for limited data
|
||
plans.
|
||
</p>
|
||
<p class="post__text">
|
||
To remediate this, a Waku mode (then Waku v1), based on devp2p, was
|
||
introduced. To further enable web and restricted resource environments, Waku
|
||
v2 was created based on libp2p. The migration of the Status chat feature to
|
||
Waku v2 is currently in progress. We see the need of such solution in the
|
||
broader Ethereum ecosystem, beyond Status.
|
||
</p>
|
||
<p class="post__text">
|
||
This is why we are building Waku v2 as a decentralised communication
|
||
platform for all to use and build on. If you want to read more about Waku v2
|
||
and what it aims to achieve, checkout What’s the Plan for Waku v2?.Since
|
||
last year, we have been busy defining and implementing Waku v2 protocols in
|
||
nim-waku, from which you can build wakunode2. Wakunode2 is an adaptive and
|
||
modular Waku v2 node, it allows users to run their own node and use the Waku
|
||
v2 protocols they need. The nim-waku project doubles as a library, that can
|
||
be used to add Waku v2 support to native applications.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="post__block">
|
||
<h2 class="post__subheading">Waku v2 in the browser</h2>
|
||
<p class="post__text">
|
||
JS-Waku is a JavaScript library that allows your dApp, wallet or other web
|
||
app to interact with the Waku v2 network. It is available right now on npm:
|
||
</p>
|
||
<div class="text-white post__text">
|
||
<span class="bg-black px-2">const waku = await Waku.create({});</span>
|
||
</div>
|
||
<p class="post__text">
|
||
As it is written in TypeScript, types are included in the npm package to
|
||
allow easy integration with TypeScript, ClojureScript and other typed
|
||
languages that compile to JavaScript.
|
||
</p>
|
||
<p class="post__text">
|
||
Key Waku v2 protocols are already available:
|
||
<a
|
||
class="link link--body hover:opacity-50"
|
||
href="https://vac.dev/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>message,</a
|
||
>
|
||
<a
|
||
class="link link--body hover:opacity-50"
|
||
href="https://vac.dev/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>store,</a
|
||
>
|
||
<a
|
||
class="link link--body hover:opacity-50"
|
||
href="https://vac.dev/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>relay</a
|
||
>
|
||
and
|
||
<a
|
||
class="link link--body hover:opacity-50"
|
||
href="https://vac.dev/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>light push,</a
|
||
>
|
||
enabling your dApp to:
|
||
</p>
|
||
<ul class="post__text">
|
||
<li>Send and receive near-instant messages on the Waku network (relay),</li>
|
||
<li>
|
||
Query nodes for messages that may have been missed, e.g. due to poor
|
||
cellular network (store),
|
||
</li>
|
||
<li>Send messages with confirmations (light push).</li>
|
||
</ul>
|
||
</div>
|