Rails Full-Stack Entwicklung mit modernem JavaScript

Modern Rails kann mit oder ohne Frontend-Framework verwendet werden.

Traditional Rails Views

Klassischer Ansatz: ERB-Templates mit minimal JavaScript.

Geeignet für: Server-rendered HTML, einfache Interaktivität

Rails mit Hotwire

Hotwire (Turbo + Stimulus) ist Basecamp's Approach für interaktive Features ohne Heavy JS Framework.

Turbo

Ersetzt nur Teile der Seite statt vollständiger Page Reload:

<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>

Stimulus

Lightweight JavaScript zum Verhalten hinzufügen:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.textContent = "Hello from Stimulus!"
  }
}

Rails mit React

Alternative: React für komplexe UIs.

Setup:

rails new app --webpack=react

Rendere React-Components in Rails-Views:

<%= react_component('PostList', { posts: @posts }) %>

Rails mit Vue

Leichtere Alternative zu React:

rails new app --webpack=vue

Was man wählt?

Szenario	Wahl
Einfache App, schnell	Traditional Rails Views
Interaktiv, aber nicht komplex	Hotwire (Turbo + Stimulus)
Komplexe UI, viel JavaScript	React oder Vue

Integration: Backend und Frontend

Der key zum Full-Stack:

Backend API building (JSON)
Frontend fragt API an
Backend speichert und antwortet
Frontend updated UI

WebSockets für Real-Time

ActionCable für real-time Updates:

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_for @room
  end
  
  def send_message(data)
    ChatMessage.create!(data)
  end
end

Clients subscriben und empfangen Updates sofort.

Best Practices

API-first denken: Auch mit Views
Trennung: Backend-Logik in Models, nicht Controllers
Testing: Beide Backend und Frontend
Deployment: Separate Deploy für Front/Back optional

Häufig gestellte Fragen

Sollte ich Hotwire oder React lernen?

Hotwire zum Lernen einfacher. React ist standard in der Industrie.

Kann ich beides (Hotwire + React) nutzen?

Ja, aber kompliziert. Normalerweise wählt man eine.