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

This is a right humdinger of an episode of Fullstack Ruby! I got the chance to talk with Karl Oscar Weber all about the Camping web framework, as well as his Grilled Cheese livestream, working as a freelancer, and how to criticize by creating as a programmer in a world fraught with political upheaval. Great craic, as the Irish say.Links & Show NotesSign up for the Fullstack Ruby newsletterGet bonus issues and support this content as an Intuitive+ member!Guest: Karl Oscar Weber ([email protected])Capsule GraphicsCampingGrilled Cheese (Twitch)KonaBecome 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!Theme music courtesy of Epidemic Sound.

It’s tempting to want to take the simplistic approach of writing “to the framework” or to the external API directly in the places where you need to interface with those resources, but it’s sometimes a much better approach to create your own abstraction layer. Having this layer which sits between your high-level business logic or request/response handling, and the low-level APIs you need to call, means you’ll be able to define an API which is clean and makes sense for your application…and then you can get messy down in the guts of the layer or even swap out one external API for another one. I explore all this and more in another rousing episode of Fullstack Ruby.Links & Show NotesSign up for the Fullstack Ruby newsletterGet bonus issues and support this content as an Intuitive+ member!Whitefusion: a Boutique Web Studio (hire me!)Top 10 Most Excellent Gems to Use in Any Ruby Web ApplicationBridgetown 2.0 BetaBecome 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!Theme music courtesy of Epidemic Sound.

The rumors are true: I became a Ruby developer because of Rails. It’s probably common that folks find a tech stack or framework which offers the features and the community they desire and so learn the language undergirding that stack. Truth is, Ruby did not appeal to me at first and I resisted it! I wanted to remain a PHP developer, damnit! But the industry draw of Rails required me to learn Ruby, and I eventually fell head-over-heels in love with this language. Now I find myself at a crossroads. Do I leave Ruby behind because I’m no longer a “Rails developer”? Or do I embrace the essence of what makes Ruby Ruby and forge a different path? Gather around, my fellow devs, and listen to my story…Links & Show NotesRuby, Fully Stacked (Fullstack Ruby rebooted!)Using Lambdas and Callables for Deferred Evaluation, Control Flow, and New Language PatternsJust a Spec PodcastRoad to Bridgetown 2.0, Part 1 (Stuck in Burnout Marsh)Whitefusion: a Boutique Web Studio (hire me!)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!Theme music courtesy of Epidemic Sound.

What are signals? What is find-grained reactivity? Why is everyone talking about them on the frontend these days? And what, if anything, can we apply from our newfound knowledge of signals to backend programming? Is it possible to use signals in Ruby? (Yes!) Learn all about signals, the Preact Signals library, and the new Signalize gem right here in the latest episode of Fullstack Ruby.Links:Episode 4: Design Patterns on the Frontend, History of MVVM, Web Components, and Youpreactjs/signals: Manage state with style in every frameworkwhitefusionhq/signalize: A Ruby port of Signals, providing reactive variables, derived computed state, side effect callbacks, and batched updates.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!Theme music courtesy of Epidemic Sound.

Ayush is on the core team of Bridgetown, a specialist in Ruby on Rails and Hotwire app development, and a personal friend. I'm very excited to have him on the show today to talk about all things fullstack web dev, his new book The Rails & Hotwire Codex, and why vanilla is awesome!Links:Bridgetown – Ruby site generator & fullstack frameworkThe Rails & Hotwire CodexAyush Newatia's socials:MastodonTwitterBusinessEmailBecome 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!Theme music courtesy of Epidemic Sound.

Ruby can now run on Wasm! WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. So…we can now run "real" Ruby in the browser, right? Yes! …and no. Caveat emptor, but nevertheless this is a very welcome development and promising technology for the future. Let's dive in.Links:Announcement by @HParker on ruby.socialTodo List built with Ruby Wasmruby.wasm JS bridge docsruby.wasm gem (managed as part of Ruby core)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!Theme music courtesy of Epidemic Sound.

Every Ruby web framework has its own way of configuring itself as well as third-party dependencies. In some cases it's largely up to you, in other cases it's clearly spelled out. There may or may not also be some "magic" involved in requiring gems added to a Gemfile. As a maintainer of Bridgetown, I'm currently working through all these issues as I ready the next major release which will feature a brand-new initialization system. Listen to the show to hear a rundown of some of the configuration setups out there and what we've chosen to focus on for Bridgetown!Links:Top 8 Most Demanded Programming Languages in 2022 (Ruby at #7)Configuring Rails ApplicationsHow to Create Roda PluginsBridgetown's current Configuration/Plugins systemUpcoming Bridgetown Initializer-based Configuration (GitHub PR)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.

Ruby is optimized for programmer happiness. What does that even mean? Which programmer? Whose happiness? What if you use Ruby and aren't happy? Does that mean Ruby failed?All this and much more to be covered in today's episode—not a deep dive into a technical topic, but a deep dive into the philosophy of programming, the "Ruby way", OOP, the dangers of monocultures, and the need to recognize implicit biases when engaging in technology debates.Links:r/ruby threadcomment about dreading RubyBecome 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.

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.Links:Model–view–viewmodel - WikipediaModel ← (from server connection or client data store) → ViewModel ← (bindings) → ViewKnockout (web framework) - WikipediaWeb Components - MDNLit: Simple. Fast. Web Components.Article: HTML is a Serialized Object GraphBecome 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.

Typically when you mention "Ruby" and "template" in the same breath, people will think of ERB. Perhaps even Haml. But did you know that the Ruby ecosystem offers a wide variety of template engines, and quite a few are built upon pure Ruby? 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. Enjoy!Links:Article: HTML is a Serialized Object GraphERB Erubi (ERB variant used by Rails, Bridgetown)LiquidSerbeaHamlSlimArbreMarkabyWunderbarPapercraftRuxBecome 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.