How could I write a component provider with Live VIew for JavaScript frontends?

I am part of the PEA Pescarte, a socio-environmental mitigation project here in the state of RJ, which aims to integrate and empower autonomous fisher people in society. More information can be found at PEA Pescarte · GitHub.

I am part of the development of the project’s web platform, which besides a public part, also has an administrative part.

Today, the platform is developed with phoenix live view, but I find myself practically alone in the development part of the project. As a result, the rest of the project ends up having many other demands that I cannot meet in a timely manner.

With this, the DBA of our team, who is also a professor at UFScar, proposed to create extension projects for her students to complete hours and contribute to the platform. These extension projects do not have many hours, which makes these students prefer to use technologies they already have experience with (usually js)

Another issue is that for now we only have one server, a very simple one, that one of the universities here in town provides for deployment. This means that the complexity to orchestrate all these “services” + the platform would be quite large.

With this, the current idea is to centralize all the business rule and external integrations in the main project part and the other projects just consume the data from the source of truth.

But this generates another problem: every time a new client comes up (new demand), the design system and the components that are already implemented with live view end up needing to be reimplemented and duplicated in each project…

In the long term, I thought about building something like a BFF service that already makes these styled components available for any front end to use, and this is what I would like to discuss. Does this sound technically feasible? What could be my difficulties during this implementation? Are there other possibilities? Am I thinking too far ahead and is this a solution that I would be trying to reinvent the wheel?

Some other questions:

  • How could I manage styles? It is better to distribute like a CDN?
  • How I could manage some component state? Would I be reinventing the live view architecture?
  • Web components can be a way to distribute HTML in this case?
  • Maybe with help of HTMX I could achieve this?
1 Like

I just found ReactSurface - Render React Components via Surface which is kinda similar, although is has focus only on React.JS. In my case, most of applications are built with React so it could be a starting point. But the ideia was to be framework/library agnostic