Kanban board built with Rust and Elm
Switch branches/tags
Nothing to show
Clone or download
Latest commit 196dda3 May 10, 2018
Permalink
Failed to load latest commit information.
src Use spaces, no tabs Apr 29, 2018
www Initial commit Apr 29, 2018
.gitignore Initial commit Apr 29, 2018
Cargo.lock Initial commit Apr 29, 2018
Cargo.toml Initial commit Apr 29, 2018
LICENSE Create LICENSE May 6, 2018
README.md Update README.md May 9, 2018
dark-theme.png Initial commit Apr 29, 2018
light-theme.png Initial commit Apr 29, 2018
monitor.png Initial commit Apr 29, 2018

README.md

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.