Question: How can I use React for the view layer in V2?

[seanstrom]

Hello 👋

I'm wondering if it's possible for me to build an application with HyperApp V2 with React Components in the view layer. If so, what would be the best way known at the moment for doing so?

Context:
I'm working on a fairly large React application that utilizes UI libraries like React Semantic UI or React Material Design. Those libraries help build out the visuals of the application fairly well.

I'm also currently using React with Vanilla Redux and find it a bit lacking. I'm familiar with Elm and would like that kind of State/Effects/Subscriptions management solution. I recognize that HyperApp V2 is by far the closest to accomplishing this in terms of api design.

I'm willing to go through and port the application over to this tool, but I have a hard time reasoning how I would migrate the view layer properly and quickly. I'm not sure if I can keep any of my react-based, simple components since the view apis in HyperApp V2 don't seem compatible.

Ultimately I'm looking to embrace HyperApp V2 for my application's "plumbing" and React/Preact for the presentation layer. Any suggestions? Thank you 👍

[zaceno]

While I’ll bet there’s a way to hack Hyperapp to be a replacement for Redux (or what ever other state manager your’e using) in your React app, I don’t see much point in doing that.

Redux ships with the tools to connect state changes to your React components. If you’re going to use Hyperapp, you’ll have to write that sort of wiring logic yourself.

The actual state management logic in hyperapp is quite trivial (except for the effects and subscriptions features, which are just slightly non-trivial) The point of Hyperapp is not to be an alternative state manager that happens to ship with a vdom implementation. Rather, it’s a fast, tiny and simple (compared to React) vdom lib which comes with built in state management.

Yes React has state manament too on a per component basis. Hyperapps state management is on a per app basis. This means a different archtiecture. More like if all your React components were stateless functional components, and all your state was managed in Redux.

[seanstrom]

Hey @zaceno

Thanks for the reply! If you don't mind, I'd like to clarify my intent and see if it's clear what I'm asking. I agree with your points and observations, my goal is to eventually transition an application over to this new architecture proposed by Hyperapp. I currently have an architecture of stateless functional components and all state managed by Redux. However I would like to also have subscriptions, actions, and effects as designed by Hyperapp (declarative).

I could cobble together a suite of tools that exist in the React/Redux ecosystem or switch entirely to something like Cycle.js. However I like what is being done with Hyperapp, because of the Elm influences, so I'd like to use it. But I have a lot of stateless view code composed of stateless react ui components. Which I would prefer to not rewrite all at once to start using Hyperapp.

Can I use Hyperapp and its architecture to drive stateless functional react views?

[jorgebucaran]

@seanstrom But I have a lot of stateless view code composed of stateless react UI components.

Those are the easiest ones to port to Hyperapp. They might even work without changes. The ones that will be difficult to port are those using component state.

Can I use Hyperapp and its architecture to drive stateless functional react views?

Well, I guess you could write your React application inside the view function, bypassing Hyperapp's render mechanism.

[seanstrom]

Hi @jorgebucaran, appreciate your time and thank you for building Hyperapp.

I agree that the stateless ones would be the easiest, I'm mainly concerned with my use of third party libraries that provide a suite of UI and UX utilities like React Semantic UI, Grommet, or Material Design. Which makes me wonder what the best approach would be to transitioning a project that relies heavily on these tools. My guess would be that I would need to implement these UI suites in a Hyperapp compatible way. Would you agree?

If I can render my React application inside of the view function, can I still rely on the declarative actions api? Or does that only work if I use Hyperapp's render mechanism?

[jorgebucaran]

My guess would be that I would need to implement these UI suites in a Hyperapp compatible way. Would you agree?

Yes, but it depends, no? Are those libraries usually tightly coupled with the view layer, e.g. do they wrap React's createElement?

If I can render my React application inside of the view function, can I still rely on the declarative actions API?

No, because that's handled by Hyperapp's VDOM. To tap into that you need Hyperapp views or a React "plugin" that implements Hyperapp V2 Actions API. You can still use subscriptions, though.

[seanstrom]

Are those libraries usually tightly coupled with the view layer, e.g. do they wrap React's createElement?

My guess is that they only build on top of React, so they would likely be tightly coupled.

To tap into that you need Hyperapp views or a React "plugin" that implements Hyperapp V2 Actions API.

When you mention a "plugin", do you already have something in mind? Im curious how possible it would be to adapt the React view.

[garuse]

@seanstrom I think you are looking for something like raj

[seanstrom]

@garuse Great find! I've been checking out Raj recently and I'm pleased with its view agnostic design. Although it doesn't provide a declarative actions api like Hyperapp does, so I'll have to do some tinkering to see if I can achieve something similar, but overall it looks like a solid start.

[jorgebucaran]

Great! Looks like we're done here. 👋

To recap:

How can I use React for the view layer in V2

You don't. You could, perhaps, as suggested here, but doing that is out of the scope of the project.