Frameworks & Dependencies

The following is a brief overview of the frontend frameworks and dependencies used.

Bootstrap

If you’re not using a CSS framework, you’re probably doing it wrong.
The frontend is using the latest version of Bootstrap (5.3) for styling and functionality.
Within the code documentation, the purpose and use of any Bootstrap components are noted.
Bootstrap utility classes are also used throughout the frontend.
See the Bootstrap Docs for more information.

All custom styles that cannot be achieved within Bootstrap are defined in src/assets/main.css.

Yew

The frontend is written in Yew, a Rust framework for building web apps.
Yew is a component based framework, similar to React, Vue, and Angular.
There are two types of components in Yew: functional components and struct components.
The frontend uses functional components, which are defined as functions that return a Html type using the html! macro.
You will find many examples online using both. However, functional components are the preferred method of writing components in Yew.

Dependencies

• Yew
  A modern Rust framework for creating multithreaded front-end web apps using WebAssembly

• Bootstrap
  The world’s most popular front-end open source toolkit, featuring a responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

• Yewdux
  Simple state management for Yew applications.
  See the book for more details.

• Yew Router
  Provides routing faculties using the browser history API to build Single Page Applications (SPAs) using Yew web framework.

• Stylist
  Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.
  It provides a convenient way to scope your styles to a component.

• Gloo
  Gloo is a modular toolkit for building fast and reliable libraries and apps with Rust and WebAssembly.
  This provides a way to interact with the browser’s Web APIs from within Rust, such as logging to the console.

• Yew-OAuth2
  Yew components to implement OAuth2 and OpenID Connect logins.

• serde
  Serde is a framework for serializing and deserializing Rust data structures efficiently and generically.

• serde_json
  Serde JSON is a serde-based JSON library for Rust.

• wasm-bindgen-futures
  This crate provides a bridge for working with JavaScript Promise types as a Rust Future, and similarly contains utilities to turn a rust Future into a JavaScript Promise. This can be useful when working with asynchronous or otherwise blocking work in Rust (wasm), and provides the ability to interoperate with JavaScript events and JavaScript I/O primitives.

• reqwasm
  HTTP requests library for WASM apps. It provides idiomatic Rust bindings for the web_sys fetch and WebSocket API.

• chrono
  A crate for dealing with dates and times in Rust.
  Compatible with serde and serde_json for serialization and deserialization.