DEV Community

JWP
JWP

Posted on • Edited on

2 1

Angular Presentation Components

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

Top comments (0)

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay