Choosing a framework for tdp-ui

[PaulFarault]

We need to select a framework to start building tdp-ui (the TDP interface). Here are my thoughts.

Scope

The tdp-ui objective is to create a graphical interface to tdp-server, with the following scope:

• Configuration management (tdp-vars)
• Deployment (tdp-deploy)
• Display deployment status (green / yellow / red indicators)

The link between tdp-client and tdp-server is made via a REST API. No state management (except from fetched data) is needed at first.

tdp-ui provides basic status monitoring, that users can complete using Grafana. Further status and monitoring features could be considered in later versions / discussion.

Overall, tdp-ui will be similar to Ambari.

Criteria for choosing the main framework

• Open source and reliable
  • Open source / free
  • Large and active community
  • Supports
  • Maturity
• Facilitate community contributions
  • Short learning curve
  • Popularity / number of users
  • Documented best practices
• Adapted technology
  • Team knowledge of the technology
  • Ease of updates
  • Packaging without Node.js server / deployable on nginx without loss of functionality
  • Features that meet our needs

Suggestion

IMHO, the ideal choice would be Next.js, an open-source framework backed by Vercel and based on React (backed by Facebook). Both of these tools are among the most reliable and popular today for developing a web application.

The main argument for using Next.js is the React popularity, which would facilitate possible contributions to tdp-ui.

Next.js has both a rich ecosystem thanks to React but also interesting features such as next export (which allows you to export an app without having to run a node.js server). Moreover, Next.js version 13 should bring Remix functionalities into Next.js, which would perfectly fulfill the needs of tdp-ui (layout rfc).

[rpignolet]

I'm ok with Next.js but with one condition: we should only use feature supported by static html export (next export). Already mentioned but I explain why.

We want to build an UI over the REST API of tdp-server, we should not impose another server, all the UI feature should run in the browser and perform request to the API given by tdp-server. If, with Next.js, we can have both deployment, static and with a Node.js server for increase performance (server side rendering for example) it is good but both deployment should have all features.

It is important to have that in mind because we should not use unsupported features for static export from the start.

[leopaul36]

I agree that Next.js looks like the best candidate. My only question is what features do Next provide on top of vanilla React that we will need?

[PaulFarault]

The main no-go with vanilla React (through CRA) is the rooting system. It is totally abstracted by Next.js thanks to its file-system based router.

However, in its current version (12.3), Next.js doesn't bring much more functionality for our usecase. It only simplifies certain parts. The features we are looking for are those of Next.js 13, which allow to easily create SPA-like apps.

The main argument for using Next.js is that it will be easier/faster to migrate a project from Next.js 12 to Next.js 13 than to implement a router with CRA and then migrate to Netx.js 13.

[jusstol]

Hi, I know very little in web development and I don't want to shake things around, but do you guys think htmx could suits TDPs needs ? htmx is fairly young and does not have a big community yet, and it is often out of the question to not use JavaScript, but I think it could be interesting to mention it.

It is HTML with extra features, really easy to install (just a script import), dependency free, and very light (~10kB). Even some SaaS products already transited to htmx.

• htmx intro : https://htmx.org/docs/#introduction
• htmx examples : https://htmx.org/examples/
• good reading on replacing js (or in other words : sticking with html) : https://htmx.org/essays/spa-alternative/

Again, I'm not a web developer! Sorry if this is totally out of context or too late, just wanted to share it and have your thoughts on this.

[PaulFarault]

I didn't know HTMX. Thanks for sharing, this project seems interesting!

One of the main arguments for using Next.js, compared to Vue.js for example, is its popularity. HTMX doesn't seem to have much traction at the moment to be considered for tdp-ui.

• npm weekly downloads: HTMX 15k / Next.js 3.3m / Vue.js 3.5m
• GitHub stars: HTMX 8k / Next.js 93k / Vue.js 200k
• npm-trends, even though if it's not that reliable as HTMX can be imported through a CDN.

[gboutry]

HTMX is now 25K stars on github: https://github.com/bigskysoftware/htmx

[wdavidw]

While HTMX is a very popular project with excellent feedback on HackerNews over the past few years, I wouldn't recommand it for a complex client application like tdp-ui. I will be pleased to be proven wrong, maybe by myself, but this won't happen before a few years which makes React/Next.js a good and safe choice.