Application architecture on Electron.js, how best to implement?

Question

JavaScript

I decided to figure out how to create a desktop application using Electron. For the first test application, I chose the theme of school-studio management. The application will have to include the following components:
- Schedule - reflects the schedule for the specified period, crud to work with it.
- Services - reflects all services and has crud.
- Clients - displays all clients and has crud
- Teachers - displays all teachers and has crud
- Subscriptions - displays all subscriptions and has crud.
Based on what the application is supposed to consist of, I created the application following the instructions from the electron website.
In index.html, I created two elements in the markup, these are nav and main. In nav, I created links to expected components by clicking on which, we take the href value and, based on it, create the path to the file with the component markup and write to the main tag (with this approach, each click overwrites everything in main). Everything seems to be ok, but what about the initialization of scripts for the loaded markup? After all, initially the markup does not have data, and here I intervene.
How can I organize the loading of the companions and filling them with data, and initialize all the scripts accompanying it so that the user can interact with it and she react to his actions?

Answer 1

The easiest way is to take any framework where all this has already been answered and the service code has been written before you. React, angular, vue. Or at least look at the principle - how applications are built on their basis.
But if you want to do everything yourself, then study the architecture of the application in principle. How to work with data, how to draw and update the interface, how to organize the code, how to solve a bunch of emerging technical and other issues. For a couple of years, entertainment will be enough to a more or less normal result.
Electron or not does not matter here.