search

Laughing-Man-Studios / Ski-Resort-Dashboard

A small dashboard to display some statistics about the local ski resorts I visit
MIT License
0 stars 0 forks source link

Research and Document Front-End Architecture #41

Open Rogibb111 opened 2 years ago

Rogibb111 commented 2 years ago

I need to come up with a base design for how the front-end architecture is going to work and document it in the wiki. Things I should touch upon are:

Rogibb111 commented 2 years ago

Server-Side vs. SPA

Planning on using Lit to implement JavaScript functionality and containerize it into manageable and reusable pieces. Since the application is small, I was thinking of using server-side rendering and sprinkling in a couple of Lit components to page for functionality. One of the things I wasn't sure of is whether or not the Tablet and Mobile navigation could work without JavaScript functionality. From the small amount of research I have done, it doesn't look like it is possible. This means I will probably have to make the Nav Bar a lit component with simple onClick functionality.

Update - 1/18/2023 I have decided to go with server-side rendering as the way to go. I am using the CDN approach to pull in the libraries I need in the front end. This decision was made because the Scala/SBT ecosystem doesn't have a good way of compiling front-end resources in the project itself, and there won't be enough front-end code to warrant a full separate project with its own repository and CI/CD pipelines.

Rogibb111 commented 1 year ago

Libraries Used

Thinking about this a little further, I'm not sure any kind of graphing component exists yet in the Lit ecosystem. I will have to check again but making one to use with this project might be a good way to practice making a re-usable library instead of just applications. After making this generic component, I could host it as a package on GitHub and then pull it in using SBT.

Update - 1/18/2023 Decided to go with a CDN approach for my main front-end architecture. I am using the Lit Framework and directly pulling in the Lit CDN file using ES6 imports. I would still like to make a re-usable library for my graphing component, but how to pull it into my project will be a little more difficult since I don't have a JavaScript build environment in my build pipeline. My too thoughts are: