FRONTEND PROOF OF CONCEPT

[prodb]

The goal of this spike is to examine how long it will take to implement the frontend for this project. Following outcomes are to be expected:

• proof of concept of the frontend implementation (ReactJS)
• effort estimation for full implementation and recommendation of next steps

[hafizh]

In the current state of the application, the server is rendering the UI elements before serving it to the browser.

First, we need to decide if this is a good approach. I would argue that it is more beneficial to separate rendering of UI from business logic and provide the dynamic content through RESTful APIs (preferably in JSON format). This kind of server - client architecture is abbreviated as JAM (JavaScript, API, Markup). The aim is to reach better user experience and performance by pre-building as much of the UI as possible and serve it as a static assets (with CDN). The dynamic content then is served via Backend API. This approach results in a faster user experience and simpler / cleaner developer experience.

Once we decide to separate UI from backend api, we need to choose one of many frontend frameworks and libraries.
Some of the well known options that are not in decline are ReactJS and VueJS. Among these two options Vue is something that has been used in PACE 2 version and seems to be generally easier to learn, faster to develop with compared to React. The scalability and composability of React is not really a necessity in our small project.

Both of the above are quite high up in [The State of the JS survey from 2021] and [StackOverflow Dev Survey of 2022]. However, a newer library called Svelta seems quite appealing in terms of satisfaction and interest. One of main differences is that it is compiled into vanilla JS at build time and removes the Virtual DOM (that enables react and vue to update only the elements that change). It is way smaller in size and allows to write UI elements with more concise syntax.

Since we're experimenting and learning new frameworks, it might be interesting to try it instead of VueJS. One disadvantage is that it has a smaller community, which might make it difficult to find answers when stuck. There are also other libraries/frameworks worth mentioning (e.g. lit, solid) but ultimately for our use cases I think either would do a good job.

Some of requirements to also consider are accessibility and localization, all of the above mentioned options have support for both of these requirements.

Verdict
If we feel more adventurous, and want to try an emerging technology Svelte is a good choice. Otherwise VueJS would do the job.

Links:

• What is Jamstack
• The State of the JS surver from 2021
• StackOverflow Dev Survey of 2022
• VueJS Accessibility
• Svelte Accessibility