Implementation - Pick a frontend UI framework

[sbland]

We need to pick an appropriate Frontend UI framework

Framework Options:

• React
• React + Next(SSR)
• Vue
• Svelte
• Angular

NOTE: I've opened this as a bit of a placeholder for implementation requirements.

If you intend to contribute to the frontend development please vote for a framework by commenting below and include a reason if not already defined. Feel free to suggest something not mentioned above.

[AdrianDAlessandro]

@sbland Following on from today's meeting:

Can you look into what front-end options might work well with Django? In the past I've only used non-javascript options:

• HTMX alongside Hyperscript for dynamically updating components without the need for page re-loading or JS frameworks.
• django-plotly-dash for dashboards and visualisations using Plotly-Dash. Although this Django plugin is inconsistently maintained.

[sbland]

@AdrianDAlessandro I think I can probably work with the templates and there are some solutions for using React within relying on a Rest API if needed.

From a general developing point I could do with some solutions to the following if anyone has some good library suggestions:

• A way of previewing templates with different context values. Similar to https://storybook.js.org/
• Any nice ways of creating common components without React. Perhaps this is just in using the classes but I'd be interested to know of any alternatives.

I've setup a Miro here to start sketching the UI requirements: https://miro.com/app/board/uXjVLA_OTE0=/?share_link_id=723817271690

[AdrianDAlessandro]

@sbland That Miro looks great! Thanks for starting that.

I'm not aware of a tool for building components like Storybook. I guess Django isn't really meant for customising the components, or the front-end elements in general. The advantage of the html templates is having tight integration with the backend and not needing to use something like a REST API just for your front-end to talk to your back-end.

I'm not 100% what you mean by common components. If you mean re-usable sections that can be used in different pages, I think the best (i.e. most "Django-ey") approach is making minimal templates that can be used inside other templates. If you mean really minimal components (buttons, dropdown, etc) then out-of-the-box solutions are best to start with and if we need more complicated stuff we can add it later.

That being said, I've done some googling, and here are a bunch of links for different tech options. This Reddit thread has a lot of useful stuff.

Components:

• Bootstrap - easy to add with django-bootstrap5
• Shoelace - not sure how to integrate with Django
• django-components - for creating re-usable components (doesn't seem fully mature)
• #slippers components - for creating re-usable components (seems quite good and more mature)

Adding reactivity:

• A guide for using HTMX with Django - a few years old but quite detailed and gives a feel for it.
• A guide for using Modern JS with Django - this seems quite comprehensive, though I haven't gone through it in detail.
• django-webpack-loader - saw some discussions on being able to load a VueJS app with this. Not sure how it works.

Tagging @davehorsfall for visibility

[davehorsfall]

Hi @sbland, thanks for creating this issue, and creating the Miro board, which is looking great.

You'll see in the rse-competencies-toolkit-webapp, that I've created a new PR with the purpose of introducing a Bootstrap 5 template, and also the framework for managing frontend assets through NPM. We can manage javascript packages, compile vendor assets, compile scss and other javascript activities as required. This will allow us to add any javascript packages we want to use, but still directly interface with the Django models through the HTML templates.

Please take look if you're able, and let me know your thoughts. We will be meeting on Thursday at 3pm to discuss in more detail, if you want to join.