DEV Community: Andreas Tzionis

How to create Web Apps in pure Rust

Andreas Tzionis — Thu, 24 Apr 2025 11:21:34 +0000

TinyWeb enables client-side applications to be built in pure Rust, similar to backend applications, leveraging the language strict type system and great built-in tooling.

It has a tiny footprint with less than 800 lines of code, has no build step and no external dependencies. Yet, it support full-featured webapps!

Option 1. Use the starter project

Fork the tinyweb-starter project

git clone https://github.com/LiveDuo/tinyweb-starter

Option 2. Create a new project

1. Create a Rust project

Create a new Rust project with cargo new tinyweb-example --lib. Add crate-type =["cdylib"] in Cargo.toml and install the crate with cargo add tinyweb --git https://github.com/LiveDuo/tinyweb.

2. Add sample code

Update the src/lib.rs:

use tinyweb::element::El;
use tinyweb::invoke::Js;

fn component() -> El {
    El::new("div")
        .child(El::new("button").text("print").on("click", move |_| {
            Js::invoke("alert('hello browser')", &[]);
        }))
}

#[no_mangle]
pub fn main() {
    let body = Js::invoke("return document.querySelector('body')", &[]).to_ref().unwrap();
    component().mount(&body);
}

3. Load wasm in HTML

Create an index.html in a new public folder:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/gh/LiveDuo/tinyweb/src/js/main.js"></script>
        <script type="application/wasm" src="client.wasm"></script>
    </head>
    <body></body>
</html>

4. Build the wasm

Build the project with cargo build --target wasm32-unknown-unknown -r. Then cp target/wasm32-unknown-unknown/release/*.wasm public/client.wasm to get the .wasm in the right place and serve the public folder with any static http server.

Crypto's anti-network effect

Andreas Tzionis — Sun, 21 May 2023 21:00:00 +0000

Network effects

Much of this millenia's history has been marked by a single observation. Networks grow exponentially ie. Metcalfe's law. Not every industry benefits from network effects, but those who do enjoy unique economics and an extreme upside potential.

Crypto networks

Every crypto project is becoming a network in multiple ways. A blockchain natively needs an asset exchange, a naming system for human-friendly addresses and at least a bunch of protocols to support the ecosystem like liquid staking, lending platforms, NFT marketplaces, stablecoins and aggregators.

Adoption drawbacks

There's also a secondary effect where people joining an ecosystem early are disproportionally interested in its success. Yet, in general the bigger the ecosystem the more tokens are listed in exchanges, the more NFTs are listed in marketplaces and the more the people (in terms of addresses) you can interact with. That effect is arguably dominant in comparison to the early adopter effect mentioned before.

In short, one could expect "the bigger a network, the bigger it will become", even in crypto. But that's not the case.

Classifying blockchain tech

Andreas Tzionis — Sun, 14 May 2023 21:00:00 +0000

Discussions in crypto, when civilized, are around scalability (ie. tx fees) and security. Hidden behind these high level properties are some fundamental underlying properties that are so central they can be found in any blockchain.

This properties are:

Data availability guarantees
Compute or execution guarantees

Classifications

1. Part of consensus

When Bitcoin was release data availability was not a topic of discussion. That's because data can be expected to be stored for nodes that are part of consensus. If nodes omit any blockchain data then they might not being able to compute the blockchain state and risk losing their consensis rewards.

2. Storage deals

A completely different approach is Filecoin deals. To be clear that is different from Filecoin consensus which follows a conventional pBFT leader-based consensus. Filecoin deals are essentially a marketplace with storage providers, each provider has a reputation based on their history and data is usually stored in multiple operators for better resilience.

3. Slashable DAS

If there's agreement on the blockchain data you can run a node to provide an execution environment. That means that data can be safeguard with "cheaper" methods but still have the same security guarantees.

One such method is data availability sampling (DAS) where a blockchain stores data and does not care about execution. The data are guarantee to be available by random sampling or in other words by continuously requesting random pieces so nodes cannot omit any to not lose rewards.

4. Optimistic DAS

A similar method is optimistic data availability sampling. This method still employs succinct proofs to ensure node's store the data but does not enforce slashing for nodes that do not provide the proofs.

More options

1. Sharding

Data sharding is a method to split data or execution in "committees" that only process part of the blockchain. Near protocol is focusing on sharding its mainnet that is expected to split the network in 4 and hence improve its scalability by 4x.

2. Expiry

State expiry is way to store non-permanent data in a blockchain. Storing data temporarily means that the blockchain size grows in a slower pace and hence nodes will eventually be able to store more data.

How BitTorrent (really) works:

Andreas Tzionis — Sun, 07 May 2023 23:24:48 +0000

1. Discovering nodes

BitTorrent node ip addresses (for a given torrent) are discovered from a DHT network, called Kademlia.

Kademlia assigns random ids to nodes similar to the data ids (ie. the torrent hash) so nodes know about torrents with ids close to their own.

Kademlia messages are sent over UDP and contain a payload and some metadata (type and length).

The "get_peers" message returns nodes that are closer to a given id (eg. torrent hash).

Script: https://github.com/liveduo/bittorrent-scripts/blob/main/1-connect-dht.js

*82 lines of code (depends on bencode npm package)

To get the nodes that own a given id (ie. torrent hash) "get_peers" messages are sent recursively to get nodes that closer and closer to the torrent.

Script: https://github.com/LiveDuo/bittorrent-scripts/blob/main/2-discover-nodes.js

*130 lines of code (depends on bencode npm package)

2. Connecting to a node

Initially (before 2008), BitTorrent needed trackers, centralised servers that contained the torrent metadata.

This metadata can be size, torrent files, piece hashes for checksums and others.

Now metadata can be downloaded from nodes in the DHT without centralised parties.

Bittorrent messages are sent over TCP and contain a payload and some metadata.

The "handshake", "interested" and "unchoke" messages establish a connection and interest for a torrent.

The "bitfield" message shows which pieces a node has and "piece" is used to transfer data.

To connect to a node we first send a "handshake" message.

We should receive "handshake" and "unchoke" messages if the node is ready for "piece" requests (ie. requests for data).

Script: https://github.com/LiveDuo/bittorrent-scripts/blob/main/3-connect-node.js

*69 lines of code (depends on bencode npm package)

2. Downloading data

Files are transferred in pieces from multiple nodes in parallel.

When all pieces are received the torrent files can be reconstructed.

Script: https://github.com/LiveDuo/bittorrent-scripts/blob/main/4-download-data.js

*165 lines of code (depends on bencode npm package)

More details on:
https://www.tzionis.com/bittorrent-protocol-in-25-minutes

How Bitcoin (really) works?

Andreas Tzionis — Tue, 20 Dec 2022 10:19:05 +0000

1. Discovering seed nodes

Bitcoin nodes discover other nodes from a few hardcoded DNS servers.

Script: https://github.com/liveduo/bitcoin-scripts/blob/main/1-discover-nodes.js*

*33 lines of code (no npm dependencies)

2. Connecting to a node

Bitcoin messages are sent over TCP and contain a payload and some metadata (type, length and checksum).

The first messages sent are "version" and "verack" messages are used to establish a connection. Then, "ping" / "pong" messages are sent periodically to signal the connection is still active.

Script: https://github.com/liveduo/bitcoin-scripts/blob/main/2-connect-node.js*

*90 lines of code (no npm dependencies)

3. Creating an address

Bitcoin addresses are derived from private keys (or seed phrases). Mainnet and testnet addresses have different formats (for most address types).

Script: https://github.com/liveduo/bitcoin-scripts/blob/main/3-create-address.js*

*67 lines of code (depends on bs58 and secp256k1 npm packages)

4. Creating a transaction

Transactions contain inputs and outputs. Inputs validate the owner of the transaction and outputs indicate where the coins should go.

Script: https://github.com/liveduo/bitcoin-scripts/blob/main/4-create-tx.js*

*65 lines of code (no npm dependencies)

5. Broadcasting a transaction

Node advertise block and tx hashes with "inv" messages. Interested nodes ask for the data with "getdata" messages and receive them as "tx" or "block" messages.

Script: https://github.com/liveduo/bitcoin-scripts/blob/main/5-broadcast-tx.js*

*163 lines of code (no npm dependencies)

What's next

Find more details on:
https://www.tzionis.com/bitcoin-protocol-in-45-minutes

PS: There are embedded Repl.it scripts that you can run right within the blog post so you don't have to setting up anything locally