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)
- The data is stored in database or server-side.
- The logic code queries the required data according to the request condition.
- The logic prepares all the data that view needs and passes to the view rendering code.
- The view renders the HTML by using all the given data and states.
- User interacts on the view.
- View handles the view events that user triggers.
- Logic code determines what to do with the view events.
- Logic may update the data if required.