Native JavaScript Routing?

Wir können die URL in JavaScript aktualisieren. Wir haben die APIs pushState und replaceState

// Adds to browser history
history.pushState({}, "About Page", "/about");

// Doesn't
history.replaceState({}, "About Page", "/about");

JavaScript ist auch in der Lage, beliebige Inhalte im DOM zu ersetzen.

// Hardcore
document.body.innerHTML = `
  <div>New body who dis.</div>
`;

Mit diesen kombinierten Fähigkeiten können wir eine Website erstellen, auf der wir zu verschiedenen „Seiten“ navigieren, ohne dass der Browser neu geladen wird. Das ist wörtlich das, was „Single Page App“ (SPA) bedeutet.

Aber Routing kann etwas kompliziert werden. Wir sind bei der Implementierung außerhalb dieser eher low-level APIs auf uns allein gestellt. Ich bin am vertrautesten damit, auf etwas wie React Router zurückzugreifen, das die Definition von Routen in JSX ermöglicht. So etwas wie hier

<Router>
  <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/users">
      <Users />
    </Route>
    <Route path="/user/:id">
      <User id={id} />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

Die Dokumentation beschreibt diesen Teil so:

Ein <Switch> durchsucht seine Kindelemente <Route> und rendert das erste, das mit der aktuellen URL übereinstimmt.

Es ist also ein bisschen wie ein RegEx-Matcher mit netten API-Funktionen, wie der Möglichkeit, mit etwas wie :id einen „Token“ zu erstellen, der als Platzhalter fungiert, den man an Komponenten weitergeben kann, um ihn in Abfragen usw. zu verwenden.

Das ist Arbeit! Daher gibt es Bibliotheken, die uns helfen. Aber es sieht so aus, als würde die Webplattform das tun, was sie am besten kann, und eingreifen, um zu helfen, wo sie kann. Auf dem Google webdev Blog wird dies weitgehend auf die gleiche Weise erklärt:

Routing ist ein wichtiger Bestandteil jeder Webanwendung. Im Kern geht es beim Routing darum, eine URL zu nehmen, einige Mustererkennungen oder andere anwendungsspezifische Logik darauf anzuwenden und dann normalerweise Webinhalte basierend auf dem Ergebnis anzuzeigen. Routing kann auf verschiedene Arten implementiert werden: manchmal ist es Code, der auf einem Server läuft und einen Pfad auf Dateien auf der Festplatte abbildet, oder Logik in einer Single-Page-App, die auf Änderungen am aktuellen Standort wartet und ein entsprechendes Stück DOM zum Anzeigen erstellt.

Obwohl es keinen einzigen definitiven Standard gibt, haben sich Webentwickler an eine gemeinsame Syntax für die Darstellung von URL-Routing-Mustern gewöhnt, die viele Gemeinsamkeiten mit Regulären Ausdrücken hat, aber mit einigen domänenspezifischen Ergänzungen wie Tokens für die Abgleichung von Pfadsegmenten.

Jeff Posnick, „URLPattern bringt Routing auf die Webplattform“

Neue Technik!

const p = new URLPattern({
  pathname: '/foo/:image.jpg',
  baseURL: 'https://example.com',
});

Wir können ein solches Muster einrichten und dann Tests dagegen laufen lassen, indem wir ihm eine URL zuweisen (wahrscheinlich die aktuell navigierte).

let result = p.test('https://example.com/foo/cat.jpg');
// true

result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'

Ich denke, der Sinn hinter all dem ist vielleicht, Routing in SPAs aufbauen zu können, ohne auf Bibliotheken zurückgreifen zu müssen, was zu leichteren/schnelleren Websites führt. Oder dass die Bibliotheken, die uns beim Routing helfen, es nutzen können, wodurch die Bibliotheken kleiner und letztendlich die Websites leichter und schneller werden.

Dies ist noch keine ausgereifte Technik, daher ist es wahrscheinlich am besten, einfach den Blogbeitrag zu lesen, um die Kernpunkte zu verstehen. Und verwenden Sie das Polyfill, wenn Sie es ausprobieren möchten.

Und wo wir gerade von der Webplattform sprechen, die SPAs in letzter Zeit liebt, schauen Sie sich Shared Element Transitions an, das wieder an Dynamik zu gewinnen scheint.