0

Suppose I want to make a grid type of UI consisting of editable cells. In an OO language I would create a class for the cell, instantiate all the cells and put them on the right place with their x,y properties. Later on I might drag and drop cells to various containers.

How would I ( in broad lines ) approach such a design if I am using a functional language like Clojurescript with the Re-frame, Reagent, React.js stack of frameworks?

For the title question I have used: How to code a UI with a vast (> 1000) number of similar components when using Reagent?

nilo de roock
  • 4,077
  • 4
  • 34
  • 62

1 Answers1

0

As far as the view composition of components is concerned, where a parent component contains children, there is not that much difference between React or an OO Framework (such as say Java Swing).

You mentioned reframe. So here's an example of child components in an html table component:

https://github.com/yatesco/re-frame-stiching-together

You will need to use editable html components instead of 'view only' components.

As far as actually creating the components is concerned you could start with just two numbers - the columns count and the rows count, and use range, map and into to create the matrix of components.

Chris Murphy
  • 6,411
  • 1
  • 24
  • 42
  • Doing the same thing in Om Next would be simpler. – Chris Murphy May 07 '16 at 09:25
  • Looks promising, thanks. I'll have a look at it right away. Does that mean that you use Om instead of Reagent? – nilo de roock May 07 '16 at 09:55
  • 1
    I've re-factored an application from reframe to Om Next to Untangled. With Om Next you don't need to set up all the subscriptions/reactions as in the example - your components have a queries that describe their nesting: a different way of looking at the problem, however perhaps no less challenging! – Chris Murphy May 07 '16 at 10:42
  • OK, I forked the project, downloaded it to Cursive and run it but from this code I see no way to simply put, say 1000 components on a page. – nilo de roock May 07 '16 at 12:39
  • If an html table can handle that number (obviously with scollbars) then any of these frameworks will be able to also. – Chris Murphy May 07 '16 at 13:59
  • I see no problem either on the html side ( 32^2 is already 1024 btw ) either, I was thinking of the reagent view which I want to keep as small and manageable as possible. – nilo de roock May 07 '16 at 14:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111296/discussion-between-chris-murphy-and-nilo-de-roock). – Chris Murphy May 07 '16 at 14:30