Home

Awesome

Desktop Kanban Board

Look ma, no Electron!

What is this?

This is a web-based Kanban board application, built with Elm and Rust.

The only different from this application and hundred thousands of web-based application out there is: We don't need Electron!.

Instead, it use native WebView (WebKit for Linux/macOS, and MSHTML on Windows), more details see here.

The whole source code in this repository is just a desktop client, which you can actually use for any web-based application.

Note: I maintain my own version of zserge/webview and Boscop/web-view, because I want to add some customized titlebar on macOS, and my code is ugly enough to create a PR on these repos.

Instruction

Step 1: Build the web application

Skip this if you're using an online hosted application from an URL, or building your own app.

Clone the Kanelm application source code from here https://github.com/huytd/kanelm

Follow the instruction in that repo to config your jsonbin.io config, then install the dependencies and build it:

yarn install
elm-package install
yarn build

What you will get is a dist folder, and you only need the dist.js file, copy it to www folder of this repo.

└── www
    └── dist.js

Step 2: Build the desktop application

You gonna need cargo bundle.

Install it, then run:

cargo bundle --release

Now you got it.

Wait, what happened?

Well, the Elm application will be compiled into a single dist.js file, the content of this JavaScript file will be inlined into our Rust source code:

src/main.rs

let html = format!(r#"
    <html>
        <head>
        <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> 
        <style>{css}</style>
        </head>
        <body>
        <script>{js}</script>
        </body>
    </html>
    "#,
    css = r#"body { background: #1d1f21; }"#,
    js = include_str!("../www/dist.js"));

The Rust application will then create a new window, contains a webview, load this HTML content into that webview, and that's it.

But Electron did the same thing?

Yeh, but sometimes, all you need is just a webview to display your web application on a desktop. You don't need file system access or automatic update, blah blah, it would be a huge waste to ship your app with >100MB of Chromium and V8 in it.

In fact, this application only uses 0-3% CPU and the bundle size is >800KB on macOS.