Separate of Concern: Data / Logic / View

We can separate the code into different concerns so that each one focuses on their own problems to solve.

I usually draw the Data / Logic / View separation into a vertical slide. At the bottom it is the users who are using our interface (view)

1. The data is stored in database or server-side.
2. The logic code queries the required data according to the request condition.
3. The logic prepares all the data that view needs and passes to the view rendering code.
4. The view renders the HTML by using all the given data and states.
5. User interacts on the view.
6. View handles the view events that user triggers.
7. Logic code determines what to do with the view events.
8. Logic may update the data if required.