I'm creating a TODO list web app for self-learning purpose. This is my first time building a web app. I'm using JavaScript and PHP. I'm having a trouble finding the best approach for saving user data.
My app allows user to create multiple lists. The list of TODO lists can be sorted by dragging each list. The title of each list can be also edited. Items stored on each list can be created, edited, deleted, or their order in the list can be changed by dragging the items.
I want to be able to save all of this in a database so that user will see exactly where he left off when he comes back to my web app. I can think of two different approaches. One is to save data at the time it was modified. For example, if the order of items is modified, I can detect the change and save the order immediately. The others is to allow user edit data until he saves it.
The first approach is probably simpler and easier to implement, but I worry that it may affect the performance of my app because for each edit user makes, the app needs to talk to the server. The second approach looks promising, but I need to keep track of what user has modified since last save so I can minimize the data transfer to the server by only sending what is updated. To do this, I depend on custom data attributes and global boolean variables to indicate what has been modified.
One feature I want is that I want user to keep editing while saving. This introduces more problems for the second approach. Please see the question I asked earlier (How do I capture what to save if user is allowed to modify content during saving?). One user kindly gave me an answer and it should work, but I did not write in the question that I had custom data attributes. These custom attributes can still go out of synch.
So my question is:
I'm still not a very experienced programmer, I may be missing something very obvious, but thank you for your time!
I don't think you will have any performance issues with automatic saving, unless you expect thousands of updates per second and your webserver/database are not fast enough.
I would create a data structure in Javascript (research on how to create javascript classes, start by learning how to use hashes) that can hold all the data in its properties and can trigger onchange events on them to request an update via Ajax.
Try to mantain the same format between your Javascrip object and a data class/object in PHP, (e.g. using JSON format) so you don't have much trouble doing a fast update in the database. You PHP class should be able to read the properties of the object received via Ajax and update the database acordingly. At the same time, it should be able to generate the object needed in Javascript for reading/loading purposes.
Francisco