understanding reactor

[acivitillo]

Let's say I use reactor to build a big table of 1,000 rows. I want to allow the user to edit 1 row. How would reactor do this? I understand morphdom can replace html content as below, but how would I change only 1 row? I see you are using the uuid4 library so I am guessing each element has an id? Does it mean every time you send an event from client to server you also send the element id?

Another question, is it true all application state in reactor is in the actual html? I am not used to this thinking, it makes a lot of sense to me, but I am used to virtual doms so I wonder if this method has any drawbacks? I am guessing in my 1,000 rows example above the entire state would be in the <table> component, right? Does it mean that if there is a connection issue the server relies on the client html to get the latest available state and re-mount the component?

I must say I would love to use reactor but I am a heavy flask user so I am also considering a port to flask of reactor.

[edelvalle]

So, let's make a small example, suppose you have a model Computer and this computer as a Log model related to it as in:

This code will be kind of pseudocode, to give you context, is not literal.

class Computer:
   pass

class Log:
   computer = models.ForeignKey(Computer, related_name='logs')

And you want to make a component XComputerLogList that given the computer ID it renders all the logs, so when you use it you wanna use it as:

{% load reactor %}
{% component 'x-computer-log-list' computer_id=computer.id %}

Notice something, what you pass to component needs to be JSON serializable by reactor, and is what will be needed to reconstruct the state of the object from scratch in case the connection is lost.

The component code goes as:

from reactor.component import Component

class XComputerLogList(Component):
    template_name = 'x-computer-log-list.html'

    def mount(self, computer_id, **kwargs):
          self.computer_id = computer_id
          self.computer = Computer.objects.get(id=computer_id)

    def serialize(self):
        return {'id': self.id, 'computer_id': self.computer_id}

and the template

<div {{ header }}> 
  <h1>Logs of {{ computer }}:</h1>
  <ul>
    {% for log in computer.logs.all %}
      <li>{{ log }}</li>
    {% endfor %}
   </ul>
</div>

Yes the state of the component has the computer and the logs and so on, but in the HTML in the state attribute of the component will be what ever you put in the serialize method, so all logs will not be there just the component id and the computer id to be able to reproduce the state of the component in case of disconnection.

Now, if you wanna make this "efficient" when you modify a log, and not re-render the whole list, you should use a component that just renders a single log entry. As that component will not be a root component because it will be embedded in the list component it, you can pass a model directly to it because it will not need a JSON serializable state to render, since the parent component will be the one rendering that embedded component.

[acivitillo]

Ok thanks, I'll try to write a small demo over the past days and come back to this, I think this could also go into your /examples.

What is the embed mechanism? Is it using the RootComponent?