Forem: David Teren

The 15-Year Naming Bug: How Rails Finally Got `polynomially_longer` Right

David Teren — Tue, 09 Dec 2025 13:16:13 +0000

A tale of mathematical misnomers, production outages, and why naming things correctly really does matter.

TL;DR

For 15 years, Rails (and nearly every major Ruby background-job library) shipped a retry strategy called :exponentially_longer that was never exponential — it was a quartic polynomial (executions**4).

This mismatch caused real queue floods and mis-planned capacity.

Rails 7.1 finally fixed the name:

wait: :polynomially_longer   # the honest one

It Started With a SolidQueue Mystery

Our Rails 8 app processes retail audio files, forking SoX and LAME, hammering the database, and crashing with SIGSEGV under load. Deadlocks and connection-pool exhaustion were frequent.

We reached for ActiveJob’s retry mechanism and wrote:

class SpmProcessJob < ApplicationJob
  retry_on ActiveRecord::Deadlocked, wait: :polynomially_longer, attempts: 5
  retry_on PG::ConnectionBad,        wait: :polynomially_longer, attempts: 3
end

Wait… polynomially_longer?

Wasn’t that always called exponentially_longer?

That single question unveiled one of the longest-running naming bugs in the Ruby ecosystem.

The Discovery (September 2023)

Victor Mours was investigating a partial production outage in a French social-services appointment system. Background jobs were timing out and retrying so fast they overflowed the queues.

During the post-mortem they discovered the supposed exponential backoff wasn’t exponential at all — it was polynomial. And the mistake was 15 years old.

→ Rails PR #49292

Exponential vs Polynomial – The Numbers

Rails’ real formula (including jitter + base offset):

delay = executions**4 + (rand * executions**4 * 0.15) + 2

Retry #	Polynomial (real observed)	True exponential 4ˣ
1	~3 sec	4 sec
2	~18 sec	16 sec
3	~1.4 min	1 min
5	~10 min	17 min
7	~40 min	5 hours
10	~3 hours	12 days

It feels exponential for the first couple of retries… then diverges dramatically.

Where It All Began (2008)

Tobias Lütke’s original delayed_job:

# 2008 – the seed of the bug
time + (attempts ** 4) + 5

A year later the docs called it “exponential.” From there it spread unchanged to Sidekiq, Resque-retry, Sneakers, and finally ActiveJob in Rails 4.2 (2016) under the name :exponentially_longer.

People Noticed – Years Earlier

Sidekiq #3569 (2017) – “This is quartic, not exponential.” Closed without fix.
GoodJob users (2023) – Started seeing deprecation warnings after Rails 7.1 and realized the same thing.

Why This Actually Hurt Production

Queues filled far faster than capacity plans predicted
Retries happened “too soon” during DB or API outages
Misleading mental models for incident response
Secondary failures (connection-pool exhaustion, thundering herds despite jitter)

The Fix – Rails 7.1

# Rails 7.1+
retry_on MyError, wait: :polynomially_longer, attempts: 10

# Old name (still works, but warns)
retry_on MyError, wait: :exponentially_longer

No behavior change — just truth in labeling.

Rafael França (Rails core): “The intent is really to be a polynomial backoff.”

When Polynomial Backoff Is Perfect

Great for:

ActiveRecord deadlocks
Connection-pool exhaustion
Transient network blips
Rate-limiting responses

Avoid for prolonged third-party outages — use a custom exponential proc instead.

Custom Strategies (when you need something else)

# True exponential
retry_on ApiOutage, wait: ->(n) { (2 ** n).seconds }, attempts: 12

# Fixed interval
retry_on RateLimitError, wait: 30.seconds

# Time-aware (don’t retry at 3 a.m.)
retry_on BatchError, wait: ->(n) {
  delay = n**4
  delay += 8.hours if Time.current.hour.between?(2, 5)
  delay.seconds
}

Takeaways

Names matter — a bad one misled an entire ecosystem for a decade and a half.
Polynomial ≠ exponential; the difference is enormous after ~5 retries.
Jitter is your friend (Rails includes it by default).
Audit your jobs when upgrading to Rails 7.1/8.0 — you’ll see deprecation warnings.
If you ever thought Rails or Sidekiq gave you exponential backoff… you never actually had it.

Run this today and smile:

grep -r "exponentially_longer" app/jobs/

You now know exactly what you’re getting — and why it’s called polynomially_longer.

References

Rails PR #49292 – https://github.com/rails/rails/pull/49292
Sidekiq issue #3569 – https://github.com/sidekiq/sidekiq/issues/3569
Original delayed_job history – https://github.com/collectiveidea/delayed_job/commits/master
ActiveJob docs – https://edgeapi.rubyonrails.org/classes/ActiveJob/Exceptions/ClassMethods.html

Building a Phoenix LiveView Desktop App with Tauri: A Step-by-Step Guide

David Teren — Thu, 13 Nov 2025 13:26:29 +0000

This guide provides a comprehensive walkthrough on how to package a Phoenix LiveView application as a native desktop app for macOS, Windows, and Linux using Tauri. This approach bundles your compiled Phoenix release with the Tauri application, creating a single, self-contained executable that runs entirely locally.

Prerequisites

To follow this guide, you will need:

Elixir 1.15+ with Phoenix 1.8+
Rust and Cargo (for Tauri's core functionality)
Node.js (for asset building and Tauri CLI)
A development environment for your target OS (e.g., Xcode for macOS, Visual Studio Build Tools for Windows).

Step 1: Create Your Phoenix Project

We will start by creating a new Phoenix project. Using SQLite is highly recommended for desktop applications as it is an embedded database that doesn't require a separate server.

mix phx.new todo_app --database sqlite3
cd todo_app

Step 2: Configure Phoenix for Desktop Deployment

The Phoenix application needs specific configuration adjustments to run as a sidecar process within a Tauri bundle.

Update `config/runtime.exs`

We will modify the production configuration block to handle the desktop environment variables set by Tauri.

if config_env() == :prod do
  # --- Desktop Application Configuration ---

  # 1. Database Path: Set by Tauri to point to the app's data directory
  database_path =
    System.get_env("DATABASE_PATH") ||
      raise """
      environment variable DATABASE_PATH is missing.
      For desktop app, this should be set by the Tauri launcher.
      Example: ~/Library/Application Support/TodoApp/todo_app.db
      """

  config :todo_app, TodoApp.Repo,
    database: database_path,
    # Keep pool size small for embedded SQLite to avoid SQLITE_BUSY errors
    pool_size: String.to_integer(System.get_env("POOL_SIZE") || "5")

  # 2. Secret Key Base: Generated at runtime for local desktop app
  secret_key_base =
    System.get_env("SECRET_KEY_BASE") ||
      :crypto.strong_rand_bytes(64) |> Base.encode64(padding: false) |> binary_part(0, 64)

  # 3. Fixed Port: Use a fixed port (e.g., 4001) for the bundled app
  port = String.to_integer(System.get_env("PORT") || "4001")

  config :todo_app, TodoAppWeb.Endpoint,
    url: [host: "localhost", port: port],
    http: [
      # 4. Localhost Binding: Bind to localhost only for security
      ip: {127, 0, 0, 1},
      port: port
    ],
    secret_key_base: secret_key_base,
    # 5. Server Mode: Ensure the server starts automatically
    server: true
end

Update `mix.exs`

Add the release configuration to your mix.exs file under the project function to enable building a self-contained executable.

# ... inside the project function ...
releases: [
  todo_app: [
    include_executables_for: [:unix],
    applications: [runtime_tools: :permanent]
  ]
]

Step 3: Create the Phoenix Launcher Script

Tauri needs a way to launch the Phoenix release. We'll create a small shell script that handles finding the release executable in both development and bundled environments.

Create the directory and file: mkdir -p scripts && touch scripts/todo_app_launcher

#!/bin/bash
set -e

# Get the directory of the script
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

# Find the release directory (handles both dev and bundled paths)
if [ -d "$SCRIPT_DIR/../_build/prod/rel/todo_app" ]; then
    # Development path
    RELEASE_DIR="$SCRIPT_DIR/../_build/prod/rel/todo_app"
elif [ -d "$SCRIPT_DIR/../Resources/todo_app" ]; then
    # macOS bundled path
    RELEASE_DIR="$SCRIPT_DIR/../Resources/todo_app"
elif [ -d "$SCRIPT_DIR/../../Resources/_build/prod/rel/todo_app" ]; then
    # Windows/Linux bundled path (may vary)
    RELEASE_DIR="$SCRIPT_DIR/../../Resources/_build/prod/rel/todo_app"
else
    echo "ERROR: Could not find Elixir release directory" >&2
    exit 1
fi

# Set environment variables required by the release
export RELEASE_ROOT="$RELEASE_DIR"
unset RELEASE_NODE
unset RELEASE_DISTRIBUTION

echo "Starting Phoenix server from: $RELEASE_DIR" >&2

# Execute the release command, replacing the current shell process
exec "$RELEASE_DIR/bin/todo_app" start

Make the script executable:

chmod +x scripts/todo_app_launcher

Step 4: Initialize and Configure Tauri

Initialize Tauri

Install the Tauri CLI and initialize the project structure.

npm install -D @tauri-apps/cli
npx tauri init

When prompted, use the following settings:

App name: TodoApp
Window title: TodoApp
Web assets: ../priv/static (This is where Phoenix puts compiled assets)
Dev server URL: http://localhost:4000 (The default Phoenix dev server)
Dev command: mix phx.server
Build command: Leave empty (we will configure this in tauri.conf.json)

Configure `src-tauri/tauri.conf.json`

We need to tell Tauri how to build the Phoenix release and how to bundle it.

Update the build and bundle sections in src-tauri/tauri.conf.json:

{
  // ... other configurations ...
  "build": {
    "frontendDist": "../priv/static",
    "devUrl": "http://localhost:4000",
    "beforeDevCommand": "mix phx.server",
    // Build assets and create the Phoenix release before bundling
    "beforeBuildCommand": "MIX_ENV=prod mix assets.deploy && echo 'Y' | MIX_ENV=prod mix release --overwrite"
  },
  "app": {
    "windows": [
      // ... window settings ...
    ],
    "security": {
      // 5. CSP Settings: Must allow WebSocket connections for LiveView
      "csp": "default-src 'self'; connect-src 'self' ws://localhost:* http://localhost:*; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "category": "Productivity",
    // 6. External Binaries: The launcher script is the sidecar
    "externalBin": [
      "../scripts/todo_app_launcher"
    ],
    // 7. Resources: Bundle the entire Phoenix release directory
    "resources": [
      "../_build/prod/rel/todo_app"
    ]
  }
}

Step 5: Update Tauri Backend (Rust)

The Rust backend is responsible for launching the Phoenix sidecar, setting environment variables, and waiting for the server to be ready before navigating the webview.

Update `src-tauri/Cargo.toml`

Add necessary dependencies for process management, logging, and HTTP requests.

[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
log = "0.4"
tauri = { version = "2.9.1", features = [] }
tauri-plugin-log = "2"
tauri-plugin-shell = "2"
dirs = "5.0"
ureq = "2.10" # For synchronous HTTP health check
tokio = { version = "1", features = ["time"] } # For async sleep

Replace `src-tauri/src/lib.rs`

Replace the contents of src-tauri/src/lib.rs with the following code. This implements the server health check and sidecar management logic.

use tauri::Manager;
use tauri_plugin_shell::ShellExt;
use tauri_plugin_shell::process::CommandEvent;

// Helper function to wait for the Phoenix server to be ready
fn wait_for_server(url: &str, timeout_secs: u64) -> bool {
  let start = std::time::Instant::now();
  let timeout = std::time::Duration::from_secs(timeout_secs);

  while start.elapsed() < timeout {
    // ureq is synchronous, which is fine for a simple health check
    if let Ok(response) = ureq::get(url)
      .timeout(std::time::Duration::from_secs(2))
      .call() 
    {
      // Phoenix returns 200 or 302 (redirect to LiveView) when ready
      if response.status() == 200 || response.status() == 302 {
        return true;
      }
    }
    // Wait for a short period before retrying
    std::thread::sleep(std::time::Duration::from_millis(500));
  }
  false
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
  tauri::Builder::default()
    .plugin(tauri_plugin_shell::init())
    .plugin(tauri_plugin_log::Builder::default()
      .level(log::LevelFilter::Info)
      .build())
    .setup(|app| {
      let app_handle = app.handle().clone();

      // --- Setup Application Data Directory and Database Path ---
      let app_support_dir = dirs::data_local_dir()
        .expect("Failed to get app support directory")
        .join("TodoApp");

      std::fs::create_dir_all(&app_support_dir)
        .expect("Failed to create app support directory");

      let database_path = app_support_dir.join("todo_app.db");

      // Skip sidecar logic in development mode
      if cfg!(debug_assertions) {
        log::info!("Running in development mode. Phoenix server should be started manually.");
        return Ok(());
      }

      // --- Production Sidecar Launch Logic ---
      let database_path_str = database_path.to_str().unwrap().to_string();
      let fixed_port = "4001";

      // Spawn a new thread to manage the sidecar process
      std::thread::spawn(move || {
        let sidecar_command = app_handle.shell()
          .sidecar("todo_app_launcher")
          .expect("Failed to create sidecar command");

        // Set environment variables for the Phoenix release
        let (mut rx, _child) = sidecar_command
          .env("DATABASE_PATH", database_path_str)
          .env("PHX_SERVER", "true")
          .env("PORT", fixed_port)
          .spawn()
          .expect("Failed to spawn sidecar");

        let app_handle_nav = app_handle.clone();
        let port_nav = fixed_port.to_string();

        // Wait for the server to be ready
        let url = format!("http://localhost:{}", port_nav);

        if wait_for_server(&url, 30) { // 30 second timeout
          if let Some(window) = app_handle_nav.get_webview_window("main") {
            // Give the server a little extra time before navigating
            std::thread::sleep(std::time::Duration::from_millis(500));
            // Navigate the webview to the running Phoenix server
            let _ = window.eval(&format!("window.location.replace('{}')", url));
          }
        } else {
            log::error!("Phoenix server failed to start within 30 seconds.");
            // TODO: Display a user-friendly error message in the webview
        }

        // Log output from the Phoenix sidecar
        while let Some(event) = rx.blocking_recv() {
          match event {
            CommandEvent::Stdout(line) => {
              log::info!("Phoenix: {}", String::from_utf8_lossy(&line));
            }
            CommandEvent::Stderr(line) => {
              log::info!("Phoenix stderr: {}", String::from_utf8_lossy(&line));
            }
            CommandEvent::Error(err) => {
              log::error!("Phoenix error: {}", err);
            }
            CommandEvent::Terminated(payload) => {
              log::warn!("Phoenix terminated: {:?}", payload);
              break;
            }
            _ => {}
          }
        }
      });

      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Step 6: Build and Run

Development

To run in development mode, you must start the Phoenix server manually in one terminal and the Tauri app in another.

Start Phoenix Server:

   mix phx.server

Start Tauri App:

   npx tauri dev

Production Build

To create the final, self-contained desktop application:

npx tauri build

The built app will be located in src-tauri/target/release/bundle/.

Key Takeaways

Feature	Phoenix Configuration	Tauri Configuration	Purpose
Localhost Binding	`ip: {127, 0, 0, 1}`	N/A	Security: Prevents external network access.
Fixed Port	`port: 4001`	Hardcoded in Rust backend	Reliability: Ensures Tauri knows where to connect.
Database Path	`System.get_env("DATABASE_PATH")`	Set via `dirs::data_local_dir()` in Rust	Persistence: Stores data in the user's application support directory.
LiveView Websockets	N/A	`csp`: `ws://localhost:*`	Connectivity: Allows LiveView to establish a WebSocket connection.
Bundling	`mix release`	`resources`, `externalBin`	Distribution: Packages the entire Phoenix release and launcher script.
Server Discovery	`server: true`	`wait_for_server` function in Rust	Reliability: Ensures the webview only loads once the Phoenix server is fully operational.

Troubleshooting

Phoenix won't start: Check the Tauri log file, usually located in the application support directory (e.g., ~/Library/Logs/com.todoapp.desktop/).
Database errors: Ensure the app has write permissions to the application support directory.
Port conflicts: Change the fixed port (4001) in both config/runtime.exs and src-tauri/src/lib.rs.
Asset issues: Ensure you run MIX_ENV=prod mix assets.deploy before building for production.

Conclusion

By combining the robust backend capabilities of Phoenix LiveView with the native desktop packaging of Tauri, you can deliver a high-performance, fully self-contained application that offers a superior user experience compared to traditional web apps. This setup leverages the best of both worlds: the productivity of Elixir/Phoenix and the native power of Rust/Tauri.

MCP (Model Context Protocol) for Dummies 🫣

David Teren — Mon, 10 Mar 2025 13:14:55 +0000

Understanding Model Context Protocol (MCP): A Clear Explanation

Over the past week, the topic of MCP (Model Context Protocol) blew up on X. It was interesting to note that many of the posts - while there were some good explanations - some were either vague or too technical, and some were erroneous or contained conflated concepts.

I came across a LinkedIn post by a person with quite a lot of followers and they compared MCP to being the Zapier killer, which makes it pretty obvious that there's a misconception around MCP and MCP seems complex or overwhelming to those who've not used it and do not understand it. MCP is not directly comparable to Zapier, as they serve different purposes (MCP is a protocol, not an automation platform).

In this blog post, I hope to clarify this and dispel these misconceptions by providing just a clear example in a basic way as to what exactly MCP is and what it's not. First off, it's important to note that MCP is not in itself an API in the traditional sense of a mechanism whereby you can offer or expose endpoints to a consumer (e.g. Google has an API for developers to read from Google Documents or other Google Services once authorized).

What is MCP?

MCP is like a universal translator between AI assistants and your everyday apps.
Without MCP: AI is limited to what it learned in training (like using an old encyclopedia).
With MCP: AI can access live information and perform actions in your apps.

How MCP Works (Key Components)

User: Asks questions or makes requests in plain language.
MCP Client: The chat interface where you type your request.
AI Model: Understands what you're asking for.
MCP Servers: Special connectors for each service (Gmail, Drive, etc.).
Your Apps: Where your actual data lives (emails, files, calendar).

Real-World Example

You ask: "Summarize the emails about Project X and schedule a team meeting."
AI understands your request and determines it needs access to emails and calendar.
MCP Servers fetch the relevant emails and check team availability.
AI creates a summary and schedules the meeting with proper participants.

Everyday Benefits

Search through files and emails using conversational language.
Get personalized recommendations based on your actual documents.
Schedule meetings with automatic time zone adjustments.
Draft emails with context from multiple sources.
Organize information across different apps with a single request.

Why MCP Matters

Transforms AI from "information only" to "gets things done."
Keeps your data secure (MCP only accesses what you permit).
Creates a standard way for any app to connect with AI.
Allows developers to build new connections for more services.

In closing

MCP is basically a bridge between a large language model that you speak with (or chat with) and it provides additional capabilities to that large language model, enabling access to external data and information that it previously did not have access to.

You could have an MCP server connected to Claude Desktop app, allowing it to have search functionality. You could also use MCP to enhance the model's interactions through access to external tools and data sources. Additionally, the MCP allows for read and write of files on your computer, so you could have it create projects, create files, or read files to provide additional context to the chat you're having with Claude.

MCP is part of a broader trend toward making AI assistants more capable through tool use and external connectivity, moving beyond the limitations of their training data.

Hopefully this clears it up and makes sense to you, and helps you understand what MCP is.

If there's enough interest, I will look at follow-ups to this. The next post could cover things like tool use and external resources and even just getting started with Claude Desktop or one of the code editors or code assistants (Cursor, Windsurf, or Cline) and explaining the difference between an MCP server and an MCP client.

Software Maintenance is Hard but there's Hope

David Teren — Wed, 13 Sep 2023 11:06:02 +0000

Photo by Joshua Sortino on Unsplash

For any non-trivial software application, keeping dependencies like libraries and frameworks up-to-date is an endless but essential task. Why is it so important and challenging?

What are dependencies?

Dependencies are reusable code packages that your application relies on to function. Some common examples are libraries for handling dates, connecting to databases, compiling CSS, etc. Almost all applications depend on external code written by others.

Why keep dependencies updated?

There are a few key reasons:

Security - Outdated dependencies often contain vulnerabilities that can put your application at risk of being hacked or compromised. Keeping them updated applies security patches.
Bug fixes - Newer versions of dependencies fix bugs and issues that could cause problems in your app. Staying updated applies those fixes.
New features - Upgrading gives you access to new features and improvements in the dependencies. It allows you to build on the latest capabilities.
Compatibility - Old dependencies may stop working with newer operating systems, browsers, or other software your app interacts with. Upgrading avoids compatibility problems.
Licensing - In some cases, old dependencies go out of support and lose their licensing. Upgrades keeps things compliant.
Best practices - Using outdated dependencies is seen as technical debt. Keeping current follows modern standards.

Why is it hard to stay updated?

While essential, dependency upgrades can be tedious and risky:

Time consuming - Researching updates, reviewing changes, testing impacts takes developer time.
Regression risk - New versions could introduce new bugs that break existing functionality. Extensive re-testing is required.
Compatibility issues - Updated dependencies may drop support for features your app relies on, requiring code changes.
Cascading updates - Upgrading one dependency may require upgrading others, leading to cascading changes.
Intricate coordination - Updates often need to be done incrementally across related packages while avoiding conflicts.

A Real-World Example

Here's a real-world example of the effort required to maintain dependencies in a Rails template application:

Date Range: June 29 - August 12 (6 weeks)

Total PRs: 113

Duplicate/Closed PRs: -19

Net New PRs: 94

Weekly Breakdown:

- Week 1: 16 -> 13
- Week 2: 23 -> 19
- Week 3: 18 -> 15
- Week 4: 26 -> 21

This shows the real ongoing effort required, even for a simple application, to stay on top of dependencies and security.

For large legacy applications with years of complex interdependencies, these challenges compound quickly. Keeping all dependencies fully updated can be a continuous uphill battle.

Automation and intelligence to the rescue

Thankfully there are now tools and services that help automate and guide developers through dependency upgrades:

Dependency monitoring - Services like Dependabot and Depfu watch your dependency manifests, detect outdated packages, and automatically raise pull requests to update them.
Security monitoring - Tools like Snyk scan dependencies and alert you to vulnerabilities, licensing issues, or maintenance status.
Impact analysis - Some services can simulate the impact of dependency upgrades by diffing API changes, detecting incompatible changes, and estimating migration effort. Tools like Infield provide some of these with others on their roadmap.
Step-by-step guidance - For complex upgrades, tools like Infield provide interactive step-by-step guidance tailored to your codebase to smooth the transition.

While still requiring planning and testing, these automation and intelligence tools greatly improve the dependency upgrade process. The days of completely manual upgrades are fading.

There's hope ahead

Software will always need diligent maintenance. But the pain of constant dependency upgrades is being relieved through automation. Developers now have an expanding toolbox to tame the beast. The future looks brighter!

Please comment and let me know if you’d like more content like this or similar.

Ruby on Rails 7 - High-performance frontend development with Esbuild, Rollup & Vite

David Teren — Mon, 10 Oct 2022 09:59:04 +0000

Ruby on Rails 7 - High-performance frontend development with Esbuild, Rollup & Vite

The title is a little misleading but not entirely. Keep reading; it will make sense.

Current options

There are four options when scaffolding a Rails 7 app:



 -j, [--javascript=JAVASCRIPT] # Choose JavaScript approach [options: importmap (default), webpack, esbuild, rollup]

importmap - lets you import the libs you need without transpiling or bundling.

The other three offer bundle and transpiling of JavaScript in Rails via jsbundling-rails

webpacker - Note that Webpacker has been retired, and it is not recommended for use unless you want the additional overhead and pain ;) That said, the folks over at ShakaCode are maintaining a fork named shakapacker
esbuild - A super fast pre-bundler built in Go. Ideal for development.
rollup - A decent bundler for production-optimized code.

In an ideal world, you’d want esbuild in your development environment for fast precompiling and page reloads as you change your views. For preparing your assets for production, rollup would be the right tool.

This makes Vite a good choice, as it does precisely this. It uses esbuild and rollup under the hood leveraging each one’s strengths.

Vite is what?

So then, what is Vite? (pronounced veet)
Is Vite just a wrapper around these pre-compilers and bundlers? Not exactly.

At the very basic level, developing using Vite is not that much different from using a static file server. However, Vite provides many enhancements over native ESM imports to support various features that are typically seen in bundler-based setups. - Features - Vite Guide

The Vite JS site promotes the following features, among others.

Instant Server Start - On-demand file serving over native ESM, no bundling required!
Lightning Fast HMR - Hot Module Replacement (HMR) that stays fast regardless of app size.
Rich Features - Out-of-the-box support for TypeScript, JSX, CSS and more.
Optimized Build - Pre-configured Rollup builds with multi-page and library mode support.

Why not just use esbuild?

While esbuild is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling applications are still work in progress - in particular, code-splitting and CSS handling. For the time being, Rollup is more mature and flexible in these regards. That said, we won't rule out the possibility of using esbuild for production builds when it stabilizes these features in the future. - Why Not Bundle with esbuild? -Vite Guide

Getting started

Setting up Vite in a Rails project is straightforward, thanks to the excellent Vite Ruby implementation.
For our setup, we will include TailwindCSS to test that it works.

To have Rails not default to importmaps and generate the app/javascript directory for us, we will install esbuild and then uninstall it.
Installing Vite will add all the dependencies it requires, including esbuild and rollup

Assuming you are running Ruby 3.1.2+ & Rails 7.0.4+

Create the new rails app with the following options



rails new my_vite_app -j esbuild -d postgresql



cd my_app

Run the following



yarn remove esbuild

And remove the following line from the package.json scripts section



"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"

Remove the following from the Gemfile



# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

Add the following to the Gemfile



gem "vite_rails"
gem "vite_ruby"

And run bundler



bundle

Run the Vite installer



bundle exec vite install

Install TailwindCSS and several dev plugins including vite-plugin-full-reload



yarn add tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp autoprefixer



yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-tailwindcss path vite-plugin-full-reload vite-plugin-stimulus-hmr

Replace the contents of vite.config.js with



import {defineConfig} from 'vite'
import FullReload from "vite-plugin-full-reload"
import RubyPlugin from 'vite-plugin-ruby'
import StimulusHMR from 'vite-plugin-stimulus-hmr'

export default defineConfig({
      clearScreen: false,
      plugins: [
          RubyPlugin(), 
          StimulusHMR(), 
          FullReload(["config/routes.rb", "app/views/**/*"], {delay: 300}),
      ],

    }
)

Create the tailwind.config.js



tailwind init

Replace the contents of tailwind.config.js with the following



/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/views/**/*.{html,html.erb,erb}',
    './app/javascript/components/**/*.js',
  ],
  theme: {
    fontFamily: {
      'sans': ["BlinkMacSystemFont", "Avenir Next", "Avenir",
        "Nimbus Sans L", "Roboto", "Noto Sans", "Segoe UI", "Arial", "Helvetica",
        "Helvetica Neue", "sans-serif"],
      'mono': ["Consolas", "Menlo", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace"]
    },
    extend: {
    },
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
  ],
}

Replace the contents of app/assets/stylesheets/application.css with the following



@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Create a file named application.css in app/javascript/entrypoints/



echo '@import "../../assets/stylesheets/application.css";' > app/javascript/entrypoints/application.css

Create a file named postcss.config.js in the project root and add the following



module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

In app/views/layouts/application.html.erb, change the _tags to the following.



<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= vite_client_tag %>
<%= vite_stylesheet_tag 'application', data: { "turbo-track": "reload" } %>
<%= vite_javascript_tag 'application' %>

Now we'll add a home page to test our setup



rails g controller Home index

And make this the root path by adding the following to the config/routes.rb.



root 'home#index'

Replace the contents of app/views/home/index.html.erb this the following



<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <div class="relative mx-32 bg-white px-6 pt-10 pb-8 shadow-xl sm:rounded-lg sm:px-10">
    <div class="mx-auto">
      <img src="https://vite-ruby.netlify.app/logo.svg" class="h-32" />
      <h1 class="mt-6 mb-12 text-center font-sans text-5xl">Vite Rails</h1>
      <section class="justify-center-center my-0 mx-auto flex flex-wrap justify-between px-8 pt-0 pb-16 leading-6 tracking-normal">
        <a class="max-h-32 max-w-[23rem] flex-shrink flex-grow-0 cursor-pointer rounded-lg bg-gray-200 py-6 px-8 text-sm font-medium leading-6 tracking-normal shadow-xl" href="/">
          <h2 class="mx-0 mt-0 mb-3 cursor-pointer text-xl font-semibold leading-6 tracking-tight">🔥 Fast Server Start</h2>
          <p class="m-0 cursor-pointer text-sm font-medium leading-6 tracking-normal">Unlike Webpacker, files are processed on demand!</p>
        </a>

        <a class="my-6 max-h-32 max-w-[23rem] flex-shrink flex-grow-0 cursor-pointer rounded-lg bg-gray-100 bg-transparent py-6 px-8 text-sm font-medium leading-6 tracking-normal shadow-xl" href="/">
          <h2 class="mx-0 mt-0 mb-3 cursor-pointer text-xl font-semibold leading-6 tracking-tight">⚡️ Instant Changes</h2>
          <p class="m-0 cursor-pointer text-sm font-medium leading-6 tracking-normal">Fast updates thanks to HMR. Goodbye full-page reloads!</p>
        </a>

        <a class="max-h-32 max-w-[23rem] flex-shrink flex-grow-0 cursor-pointer rounded-lg bg-gray-200 bg-transparent py-6 px-8 text-sm font-medium leading-6 tracking-normal shadow-xl" href="/">
          <h2 class="mx-0 mt-0 mb-3 cursor-pointer text-xl font-semibold leading-6 tracking-tight">🚀 Zero-Config Deploys</h2>
          <p class="m-0 cursor-pointer text-sm font-medium leading-6 tracking-normal">Integrates with Rake asset management tasks.</p>
        </a>
      </section>
    </div>
  </div>
</div>

Replace the contents of Procfile.dev with



web: bin/rails server -p 3000
vite: bin/vite dev --clobber

Create the database and run migrations



rails db:create db:migrate

Start the web and vite processes



./bin/dev

Go to 127.0.0.1:3000

You should see this

Try editing some text or the Tailwind utility classes and watch the browser view update immediately with your changes when you save.

Conclusion

Vite does what it says on the box.

For more on Rails integration, head over to the docs.

If you want a repo with an example of the above, that comes with some sensible semantic HTML styling out of the box. Check out SimpleTails

Getting started with Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

David Teren — Wed, 09 Jun 2021 01:51:54 +0000

This is my first post here and we are going to look at getting TailwindCSS with the awesome JIT (just in time) compilation setup in Rails 6.1 app via Webpacker and using PostCSS 8.0

Create a new Rails app

rails new tails_on_rails

In your Gemfile update webpacker

# Replace
gem 'webpacker', '~> 5.0'

# With
gem 'webpacker', '~> 5.4.0'

Run bundler

bundle

Remove the default webpacker

yarn remove @rails/webpacker

Add the required version of Webpacker and other dependancies

yarn add @rails/webpacker@5.4.0 @fullhuman/postcss-purgecss@^4.0.3 postcss@^8.2.10 postcss-loader@^4.0.3 sass@^1.32.7 autoprefixer@^10.2.6

Your package.json should look something like this.

{
  "name": "tails-on-rails",
  "private": true,
  "dependencies": {
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.0",
     "postcss": "^8.2.10",
     "postcss-loader": "^4.0.3",
     "sass": "^1.32.7",
     "turbolinks": "^5.2.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"
    },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
 }
}

Install TailwindsCSS and the official plugins.

yarn add tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/typography @tailwindcss/line-clamp

Your package.json should look something like this.

{
  "name": "tails-on-rails",
  "private": true,
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.0",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/forms": "^0.3.3",
    "@tailwindcss/typography": "^0.4.1",
    "postcss": "^8.2.10",
    "postcss-loader": "^4.0.3",
    "sass": "^1.32.7",
    "tailwindcss": "^2.1.4",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

Create the custom CSS file.

mkdir app/javascript/stylesheets && touch app/javascript/stylesheets/application.scss

In app/javascript/stylesheets/application.scss add the following.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

While we are on here we will add a custom component to validate that the @apply directive works.

Add the following to app/javascript/stylesheets/application.scss

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded; 
}

Your application.scss should look something like this.

@import "tailwindcss/base";

@import "tailwindcss/components";

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded; 
}

@import "tailwindcss/utilities";

In app/javascript/packs/application.js add the following;

import "stylesheets/application.scss"

Your application.js should look something like this

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "stylesheets/application.scss"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

In the app root file postcss.config.js require TailwindCSS

require('tailwindcss'),

Your postcss.config.js should look something like this.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

Add the following to your app/views/layouts/application.html.erb

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Your application.html.erb should look something like this.

<!DOCTYPE html>
<html>
  <head>
    <title>TailsOnRails</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Scaffold the full TailwindCSS tailwind.config.js

npx tailwindcss init --full

The above will generate a large configurable TailwindCSS file.

Add the TailwindCSS plug-ins to tailwind.config.js (right at the bottom of the file in the plugins: [] node.

plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('@tailwindcss/line-clamp'),
  require('@tailwindcss/aspect-ratio'),
]

Add the Inter font to the fontFamily node in tailwind.config.js

fontFamily: {
  sans: [
    'Inter var',
       ...

Enable JIT - just in time compilation at the top of the tailwind.config.js file

module.exports = {
  mode: 'jit',
  purge: [],

Configure the purge option in the tailwind.config.js file

purge: {
enabled: ["production", "staging"].includes(process.env.NODE_ENV),
content: [
  './app/views/**/*.html.erb',
  './app/helpers/**/*.rb',
  './app/javascript/**/*.js',
],
},

Your tailwind.config.js should look something like this.

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: {
    enabled: ["production", "staging"].includes(process.env.NODE_ENV),
    content: [
      './**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      // content removed ....

    flexGrow: {
      0: '0',
      DEFAULT: '1',
    },
    flexShrink: {
      0: '0',
      DEFAULT: '1',
    },
    fontFamily: {
      sans: [
        'Inter var',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        '"Noto Sans"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: [
        'ui-monospace',
        'SFMono-Regular',
        'Menlo',

      // content removed ....

    zIndex: ['responsive', 'focus-within', 'focus'],
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),],
}

In the babel.config.js file set the following

...
'@babel/plugin-transform-runtime',
{
  helpers: false,
  regenerator: true,
  corejs: false
}

And add the following to babel.config.js

['@babel/plugin-proposal-private-methods', { loose: true }]

Your babel.config.js should look something like this

module.exports = function (api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
      ['@babel/plugin-proposal-private-methods', { loose: true }]
    ].filter(Boolean)
  }
}

For Webpacker to work with this version of Postcss we need to tell it to use the loader.
In config/webpack/environment.js add the following. Just insert it between the two existing lines.

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function (element) {
return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')

function hotfixPostcssLoaderConfig (subloader) {
  const subloaderName = subloader.loader
  if (subloaderName === 'postcss-loader') {
    subloader.options.postcssOptions = subloader.options.config
    delete subloader.options.config
  }
}

environment.loaders.keys().forEach(loaderName => {
  const loader = environment.loaders.get(loaderName)
  loader.use.forEach(hotfixPostcssLoaderConfig)
})

Your environment.js should look something like this.

const {environment} = require('@rails/webpacker')

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function (element) {
return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')

function hotfixPostcssLoaderConfig(subloader) {
  const subloaderName = subloader.loader
  if (subloaderName === 'postcss-loader') {
    subloader.options.postcssOptions = subloader.options.config
    delete subloader.options.config
  }
}

environment.loaders.keys().forEach(loaderName => {
const loader = environment.loaders.get(loaderName)
loader.use.forEach(hotfixPostcssLoaderConfig)
})

module.exports = environment

Let's test this setup

rails g controller Home index

Add the following to app/views/home/index.html.erb

<div class="font-sans bg-white h-screen flex flex-col w-full">
  <div class="h-screen bg-gradient-to-r from-green-400 to-blue-500">
    <div class="px-4 py-48">
     <div class="relative w-full text-center">
       <h1 class="animate-pulse font-bold text-gray-200 text-2xl mb-6">
        Your TailwindCSS setup is working if this pulses...
       </h1>
    </div>
   </div>
  </div>
</div>

Add the root path to point at the above /home/index in config/routes.rb

root 'home#index'

In one terminal run bin/webpack-dev-server
And in another run rails s

⚠️ Do not try running webpack-dev-server without the bin/ prefix as it's likely it will fail to compile.

You should see this

To test the @apply directive replace the following from app/views/home/index.html.erb with class="pulsing-text"

class="animate-pulse font-bold text-gray-200 text-2xl mb-6"

and in app/javascript/stylesheets/application.scss add the following

.pulsing-text {
@apply animate-pulse font-bold text-gray-200 text-2xl mb-6;
}

Your applications.scss should look like something like this.

@import "tailwindcss/base";

@import "tailwindcss/components";

.pulsing-text {
@apply animate-pulse font-bold text-gray-200 text-2xl mb-6;
}

@import "tailwindcss/utilities";

When you refresh you home page in the browser you should still see this.

GitHub Repo

Forem: David Teren

The 15-Year Naming Bug: How Rails Finally Got `polynomially_longer` Right

TL;DR

It Started With a SolidQueue Mystery

The Discovery (September 2023)

Exponential vs Polynomial – The Numbers

Where It All Began (2008)

People Noticed – Years Earlier

Why This Actually Hurt Production

The Fix – Rails 7.1

When Polynomial Backoff Is Perfect

Custom Strategies (when you need something else)

Takeaways

Building a Phoenix LiveView Desktop App with Tauri: A Step-by-Step Guide

Prerequisites

Step 1: Create Your Phoenix Project

Step 2: Configure Phoenix for Desktop Deployment

Update config/runtime.exs

Update mix.exs

Step 3: Create the Phoenix Launcher Script

Step 4: Initialize and Configure Tauri

Initialize Tauri

Configure src-tauri/tauri.conf.json

Step 5: Update Tauri Backend (Rust)

Update src-tauri/Cargo.toml

Replace src-tauri/src/lib.rs

Step 6: Build and Run

Development

Production Build

Key Takeaways

Troubleshooting

Conclusion

MCP (Model Context Protocol) for Dummies 🫣

Understanding Model Context Protocol (MCP): A Clear Explanation

What is MCP?

How MCP Works (Key Components)

Real-World Example

Everyday Benefits

Why MCP Matters

In closing

Software Maintenance is Hard but there's Hope

What are dependencies?

Why keep dependencies updated?

Why is it hard to stay updated?

A Real-World Example

Automation and intelligence to the rescue

There's hope ahead

Ruby on Rails 7 - High-performance frontend development with Esbuild, Rollup & Vite

Ruby on Rails 7 - High-performance frontend development with Esbuild, Rollup & Vite

Current options

Vite is what?

Why not just use esbuild?

Getting started

Conclusion

Getting started with Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

Create a new Rails app

Update `config/runtime.exs`

Update `mix.exs`

Configure `src-tauri/tauri.conf.json`

Update `src-tauri/Cargo.toml`

Replace `src-tauri/src/lib.rs`