App layout options

[zoomclub]

Just watched your app layout presentation at the facebook february meetup. It reminded me of infonode.net from sometime ago, it is great to see this level of app layout implemented now, using react and modern web technology.

Another aspect of layout is the Z dimension, have you considered layers? It would be useful to optionally support layers in components. I'd be happy to discuss some scenarios if you like.

Have you seen react-radium? It might be a good way to manage styling in react-app-layout?

[heswell]

Thanks for the pointer to react-radium, I hadn't seen this before. I have been looking at react-style and waiting to see whether the react team themselves would implement something along these lines within react. I do plan to include full support for dialog and popup management as an extension to the base layout management. If, by layers, you mean something beyond dialogs and popups, then yes - I would be interested to hear the kind of scenarios you have in mind.

[zoomclub]

Watching react-radium it looks like it is growing rapidly, to me it looks like they could be an extension of the react team for styling concerns.

I've been looking at the best way to implement my layered app surface. What is involved is a bit more than modal dialogs and popups. So far there has been some investigation and discussion, first with react-router which lead to an addition they called "portals" and then further investigation with react-canvas. While react-canvas sounded very promising it was a dead end because their solution is too narrow, yet I described the UI I am trying to build well in the issue I opened, so the issue is worth a read.

Here are the relevant issues:

https://github.com/rackt/react-router/issues/551 https://github.com/ryanflorence/reactconf-2015-HYPE/tree/master/demos/03-portals https://github.com/Flipboard/react-canvas/issues/27

As I've described in the react-canvas issue above I have a painting type of app, where I have commit layers where final rendering is targeted at and then interaction layers on top of those and then more layers that are a bit more like layered dialogs and popups or portals.

The ultimate solution is likely just to find the best way to stack up several react layer components inside a containing surface component. This stack could likely be built up by the way it is declared in the JSX of the surface container. Yet, there would also be a need to arrange the back to front order of layer components as well as show and hide specific layers. The dynamics of this would be controlled via the apps interactive tools, which set state and make the whole surface work like a state machine.

There is also another API for layers called konva, it also has a bridge to react called react-knova:

http://konvajs.github.io https://github.com/olimsaidov/react-konva

It looks like konva has a good layer solution where layers contain a canvas each. This is good but not all my layer components require a canvas, some are DOM based where the UI that react-app-layout currently has is more suited for. I'm also not so interested in having a full scenegraph like konva, when a react component with a couple layered canvas instances would make do.

Here is the stack as I'm seeing it at this present junction:

surface-component • back/foreground layers combined in one component, using konva canvas layers for each? • tool editing and reporting layers combined in one component, with reporting in foreground. • config form layer, this can swap between multiple forms to edit given aspects of the app state.

Having a versatile app layout solution where components can be sized by their containing component and layered, arranged and shown/hidden would be great. The layer components in turn could contain their own sub-components as required. There sub-components would be the in spot editors and forms that a specific tool would act through.

All this would then be managed via one immutable state, which acts as a finite state machine to handle all transitions triggered by tools. There would then be universal Z dimension routing and sub-component internal Z, X and Y dimension routing to allow for flexible UI layout.