© Jut/Shutterstock.com, © Kirill_z/Shutterstock.com
Echtzeitfähige Applikationen mit Sails und Angular

Sail away!


Unsere Arbeitszeit als Entwickler ist kostbar. Diesen Gedanken hatte auch Mike McNeil, als er das Node.js-Framework Sails schuf. Aus einer Reihe von Projekten, die er mit Node.js umsetzte, nahm er die am häufigsten auftretenden Problemstellungen und integrierte ihre Lösung in sein neues Framework: Sails.

Um das Rad nicht komplett neu zu erfinden, setzt Sails auf etablierte Komponenten wie beispielsweise Express oder Socket.IO. Sails schlägt schon zu Beginn eines Projekts einen für Sie als Entwickler sehr komfortablen Weg ein, indem es dem Enwickler ein Kommandozeilenwerkzeug an die Hand gibt, mit dem man sein Projekt aufsetzen und die erforderlichen Grundstrukturen schaffen kann. Dieses CLI begleitet Sie auf dem gesamten Lebenszyklus Ihrer Applikation, sei es beim Set-up, während der Entwicklung oder zum Deployment. Moderne Webapplikationen bestehen jedoch nicht nur aus einem serverseitigen Teil, und so stelle ich Ihnen auf den folgenden Seiten vor, wie Sie Sails mit einem Angular Frontend zu einer echtzeitfähigen Webapplikation kombinieren können.

Sails – die Segel im Backend setzen

Unter den JavaScript-Frameworks bzw. in der Node.js-Welt ist Sails mittlerweile schon fast so etwas wie ein alter Hase. Der initiale Commit in das Projekt-Repository auf GitHub geschah im Januar 2012. Seitdem haben über 200 Contributors über 6 000 Commits zu diesem Projekt beigetragen. Anders als bei vielen Open-Source-Projekten ist für Sails auch kommerzielle Unterstützung verfügbar.

Sails eignet sich durch seinen Funktionsumfang sowohl für die Umsetzung einfacher CRUD-Applikationen mit einem statischen Web-Frontend als auch für das Backend komplexer echtzeitfähiger Single-Page-Applikationen. Sails verfolgt bei der Architektur einer Applikation einen klassischen MVC-Ansatz. Ein Benutzer kann eine Action eines Controllers über eine bestimmte Route aufrufen. Anhand der Informationen in der Anfrage sorgt der Controller dafür, dass eine passende Antwort erzeugt wird. Die Datenhaltung und Kommunikation mit der Datenbank übernimmt der Model-Layer, der durch das ORM Waterline verstärkt wird. Waterline unterstützt verschiedene SQL- und NoSQL-Datenbanken, sodass Sie auch hier sehr flexibel sind. Das zentrale Element des View-Layers ist natürlich die Template-Engine. Diese ist, wie so vieles in Sails, austauschbar. Standardmäßig wird hier auf EJS gesetzt.

Sails bringt nicht nur ein sinnvolles Paket an Technologien mit, sondern auch eine Reihe von Konventionen, die bei der Erstellung von Applikationen helfen. Außerdem ist nahezu jeder Aspekt des Frameworks konfigurierbar. Aber keine Sorge, Sie verbringen normalerweise sehr wenig Zeit mit der Konfiguration von Sails. Die Standards, auf die das Framework setzt, sind sehr gut dokumentiert und in den meisten Fällen völlig ausreichend.

Um das Zusammenspiel zwischen Sails und Angular zu demonstrieren, setzen wir im Zuge dieses Artikels eine einfache Chatapplikation um.

Die Kiellegung – Installation und Initialisierung

Wie bei allen Frameworks und Bibliotheken, die auf Node.js basieren, müssen Sie zunächst natürlich dafür sorgen, dass die Node.js-Plattform auf Ihrem System installiert ist. Danach installieren Sie Sails mit dem Pack­age Manager Ihrer Wahl. Sie können sowohl auf npm als auch auf Yarn zurückgreifen. Im ersten Schritt laden Sie nicht nur das Framework, sondern auch das Sails-CLI herunter, mit dem Sie Ihr Projekt beginnen können. Aus diesem Grund erfolgt die Installation auch global, also systemweit, mit dem Kommando npm install -g sails.

Zum Zeitpunkt der Drucklegung dieses Artikels befand sich die Version 1 von Sails noch im Betastadium. Viele Elemente dieser Version des Frameworks sind schon relativ stabil. Einige Plug-ins wurden allerdings noch nicht aktualisiert. Aus diesem Grund setzt dieser Artikel noch auf die aktuell stabile Version 0.12 des Frameworks. Sails bietet zum Umstieg auf eine neuere Version auch immer eine Hilfestellung in Form einer Migrationsdokumentation.

Nach der Installation des Frameworks lassen Sie sich vom Sails-CLI die Struktur Ihrer Applikation generieren. Mit dem Kommando sails new chat erzeugt das Werkzeug ein neues Verzeichnis mit dem Namen chat, legt alle erforderlichen Dateien und Verzeichnisse an und lädt alle Abhängigkeiten für Sie herunter. Die erzeugte Applikation enthält alle wesentlichen Komponenten und ist sofort lauffähig, sodass Sie mit dem Kommando sails lift die Applikation starten können. Sails fährt einen Node.js-Prozess hoch und wartet auf Port 1337 auf eingehende Verbindungen. Sie können also Ihren Browser starten und über den URL http://localhost:1337 Ihre initiale Sails-Applikation ansehen. Alternativ können Sie Ihre Applikation auch mit dem Kommando node app.js starten. Sollten Sie Probleme mit Ihrer Applikation haben, können Sie diese auch im Debugging-Modus starten. Mit node app.js —inspect —debug-brk lassen sich beispielsweise die Developer-Tools von Chrome an Ihre Applikation binden.

Bevor wir mit der eigentlichen Entwicklung beginnen, werfen wir nun zunächst einen Blick auf die Dateien und Verzeichnisse der Applikationen. Außerdem lernen Sie die grundlegenden Konzepte von Sails besser kennen.

Planken und Spanten – die Projektstruktur

Auf der Wurzelebene Ihres Projekts finden Sie eine Handvoll Dateien. Bei sämtlichen Dateien, die mit einem Punkt beginnen, handelt es sich um Konfigurationsdateien. Sails liefert standardmäßig Konfigurationen für ESLint und JSHint aus. Außerdem eine .gitignore-Datei, die dafür sorgt, dass einige Dateien und Verzeichnisse nicht ins Versionskontrollsystem gelangen. Eine der wichtigsten Konfigurationsdateien ist die .sailsrc-Datei. Mit dieser Datei konfigurieren Sie vor allem das CLI und die Sails-Generatoren. Die package.json-Datei dient zur Beschreibung Ihrer Applikation. Hier legen Sie neben Metainformationen, wie dem Projektnamen, der Versionsnummer oder dem Autor, auch die Abhängigkeiten zu verschiedenen npm-Paketen fest. Eine grundlegende Dokumentation Ihrer Applikation inklusive der erforderlichen Schritte für Installation, Ausführung, Tests und Entwicklung sollten Sie in der README.md-Datei festhalten. Zur Automatisierung von Aufgaben bei der Entwicklung setzt Sails auf den Taskrunner Grunt. Die Gruntfile.js-Datei dient als Einstieg in die Grunt-Konfiguration. Die Datei app.js stellt schließlich den Einstieg in Ihre Applikation dar. Der einzige Zweck dieser Datei ist das Laden von Sails und die Übergabe an das Framework. Im Normalfall werden Sie während der Entwicklung mit dieser Datei kaum in Berührung kommen. Interessanter als diese Dateien sind die Verzeichnisse Ihrer Applikation:

  • .tmp: Das .tmp-Verzeichnis dient Sails als Arbeitsverzeichnis. Hierhin werden beispielsweise die verarbeiteten Assets kopiert und ausgeliefert.

  • api: Während der Implementierung Ihrer Applikation werden Sie sich hauptsächlich in diesem Verzeichnis bewegen. Es enthält Unterverzeichnisse für Controller, Services, Models und Policies. Diese verschiedenen Elemente des Frameworks werden Sie im Verlauf dieses Artikels noch näher kennenlernen. Models und Services werden von Sails als globale Variablen exportiert, sodass Sie auf diese immer zugreifen können, ohne dass Sie sie über das Modulsystem eingebunden haben.

  • assets: In diesem Verzeichnis liegen sämtliche statischen Inhalte – von Bildern über clientseitiges JavaScript bis hin zu Style Sheets. Jede dieser Kategorien wird in einem separaten Unterverzeichnis abgelegt. Außerdem ist Sails standardmäßig so konfiguriert, dass es den Less-Präprozessor für Style Sheets unterstützt.

  • config: Über verschiedene Konfigurationsdateien im config-Verzeichnis können Sie die verschiedenen Aspekte Ihrer Applikation konfigurieren. Beachten Sie hierbei, dass die Kommandozeilenoptionen, die beim Start der Applikation übergeben werden, die höchste Priorität haben. Danach folgen Umgebungsvariablen und die .sailsrc-Datei. Erst dann gelten die Dateien des config-Verzeichnisses. Auch hier gibt es unterschiedliche Prioritäten: Die config/local.js-Datei überschreibt die Einstellungen im config/env-Verzeichnis, die wiederum alle übrigen Dateien des config-Verzeichnisses überschreiben.

  • tasks: Im tasks-Verzeichnis werden die Grunt-Tasks für die Automatisierung von Routineaufgaben in Ihrer Applikation abgelegt.

  • views: Hier werden alle View-Dateien für die Template-Engine abgelegt. Sie können entweder direkt über Routen oder über die view-Methode des Response-Objekts angesprochen werden.

An Bord gehen – Registrierung und Anmeldung

Eine der ersten Aufgaben, die Sie bei der Entwicklung einer Webapplikation erledigen müssen, ist die Authentifizierung von Benutzern. Sie können aus einer großen Palette von Möglichkeiten wählen. So können Sie beispielsweise eine Session-basierte Authentifizierung über den Twitter-Account Ihrer Benutzer umsetzen oder eine einfache Anmeldung über einen Benutzernamen und ein Passwort mit JSON Web Tokens (JWT). Für nahezu alle denkbaren Varianten existieren bereits Module, auf die Sie zurückgreifen können. Durch die Verwendung von Sails haben Sie den Vorteil, dass Sie sämtliche Middle­ware-Komponenten von Express verwenden können. Das bedeutet, dass Sie beispielsweise Passport einsetzen können. Dieses Paket bietet eine Plug-in-Infrastruktur für die verschiedensten Authentifizierungsmechanismen. Für die Anmeldung an unserem Chat nutzen wir allerdings eine einfache Datenbanktabelle, in der die Namen der Benutzer und ihre Passwörter festgehalten werden. Damit sich der Benutzer nicht bei jeder Aktion erneut anmelden muss, wird nach erfolgter Anmeldung ein JWT ausgestellt, über den sich der Benutzer authentifizieren kann.

Ein wichtiges Feature von Sails sind die sogenannten APIs. Dabei handelt es sich um einen Durchstich durch das MVC-Pattern für RESTful-Routen. Auf der Kommandozeile können Sie mit dem Befehl sails generate api user das User-API erzeugen lassen. Sails generiert daraufhin ein Usermodel und einen Usercontroller. Außerdem wird automatisch eine Reihe von Routen für diesen Controller aktiviert, sodass er von außen erreichbar ist. In der Standardkonfiguration können Sie so bereits a...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang