JavaScript überall: Wie man Code für alle Plattformen gleichzeitig schreibt

Warum JavaScript das neue „write once, run anywhere“ ist?

Erinnern Sie sich an den alten Traum der Entwickler: Einmal Code geschrieben – und er läuft überall? Java versprach dies mit der virtuellen Maschine, aber in der Praxis scheiterte es oft an komplizierten Anpassungen. Und jetzt schauen Sie sich JavaScript an. Die Sprache, die einst als „Spielzeug“ für Button-Animationen galt, hat heute die Welt erobert. Und wissen Sie was? Sie hält dieses Versprechen tatsächlich.

Plattformübergreifende Entwicklung mit JavaScript ist nicht nur ein modischer Trend. Es ist eine Möglichkeit, die Markteinführungszeit zu verkürzen, das Budget zu schonen und im Team dieselben Spezialisten zu behalten. In diesem Artikel werden wir untersuchen, wie eine einzige Sprache die Erstellung von Anwendungen für Browser, mobile Geräte, Desktop und Server ermöglicht. Und ja, es wird echte Codebeispiele geben.

Architektur einer modernen plattformübergreifenden Anwendung

Bevor wir uns in den Code stürzen, lassen Sie uns verstehen, wie das moderne Ökosystem aufgebaut ist. Die Kernidee besteht darin, die Anwendungslogik in drei Schichten zu unterteilen:

• Geschäftslogik — Datenverarbeitung, Validierung, Arbeit mit APIs. Dies ist der Kern, der nicht von der Plattform abhängen sollte.
• UI-Schicht — die Benutzeroberfläche. Sie kann für Web, Mobile und Desktop unterschiedlich sein, verwendet aber oft gemeinsame Komponenten.
• Speicherschicht — lokale Datenbanken, Cache, Arbeit mit dem Dateisystem.

Genau JavaScript ermöglicht es, alle drei Schichten in einer Sprache zu schreiben. Betrachten wir die wichtigsten Werkzeuge.

Serverseite: Node.js als Fundament

Jedes plattformübergreifende System beginnt mit dem Backend. Node.js ist eine JavaScript-Laufzeitumgebung außerhalb des Browsers, die auf der V8-Engine basiert. Sie eignet sich ideal zum Erstellen von REST-APIs, zur Verarbeitung von WebSocket-Verbindungen und zur Arbeit mit Datenbanken.

Hier ist ein einfaches Beispiel für einen Server mit Express, der sowohl die Web- als auch die mobile Anwendung bedient:

const express = require('express');const app = express();const port = 3000;

// Middleware zur Verarbeitung von JSONapp.use(express.json());

// Beispiel-Endpunkt zum Abrufen einer Benutzerlisteapp.get('/api/users', (req, res) => {  const users = [    { id: 1, name: 'Anna', email: 'anna@example.com' },    { id: 2, name: 'Ivan', email: 'ivan@example.com' }  ];  res.json(users);});

// POST-Anfrage zum Erstellen eines neuen Benutzersapp.post('/api/users', (req, res) => {  const newUser = req.body;  // Hier erfolgt normalerweise das Speichern in der Datenbank  console.log('Neuer Benutzer:', newUser);  res.status(201).json({ message: 'Benutzer erstellt', user: newUser });});

app.listen(port, () => {  console.log(`Server gestartet unter http://localhost:${port}`);});

Dieser Code funktioniert unter Windows, macOS und Linux gleichermaßen. Darüber hinaus können Sie ihn auf einem Raspberry Pi oder in einem Cloud-Container ausführen – es sind keine Änderungen erforderlich.

Web-Interface: React als universeller Baustein

Wenn es um plattformübergreifende Entwicklung mit JavaScript geht, ist React der erste Kandidat. Seine komponentenbasierte Architektur ermöglicht die Wiederverwendung von bis zu 70 % des Codes zwischen Web und mobilen Anwendungen.

Erstellen wir eine einfache Komponente zur Anzeige einer Benutzerliste:

import React, { useState, useEffect } from 'react';

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);

  useEffect(() => {    fetch('/api/users')      .then(response => response.json())      .then(data => {        setUsers(data);        setLoading(false);      })      .catch(error => console.error('Fehler:', error));  }, []);

  if (loading) {    return <div>Laden...</div>;  }

  return (    <div>      <h2>Benutzerliste</h2>      <ul>        {users.map(user => (          <li key={user.id}>            {user.name} — {user.email}          </li>