For this application we will be using,
- an MVC approach,
- object and prototypes,
- localStorage to store the data,
- CRUD [create/retrieve/update/delete] operations.
In an MVC approach, we create three layers,
- a model
- a view
- a controller.
The model in an MVC architecture is responsible for holding business logic and interacting with external systems such as a database using APIs. In simpler terms, the model layer gets the data from the database.
The view layer is what you see on the web page. This allows the users to interact with the system. A user of the the application can add a record, delete a record, and so on.
The controller layer works as a bridge between the view and model. It gets the request from the user, such as add a record with so and so data, then interacts with the database (external system using APIs) and updates the data.
In most cases, the view layer requires a feedback from the model to inform the user the result of the transaction, like data added successfully or whether it failed. Model and view cannot communicate with each other, so it’s controller’s job to come back to the view with the result.
Object and Prototypes
We will be creating the modules using constructor pattern, click here to read more about it.
You can read about localStorage API here on MDN but it’s not really important at this point. You probably will have a back-end API to store and fetch your data.
As stated above, CRUD stands for create, retrieve [fetch], update, and delete.
In the next post, we will design the application before diving into the coding.