DEV Community: Vincent Chan

Which programming languages run faster in the browser?

Vincent Chan — Sun, 21 Jul 2024 07:21:50 +0000

Nowadays, we often hear about fancy languages and technologies that claim to have amazing performance. With WASM, we have C++ and Rust, both are performance killers on the native machine.

However, it’s hard to know how much we can actually gain from them. On the other hand, it takes a lot of time to learn or to switch to them. So, it’s important to compare the costs and benefits.

We need a standard benchmark to measure performance between languages. This is what I will do in this article. We will choose some basic but common scenarios to test and compare the results.

Last but not least, no benchmark can 100% reflect the actual scenarios you will encounter. If you have a very sensitive performance scenario, I suggest you write your own benchmark. But for most common scenarios, I hope this article will help.

Playground

We provide a playground where you can run benchmarks on your favorite browsers and OS. The results may vary slightly depending on the environment. If the differences in the timing of different languages in the same test are not large, then we can regard it as the same.

And you can find all the source code here.

Basic language tests

We borrowed some tests from the debian’s benchmark games. It provides some basic tests that can measure the languages. The data structures used in the tests are very similar to those we commonly encounter, so I think this is a test worth referencing.

One thing to notice is that we run each test in a single thread. However, each test is run in a worker. We want to know the performance of each language in a single thread.

BinaryTrees

You can check the detail of this test here. Now we got the result(less is better):

If we run the test for the first time, we can see that Rust in Wasm got the best score. But if we run again, we’ll find that JavaScript got the best score.

Don’t be surprised if you run the tests multiple times; the V8 engine usually gets better when it runs the second time (it will optimize the code based on the runtime info). And you will find that the result is unstable. The truth is, these three languages don’t have a large gap in performance. Actually, I don’t think C++ and Rust have any advantage in this competition.

FanncukRedux

You can check the detail of this test here.

This test has a relatively stable result. JavaScript is the best. We get the same result in multiple tests.

Practical tests

How a language behaves in production depends not only on the language engine itself but also on the ecosystem. The underlying libraries your app uses will determine its performance. In this group, we chose some popular low-level libraries on their platform to test.

Deflate compress

We use the deflate algorithm to compress Hamlet in this test. Deflate is the default algorithm we use for the zip format.

zip for C++
deflate for Rust

One thing to notice is that in the JS part, we use the CompressionStream from the browser. That doesn't reflect the performance of the JavaScript engine itself. But in the browser environment, it's the best we have.

From the results, we can see the browser's built-in API has a significant advantage over WASM. C++ has a slight advantage over Rust, but not a large one.

Font parsing

In this test, we choose three libraries from three languages to parse a font format and measure the horizontal advance of a very long text.

Opentype.js for JavaScript
FreeType for C++
ttf_parser for Rust

In the results, we can see Rust has a significant advantage. We can see ttf-parser is literally designed for performance.

Conclusion

In conclusion, this benchmark study provides a comprehensive comparison of various programming languages running in the browser. Although some languages have slight advantages, the performance differences are often not substantial. Some languages, like Rust with its font parser, excel in specific areas. If you need that specific advantage, go for it. But most of the time, JavaScript is sufficient.

A NoSQL embedded database for you Rust app

Vincent Chan — Wed, 24 May 2023 12:46:45 +0000

For a long time, SQLite has been the only choice for local embedded database. It’s stable and powerful. However. However, times are changing and demands are evolving rapidly. For rapid iteration of program functions, I believe that many apps need a scheme-less database. There are not many options for NoSQL local databases. If you are looking for one that, I suggest PoloDB.

Github: https://github.com/PoloDB/PoloDB

Get started

PoloDB is an embedded database written in Rust. If you are developing an app in Rust, PoloDB would be a perfect fit for you. This is because Rust's API has been designed with compatibility with MongoDB in mind, making PoloDB essentially compatible with MongoDB.

Let's look at the example:

use polodb_core::Database;
use serde::{Serialize, Deserialize};

#[derive(Debug, Serialize, Deserialize)]
struct Book {
    title: String,
    author: String,
}

let db = Database::open_file(db_path)?;
let collection = db.collection::<Book>("books");
collection.insert_one(Book {
    title: "The Three-Body Problem".to_string(),
    author: "Liu Cixin".to_string(),
})?;

In the above example, the Book structure is serialized into BSON format and persisted on the disk. Since PoloDB is schema-less, it's not required to create a table for it in SQLite. It's free to insert any form of data.

For example, you can insert a document structure directly:

let typed_collection = db.collection::<Document>("books");

let docs = vec![
    doc! { "title": "1984", "author": "George Orwell" },
    doc! { "title": "Animal Farm", "author": "George Orwell" },
    doc! { "title": "The Great Gatsby", "author": "F. Scott Fitzgerald" },
];

// Insert some documents into the "mydb.books" collection.
typed_collection.insert_many(docs, None)?;

Every row has its own identifier, which is called a primary key in traditional databases. PoloDB uses the _id field of the document as the primary key. If you don't specify one, PoloDB will create one for you.

collection.insert_one(doc! {
    "_id": "Orange",
    "price": 300,
})?;

Remember, primary must be unique in the collection.

Query

Querying in PoloDB is also very straightforward. You can query the collection by the field of the data:

// find all
let result = collection
            .find(doc! {
                "author": "Liu Cixin"
            })?
            .collect::<Result<Vec<Document>>>()?;

// only find the first one
let result = collection.find_one(doc! {
      "author": "Liu Cixin"
})?;

You can even query the field in the embedded document:

collection.insert_one(doc! {
    "name": "Banana",
    "price": 200,
    "info": {
        "description": "This is a banana",
        "color": "yellow",
    }
})?;

collection.insert_one(doc! {
    "name": "Orange",
    "price": 300,
    "info": {
        "description": "This is an orange",
        "color": "orange",
    }
})?;

// query a fruit with color yellow
let result = collection.find(doc! {
    "info.color": "yellow",
})?.collect::<Result<Vec<Document>>>()?;

If you need more complex queries, you can refer to this documentation.

Update

It's easy to update one or many rows of data in PoloDB. To update rows, you need to provide the conditions for which rows to update and specify how to update them.

let collection = db.collection::<Document>("config");

collection.update_many(doc! {
    "_id": "Orange"
}, doc! {
    "$set": doc! {
        "price": 500,
    },
})?;

If you want to update only one row in the collection, use the update_one method.

collection.update_one(doc! {
    "_id": "Orange"
}, doc! {
    "$set": doc! {
        "price": 500,
    },
})?;

There are many ways to update a row in MongoDB. In addition to the $set directive, you can use $inc to increase the value of a field:

collection.update_one(doc! {
    "_id": "Orange"
}, doc! {
    "$inc": doc! {
        "price": 1,
    },
})?;

You can find more directives for updating at https://www.polodb.org/docs/curd/update.

Delete

PoloDB provides delete_one and delete_many methods to delete one or many rows in a database. Just provide the correct filter parameter to select the rows you want to delete:

let deleted_result = collection.delete_many(doc!{
    "_id": key,
})?;

The method returns the number of rows that were deleted from the result.

Conclusion

PoloDB is a simple yet powerful database system that is still under development. It needs your input to improve. This article demonstrates its basic functions, but there are also many advanced features such as sessions and transactions. If you are interested, you can read the documentation and give it a try. I believe PoloDB would be helpful for your app.

Implement MacOS Monterey screen saver in shadertoy(less than 100 lines of code)

Vincent Chan — Tue, 27 Dec 2022 15:55:37 +0000

This post demonstrates how to write a shader to simulate the screen saver of macOS Monterey.

All codes of this tutorial are uploaded to shadertoy. You can try the shader online: https://www.shadertoy.com/view/7tGfWm
Before we start, I want you to have some basic concepts about GLSL. If you do, it may be easier to understand the code. And you can safely skip the code. I'll make the principle clear.

Draw a wave

The image is composited with multiple waves. Let's draw a wave in a shader. Lets create a new project in Shadertoy.

The shader we are going to write is called “fragment shader”. It’s a program to evaluate the color of every image pixel. The first parameter fragCoord indicates the coordinates of the pixel to evaluate. Because the coordinates of the pixel depend on the device, we need to normalize the coordinate from 0 to 1 first.

This procedure is done by one line of code:

// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;

If we want to draw a wave, we should find a function to represent the wave. Of course, we use trigonometric functions. We use sine here.

vec3 sin_shape(in vec2 uv, in float offset_y) {
  // Time varying pixel color
  float y = sin((uv.x * 3.14 * 2.0));

  float y0 = step(0.0, y - uv.y * 2.0 + offset_y);
  return vec3(y0, y0, y0);
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    vec3 col = sin_shape(uv, 1.0);

    // Output to screen
    fragColor = vec4(col,1.0);
}

Add some noise

The waves we drew are dull. We need to make them more fun. So I decided to add some "noise" to it.


vec3 noised_sin_shape(in vec2 uv, in float offset_y) {
  // Time varying pixel color
  float y = sin(uv.x * 3.14 * 4.0 + iTime * -0.6);

  float x = uv.x * 8.;
  float a=1.;
    for (int i=0; i<5; i++) {
        x*=0.53562;
        x+=6.56248;
        y+=sin(x)*a;        
        a*=.5;
    }

  float y0 = step(0.0, y - uv.y * 4.0 + offset_y);
  return vec3(y0, y0, y0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    vec3 col = noised_sin_shape(uv, 1.0);

    // Output to screen
    fragColor = vec4(col,1.0);
}

Composition

In the final image, we got three waves painted in different colors. We should find a way to composite three waves(even more). Currently, we can know if a pixel is in the region of a wave by the result of the sine function. Things got complicated when we got three waves. We need to write a lot of if/else statements to determine the colors. And this method doesn't scale. We need a mathematical way to solve this problem.

Math is an abstract tool of reality. Imagine if you want to draw this picture with brushes and paints. How will you paint?

When we draw an image with brushes and paints, we draw the layers one by one. So how about using the thickness of the paints to determine the waves?

The value of the grayscale is like to represent "the thickness of the paints". And we can use the grayscale to determine which color to show.

vec3 sin_shape(in vec2 uv, in float offset_y) {
  // Time varying pixel color
  float y = sin((uv.x + iTime * -0.06 + offset_y) * 5.5);

  float x = uv.x * 8.;
  float a=1.;
    for (int i=0; i<5; i++) {
        x*=0.53562;
        x+=6.56248;
        y+=sin(x)*a;        
        a*=.5;
    }

  float y0 = step(0.0, y * 0.08 - uv.y + offset_y);
  return vec3(y0, y0, y0);
}

vec2 rotate(vec2 coord, float alpha) {
  float cosA = cos(alpha);
  float sinA = sin(alpha);
  return vec2(coord.x * cosA - coord.y * sinA, coord.x * sinA + coord.y * cosA);
}

vec3 scene(in vec2 uv) {
    vec3 col = vec3(0.0, 0.0, 0.0);
    col += sin_shape(uv, 0.3) * 0.2;
    col += sin_shape(uv, 0.7) * 0.2;
    col += sin_shape(uv, 1.1) * 0.2;

    vec3 fragColor;

    if (col.x >= 0.6 ) {
      fragColor = vec3(0.27, 0.11, 0.64);
    } else if (col.x >= 0.4) {
      fragColor = vec3(0.55, 0.19, 0.69);
    } else if (col.x >= 0.2) {
      fragColor = vec3(0.68, 0.23, 0.65);
    } else {
      fragColor = vec3(0.86, 0.57, 0.68);
    }
    return fragColor;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    fragCoord = rotate(fragCoord + vec2(0.0, -300.0), 0.5);
    // Normalized pixel coordinates (from 0 to 1)
    vec3 col0 = scene((fragCoord * 2.0)/iResolution.xy);
    vec3 col1 = scene(((fragCoord * 2.0) + vec2(1.0, 0.0))/iResolution.xy);
    vec3 col2 = scene(((fragCoord * 2.0) + vec2(1.0, 1.0))/iResolution.xy);
    vec3 col3 = scene(((fragCoord * 2.0) + vec2(0.0, 1.0))/iResolution.xy);

    // Output to screen
    fragColor = vec4((col0 + col1 + col2 + col2) / 4.0,1.0);
}

Adjust the view

Now, we are very close to the final image. We need to adjust the view and the parameters to make it closer.

vec2 rotate(vec2 coord, float alpha) {
  float cosA = cos(alpha);
  float sinA = sin(alpha);
  return vec2(coord.x * cosA - coord.y * sinA, coord.x * sinA + coord.y * cosA);
}

After rotating the camera, it's very close now. But it looks very dull, and it can't express the beautiful view of the Monterey. I guess we miss some details. I think it's the gradient of colors. So I add a filter to it and it's better now.

We got the final image of this tutorial probably. But it needs to be better. The curve of the wave is not smooth enough. We have yet to finish a procedure every gamer knows: anti-aliasing.

Anti-aliasing

There are a lot of ways to implement anti-aliasing. We use a straightforward method there: supersampling. There are still a lot of patterns of supersampling. We use the simplest one: mix four pixels into one.

Imagine we draw a 4x bigger size image of the screen. And we mix 4 pixels into one. Then we got a smooth curve.

Animation

If we want to generate the animation of the waves, we can use the time as the parameter of the sine function to make the wave move. In shadertoy, the time is passed by a global variable called iTime.

Conclusion

Finally, we use less than 100 lines of code to implement this. There are some math concepts, but it's pretty easy. But it's funny and beautiful. There's still a gap between this toy and the official Apple screen saver because we don't have a 3D model. Alternatively, we use 2D shapes to implement. It's simple and fun. That's the point.