Wage Calculator

Finance, WebAssembly, Rust, Yew, SPA, Serverless
Development Date:
2023-10-04 – 2023-10-06


This web application is a simple wage calculator - a tool to compare wage rates for common pay schedules. It’s written entirely in Rust, doesn’t have a complex server, and is hosted on a GitHub page.

Notable Features

  • The user interface is written with Yew (a Rust library).
  • The front-end is a WebAssembly powered rendition of the user-interface.
  • The back-end renders the same user-interface to HTML, which gets hydrated by the front-end.
  • Simple, light-weight UI styling through Pico.css.

Code Snippets

The majority of the user interface looks like the following:

// ...
    <label for="biweekly-rate">
        { "Bi-Weekly" }
            value={ format!("{:.2}", state_value.annual / (WEEKS_PER_YEAR / 2.0)) }
            onchange={ on_change_biweekly }
// ...

Where the state is a very simple Struct:

struct State {
    annual: f64,
    hourly: f64,
    hours: f64,

Most of the code just follows that simple tactic. The build process is a bit more interesting though. It uses λtext to splice the front-end code with the back-end code:


trunk build && \
    # First it creates a parameter on /docs/index.html
    { echo '{{ body }}'; cat docs/index.html; } > docs/index.html.tmp && \
    mv docs/index.html.tmp docs/index.html && \
    # then uses the parameter just after <body>
    sed -i '/<body>/a {{ body }}' docs/index.html && \
    # generates the front-end code
    cargo run --features hydration > docs/body.html && \
    # then inserts it, replacing the parameter to docs/index.html
    ltext 'docs/index.html docs/body.html' --raw docs/body.html > docs/index.html.tmp && \
    rm docs/body.html && \
    mv docs/index.html.tmp docs/index.html
    # all done

Though this was a very simple project and did not take me a great deal of time, it was still very interesting and I found it to be a great exercise.