Extended Guide

Appearance

Model View Demo Series

A fully working example…

…of how to implement using a model-view pattern.

Get Started

Defining models

Diving into cross-project abstractions like `RemoteData` and project-specific abstractions like `AppModel`.

Rendering models – views

Using React and Vue to demo how easy it is to swap.

Adding features over time

By adding features over time, like toggling a todo, changing its title or deleting it.

More on modularization

We will dive into the 2 main problems we commonly face: forms & filtered tables

Foreword – What these guides do NOT address ​

This guide focuses on client-side applications. Whether you need one or not is for you to decide. Choose wisely.
In any case, using the model view approach is compatible with advanced techniques like server-side rendering if need be.

Introduction ​

The model-view approach applies to any client-side application, precisely by decoupling behavior (model) and UI (view).
Conceptually the model-view pattern is simple, 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 CSS 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.

Get Started ​

Head to Todo API setup.

I hope you will enjoy this series,
Have a nice journey 👋

Made by SacDeNoeuds with ❤️
Writing 🍝 code since 2016