Einführung in Rendr

isomorphe JavaScript -Frameworks erlangen an Popularität und ermöglicht die Erstellung von JavaScript -Anwendungen, die sowohl auf dem Client als auch auf dem Server nahtlos ausgeführt werden. Dieser Ansatz "einmal schreiben, irgendwo ausführen" nutzt die Server-Seite-Rendering für schnellere Anfangsseitenladungen und eine verbesserte Interaktivität der clientseitigen. In diesem Artikel werden Rendr, eine Open-Source-Bibliothek von Airbnb, die ursprünglich für ihre mobilen Apps von Backbone.js und Node.js entwickelt wurde.

Schlüsselmerkmale von RendR:

• isomorphes Rendering: RendR Renders Backbone.js -Anwendungen sowohl auf dem Client als auch auf dem Server mit einer gemeinsam genutzten Codebasis. Serverseitiges Rendering liefert Inhalte vor der Client-Seite JavaScript-Ausführung, was zu einer schnelleren Benutzererfahrung führt.
• node.js und grunzintegration: Benötigt einen Node.js -Server und verwendet Grunt, einen Taskläufer, zur Automatisierung von Aufgaben wie Minifikation und Test.
• Modulare Struktur: RendR -Anwendungen enthalten in der Regel Komponenten wie Homepage, Benutzeransicht, Benutzerlistenansicht, Repo -Ansicht und Repos -Listenansicht, die jeweils ihre eigenen zugehörigen Dateien für Modelle, Ansichten, Controller usw. haben.
• Backbone.js Foundation: basiert auf Backbone.js, nutzt seine Modelle, Ansichten, Sammlungen und Router für Anwendungsstruktur und Datenverwaltung.

Verständnis RendR -Funktionalität:

Das Kernprinzip von

RendR besteht darin, die Wiedergabe von Backbone.js -Anwendungen sowohl auf dem Server als auch auf dem Client mit identischer Code zu aktivieren. Diese Vorrenderung des Servers beschleunigt die Ladezeiten der Anfangsseiten erheblich. Sobald das clientseitige Framework lädt, verwaltet Backbone.js nachfolgende Routing. RendR ist kein vollwertiger Rahmen. Das Design konzentriert sich auf:

• Umgebungs-agnostische Anwendungslogik (minimieren if (server) { ... } else { ... } Blöcke).
• nahtlose Rastful -API -Interaktion.
• Abstraktion der Bibliothekskomplexitäten.
• serverseitige DOM-Vermeidung.

Eine einfache RendR -Anwendung (Beispiel für GitHub -Browser):

Der Artikel verwendet eine Beispiel -Github -Browser -Anwendung, um die Funktionalität von RendR zu veranschaulichen. Diese Anwendung, die im Beispiel -Repository von RendR verfügbar ist, umfasst:

• Repos -Listenansicht: Zeigt eine Liste von Github -Repositories an.
• Repo -Ansicht: zeigt detaillierte Informationen für ein ausgewähltes Repository an.
• Benutzerlistenansicht: listet GitHub -Benutzer auf.
• Benutzeransicht: stellt ein Benutzerprofil und ihre Repositorys vor.

Einrichten einer RendR -Anwendung:

1. node.js und grunzeninstallation: node.js von der offiziellen Website installieren und dann grunzen global mit npm install -g grunt-cli.
installieren
2. Projektabhängigkeiten: Navigieren Sie zu Ihrem Projektverzeichnis und führen Sie npm install aus, um RendR und seine Abhängigkeiten zu installieren.
3. Starten Sie den Server: Führen Sie grunt server aus, um den Entwicklungsserver zu starten. Die Anwendung ist unter localhost:3030.
zugänglich

Anwendungsstruktur:

Die Struktur der Probeanwendung spiegelt ein Standard -Backbone.js -Antrag mit Konventionen wider, die von Express und Rails entlehnt wurden. Es enthält Ordner für Modelle, Ansichten, Controller, Sammlungen und Vorlagen. Jeder Ordner enthält Dateien für die Ansichten der Anwendung (Homepage, Benutzeransicht usw.).

Schlüsselkomponenten:

• routes.js: definiert die Routing -Konfiguration, die URLs zu Controllern und Aktionen zuordnen (z. B. match('', 'home#index')).
• index.js oder server.js: initialisiert Konfigurationen (z. B. dataAdapterConfig, apiPath), startet den Server und legt den Datenabrufmechanismus fest.
• Ansichten: Backbone.js -Ansichten erweitern und das Rendering verarbeiten. Das Beispiel zeigt eine users_index.js Ansicht.
• Vorlagen: Definieren Sie die HTML -Struktur mit einer Template -Engine (z. B. Lenker). Das Beispiel zeigt eine users/index.hbs Vorlage.
• Controller: Routing -Logik und Daten abrufen. Das Beispiel zeigt eine users_controller.js mit einer index -Methode.
• Modelle: Backbone.js -Modelle für die Datenrepräsentation und das Abnehmen aus der Github -API (z. B. user.js).
• Sammlungen: Backbone.js -Sammlungen erweitern, um Modelle Sätze zu verwalten (z. B. users.js).

Schlussfolgerung:

rendR bietet eine leistungsstarke Möglichkeit, isomorphe JavaScript -Anwendungen zu erstellen. Während dieser Artikel die Grundlagen abdeckt, wird die weitere Untersuchung seines Github -Repositorys und fortgeschrittenen Beispiele sein volles Potenzial ergeben. Die Kombination aus serverseitigem Rendering und clientseitiger Interaktivität bietet erhebliche Leistung und SEO-Vorteile.

(Hinweis: Image -URLs wurden in der ursprünglichen Eingabe nicht enthalten und werden in der tatsächlichen Markdown -Datei vorhanden und korrekt verknüpft. Ich habe Platzhalter -Bildreferenzen in der Ausgabe beibehalten.

Das obige ist der detaillierte Inhalt vonEinführung in Rendr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!