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

Transform Your Data Object-Oriented Style with Formatters

I truly adore this design pattern. Once you know it, you start to see its usefulness across a wide variety of scenarios, codebases, and even programming languages.

Continue Reading

Episode 3: String-Based Templates vs. DSLs: the Pros & Cons of Each

In this episode, I break down the main conceptual difference between “string-based templates” such as ERB and “DSLs” such as Papercraft, the various options within each category, and some of the reasons you might want to choose one approach or another depending on your use case.

Continue Reading

More This Way