Wie man Anwendungen schnell mit Rails und HTMX entwickelt

In der heutigen schnelllebigen Softwareentwicklungswelt ist es entscheidend, Anwendungen effizient und schnell zu erstellen. Ruby on Rails (Rails) ist ein beliebtes Framework, das Entwicklern hilft, Webanwendungen schnell zu erstellen. In Kombination mit HTMX, einer leistungsstarken JavaScript-Bibliothek, können Sie interaktive Benutzeroberflächen erstellen, ohne auf komplexe Frontend-Frameworks zurückgreifen zu müssen. In diesem Artikel erfahren Sie, wie Sie Rails und HTMX nutzen können, um Ihre Entwicklungszeit erheblich zu verkürzen.

Was ist Ruby on Rails?

Ruby on Rails ist ein Open-Source-Webanwendungs-Framework, das in der Programmiersprache Ruby geschrieben ist. Es folgt dem MVC-Architekturmuster (Model-View-Controller) und bietet eine strukturierte Möglichkeit, Webanwendungen zu entwickeln. Rails ist bekannt für seine Konventionen über Konfiguration, was bedeutet, dass es viele Entscheidungen für den Entwickler trifft, um die Entwicklungszeit zu verkürzen.

Was ist HTMX?

HTMX ist eine JavaScript-Bibliothek, die es Entwicklern ermöglicht, HTML-Elemente dynamisch zu aktualisieren, ohne die gesamte Seite neu laden zu müssen. Mit HTMX können Sie AJAX-Anfragen einfach durchführen, indem Sie HTML-Attribute verwenden. Dies macht es einfach, interaktive Benutzeroberflächen zu erstellen, ohne auf komplexe JavaScript-Frameworks wie React oder Vue.js zurückgreifen zu müssen.

Vorteile der Kombination von Rails und HTMX

Schnelle Entwicklung: Rails bietet eine schnelle Anwendungsentwicklung, während HTMX die Interaktivität erhöht.
Weniger Komplexität: Sie müssen sich nicht mit komplexen Frontend-Frameworks auseinandersetzen.
Einfachheit: HTMX ermöglicht es Ihnen, mit einfachen HTML-Attributen AJAX-Anfragen zu erstellen.
Geringerer Overhead: Sie können die Vorteile von Rails nutzen, ohne die gesamte Anwendung in JavaScript zu schreiben.

Ein einfaches Beispiel: Todo-Anwendung

Um zu demonstrieren, wie man Rails und HTMX zusammen verwendet, erstellen wir eine einfache Todo-Anwendung. Diese Anwendung ermöglicht es Benutzern, Aufgaben hinzuzufügen und zu löschen, ohne die Seite neu zu laden.

Schritt 1: Ein neues Rails-Projekt erstellen

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues Rails-Projekt zu erstellen:

rails new todo_app
cd todo_app

Schritt 2: Todo-Modell erstellen

Erstellen Sie ein Modell für die Todo-Elemente:

rails generate model Todo title:string
rails db:migrate

Schritt 3: Todo-Controller erstellen

Erstellen Sie einen Controller für die Todo-Elemente:

rails generate controller Todos index create destroy

Öffnen Sie die Datei app/controllers/todos_controller.rb und fügen Sie die folgenden Methoden hinzu:

class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end

  def create
    @todo = Todo.new(todo_params)
    if @todo.save
      render partial: 'todo', locals: { todo: @todo }
    else
      render json: { error: @todo.errors.full_messages }, status: :unprocessable_entity
    end
  end

  def destroy
    @todo = Todo.find(params[:id])
    @todo.destroy
    head :no_content
  end

  private

  def todo_params
    params.require(:todo).permit(:title)
  end
end

Schritt 4: Views erstellen

Erstellen Sie die Ansicht für die Todo-Liste. Öffnen Sie die Datei app/views/todos/index.html.erb und fügen Sie den folgenden Code hinzu:

Todo-Liste


  <%= render @todos %>

Erstellen Sie auch die Partial-Ansicht für ein einzelnes Todo-Element in app/views/todos/_todo.html.erb:


  <%= todo.title %>

Schritt 5: HTMX integrieren

Fügen Sie HTMX zu Ihrer Anwendung hinzu. Sie können es über ein CDN in Ihrer Layout-Datei einfügen. Öffnen Sie app/views/layouts/application.html.erb und fügen Sie den folgenden Code im <head>-Tag hinzu:

Jetzt müssen wir die HTMX-Attribute zu unserem Formular und den Lösch-Buttons hinzufügen. Aktualisieren Sie die app/views/todos/index.html.erb wie folgt:

Für den Lösch-Button fügen Sie das HTMX-Attribut hinzu:

Schritt 6: JavaScript für das Formular

Um das Formular zu verarbeiten, erstellen Sie eine JavaScript-Datei. Erstellen Sie die Datei app/javascript/controllers/form_controller.js und fügen Sie den folgenden Code hinzu:

import { Controller } from "stimulus";

export default class extends Controller {
  submit(event) {
    event.preventDefault();
    const formData = new FormData(this.element);
    const action = this.element.action;

    fetch(action, {
      method: "POST",
      body: formData,
      headers: {
        "X-Requested-With": "XMLHttpRequest"
      }
    })
    .then(response => response.text())
    .then(html => {
      const todosContainer = document.getElementById("todos");
      todosContainer.insertAdjacentHTML("beforeend", html);
      this.element.reset();
    })
    .catch(error => console.error("Error:", error));
  }
}

Fazit

Die Kombination von Ruby on Rails und HTMX ermöglicht es Entwicklern, schnell und effizient interaktive Webanwendungen zu erstellen. Mit Rails können Sie die Backend-Logik schnell implementieren, während HTMX Ihnen hilft, die Benutzeroberfläche dynamisch zu gestalten, ohne sich mit komplexen Frontend-Frameworks auseinandersetzen zu müssen. In diesem Artikel haben wir eine einfache Todo-Anwendung erstellt, die die Stärken beider Technologien demonstriert.

Wenn Sie mehr über Rails und HTMX erfahren möchten, gibt es viele Ressourcen und Dokumentationen, die Ihnen helfen können, Ihre Fähigkeiten weiterzuentwickeln. Viel Spaß beim Programmieren!