Moderne Webanwendungen mit Node.js und Express.js

Single Page Application mit Jade

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Kür einer dynamischen Webanwendung ist die Implementierung einer Single Page Application mit Konzepten wie beispielsweise Jade im Browser statt auf dem Server.

Transkript

Eine REST API eignet sich hervorragend, um das Prinzip einer Single Page Application umzusetzen. Was sich hinter der Single Page Application verbirgt, und wie Sie statt mit bekannten Frameworks wie Angular auch das Ganze mit Jade umsetzen können, zeige ich Ihnen nun anhand von jade-query innerhalb dieses Videos. Um mit jade-query arbeiten zu können, als auch mit jade-browser, benötige ich zunächst die Abhängigkeiten für Web-Browser. Diese erhalte ich nicht über den Node Package Manager, sondern mithilfe eines Tools, das sich Bower nennt. Aus diesem Grund installiere ich nun global Bower. Bower hilft mir dabei, Abhängigkeiten wie Bibliotheken à la jQuery oder in diesem Fall jade-query herunterzuladen und in meinem Projekt versioniert zu verwalten. Die Prinzipien hinter Bower funktionieren ähnlich wie die Prinzipien vom Node Package Manager. Wenn ich nun die Bower-Kommandozeile aufrufe mit dem "init"-Befehl, werde ich über mein Projekt befragt, ähnlich wie es bei Node Package Manager der Fall ist. Ich bestätige nun alle Eingaben, ganz einfach, und erhalte innerhalb meines Projekts eine "bower.json" Datei. Als Nächstes möchte ich die Abhängigkeiten herunterladen. Die Konventionen sind auch hier die gleichen wie beim Node Package Manager, "bower install jade jade-query". Mit "--save" spezifiziere ich, dass ich diese Abhängigkeiten innerhalb der bower.json aufheben möchte. Bower macht es mir einfach, nachzuvollziehen, welche Abhängigkeiten welche Bibliotheken haben. In dem Fall ist jade-query also abhängig von Bootstrap, Jade und jQuery. Theoretisch müsste ich also alle drei Bibliotheken in meine Website einbinden. Im aktuellen Fall nutze ich ohnehin bereits Bootstrap und jQuery, also muss nun lediglich Jade eingebunden werden, als auch jade-query. In meiner bower.json Datei sind nun die beiden Abhängigkeiten hinterlegt worden. Sollte jemand anderes das Projekt später nutzen wollen, kann er über den Befehl "bower install" automatisch alle Abhängigkeiten innerhalb des Ordners "bower_components" herunterladen. Im Umkehrschluss bedeutet das auch, dass der Ordner "bower_components" ähnlich wie der Ordner "node_modules" nicht der Versionskontrolle unterliegt. Da ich nun einige JavaScript-Dateien benötige, in dem Fall die "jade-query.min.js", als auch im Ordner "jade" die Datei "jade.js", wähle ich diese nun aus, mit Strg+C kopiere ich sie, und füge sie in meinen "public"-Ordner unter "js" ein. Die Datei "jade" benenne ich nun kurz um, um Verwirrungen später zu vermeiden. Als Nächstes muss ich die JavaScript-Dateien einbinden. Dafür eignet sich idealerweise die "layout.jade" Datei. Hier werden zum Schluss alle JavaScript-Referenzen angegeben. Bevor also nun das Hauptscript ausgeführt wird, binde ich nun die beiden anderen Bibliotheken ein. Um schnell einen Prototyp zu produzieren, muss ich mir hier etwas auf die Beine helfen. Ich definiere einen zusätzlichen Block mit der Bezeichnung "scripts". Diesen Block verwende ich nun innerhalb der "posts.jade"-Datei am Ende. Ich definiere hier Inhalt in Form eines script blocks. Was ich nun tatsächlich machen möchte, ist die REST API anzufragen, alle Posts herunterzuladen, und statt wie bisher mit Jade üblich, statisch in meine Seite zu laden, dynamisch in meine Seite zu laden. Hierfür nutze ich also nun jQuery, und die Möglichkeit, eine REST-Anfrage zu stellen. Ich rufe den Endpunkt "api/posts" ab, und nehme die Daten entgegen. Als Nächstes muss ich den aktuell statischen Jade-Part so verändern, dass jade-query damit arbeiten kann. Dafür sind prinzipiell nur wenige Änderungen notwendig, da auf dieselben Konzepte zurückgegriffen wird. Ich definiere nun ein Element mit der Bezeichnung "x-jade" und der ID "post". Alles, was hinter dem Punkt steht und nun eingerückt wird, ist quasi Inhalt dieses Elements. Aus diesem Grund wähle ich nun diesen Block aus, und rücke ihn ein. Automatisch wird er grün gefärbt. Aktuell interpoliert allerdings immer noch Jade den Inhalt dieses Texts. Daher rücke ich nun ein, und spezifiziere auf eine andere Art von Jade-Konvention, dass ich eine Variable abrufen möchte. Das mache ich analog für alle anderen Einträge. Starte ich nun den Server, so werde ich zunächst einmal nur feststellen, dass aktuell alle Posts fehlen, die dynamisch hineingeladen werden sollten. Zum aktuellen Zeitpunkt lade ich zwar nach Starten der Seite die Daten der Schnittstelle herunter, setze sie allerdings nicht mithilfe von jade-query in den Block oben ein. Mit der Funktion "jq.reapply" auf das Element mit der ID "post" übergebe ich nun als Referenzpost das, was über "data" heruntergeladen wurde. Ich starte den Server kurz neu, und ein einfacher Refresh sorgt dafür, dass nun dynamisch die Inhalte von der REST API Schnittstelle in meine Seite hineingeladen werden. Ähnlich müsste man nun vorgehen, um auch Dinge wie das Hinzufügen eines Kommentars nicht länger über eine separate Seite zu schicken, sondern tatsächlich über die Schnittstelle. In den letzten Minuten ist es mir mit Ihnen also gelungen, die Kommunikation via REST Schnittstelle herzustellen. So konnte ich eine relativ einfache single-page application entwickeln, und es ist theoretisch kein Seitenwechsel mehr notwendig, wenn ich alle Teile der Anwendung mit ähnlichen Konventionen umsetze. Besonders hilfreich war hier "jade-query". Es ist als Alternative zu Angular oder React und anderen diversen Frameworks sehr einfach zu benutzen, da es die gleichen Konventionen wie auf dem Server verwendet. Um die Abhängigkeiten entsprechend korrekt herunterzuladen, habe ich Bower verwendet, um auch sicherzustellen, dass immer die neueste Version vorliegt.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!