14,235 Lesungen

Erstellen einer einfachen Web-App mit Rust und WebAssembly: Eine Schritt-für-Schritt-Anleitung

von Max Zhuk8m2023/10/26

Zu lang; Lesen

Erfahren Sie, wie Sie mit Rust und WebAssembly eine leistungsstarke Webanwendung erstellen.

featured image - Erstellen einer einfachen Web-App mit Rust und WebAssembly: Eine Schritt-für-Schritt-Anleitung

Einführung

Waren Sie schon einmal frustriert über die Leistungseinschränkungen von JavaScript? Du bist nicht allein. Da Webanwendungen immer komplexer werden, wird der Bedarf an leistungsstarken Lösungen immer offensichtlicher. Da kommen Rust und WebAssembly ins Spiel – zwei Technologien, die nicht nur Leistung, sondern auch Sicherheit und Effizienz versprechen. In diesem Artikel gehen wir durch den Prozess der Erstellung einer einfachen Webanwendung mit Rust und WebAssembly.

Warum Rust und WebAssembly?

Was ist Rost?

Rust ist eine Systemprogrammiersprache, die auf Speichersicherheit, Parallelität und Leistung abzielt. Dank seines starken Typsystems und Besitzmodells ist es darauf ausgelegt, häufige Fehler zu beseitigen, die durch Nullzeiger, Pufferüberläufe und Datenwettläufe verursacht werden. Dies macht Rust zur idealen Wahl für die Entwicklung zuverlässiger und effizienter Software.

Vorteile von Rust

Speichersicherheit : Das Eigentumsmodell von Rust stellt sicher, dass Variablen einen einzigen Eigentümer haben, und verhindert so Speicherlecks und unbefugten Datenzugriff.
Leistung : Rust ist auf Geschwindigkeit ausgelegt und konkurriert eng mit Sprachen wie C und C++.
Parallelität : Das Sprachdesign von Rust erleichtert das Schreiben gleichzeitigen Codes und macht ihn hoch skalierbar.
Reichhaltiges Ökosystem : Mit einem ständig wachsenden Paket-Repository bietet Cargo, Rust eine breite Palette an Bibliotheken und Frameworks für Webentwicklung, Datenbearbeitung und mehr.

Was ist WebAssembly?

WebAssembly (oft als wasm abgekürzt) ist ein binäres Befehlsformat, das als Kompilierungsziel für Hochsprachen wie C, C++ und Rust dient. Es ist als portables, effizientes Codeformat konzipiert, das eine nahezu native Leistung in Webbrowsern ermöglicht.

Vorteile von WebAssembly

Leistung : WebAssembly-Code wird mit nahezu nativer Geschwindigkeit ausgeführt, indem die Vorteile gängiger Hardwarefunktionen genutzt werden.
Sicherheit : WebAssembly ist sicher und in einer Sandbox konzipiert und wird in einer geschützten, vom Hostsystem getrennten Umgebung ausgeführt.
Portabilität : WebAssembly ist plattformunabhängig, d. h. es kann auf jedem Computer ausgeführt werden, der über einen kompatiblen Webbrowser verfügt.
Interoperabilität : WebAssembly-Module können problemlos in JavaScript-Anwendungen integriert werden, sodass Sie vorhandene Webtechnologien nutzen können.

Die Synergie von Rust und WebAssembly

Durch die Kombination der Leistungs- und Sicherheitsfunktionen von Rust mit der Geschwindigkeit und Portabilität von WebAssembly entsteht ein leistungsstarkes Duo für die Webentwicklung. Deshalb arbeiten sie so gut zusammen:

Optimierte Leistung : Rusts Fokus auf Null-Kosten-Abstraktionen stellt sicher, dass Ihre WebAssembly-Module schlank und schnell sind.
Sicherheit und Schutz : Sowohl Rust als auch WebAssembly priorisieren die sichere Ausführung und machen Ihre Webanwendungen zuverlässiger.
Einfache Integration : Rust bietet erstklassige Unterstützung für WebAssembly, sodass Sie Rust-Code problemlos in WASM kompilieren und in Ihre Webanwendungen integrieren können.

Durch die Nutzung von Rust und WebAssembly bleiben Sie nicht nur mit den modernen Webentwicklungstrends Schritt halten; Sie bleiben der Zeit voraus.

Einrichten Ihrer Entwicklungsumgebung

Bevor Sie in den Code eintauchen, ist es wichtig, eine auf Rust und WebAssembly zugeschnittene Entwicklungsumgebung einzurichten. Dadurch wird sichergestellt, dass Ihnen alle notwendigen Tools und Bibliotheken zur Verfügung stehen, was den Entwicklungsprozess rationalisiert.

Rust installieren

Laden Sie den Rust-Installer herunter : Besuchen Sie die offizielle Rust-Website und laden Sie den für Ihr Betriebssystem geeigneten Installer herunter.
Führen Sie das Installationsprogramm aus : Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um Rust und seinen Paketmanager Cargo zu installieren.
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Installation überprüfen : Um sicherzustellen, dass Rust korrekt installiert ist, öffnen Sie ein neues Terminalfenster und führen Sie Folgendes aus:
```
 rustc --version
```
Als Ausgabe sollte die Rust-Compiler-Version angezeigt werden.

Wasm-Pack installieren

wasm-pack ist ein Tool zum Zusammenstellen und Verpacken von Rust-Kisten, die auf WebAssembly abzielen.

Wasm-Pack installieren : Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:
```
 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```
Installation überprüfen : Überprüfen Sie, ob wasm-pack installiert ist, indem Sie Folgendes ausführen:
```
 wasm-pack --version
```

Node.js und npm installieren

Node.js und npm sind für die Verwaltung von Abhängigkeiten und den Betrieb Ihres Webservers unerlässlich.

Laden Sie Node.js herunter : Besuchen Sie die offizielle Node.js-Website und laden Sie das Installationsprogramm für Ihr Betriebssystem herunter.
Führen Sie das Installationsprogramm aus : Befolgen Sie die Installationsanweisungen, um sowohl Node.js als auch npm zu installieren.
Installation überprüfen : Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus, um zu überprüfen, ob Node.js und npm installiert sind:
```
 node --version npm --version
```

Einrichten Ihrer IDE

Während Sie jeden Texteditor für die Rust- und WebAssembly-Entwicklung verwenden können, bieten IDEs wie Visual Studio Code Erweiterungen für Rust, die Funktionen wie Code-Vervollständigung, Linting und Debugging bereitstellen.

Installieren Sie Visual Studio Code : Laden Sie es von der offiziellen Website herunter und installieren Sie es.
Installieren Sie die Rust-Erweiterung : Öffnen Sie Visual Studio Code, gehen Sie zum Marktplatz für Erweiterungen und suchen Sie nach der Erweiterung „Rust“ von rust-lang. Installieren Sie es für eine verbesserte Rust-Unterstützung.

Hinweis für macOS-Benutzer : Die in diesem Handbuch bereitgestellten Installationsbefehle sind mit macOS kompatibel. Wenn Sie auf Probleme stoßen, lesen Sie bitte die entsprechende offizielle Dokumentation für plattformspezifische Anweisungen.

Erstellen eines einfachen Rust-Programms

In diesem Abschnitt erstellen wir ein Rust-Programm, das die Fakultät einer bestimmten Zahl berechnet. Dies gibt uns die Möglichkeit, einige der Funktionen von Rust zu erkunden, wie Funktionen, Schleifen und bedingte Anweisungen, und gleichzeitig ein rechenintensives Programm zu erstellen.

Initialisieren Sie das Rust-Projekt

Erstellen Sie eine neue Rust-Bibliothek : Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um ein neues Rust-Bibliotheksprojekt zu erstellen.
```
 cargo new --lib factorial_calculator
```
Navigieren Sie zum Projektverzeichnis :
```
 cd factorial_calculator
```

Schreiben der Faktorfunktion

Öffnen Sie die Datei lib.rs : Navigieren Sie in Ihrem Texteditor oder Ihrer IDE zur Datei src/lib.rs .
Implementieren Sie die Faktorfunktion : Fügen Sie den folgenden Rust-Code hinzu, um die Faktorfunktion zu implementieren.
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
Hier definieren wir eine Funktion namens factorial , die einen u32 (vorzeichenlose 32-Bit-Ganzzahl) als Argument verwendet und einen u32 zurückgibt. Die Funktion verwendet Rekursion, um die Fakultät der angegebenen Zahl zu berechnen.

In WebAssembly kompilieren

Kompilieren Sie den Rust-Code : Nachdem wir nun unsere Fakultätsfunktion haben, kompilieren wir sie in ein WebAssembly-Modul. Führen Sie den folgenden Befehl in Ihrem Terminal aus:
```
 wasm-pack build
```
Überprüfen Sie den Build : Nachdem Sie den Befehl ausgeführt haben, sollte in Ihrem Projektordner ein pkg Verzeichnis angezeigt werden. Darin finden Sie das WebAssembly-Modul ( factorial_calculator_bg.wasm ) und die generierte JavaScript-Bindung ( factorial_calculator.js ).

Und da haben Sie es! Sie haben gerade ein Rust-Programm erstellt, das die Fakultät einer Zahl berechnet, und es in ein WebAssembly-Modul kompiliert. Dies demonstriert nicht nur die Fähigkeiten von Rust, sondern schafft auch die Voraussetzungen für die Integration dieser Logik in eine Webanwendung.

WebAssembly in eine Web-App integrieren

Nachdem wir nun über ein WebAssembly-Modul zur Berechnung von Fakultäten verfügen, integrieren wir es in eine einfache Webanwendung. Wir erstellen eine einfache HTML-Schnittstelle, über die Benutzer eine Zahl eingeben und dann die Fakultät dieser Zahl mithilfe unseres von Rust generierten WebAssembly-Moduls anzeigen können.

HTML- und JavaScript-Setup

Erstellen Sie eine HTML-Datei : Erstellen Sie eine neue Datei mit dem Namen index.html in Ihrem Projektverzeichnis und fügen Sie den folgenden HTML-Code hinzu:

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

Hier erstellen wir eine einfache Schnittstelle mit einem Eingabefeld für die Zahl, einem Button zum Auslösen der Berechnung und einem Absatz zur Anzeige des Ergebnisses.

Erstellen Sie eine JavaScript-Datei : Erstellen Sie eine neue Datei mit dem Namen bootstrap.js und fügen Sie den folgenden JavaScript-Code hinzu:
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
In diesem Skript importieren wir dynamisch unser WebAssembly-Modul und definieren eine Funktion namens calculateFactorial . Diese Funktion liest die Zahl aus dem Eingabefeld, ruft die factorial aus unserem WebAssembly-Modul auf und zeigt das Ergebnis an.

Ausführen der Web-App

Installieren Sie einen Webserver : Wenn Sie keinen lokalen Webserver haben, können Sie einen mit npm installieren:
```
 npm install -g http-server
```
Führen Sie den Webserver aus : Navigieren Sie im Terminal zu Ihrem Projektverzeichnis und führen Sie Folgendes aus:
```
 http-server .
```
Öffnen Sie die Web-App : Öffnen Sie Ihren Webbrowser und navigieren Sie zu http://localhost:8080 . Sie sollten Ihre Web-App „Faktorrechner“ sehen. Geben Sie eine Zahl ein, klicken Sie auf „Berechnen“ und die Fakultät der Zahl sollte angezeigt werden.

Und das ist es! Sie haben ein von Rust generiertes WebAssembly-Modul erfolgreich in eine einfache Webanwendung integriert. Dies zeigt die Leistungsfähigkeit und Flexibilität der Kombination von Rust mit WebAssembly zur Erstellung leistungsstarker Web-Apps.

Abschluss

In diesem Artikel haben wir die leistungsstarke Kombination von Rust und WebAssembly für die Webentwicklung untersucht. Wir begannen mit der Einrichtung unserer Entwicklungsumgebung und gingen dann dazu über, ein Rust-Programm zu erstellen, das die Fakultät einer Zahl berechnet. Abschließend haben wir dieses Programm in eine einfache Webanwendung integriert.

Die Synergie zwischen Rust und WebAssembly bietet eine Fülle von Möglichkeiten zum Erstellen leistungsstarker, sicherer und effizienter Webanwendungen. Unabhängig davon, ob Sie ein bestehendes Projekt optimieren oder ein neues Projekt starten möchten, bieten diese Technologien robuste Lösungen, die eine Überlegung wert sind.

Da sich Webtechnologien ständig weiterentwickeln, ist es von entscheidender Bedeutung, immer einen Schritt voraus zu sein. Rust und WebAssembly sind nicht nur moderne Trends; Sie sind die Bausteine für die nächste Generation von Webanwendungen.

Vielen Dank, dass Sie mich auf dieser Reise begleiten, und ich ermutige Sie, tiefer in die Welt von Rust und WebAssembly einzutauchen. Seien Sie gespannt auf unsere kommenden Artikel, in denen wir uns mit der Entwicklung komplexerer Funktionen und der Erkundung realer Anwendungen befassen.