I grew up in MVVM land. The MVP pattern was known but not considered; because well, after all, do we need anything else?

Then there was SSR using MVC, then client side MVC in Angular which they call the MV(x) where x is anything you want.

Angular got rid of the client side controller in favor of the (smart) Component and the router (which is a pseudo controller). Confused yet?

The MVP Pattern

The Model View Presenter pattern is the same thing as MVVM and Angular's traditional Component, with one exception. There's no logic to do anything but display the injected data and send an event when anything else happens!

This means the HTML is bound to the data via an @Input mechanism. Anything requiring interaction is simply an @Output event! Otherwise known as a dumb component, they do serve a reusable purpose.

What I didn't know is that I had been doing this a lot in MVVM-land where I wanted to reuse a View that simply had different data to display.

One interesting note about MVP, is that as soon as you want to refactor existing code to get there, you will immediately see all the close-coupling. This reason alone makes it worthwhile to think more highly of the dumb component as it only focuses on rendering! This gives our traditional Angular Components much more leeway in consistent rendering without regard to the content!

I'll add some code to this post this week, so we can see how easy it is and provide yet another tool in our toolbox.

JWP2020