Model View Demo

Demoing how to implement agnostic models and pipe them to view libraries like Vue, React, Svelte & Solid… and whatever comes next.

Introduction

The model-view approach applies to any frontend application, as long as you have some client-side scripting and rendering.

Conceptually the model-view pattern is way simpler than it looks, yet diving into it is trickier than it seems IMO, which is why I am writing these series.

There are different flavors, AKA level of details one put in their model, therefore I’ll give mine straight away: To me, the model is about data and behavior only, as a result there are no classes or UI-related data in there.

Basically, the model should contain 2 things only:

• Data to be displayed
• Interactions, in the shape of functions/methods.

The data will change over time, therefore most of the data will be reactive.

Dive In – The guides

1. Json Placeholder API setup
2. Remote data concept
3. Setup the reactivity system
4. Remote action concept
5. Defining the app model
6. Using the App Model in React
7. Using the App Model in Vue
8. Rendering the React & Vue apps
9. Going further – Toggle a todo
10. Going further – Update a todo title
11. Going further – Delete a todo