We built an assessment platform for the W3C Web Sustainability Guidelines. These guidelines come in the form of a large questionnaire asking about best practices for sustainable web applications. We added a grading system that awards grades for each chapter of the guidelines. Each question is worth points. The more impact the question has, the more points it awards. From on the achieved percentage of the maximum attainable points, we grade the project sustainability from A (best) to G (worst).

We are currently experimenting with the W3C sustainability assessment internally and will write more about that topic once we are ready to help you with the assessment. This post focuses on the technology we used to build the assessment application. The application is not limited to the W3C guidelines but could be used for other assessment questionnaires as well.

We used the Hotwire toolset to build a highly interactive web application without needing a massive Javascript application running in the browser. Instead, all business logic runs on the server side. To still provide a fast user experience without full page reloads, changes are sent as fragments to the browser. We used the Symfony framework to build the backend, as Symfony is well integrated with Hotwire.

Demonstration

Let's see how this looks in practice. Each assessment chapter has statistics that show how much has been answered already. At the beginning, nothing is answered, so lets answer the first couple of questions:

When answering a question, the points for the question and the topic are updated, as well as the grade for the chapter and the statistics on fulfilled topics and answered questions.

Notice how the grade, points, topic and question count are updated as we answer questions. We wrote the Javascript code to autosave the answer immediately. The updated grade and statistics are then pushed by the backend and no Javascript is needed for those.

Thanks to autosave and the Hotwire pushes, the value immediately updates when a new grade is achieved. This immediate feedback is motivating for the user to continue working on the questionnaire:

When the grade changes because an answer awarded enough points to cross a threshold, the grade is immediately updated on the web page.

With the push system in place, it was trivial to add simultaneous editing to the application. In addition to pushing the grade and statistics, we also push the given answer to all other clients that have the same chapter open. Several people can now work on the same assessment and immediately see updates from everybody else:

We simulate 3 concurrent users working on the questionnaire. The user of the top-right window clicks on the answer button, and immediately the answer, grade and statistics are updated in all other browsers as well. Two of the windows are Firefox, one is Chrome - Hotwire works on all browsers.

While we did not design the assessment platform to work on mobile phones, Hotwire also supports the browsers of mobile phones.

Conclusions

The architecture promoted by Hotwire is to keep business logic and rendering in the backend, and stream changes to the frontend to keep the smooth feeling of single-page apps. Besides Hotwire, there is also the HTMX library for the same purpose. This architecture has several advantages over the classical approach with a heavy frontend application:

  • Consistent Logic: All business logic is concentrated in the backend, and has easy access to all data it needs.
  • Security: Anything done in the browser may not be trusted by the backend, as a malicious actor could manipulate the requests. WIth hotwire, there is no business logic in the frontend, and thus no overhead nor risk of mistakes with missing validation.
  • Less development overhead: Frontend applications lead to duplicating business logic between the backend and frontend. With hotwire, we avoid this problem by keeping the business logic out of the frontend.
  • Less technologies: For a heavy frontend, the team needs experts in the chosen framework (react, vue, etc). With hotwire, the team needs no frontend Javascript experts.

We plan to continue working on the assessment application and will share an update about its functionality. And we expect to implement more applications with the Hotwire toolstack. It is a powerful technology able to significantly simplify the implementation of responsive web-applications.