A good example of separation of concerns between user experience and backend data is an e-commerce website.
The user experience (UX) should be focused on:
- Presenting products in an attractive and user-friendly way (product listings, product details pages, etc.)
- Allowing users to filter, sort, and search for products easily
- Providing a smooth checkout flow to facilitate purchases
- Displaying orders, account info, etc. in an intuitive interface
The backend should be focused on:
- Maintaining the product catalog data (names, descriptions, images, prices, etc.)
- Processing purchases, payments, and fulfilling orders
- Storing and managing customer accounts and order data
- Providing APIs to expose product and account data to the front-end
The UX should request data from the backend via its APIs and handle how to display that to meet the needs of users. The backend is concerned with the integrity and accuracy of the data, not how it is presented in the UI.
This clean separation of the data/business logic layer from the presentation layer follows good software design principles and allows each area to evolve independently. The UX could be redesigned without changing the backend, and the backend data model could change without rewriting the entire UX.
So in summary, the key aspects of this separation of concerns are:
- The UX is responsible for the presentation and user interaction
- The backend is responsible for providing correct data via APIs
- Each layer can be built and evolve independently
- The UX requests and displays data without concerning itself with how that data is stored or managed