Frontity ist React für WordPress

Manche Entwickler arbeiten einfach lieber mit React. Das kann ich ihnen nicht verdenken, denn ich mag React auch. Vielleicht haben sie es zuerst gelernt. Ich benutze es schon lange genug, dass es mir einfach eine gewisse Vertrautheit gibt. Aber am meisten mag ich das starke Komponentenmodell. Es hat einfach etwas Schönes an einer Codebasis, bei der Dinge aus Komponenten mit klaren Aufgaben und Verantwortlichkeiten aufgebaut sind.

Es ist jedoch nicht besonders üblich, WordPress-Seiten mit React zu erstellen. Die übliche Methode zur Nutzung von WordPress erfolgt über Themes, die im Wesentlichen Stile und PHP-Dateien für das Templating sind. Frontity ändert das jedoch. Frontity ist ein React-basiertes Framework, das die API Ihrer WordPress-Seite verarbeitet und das gesamte Frontend in React mit all den leistungsstarken Werkzeugen erstellt, die Sie von dieser Art von Umgebung erwarten.

OMG, das ist mal ein schneller Setup

So konnte ich loslegen. Auf der Kommandozeile habe ich Folgendes eingegeben:

npx frontity create my-app

Dann bin ich in den erstellten Ordner gegangen und habe Folgendes eingegeben:

npx frontity dev

Das startet sofort eine Website, mit der Sie arbeiten können.

Um es für mich greifbarer zu machen, habe ich die Datei frontity.settings.js bearbeitet und die Quell-API so geändert, dass sie auf CSS-Tricks zeigt.

{
  name: "@frontity/wp-source",
  state: {
    source: {
      api: "https://css-tricks.de/wp-json",
    },
  },
},

Und jetzt sehen Sie, was ich bekomme:

Das ist *verrückt*. Für manche Projekte ist das sofort einsatzbereit.

Schauen Sie sich ihr Einführungsvideo an, das genau das durchgeht

An die Arbeit gehen

Mein erster Instinkt bei solchen Dingen ist, sofort an den Styles zu arbeiten. Das standardmäßig installierte Theme ist das Mars Theme und es gibt eine gute Anleitung, die Ihnen hilft zu verstehen, wie es funktioniert. Das Theme verwendet Emotion für das Styling, sodass die Komponenten Stile direkt in sich tragen, mit denen Sie experimentieren können. Ich habe die Komponente <HeadContainer> in index.js gefunden und sofort die Änderung background: red vorgenommen!

const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: red;
`;

Das hat das Ding sofort per Hot-Module-Reloading aktualisiert.

Ist das eine dieser nur clientseitigen Technologien?

Das habe ich mich gefragt. Ich meine, einer der Vorteile der nativen Nutzung von WordPress ist, dass Sie das serverseitige Rendering kostenlos erhalten. Das bedeutet keine SEO-Probleme (wir wissen, dass clientseitig gerenderte Websites mehr als eine Woche brauchen können, um nach jeder Änderung gecrawlt zu werden). Das bedeutet Ausfallsicherheit und Geschwindigkeit.

Frontity macht *doch* serverseitiges Rendering! Es verwendet isomorphen Rendering, was bedeutet, dass Sie einen Node-Server benötigen, um die Seiten zu rendern, aber das bedeutet, dass der Browser vollständig geformtes HTML für die Seiten erhält!

Es ist im Grunde eine perfekte Ergänzung für Vercel.

Ähnlich wie einfach ein neuer Standort eingerichtet und im Entwicklungsprozess ausgeführt werden kann, müssen Sie nur Folgendes tun, um ihn für die Produktion vorzubereiten:

npx frontity build

Dann den Node-Server ausführen

npx frontity serve

Cool.

Ich mag auch sehr, dass es eine Community rund um das Ganze gibt. Wenn Sie Hilfe brauchen, werden Sie sie bekommen.

Das ist ein Best-of-All-Worlds-Szenario.

Ich baue immer sehr gerne Websites mit WordPress und noch lieber jetzt, da wir den Block-Editor nutzen können. Ich mag wirklich eine Editor-Erfahrung, die mir hilft, die Seiten zu schreiben und zu gestalten, die ich erstellen möchte.

Aber ich arbeite *auch* gerne mit komponenten-basierten Architekturen, die schnelle, einfach zu bedienende, heiß aktualisierende lokale Entwicklungsumgebungen haben. Wenn man einmal in dieser Art von Entwicklungsumgebung gearbeitet hat, ist es schwer, etwas anderes zu benutzen! Schönes DX.

Und ich möchte *auch auch* absolut sicherstellen, dass die von mir produzierten Websites schnell, robust, ausfallsicher, zugänglich und SEO-freundlich sind.

Das alles würde ich mit einer Frontity-Website erreichen.

---

Eine weitere Sache, die mir hier gefällt, ist, dass Automattic selbst dahintersteht. Nicht nur im Geiste, sondern sie sind buchstäblich große Investoren. Ich denke, es ist sehr klug von ihnen, dies als wichtigen Teil des WordPress-Ökosystems zu betrachten. Mit WordPress zu bauen bedeutet nicht, *nicht* mit React zu bauen, besonders wenn Frontity so viel von der schweren Arbeit übernimmt.