Currently, I am working on developing an application using Laravel and VueJS (along with Vuex). Although I do not have much experience in working with these frameworks or front-ends, I am curious to know the best practices for utilizing the data received from the API on the front-end.
My application involves accounts that can contain one or more users. The frontend displays an overview of all accounts and also a list of users for administrative purposes. The API response example is structured as follows:
To provide some context:
// When fetching account(s)
data: {
account: {
id: "a1",
name: "Account1",
},
accounts: [
acount x,
account y,
...
]
}
// When fetching user(s)
data: {
user: {
id: "u1",
name: "User1"
},
users: [
...
]
}
For optimal performance, it seems efficient to directly store the JSON objects received from the API in the Vuex store. These stored objects will then be used to populate the update views and overview tables.
From a software engineering perspective, I prefer creating ES6 class objects. This approach offers several advantages:
- I can implement functions like
save(),update(), orfetchUsers()for both user and account objects, which can interact with fetch or update functions in the Vuex FLUX store. - Inheritance can be utilized for functions such as
save(). - If needed, additional functions can be implemented within the object class.
- There may be other benefits specific to modeling that I am yet to uncover.
In this scenario, I would convert the JSON data into ES6 class objects and store these objects or lists of objects in my store(s) instead of storing the raw JSON objects.
What I'm seeking guidance on:
- Are there any established conventions (particularly in ES6) that should be followed, or what is considered the best practice in this situation? Which option out of the two mentioned (or any other) is recommended?
- What impact does creating these objects have on performance or resource usage, especially on mobile devices?
- Is the potential performance or resource impact negligible? Is there a recommended limit on the number of objects that should be created?
I believe the details of the situation and my questions are clear, but feel free to request additional information if needed.