Skip to content
This repository has been archived by the owner on Jan 31, 2024. It is now read-only.

Latest commit

 

History

History
52 lines (34 loc) · 4.31 KB

ARCHITECTURE.md

File metadata and controls

52 lines (34 loc) · 4.31 KB

Architecture

This document is meant to be a quick reference for developers looking to contribute towards this repo. This project is split into two main elements, the Frontend which uses Vue + Quasar and the backend which uses Rust + Tauri.

Frontend (Vue + Quasar) /src

The main entry point for Frontend developers starts with quasar.conf.js which configures the Quasar framework. Read the documentation for quasar at quasar.dev. All quasar related files are located in the /src folder.

In the config you can see init.ts registered under the boot array. init.ts Is where we place most initialization logic which needs to happen before Vue is initialized. The logic in this file registers third party Vue components and initializes global data structures that are shared among Vue components. For more information refer to the official documentation: Quasar Boot files.

The main entry point for the Vue app. This file is mostly just for holding the router-view but it's also a good place to place logic that will be run as soon as Vue is loaded.

Inside the router directory there is index.ts and routes.ts. Logic which needs to run during route changes can be added in index.ts. routes.ts is where routes are registered. Generally each registered route is a component inside the /pages directory. Read the Vue Router Documentation.

Main Layout is the frame that all pages are rendered inside of. This includes the top navigation bar and menu elements. If you wanted to add overlays or framing elements then you would place them here. You can also register multiple layouts in router/routes.ts if you want totally different layouts on different parts of the application. Read more about layout component.

All Vue component pages go here. Usually the name of the .vue file should be the same as the router name listed in router/routes.ts. The component template must start with the q-page element.

Page components often contain other components which are registered here. Check the introModal.vue page for a good example of this.

Contains utility functions for communicating with the native OS such as reading/writing files and device metadata.

Enables state sharing across components and pages. Check the Pinia Documentation for further details.

Wrapper logic around polkadotjs which handles communication with the Subspace client. There is wrapper function for getting information about blocks, peers and other data. This library has to be initialized async using a websocket connection and will hang if the connection is unable to establish.

Contains utility functions for handling the launch on boot functionality of the AutoLauncher class.

Backend (Rust + Tauri) /src-tauri

The backend of the app is handled by the Tauri Framework and written in Rust.

The Tauri framework is configured here (no features enabled). For details about configuration refer to the config documentation.

The Tauri framework is configured here (opencl feature enabled). For details about configuration refer to the config documentation.

Platform icons are stored here. The icons can be automatically generated using yarn tauri icon as documented here.

Main rust files are stored here. main.rs is the main entry point for the application and contains custom backend logic. The Rust Tauri API is documented here.