RFC: Extract component from React UI to Web Components

Creating Neos & Flow Code
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
1 Like
2
3

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

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 GitHub - LukasBombach/react-web-component: Create Web Components with React ?

All the best,
Sebastian

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.

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

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:

8

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

Could be interesting as well.

9

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

1 Like
10

So the PR is merged on Stencil repository, I can continue to work on this :wink: