Verwenden von Fastify und Preact zum schnellen Prototypen von Webanwendungen

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, möchte eine Geschichte darüber erzählen, mit welchen Technologien er schnell Prototypen von Webanwendungen entwickelt. Diese Technologien umfassen die Bibliotheken Fastify und Preact. Er benutzt auch die htm Bibliothek. Es lässt sich leicht in Preact integrieren und dient zur Beschreibung von DOM-Elementen mithilfe intuitiver Konstrukte, die an JSX erinnern. Gleichzeitig wird kein Transpiler wie Babel benötigt, um damit zu arbeiten. Nachdem der Autor des Materials die Prototyping-Entwicklungswerkzeuge und -methoden für die Arbeit damit demonstriert hat, wird er zeigen, wie solche Anwendungen in Docker-Container gepackt werden. Dies macht es einfach, Anwendungen allen Interessierten zu demonstrieren.

Starten Sie

Ich bin vor einigen Wochen zur Verwendung der oben genannten Technologien gekommen, als ich eine sehr einfache Prototyp-Webanwendung erstellen musste, um gemeinsam mit meinen Kollegen einige Annahmen zu testen.

Mein Experiment war äußerst erfolgreich. Ich konnte sehr schnell einen Prototyp erstellen, meine Kollegen konnten bequem damit experimentieren, sie konnten schnell ihre Eindrücke darüber ausdrücken. Gleichzeitig konnten sie das Projekt testen, selbst wenn Node.js und NPM nicht auf ihren Computern installiert waren.

All dies führte mich zu der Idee, Material über meinen Ansatz zum Rapid Prototyping von Webanwendungen zu schreiben. Es ist möglich, dass dieser Ansatz für andere nützlich ist. Für diejenigen, die bereits mit Fastify und Preact vertraut sind, werde ich sofort das Wichtigste skizzieren, damit sie meine Ideen sofort in die Praxis umsetzen können.

Hauptideen

Wenn Sie bereits mit Fastify und Preact vertraut sind und lernen möchten, wie Sie die Entwicklung von Projekten auf der Grundlage dieser Technologien organisieren können, sind Sie buchstäblich ein paar Schritte von dem entfernt, was Sie möchten. Wir sprechen nämlich über die folgenden Befehle:

git clone https://github.com/lmammino/fastify-preact-htm-boilerplate.git my-new-project cd my-new-project rm -rf .git npm install 

Natürlich können Sie den Namen des Projekts, my-new-project , in den Namen Ihres Projekts ändern.

Nachdem Sie alles installiert haben, was Sie benötigen, können Sie mit der Arbeit am Projekt beginnen. Wir sprechen nämlich über Folgendes:

• Der Ordner src/ui enthält Dateien des Client-Teils der Anwendung (hier werden Preact und htm verwendet).
• Der Ordner src/server enthält Dateien, die sich auf die Serverseite der Anwendung beziehen (hier wird Fastify verwendet).

Durch Bearbeiten der entsprechenden Dateien können Sie das Projekt ausführen:

 npm start 

Danach können Sie es testen, indem Sie im Browser zur Adresse localhost:3000 .

Und noch etwas. Wenn Ihnen meine Entwicklung gefallen hat, bin ich für den Star auf GitHub sehr dankbar.

Schauen wir uns nun die hier verwendeten Technologien und die Funktionen der Arbeit mit ihnen an.

Fastify

Fastify ist ein schnelles und wirtschaftliches Webframework für Node.js. Dieses Projekt wurde ursprünglich von zwei Programmierern erstellt. Jetzt hat das Team derer, die daran arbeiten, 10 Leute, mehr als 130 Leute helfen bei der Entwicklung des Projekts, er hat fast 10.000 Sterne auf GitHub gesammelt.

Fastify wurde von Node.js Frameworks wie Express und Hapi beeinflusst, die es schon seit geraumer Zeit gibt. Es war ursprünglich auf Produktivität, den Komfort von Programmierern und die Erweiterung seiner Fähigkeiten mit Hilfe von Plugins ausgerichtet. Dies ist übrigens eine meiner Lieblingsfunktionen von Fastify.

Wenn Sie mit dem Fastify-Framework nicht vertraut sind oder es besser kennenlernen möchten, kann ich seine offizielle Dokumentation empfehlen.

Es sollte beachtet werden, dass ich mit Fastify verwandt bin. Ich bin Mitglied des Hauptentwicklungsteams und beschäftige mich hauptsächlich mit der Unterstützung des Projektstandorts und der Arbeit an dessen Dokumentation.

Vorbereiten

Preact ist eine Bibliothek zur Entwicklung von Benutzeroberflächen für Webprojekte, die von einer Person als kompakter und schneller Ersatz für React erstellt wurde. Dieses Projekt erwies sich als recht erfolgreich, jetzt ist ein ganzes Entwicklerteam damit beschäftigt, auf GitHub erzielte er mehr als 20.000 Sterne.

Einer der Gründe, warum ich Preact mag, ist, dass diese Bibliothek eine erweiterbare Ebene zur Beschreibung der visuellen Komponenten der Anwendung hat. Unter normalen Umständen kann diese Bibliothek mit JSX in Kombination mit Babel zum Übersetzen des Codes verwendet werden. Wenn Sie Babel jedoch nicht installieren und den Anwendungserstellungsprozess konfigurieren möchten, können Sie Preact beispielsweise zusammen mit der htm- Bibliothek verwenden, die Vorlagenliterale verwendet und keine benötigt Transpilation beim Starten von Projekten, in denen es in modernen Browsern verwendet wird.

In diesem Artikel werden wir die htm-Bibliothek verwenden und in Kürze einige Beispiele betrachten.

Projektübersicht

Hier betrachten wir den gesamten Prozess der Erstellung eines Projekts. Unser Ziel wird es sein, eine einfache Webanwendung zu entwickeln, die Informationen zur Uhrzeit auf dem Server zum Zeitpunkt des Starts anzeigt. Hier, um klarer zu machen, wonach wir streben werden.


Anwendung im Browser

Dies ist eine Single Page Application (SPA), in der Preact und htm als Client-Teil verwendet werden und Fastify zum Erstellen einer API zum Empfangen von Serverzeit verwendet wird.

Ein aufmerksamer Leser könnte bemerken, dass die in der vorherigen Abbildung gezeigte Seite ein hübsches Favicon-Symbol hat. Es stimmt, er ist dort sehr klein, also werde ich die Aufgabe für diejenigen erleichtern, die sich die Augen brechen und versuchen, etwas auszumachen. Hier ist eine vergrößerte Version davon.


Favicon

Einrichten der Serverseite der Anwendung

Beginnen wir mit der Erstellung eines neuen Ordners:

 mkdir server-time cd server-time 

Initialisieren Sie nun das NPM-Projekt und installieren Sie Fastify:

 npm init -y npm i --save fastify@next fastify-static@next fastify-cli 

Bitte beachten Sie, dass ich bei der Beschreibung einiger Abhängigkeitspakete das Konstrukt @next verwendet habe. Dies geschieht, damit das Projekt die Fastify 2-Bibliothek verwendet, die sich derzeit in einem Release-Kandidatenstatus befindet, aber sehr bald zur stabilen Hauptversion wird.

Bitte beachten Sie, dass Sie mit dem fastify-cli auch ein neues Projekt basierend auf Fastify erstellen können:

 npx fastify-cli generate server-time 

Zum Zeitpunkt des Schreibens dieses Materials erstellt dieses Team ein Projekt, das für die Verwendung von Fastify 1.x konzipiert ist. Sehr bald nach der Veröffentlichung von Fastify 2 wird dieses Tool jedoch aktualisiert.

Lassen Sie uns die installierten Pakete analysieren:

• fastify ist eine Kernkomponente des Frameworks.
• fastify-static ist ein zusätzliches Plugin, mit dem Sie statische Dateien bequem mit dem Fastify-Server bereitstellen können.
• fastify-cli ist ein Befehlszeilenprogramm, mit dem Sie Projekte basierend auf Fastify erstellen können.

Im Moment sind wir bereit, eine API zu erstellen, die auf Fastify basiert. src/server/server.js wir also den src/server/server.js :

 const path = require('path') module.exports = async function(fastify, opts) { //      `src/ui` fastify.register(require('fastify-static'), {   root: path.join(__dirname, '..', 'ui'), }) //     API fastify.get('/api/time', async (request, reply) => {   return { time: new Date().toISOString() } }) } 

Ich glaube, dass sich der obige Code gut erklärt, aber es gibt einige interessante Details, über die es sich zu sprechen lohnt. Dies ist besonders nützlich für diejenigen, die keine Erfahrung mit Fastify haben.

Das erste, worauf Sie in diesem Code achten können, ist, dass hier das Schlüsselwort async verwendet wird. Fastify unterstützt sowohl die Entwicklung eines asynchronen / erwarteten Stils als auch einen traditionelleren Rückrufansatz. Was genau zu wählen ist, hängt von den Vorlieben eines bestimmten Entwicklers ab.

Ein weiteres interessantes Detail ist, dass wir den Server hier als exportiertes Modul definieren. Dieses Modul (im Fastify-Jargon wird dies als „Plugin“ bezeichnet) ist eine Funktion, die eine Fastify-Instanz ( fastify ) und eine Reihe von Optionen (Optionen) als Argument verwendet. Innerhalb der Moduldeklaration können wir eine Instanz von fastify , um Plugins zu registrieren. Genau das passiert mit dem fastify-static Plugin. Wir können HTTP-Endpunkte auch mit speziellen Methoden wie fastify.get und fastify.post .

Der hier verwendete modulare Ansatz hat seine Vorteile, obwohl er etwas ungewöhnlich aussieht. Zunächst sollte beachtet werden, dass Sie damit mehrere Server kombinieren können. Stellen Sie sich vor, Sie haben einen Server für ein Blog und einen anderen für ein Forum erstellt. Sie können einfach in eine vorhandene Anwendung integriert werden, indem sie an Pfade wie /blog und /forum .

Darüber hinaus können Sie mit diesem Ansatz Anwendungen und fastify-cli (z. B. Socket-Bindung) abstrahieren und die Lösung für diese Aufgabe entweder an die fastify-cli oder an fastify-cli .

Starten Sie den Server mit dem fastify :

 node_modules/.bin/fastify start --log-level info src/server/server.js 

Um unser Leben zu vereinfachen, können wir diesen Befehl zum package.json unserer Datei package.json :

 { "scripts": {   "start": "fastify start --log-level info src/server/server.js" } } 

Bevor wir den Server tatsächlich starten, müssen wir sicherstellen, dass sich ein Ordner befindet, in dem sich statische Ressourcen befinden. Andernfalls fastify-static Fehler aus. Erstellen Sie diesen Ordner:

 mkdir src/ui 

Jetzt können wir die Anwendung mit dem Befehl npm start und mit dem Browser zu localhost:3000/api/time navigieren localhost:3000/api/time .

Wenn alles richtig funktioniert, sehen Sie im Browser Folgendes:

 { "time": "2019-02-17T19:32:03.354Z" } 

An dieser Stelle können Sie eine weitere nette Funktion von Fastify schätzen. Es liegt in der Tatsache, dass die JSON-Serialisierung für den Fall, dass eine bestimmte Route ein Objekt zurückgibt, automatisch angewendet wird.

Jetzt ist die Arbeit an der Server-API abgeschlossen. Lassen Sie uns ein Frontend haben.

Frontend-Setup

Der gesamte Code unseres Projekts in Bezug auf das Frontend befindet sich im Ordner src/ui . Es wird aus 5 Dateien bestehen:

• app.js - Anwendungscode vorbereiten.
• bootstrap.min.css - CSS-Code zum Stylen der Anwendung (er wird direkt aus dem Bootstrap-Framework übernommen).
• favicon.ico - Favicon-Datei. Wenn Sie eine seriöse Anwendung entwickeln, können Sie nicht auf eine gute Favicon-Datei verzichten.
• index.html ist die Haupt-HTML-Datei unserer einseitigen Anwendung.
• preacthtm.js - Code der Preact- und htm-Bibliotheken.

Legen Sie zunächst die Dateien in den Ordner ab, bei dem es sich um Stile, Bibliotheken und das Favicon-Symbol handelt:

 curl "https://unpkg.com/htm@2.0.0/preact/standalone.js" > src/ui/preacthtm.js curl "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > src/ui/bootstrap.min.css curl "https://github.com/lmammino/fastify-preact-htm-boilerplate/blob/master/src/ui/favicon.ico?raw=true" > src/ui/favicon.ico 

Erstellen Sie nun die Datei src/ui/index.html :

 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8" />   <meta     name="viewport"     content="width=device-width, initial-scale=1, shrink-to-fit=no"   />   <!-- Bootstrap CSS -->   <link rel="stylesheet" href="/bootstrap.min.css" />   <title>My awesome server time</title> </head> <body>   <div id="app"></div>   <!-- JavaScript -->   <script src="/preacthtm.js"></script>   <script src="/app.js"></script> </body> </html> 

Wir haben eine ganz normale HTML-Seite vor uns, mit der wir alle Ressourcen (CSS und JS) laden und mit der Bezeichner- app ein leeres <div> -Element erstellen, in das wir unsere Anwendung während der Ausführung des Projekts ausgeben.

Schauen Sie sich nun den Anwendungscode an, der sich in der src/ui/app.js :

 /*  htmPreact */ const { html, Component, render } = htmPreact class App extends Component { componentDidMount() {   this.setState({ loading: true, time: null })   fetch('/api/time')     .then(response => response.json())     .then(data => this.setState({ loading: false, time: data.time })) } render(props, state) {   return html`     <div class="container mt-5">       <div class="row justify-content-center">         <div class="col">           <h1>Hello from your new App</h1>           <div>             ${state.loading &&               html`                 <p>Loading time from server...</p>               `} ${state.time &&               html`                 <p>Time from server: <i><font color="#999999">${state.time}</font></i> </p>               `}           </div>           <hr />           <div>             Have fun changing the code from this boilerplate:             <ul>               <li>UI code available at <code>/src/ui</code></li>               <li>Server-side code available at <code>/src/server</code></li>             </ul>           </div>         </div>       </div>     </div>   ` } } render( html`   <${App} /> `, document.getElementById('app') ) 

In dieser Anwendung gibt es nur eine zustandsbehaftete Komponente namens App . Der Status dieser Komponente enthält 2 Variablen:

• loading ist eine logische Variable, die angibt, ob zu einem bestimmten Zeitpunkt eine Anforderung an die Server-API ausgeführt wird, um Informationen zur Serverzeit abzurufen.
• time - Eine Zeichenfolge, die die neuesten vom Server empfangenen Zeitinformationen enthält.

Wenn Sie mit React vertraut sind, können Sie den obigen Code leicht verstehen.
Mit Preact und htm können wir Komponenten erstellen, indem wir Klassen deklarieren, die die integrierte Component Klasse erweitern.

In dieser Klasse können wir das Verhalten einer Komponente mithilfe von Lebenszyklusmethoden wie componentDidMount() und eine Methode verwenden, die sich wie eine reguläre render() -Methode von React verhält.

In unserem Fall legen wir, sobald die Komponente an die Seite angehängt ist ( componentDidMount() -Methode), die loading und führen eine API-Anforderung mit fetch .
Nachdem die Anforderung abgeschlossen ist, setzen wir den Wert der Zeitstatus-Eigenschaft und setzen die loading auf false .

Die render() -Methode wird jedes Mal automatisch aufgerufen, wenn sich ein Komponentenstatus ändert oder wenn neue Eigenschaften an ihn übergeben werden. In dieser Methode beschreiben wir die DOM-Komponente mit htm.

Mit der HTML-Bibliothek können Sie DOM-Knoten mithilfe von markierten Vorlagenliteralen mit einem speziellen Tag - html - beschreiben. In unserem Vorlagenliteral können dynamische Ausdrücke vorhanden sein, z. B. solche, mit denen wir den Status überprüfen und entscheiden, was angezeigt werden soll, wenn die Anwendung Daten vom Server lädt und wenn die Daten bereits vorhanden sind geladen.

Es ist auch erwähnenswert, dass wir eine Instanz der Anwendung erstellen und auf einer HTML-Seite anzeigen müssen. Dies erfolgt mit der Funktion render() des globalen Objekts htmPreact .

Jetzt sind die Arbeiten an der Frontend-Anwendung abgeschlossen. Sie können den Server neu starten, zu localhost:3000 und mit dem experimentieren, was wir gerade erstellt haben. Auf der Grundlage dieser Anwendung können Sie beispielsweise Ihre eigenen entwickeln. Und wenn das, was Sie erstellen, interessant genug erscheint, um es jemand anderem zu zeigen, ist es wahrscheinlich hilfreich, wenn Sie Ihre Anwendung in einen Docker-Container packen.

Anwendungscontainerisierung

Ich glaube, dass der beste Weg, anderen Ihre neuen kleinen Projekte zu zeigen, darin besteht, die Funktionen von Docker für diesen Zweck zu nutzen.

Dank Docker kann jeder, der versucht, Ihre Anwendung zu Hause auszuführen, nicht mehr darüber nachdenken, ob er die entsprechende Version von Node.js und NPM installiert hat. Er muss den Quellcode der Anwendung nicht herunterladen, um dies durch Eingabe der richtigen Befehlsfolge zu gewährleisten , installieren Sie die Abhängigkeiten und starten Sie den Server.

Um die Anwendung in den Docker-Container zu packen, müssen wir eine sehr einfache Dockerfile im Stammordner unseres Projekts erstellen:

 FROM node:11-alpine WORKDIR /app COPY . /app RUN npm install --production EXPOSE 3000 CMD ["npm", "start"] 

Hier beschreiben wir folgende Aktionen:

• Das Image wird basierend auf dem Node.js 11-Image erstellt, das auf Alpine Linux basiert.
• Alles aus dem aktuellen Ordner wird in den Ordner /app des Containers kopiert.
• Danach führen wir den Befehl npm install , um die Abhängigkeiten herunterzuladen und zu installieren. Die Verwendung des --production führt dazu, dass nur die Abhängigkeiten installiert werden, die für die Bereitstellung des Projekts in der Produktion erforderlich sind. Dies beschleunigt die Bilderstellung, wenn das Projekt viele Entwicklungsabhängigkeiten verwendet.
• Wir geben an, dass der Container eine offene Pore 3000 haben sollte, auf der der Server standardmäßig arbeitet.
• Am Ende beschreiben wir einen Befehl, npm start , der ausgeführt wird, wenn der Container npm start wird. Sie startet die Anwendung.

Führen Sie den folgenden Befehl aus, um das Bild für den Container zu erfassen:

 docker build -t server-time . 

Nach einigen Sekunden sollte das Bild fertig sein und Sie sollten in der Lage sein, den Container zu starten:

 docker run -it -p 3000:3000 server-time 

Mit der -p können Sie die Verbindung zwischen dem Container-Port 3000 und dem lokalen Port 3000 konfigurieren. Auf diese Weise können Sie unter localhost:3000 auf die containerisierte Anwendung zugreifen.
Jetzt können Sie Ihre Bewerbung mit anderen Personen teilen. Um es in der Docker-Umgebung auszuführen, reicht es aus, wenn Docker auf dem Computer installiert ist, die beiden oben genannten Befehle in seinem Ordner auszuführen.

Zusammenfassung

In diesem Artikel haben wir darüber gesprochen, wie mit Fastify und Preact eine Umgebung für die schnelle Entwicklung von Webanwendungen erstellt werden kann. Darüber hinaus haben wir darüber gesprochen, wie Sie die Anwendung für andere Benutzer von Docker freigeben können.

Wie oben erwähnt, sind die vorgeschlagenen Tools für das Rapid Prototyping konzipiert. Jetzt fragen Sie sich möglicherweise, was hier für die Entwicklung realer Anwendungen fehlt. Wenn Sie von „echten Anwendungen“ sprechen, meinen Sie höchstwahrscheinlich die folgenden Funktionen:

• Zusammenstellung von Ressourcen des Front-End-Teils der Anwendung: Erstellung optimierter Dateien (Bundles), möglicherweise mit Webpack, Babel oder anderen Tools.
• Routing im Frontend der Anwendung.
• Server-Rendering
• Mittel zur dauerhaften Datenspeicherung.

Alle diese Möglichkeiten zur Entwicklung realer Anwendungen wurden den hier diskutierten Technologien noch nicht hinzugefügt, daher sehe ich sie vorerst als Werkzeug für die Entwicklung von Prototypen. Ich bin sicher, wenn Ihnen das, was Sie gesehen haben, gefallen hat und Sie dies alles als Grundlage für zukünftige Anwendungen betrachten, die echte Probleme lösen, können Sie leicht das finden, was Sie benötigen, und Anwendungen erstellen, die für Fastify und Preact bereit sind Produktionsfreigabe.

Liebe Leser! Wie können Sie Webanwendungen prototypisieren?