RFC: Extract component from React UI to Web Components


(Dominique Feyer) #1

I work on a project where we will need a lots of custom development (backend module, inspector editors, …). Currently our component are coupled with React, and I think we can be more open on the reusability of our components.

For example a backend module can be done in Fluid, React, Vanilla JS, … and we should not enforce React, if the customer is more confortable with framework X, or don’t like framework at all it MUST be possible to resuse our components, without the need to rewrittes and maintains those component in technology X.

In our case, we use a lots Elm for our frontend, so we have a lots of module that provide abstraction on top of our API. We want to be able to use Elm for our backend module. We start a prototype and it works nicely, but we have to “convert” of the component to something compatible with Elm. It’s a lots of efforts … for no additional value for our users.

Web Component look like the perfect candidate to solve this issue. React, Elm and any other JS based stack works nicely with Web Components. And in a near future, all majors browser will have native support for Web Components.

So my proposition is to convert all our resusable components (button, drop down, tab, table, …) into Web Components. This project can support the creation of our Design System, or at least a nicely documentated Styleguide of the components that we have.

The Ionic team build Stencil (https://stenciljs.com/) as a foundation of Ionic4, this is a solid implementation of web compontent (IE11 and all evergreen browser supported). I want to start a project to convert step by step all of our component based on Stencil. Stencil is TypeScript + JSX based, so quiet easy to work with and looks solid.

I’m really happy to have your opinions on this project ?

Ping @bwaidelich, I know that your did some research around Web Components.

This project can have a lots of benefit for the Neos community:

  • A good documented styleguide of all our components
  • Reusable components, framework agnostic
  • A good separation of styles and behaviours in our React components
  • On step in the future of the web

(Dominique Feyer) #2

(Dominique Feyer) #3

My current experiment with Stencil.js are here: https://github.com/dfeyer/neos-ui-kit/tree/master/src/components/form-input


(Sebastian Kurfuerst) #4

Hey everyone :slight_smile:

I think this idea is generall really nice, however, there’s one bigger problem I am seeing with integrating different components:

“Inter-component messaging is handled by event listeners.”

So that IMHO throws us back to non-declarative-state-handling, which would be a big no-go for me…

Do you have an idea or a proposal how to solve this? :slight_smile:

EDIT: Can we use https://github.com/WeltN24/react-web-component ?

All the best,
Sebastian


(Dominique Feyer) #5

Each framework will need kind of “wrapper” to make the web component respecting the framework/project convention. I don’t think it’s a big issue, isn’t it ?

It’s a bit like a php library, that you want to use with “Flow style” (inject, …), you need a thin wrapper to make it natural to work with.

As web component can run natively in the browser, i think using a big framework like React to create them feels wrong and open more risk to couple them with our internal state.


(Sebastian Kurfuerst) #6

In my opinion, it’s quite a big issue, as we’d loose the biggest benefit of React IMHO… But let’s discuss this in person next week I’d say.

All the best,
Sebastian


(Dominique Feyer) #7

I can understand, but we need to balance “pure react” and “how to share components across framework/technology” (and I include our own tech stack, Fluid, Fusion, React and also external framework, Angluar, Elm, …). We communicate Neos as a nice customizable product, but currently it’s not that nice to extend :wink:


(Christian Müller) #8

http://skatejs.netlify.com/renderers/with-react

Could be interesting as well.


(Dominique Feyer) #9

Did some progress, wait for my first PR merged for Stencil to build again :wink: