[ Published on -
Many junior programmers heard about MVC, they know MVC is architectural pattern used for separation of concerns, but sometimes, it's hard to understand it until you see a practical example.
MVC is not only about separation of concerns, but also about making them interchangeable on the runtime, understandably without breaking the application.
The example is divided into 4 rows:
1. Model
2. View
3. Controller
4. Output
and 3 columns:
1. 3 different types of model represented as a text fields so you can change model and see how it reflects on the view
2. 3 visually different buttons
3. 3 different controllers for controlling button clicks
4. 3 different output text fields displaying message when you click one of the buttons.
By clicking on black arrows in each row, the row concerns will interchange on the runtime thus making buttons have different models, styles(views), or controllers.
Click on the buttons in the "View" row to see the output from controller.