Episode 4: Design Patterns on the Frontend, History of MVVM, Web Components, and You

This is a subject far too little discussed from what I can tell, yet with a fundamental awareness and regular usage of design patterns, you can dramatically uplevel your frontend code.

Jared White by Jared White on April 18, 2022

Design patterns on the frontend: this is a subject far too little discussed from what I can tell, yet with a fundamental awareness and regular usage of design patterns, you can dramatically uplevel your frontend code. Rubyists in particular will have a major leg up here over devs coming from communities which are more FP (functional programming) in nature, because the view layer of the web is inherently object-oriented.

Ruby developers are well-trained in the ways of object-oriented programming and using design patterns. This is probably why many Rubyists instinctively look askance at certain modern paradigms of frontend programming. It’s overly complicated, poorly architected, and rarely understood from a proper OOP perspective. You view source on many websites and it’s “div tag soup”. It’s a nightmare. You look at how people will write heaps of functional React components, and it’s a buggy spaghetti code mess.

Well guess what? We can change all that.

Web components, and simple libraries like Lit—combined with an understanding of how the DOM works natively plus MVVM (Model-View-ViewModel)—lets us reason about our frontend in similar ways to how we reason about the backend using the OOP paradigm. A web component is simply the “VM” of MVVM, and you easily add in the V part via a declarative template library or just manipulate the DOM (that is, the View) directly in an imperative fashion.

So Rubyists, stop feeling like the frontend is out to get you, or you need to avoid it, or contain it. Embrace it! The frontend can be just as fun and rewarding as the backend—if you know what to do with it.

CORRECTION: in the recording I said Stimulus doesn’t provide view bindings. That’s not actually true — you can use data-action attributes so that the events triggered get handled by the controller. However, you can’t bind reactive data back into the template. You get targets of course, but it’s entirely up to you how you make use of those targets to update the DOM via your Stimulus controller.


Become a part of the Fullstack Ruby community and learn how to put your Ruby skills to work on the backend AND the frontend. Know somebody who’s a JavaScript developer but is interested in learning more about Ruby? Share the site, podcast, or newsletter with them!

The Fullstack Ruby Podcast is a production of Whitefusion, a boutique web studio based in Portland, OR.

Theme music courtesy of Epidemic Sound.


Subscribe to the RSS feed

in your podcast player of choice.

“Ruby is simple in appearance, but is very complex inside, just like our human body.”

matz

Join over 200 fullstack Ruby developers and subscribe to receive a timely tip you can apply directly to your Ruby site or application each week:


Other Recent Articles

Episode 5: Optimized for Programmer Happiness

Ruby is optimized for programmer happiness. What does that even mean? Which programmer? Whose happiness?

Continue Reading

What Would It Take for Roda to Win?

Roda’s stated goals are simplicity, reliability, extensibility, and performance. Those are the very reasons why I have become such a Roda stan. It’s so malleable, you can take it in any number of directions in terms of architecture—particularly on the view side which is where my primary interest lies.

Continue Reading

More This Way