... | @@ -20,3 +20,13 @@ These are only a few features, but they are vital to the functioning of the appl |
... | @@ -20,3 +20,13 @@ These are only a few features, but they are vital to the functioning of the appl |
|
|
|
|
|
## Front-End
|
|
## Front-End
|
|
|
|
|
|
|
|
The front-end of the application is mostly manipulating UI elements to access features in the back-end based on actions done by the user. For example, the front-end manipulates the application bar at the top of the webapp. Each item in the application bar is interacted with in some way, and then that manipulation executes an action which, more than likely, sends or receives data from one of the endpoints in the server's `routes.ts` file. If there is any work that needs to be done directly with the Apollon canvas itself, that will once again be in the [Apollon Library](https://gitlab.cs.ksu.edu/apollon/Apollon) repository.
|
|
|
|
|
|
|
|
**IMPORTANT IF YOU'RE WANTING TO WORK WITH THE APOLLON CANVAS**: Another important thing to know about when working with the front-end is the path that an action takes in Redux. This plays a large role in how the standalone works with the Apollon library that is embedded in the webapp. In the highest-end understanding, here is what happens:
|
|
|
|
1. User does an action. For example, the user moves an element to a different part of the screen.
|
|
|
|
2. The application then executes the code that is associated with that action. This code is then executed until completion.
|
|
|
|
3. The action is stopped.
|
|
|
|
|
|
|
|
In actual implementation, this will be far more complicated. This will be explored in a different section dedicated to understanding how remote-storage works. For now, here are the important features of the front-end:
|
|
|
|
- `packages/webapp/src-main/services` contains a majority of the actions implementation. This will be explored itself in another section, but that is the higher-level understanding of what it is.
|
|
|
|
- `packages/webapp/src-main/components` contains all the UI elements that are added for the standalone. This includes all modals, all application bar elements, etc. The Apollon editor itself is also here (our Apollon canvas). |
|
|
|
\ No newline at end of file |