Partial data updates with client-side state management?

[kfawcett]

I think this is more a question for @George, @Teodor, or @patrick.

I’m building a web app that manages Contacts. On load of the Contacts page a Server Connect gets the Contact records and display them in a list view. On click of one of the Contacts in the list, another div is displayed over the list view div and shows the details for that Contact, including metadata like name, company, and labels, so there is no additional load of data to view the contact details.

When viewing the Contact Details I have a drop down that lists all available Labels for the user to select/deselect.

When they click on one of Labels I want it to modify the Contact record and only return the updated record, ideally updating the existing server connect JSON, without having to reload the entire list so the Labels are immediately updated. Is this something that’s possible?

[Cheese]

Just off the box could you not use a Client side array and an input:

Store your checkbox selections comma separated within the array, echo the values of the array to a hidden input, and then filter using in (and select the hidden input) on the server side…?

Sod it (after I wrote the above I thought hmmm), or even just store to the input (comma separated) and forget the array all together!

[mebeingken]

My approach to this is to:

• Load the server connect data into a data store
• Use the DS to display any data
• Use Emit to instruct the client to retrieve the record that changed (or just send the data in the Emit itself)
• Update the DS record
• UI is immediately updated

If you have a large recordset to load into the DS then you will benefit greatly from AC2 startBatch and endBatch to do the initial data load.

[kfawcett]

Maybe I’m thinking about this incorrectly, but I struggle with how the data store will work long term when there could be 1000’s of records.

I’m already using SQLite. Could that be used in place of a data store? Although, I still have to run a query to get records from SQLite and they do not automatically update without running another query to reload the data so maybe that isn’t an improvement from getting them from the server.

Emit is a web socket term? I haven’t dived in web sockets, but maybe that’s the answer?

Any example screenshots of how you set that up in a server-side API for data updates?

[mebeingken]

I haven’t done the SQLite setup, so can’t comment on that, but having thousands of records in a ds is not a problem, except in the initial load. But again, AC2 fixes that in a great way.

Yes, Emit is part of web sockets.

• Your front end has a socket component and provides a dynamic event of Message. Just like all dynamic events, you can run flows, actions, etc.

• On the server side you Emit a message when the record has been updated, and that message can contain data points. When the data points are just a few, I just send those data points to the client, which then does something with them (They are found in $event). If the changes have many data points, I just send a message to the client with a record number, and the client performs a retrieval via server connect to get the full fresh record. And then on success of the server connect, run the flow, or actions necessary.

If you haven’t used sockets, I would start. It provides a great user experience in applications where data is updated often. Just start with some sandbox work using the forum tutorials that cover Emit, Broadcast, direct message, etc. Once you figure out how they work, it opens up a whole new world for you.

[kfawcett]

Thanks, Ken. Real-time chat is something I want to add, so I’ll work on a POC to get familiar with sockets before trying to use them on other parts of the app.