A web application completely in Rust

The default Config.toml for the webapp

The Frontend — Client Side

  • asmjs-unknown-emscripten — using asm.js via Emscripten
  • wasm32-unknown-emscripten — using WebAssembly via Emscripten
  • wasm32-unknown-unknown — using WebAssembly with Rust’s native WebAssembly backend
  • RootComponent: Directly mounted on the `<body>` tag of the website and decides which child component should be loaded next. If a JWT is found on initial entering of the page, it tries to renew the token with a backend communication. If this fails, it routes to the LoginComponent.
  • LoginComponent: A child of the RootComponent and contains the login form field. It also communicates with the backend for a basic username and password authentication and saves the JWT within a cookie on successful authentication. Routes to the ContentComponent on successful authentication.
The LoginComponent
  • ContentComponent: Another child of the RootComponent and contains the main page content (for now only a header and logout button). It can be reached via the RootComponent (if a valid session token is already available) or via the LoginComponent (on successful authentication). This component communicates with the backend when the user pushed the logout button.
The ContentComponent
  • RouterComponent: Holds all possible routes between the components which hold content. Also contains an initial “loading” state and an “error” state of the application. Is directly attached to the RootComponent.
The `Renderable` implementation for the LoginComponent
Cap’n Proto protocol definition for the application
UIkit — A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Frontend testing

The Backend — Server Side

  • `/ws`: The main websocket communication resource
  • `/`: The main application handler which routes to the statically deployed frontend application
UpdateSession Handler for actix-web powered by Diesel.rs

Backend testing

The Deployment

Summary

So, are we web yet (in production)?

Thank you very much for reading until here. ❤

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Refactoring Javascript Logic to Use a Functional Approach

React Tutorials — The Basics

Building A Vanilla JavaScript Todo App From Start To Finish | EP 2: Adding UI Elements

Eliminating callback hell in node.js with callbacks

Lions and Tigers and Objects, Oh My!

Share Your Search Results with Your Neighbours

How to generate HTML Dashboard Reports in JMeter from the command line

Linked Lists

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sascha Grunert

Sascha Grunert

More from Medium

How Node.js performance depends on available CPU count

How to auto-generate advanced forms using Formly

Optimizing Static HTML And Images With Webpack

How to build a REST API with TypeScript using Deno, Opine and DenoDb