The Experiment

What I Built

The 10 Stacks Tested

• Rails + Slim + Bootstrap
• Rails + Slim + Tailwind 
• Rails + ERB + Bootstrap
• Rails + ERB + Tailwind
• React + JavaScript + Bootstrap
• React + JavaScript + Tailwind
• React + JavaScript + Styled Components
• React + TypeScript + Bootstrap
• React + TypeScript + Tailwind
• React + TypeScript + Styled Components

How I Measured

The Results

Key Findings

1. Rails vs React: A Consistent 2x Difference

• Worst Rails (ERB + Tailwind): 4,313 tokens
• Best React (JS + Bootstrap): 6,545 tokens

2. Every Layer Matters

• Slim → ERB: +20-32% more tokens
• Bootstrap → Tailwind: +8-19% more tokens
• Both together: +43% more tokens

• JavaScript → TypeScript: +8-11% more tokens
• Bootstrap → Styled Components: +21-22% more tokens
• All worst choices: +185% more tokens

3. Styled Components Consistently Worst

4. TypeScript's Cost is Modest

Why This Matters

• Your business logic
• Related files in the codebase 
• Understanding the full context of your feature

In Practical Terms

Real-World Validation

• Chrome version (React + TypeScript): 32,000 tokens of source code
• Firefox version (Vanilla JavaScript): 15,700 tokens of source code

What Creates The Difference?

Rails + Slim + Bootstrap (15 lines, ~120 tokens)

.card.mb-4
  .card-body
    h5.card-title = task.title
    p.card-text = task.description
    - if task.completed?
      span.badge.bg-success Completed
    - else
      span.badge.bg-warning In Progress
    .mt-3
      = link_to 'Edit', edit_task_path(task), class: 'btn btn-primary'
lang-slim

React + TypeScript + Styled Components (80+ lines, ~650 tokens)

import React from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

interface Task {
  id: string;
  title: string;
  description: string;
  completed: boolean;
}

interface TaskCardProps {
  task: Task;
}

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

const Title = styled.h5`
  font-size: 20px;
  margin-bottom: 8px;
`;

const Description = styled.p`
  color: #666;
  margin-bottom: 16px;
`;

const Badge = styled.span<{ variant: 'success' | 'warning' }>`
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  background: ${props => props.variant === 'success' ? '#28a745' : '#ffc107'};
  color: white;
`;

const Button = styled.button`
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;

export const TaskCard: React.FC<TaskCardProps> = ({ task }) => {
  const navigate = useNavigate();
  
  return (
    <Card>
      <Title>{task.title}</Title>
      <Description>{task.description}</Description>
      <Badge variant={task.completed ? 'success' : 'warning'}>
        {task.completed ? 'Completed' : 'In Progress'}
      </Badge>
      <Button onClick={() => navigate(`/tasks/${task.id}/edit`)}>
        Edit
      </Button>
    </Card>
  );
};
lang-typescript

• Import statements (4 lines)
• Type definitions (10 lines)
• Styled component definitions (40 lines)
• Component boilerplate (10 lines)

Optimizing Rails Blueprint

1. Slim over ERB

2. Bootstrap over Tailwind

3. MVC Architecture

• State lives in the database, not in client-side hooks
• Styling lives in external CSS, not embedded in components
• Logic lives in controllers and models, not scattered across components

When React Still Makes Sense

• Highly interactive UIs (Figma, Google Docs, real-time editors)
• Complex client-side state that can't live server-side
• Applications that need to feel like native desktop apps

Recommendations

If You're Starting a New Project

• Consider Rails + Slim + Bootstrap for typical CRUD applications
• The 2-3x context efficiency will compound over the life of your project

If You're Already in React

• Prefer JavaScript over TypeScript if context budget is tight (though TS only costs 9%)
• Use Bootstrap over Styled Components (saves 21%)
• Avoid Tailwind's utility-class verbosity when possible

If You're Already in Rails

• Switch from ERB to Slim (saves 20-32%)
• Use Bootstrap over Tailwind (saves 8-19%)

Try Rails Blueprint

• Slim templates throughout
• Bootstrap for semantic styling
• Rails conventions over configuration
• Command pattern for business logic
• Ready to deploy in 15 minutes

Appendix: Methodology

Feature Specification

• Task model with title, description, status, priority, due_date
• Full CRUD: index, show, new, edit, destroy
• Filtering by status and priority
• Form validation and error handling
• Styled with consistent design system

Measurement

• Counted all application code files
• Excluded: tests, migrations, config, package.json, node_modules
• Token estimation: character count ÷ 4 (industry standard)
• Measured using Claude Code generation

Code Available

Discussion