tailwindcss-rails VS morphdom

You can't use additional CSS packages (like Flowbite) with the official tailwindcss-rails gem. According to this answered issue, you should either give up importmap and use a bundler, or use a CSS file from CDN - which is not ideal (unnecessary classes won't be purged this way).

You first install your asset handlers as you need them for your project. They can be anything from rails/jsbundling-rails and rails/tailwindcss-rails to webpacker or something custom.

Preconfigured TailwindCSS from TailwindCSS-rails ready to use out of the box, pass --css tailwind as an option.✅

Thanks to the magic of Rails, the scaffold generator gives us almost everything we need to start creating messages and associating them with users. Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator also includes some nice looking base styles too.

Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator applies some basic Tailwind styling to generated views, so we have nice looking Widget pages right out of the box.

Here's a simple way to achieve this, inspired by the tailwindcss-rails gem.

gem "rails", "~> 7.0.0" # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails] gem "sprockets-rails" # Use postgresql as the database for Active Record gem "pg", "~> 1.1" # Use the Puma web server [https://github.com/puma/puma] gem "puma", "~> 5.0" # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails] gem "importmap-rails" # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] gem "turbo-rails" # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev] gem "stimulus-rails" # Use Tailwind CSS [https://github.com/rails/tailwindcss-rails] gem "tailwindcss-rails" # Build JSON APIs with ease [https://github.com/rails/jbuilder] gem "jbuilder" gem "redis", "~> 4.0"

When you generate an app with rails new --css=tailwind without a JS option, you get the tailwindcss-rails gem which includes the new scaffold generators. When you pass in a JavaScript option as well, you get Tailwind installed via cssbundling-rails, which does not include built-in generators since it offers more than just Tailwind as an option.

A while back DHH decided to created a gem for easily installing TailwindCss into rails apps 🙌🏻. This gem could be used to install Tailwind through the asset pipeline as well as using webpack. This changed later on as contributors wanted to focus their attention to what was the heart of the gem 🥺.

I'm going to use the tailwindcss-rails gem, the only thing you need to do is to run these two commands in the console:

morphdom

And sure enough, it works! So what's going on here? Well, clicking the link invokes our reflex, which gets executed right before our current controller action runs again. It allows us to execute any kind of server-side logic, as well as play with the DOM in various ways, but with ruby code. Then, the DOM gets morphed over the wire.

It's super simple actually. And that is in large part to (Morphdom)[https://github.com/patrick-steele-idem/morphdom] which I'm using to compare the output of render() to what is already on the DOM. Morphdom will patch the differences.

I'm using morphdom to patch our DOM. Its a very simple library that compares two DOM elements and updates only the differences. It is extremely performant and does not even use a Virtual DOM, just the DOM you already have!

using HTML-diffing libraries like morphdom to efficiently update elements on the page

It tries to morph into existing DOM (with https://github.com/patrick-steele-idem/morphdom). In case of fail, there is fallback to HTML replacement with outerHTML. All DOM operations after action occurs on component level, not the whole page.

Today, we’re going to build a live search experience once more. This time with StimulusReflex, a “new way to craft modern, reactive web interface with Ruby on Rails”. StimulusReflex relies on WebSockets to pass events from the browser to Rails, and back again, and uses morphdom to make efficient updates on the client-side.

Updating the DOM is not slow. In fact, there are libraries and frameworks that emphatically reject the virtual dom approach. morphdom is one such example of a DOM modification library. Svelte's author Rich Harris has been proclaiming for a while that virtual dom is an overhead (see e.g. this article). Google's lit-html and lit-element do much of what react does without the virtual dom.

Sockpuppet is a new way to craft modern, reactive web interfaces with Django. It extends the capabilities of both Django and Stimulus by intercepting user interactions and passing them to Django over real-time websockets. These interactions are processed by Reflex actions that change application state. The current page is quickly re-rendered and the changes are sent to the client. The page is then updated using a fast and lightweight DOM diffing/patching library called morphdom to reflect the new application state. This entire round-trip allows us to update the UI in 20-30ms without flicker or expensive page loads.

in one word: morphdom (https://github.com/patrick-steele-idem/morphdom)

also, StimulusReflex predates Hotwire for 1 year and is already pretty hardened :-)