Request: Make JustPy more reactive

Please forgive my ramblings below. I know what I’d like to see but don’t know whether they are feasible.

First some shortcomings in the current implementation of models/bindings in JustPy:

• Setting the model as model=[wp, ‘text’] is not very descriptive. It suggests that more items can be provided (could it?). At least using a tuple conveys more clearly that it is unchangeable. I’d prefer something more verbose model=dict(owner=wp, prop=‘text’) or maybe even model=‘wp.text’.
• In Vue one can use more data bindings than just the model (but the model is two-way). Multiple arguments can be bound to data with the “:”, as in :icon=“some_object.icon”. Maybe something like this could be extended to components arguments in JustPy. Something along the lines of model={‘owner’: wp, ‘text’:‘text’, ‘icon’:‘preferred_icon’). Or maybe even bindings={‘text’: ‘wp.text’, ‘icon’:‘wp.preferred_icon’}

Then, a wish: One thing I liked about using Vue (+Quasar) was the way to have the components adjust themselves to changes in data. For example, say I want a list of items and I want to be able to filter that list of items. The user enters some filter criteria (through a search box or check boxes. Then I’d construct the list like so:

 <q-list>
          <q-item v-for="service in filteredServices" :key="service.uuid"
                  :to="{name: 'service_details', params: { uuid: service.uuid }}"
                  separator
          >
            <q-item-main>
              {{ service.path }}
            </q-item-main>
          </q-item>
        </q-list>

where the filtered list would be a computed data property:

  export default {
    data () {
      return {
        services: [],
        filterText: ''
      }
    },

    computed: {
      filteredServices () {
        return this.services.filter(el => {
          const path = el.path.toLowerCase()
          return path.indexOf(this.filterText.toLowerCase()) !== -1
        })
      }
    },

(the services data property would be fetched from the server).

The big advantage of all this is that the list would automatically adjust if any of the underlying data changes (ie the filtered list changed due to the user entering filter criteria). With JustPy I can’t see another way of detecting the change in filter criteria, remove the old list components, construct a new component list based on the newly filtered data, insert that component list into the page. It works but feels clumsy because you have to manually manipulate the components (old and new).

Anyway I hope the above makes any sense.

[mjmare]

I think that would work but it feels less clean as the Vue way of doing things. I think it leads to spaghetti code in real programs.

Since I posted this issue I have experimented with custom components, and that cleans up the code immensely. One of the advantages of the Vue style is that one does not have to keep references to the components around in order to manipulate them later. Especially when one use deeply nested structures (eg a List with Items Which contain Sections which contain Text and Avatars etc etc etc). When one uses custom components the state is “local” (available through self) and its representation (the HTML components) is also “local”. By using the react method makes the representation “follow” the state. Much more elegant. (Don’t know if this paragraph makes any sense to you). So, in conclusion, IMHO JustPy is not reactive in the Vue sense, but the need is less due to the ease of use of custom components. But this needs a very different way of thinking. More articles on how to structure programs in a JustPythonic way would be very welcome.

[giodegas]

I improved the efficiency of my app now, reducing the amount of data exchanged, The first prototype was quite abusive. But I am afraid that scaling the application, the problem may come back. Thank you, anyway.