Guten Tag liebe Leute, ich freue mich sehr,
euch heute beim WordCamp zu sehen.
Deutschland. Heute beginnen wir die
Session mit Mario Wolf. Mario ist ein
Lösungsarchitekt, aufmerksam für digitale
Strategien, Beratung und Konzepte
digitaler Natur, der es liebt, von
fantastischen entfernten Orten aus zu arbeiten,
die besten Kaffeeplätze zu erkunden, außergewöhnliche
Street-Food-Stände oder lustige Co-Working-Spaces
auf der ganzen Welt zu besuchen. Also, wenn ihr ihn
irgendwo seht, sagt ihm bitte sicher hallo.
Worüber wir heute sprechen werden und was Mario
besprechen wird, ist die Idee, das Frontend und
Backend von WordPress zu entkoppeln und wie das
tatsächlich viele Chancen und
Nachteile mit sich bringt, aber wer von diesem
Konzept profitieren kann. Wir werden von Mario hören
und einen kurzen Blick darauf werfen, wie es
funktioniert. In dieser kurzen Einführung in Headless
und Decoupling. Noch eine Sache, bevor ihr geht,
bitte stellt sicher, dass ihr sehr leise seid, da in
Spur eins eine andere Session läuft. Vielen Dank
und Mario, wenn die Bühne dir gehört, danke.
Maya
Und danke an euch alle, dass ihr zahlreich hier
seid.
Teilnehmer. Wir haben etwa eine halbe Stunde,
um ein wenig in Headless einzutauchen, und ich bin
neugierig zu wissen, wer von euch weiß,
was Headless bedeutet.
Oder okay.
Also mehr als die Hälfte weiß, was es bedeutet,
und dann, wer hat mit Headless in euren
Projekten gearbeitet? Okay, jetzt bin ich noch
neugieriger. Was habt ihr verwendet?
Wenn ihr einfach ein Beispiel einwerfen wollt,
was ihr verwendet habt. Mobile.
Beispiel, was ihr für mobile Apps verwendet habt:
Mobile App
CMS
H
Okay, um mobile App-Strategie
CMS
Okay, interessant.
Ja, und die Verwendung von Caching habt ihr
gesagt.
Oder
Okay. Wir werden über einige dieser Dinge sprechen
und
falls ihr Fragen habt, lasst es mich wissen.
Ich denke, wir haben am Ende eine Fragerunde
wegen des Mikrofons.
Um
Ich denke, ihr wisst, wer ich bin und was wir
tun werden. Also lasst uns eintauchen,
wie WordPress normalerweise funktioniert, und ich
denke, die meisten von euch sind sich dessen bewusst.
Aber, also, jedes Mal, wenn jemand eure Website
besucht, die auf WordPress basiert,
passieren im Hintergrund viele Dinge,
bevor sie tatsächlich die Website in ihrem
Browser sehen. Das bedeutet, wir haben auf der einen
Seite einen Benutzer, der über eine URL
durch den Browser eure Website anfordert,
und das wird zu einem Server aufgelöst, der dann
dieses komplizierte Paket von WordPress ausführt,
basierend auf einem Webserver, Apache,
NGINX, Dateisystem, PHP, einer Datenbank
und erst dann gelangen wir zur Ebene von
WordPress, dem Kern, den Themes
und den
Plugin-Plugins, und all das muss sich drehen,
um eine einzige Seite aus HTML, CSS, JavaScript
und allen
Medien zu liefern.
Dateien bedeutet das, dass eine Anfrage durch all
diese Schichten gehen muss, um beantwortet zu
werden. In einigen Fällen kann das vollkommen
in Ordnung sein, in den meisten Fällen, und in
einigen Fällen kann dies möglicherweise zu einem
Engpass irgendwo auf dem Weg führen. Das könnte
überall sein, wo Einschränkungen auftreten,
und wir haben bereits ein wenig über Caching
gesprochen.
Die Idee ist:
Wenn ihr ein Projekt habt - und das ist,
was wir normalerweise am Anfang tun - denkt darüber
nach, was ihr erreichen möchtet. In einem Konzept
überlegt ihr, was die beste Lösung für euren
Kunden ist, und im Konzept denken wir darüber
nach, was die beste Lösung für euren Kunden ist.
Es ist nicht immer die beste Lösung für alle
Projekte, abhängig davon, was ihr vorhabt, und
wir werden ein wenig darüber sprechen.
Um wen würde es sich handeln?
Wann wird es interessant zu verwenden sein?
Und wir werden ein wenig darüber sprechen.
Um wen würde es sich handeln?
Oder wann wird es interessant zu verwenden sein?
Was ist Headless? Und für diejenigen von euch,
die es noch nicht wissen, Headless ist die
Trennung von Back-End und Front-End. Das Front-End,
was einfach euer Design ist, wird als der Kopf
bezeichnet. Es ist alles, was ihr tatsächlich im
Browser seht. Und alles andere, was euer
Content-Repository ist, wird als der Körper
bezeichnet. Und das lebt irgendwo anders als das
Front-End.
Und dann kommen wir zu einem anderen Begriff:
Dem zweiten Begriff, das ist das Dekoppeln. Wir
haben es bereits ein wenig angesprochen. Dekoppeln
bedeutet einfach, verschiedene Dinge voneinander
zu trennen, um etwas besser zu machen. Nicht
immer der Fall, aber die grundlegende Idee ist:
Wir haben den traditionellen Zyklus, den wir
gerade betrachtet haben, und dann teilen wir ihn
auf in unsere headless Infrastruktur, wo wir
den Körper haben. Wir haben über den Körper
Das Zerlegen verschiedener Dinge, um etwas besser funktionieren zu lassen, ist nicht immer der Fall, aber
die grundlegende Idee ist, dass wir den traditionellen Zyklus, den wir gerade betrachtet haben, haben,
und dann teilen wir ihn auf in unsere kopflose Infrastruktur, bei der wir den Körper besprochen haben, der immer noch wie unsere traditionelle
Infrastruktur aussieht und immer noch sehr ähnlich aussieht wie zuvor, aber jetzt betonen wir die Schnittstelle, die wir alle als API kennen,
REST-API oder ein anderer Begriff, der jetzt ins Spiel kommt, ist GraphQL, was einfach eine weitere Schnittstelle ist, ähnlich wie die API, um Daten von
Ihrem Backend an einen anderen Ort zu übertragen. Dies könnte eine mobile App oder eine andere Front-End-Anwendung sein. Manche Leute verwenden es für mobile,
digitale Beschilderung oder alles, wo Sie es verwenden möchten. Und Sie können dies jetzt sofort mit jeder WordPress-Installation tun, weil die API aktiviert ist.
Sie können die API verwenden, um Daten von Ihrer bestehenden Website in etwas anderes zu ziehen, das Sie verwenden möchten.
Optionen für die Entkopplung, und wir haben darüber gesprochen. Eine Möglichkeit, und das ist keine vollständige Entkopplung, ist das Zwischenspeichern,
was im Grunde bedeutet, dass ich eine WordPress-Website habe, sie läuft gut, aber wir stoßen auf einige Leistungsprobleme. Also möchten wir beginnen,
die Website zu zwischenspeichern, was so etwas wie die Anforderung speichern ist, die wir zuvor gesehen haben, damit sie nicht den gesamten Zyklus durchlaufen muss,
die Webseite sieht dies sofort und kann Ihnen die zwischengespeicherte Version der Webseite geben, damit Sie nicht den gesamten Vorgang durchlaufen müssen.
Es spart Leistung, gibt Ihnen sofort das Ergebnis zurück und spart Zeit. Dies ist im Grunde eine Art von Entkopplung, weil es nicht den gesamten
Zyklus durchläuft. Okay, also habe ich es hier einfach skizziert, und lassen Sie uns einen anderen anschauen, der auch die statische Seitenerzeugung betrifft.
Es tut im Grunde, was das Wort sagt: Es erzeugt eine statische Seite aus Ihrer WordPress-Instanz, sagen wir,
Sie haben alles, Ihre Website läuft, Sie haben ein Front-End und jetzt
Irgendwo anders könnte eine mobile App oder
eine andere Front-End-Anwendung, eine Webanwendung,
Einige Leute verwenden es für Mobile, uh
Digital
Beschilderung könnte alles sein, wo du es verwenden möchtest,
Und du kannst das jetzt sofort machen,
sofort jetzt mit jeder WordPress
Installation, weil die API aktiviert ist, du kannst die API verwenden, um Daten von deiner bestehenden Website in irgendetwas anderes zu ziehen,
das du verwenden möchtest.
Optionen für die Entkopplung, und wir haben darüber gesprochen. Eine Möglichkeit, und das ist nicht so wie
vollständige Entkopplung, es ist, weil es irgendwie immer noch integriert ist, wäre, diese Seite zu zwischenspeichern, im Grunde zu sagen, ich
habe eine WordPress-Website, sie läuft gut, aber wir stoßen auf einige Leistungsprobleme, also möchten wir beginnen,
die Website zu zwischenspeichern, was so etwas wie die Anfrage ist, die wir zuvor gesehen haben,
Wir haben darüber gesprochen, und das ist nicht so wie
vollständige Entkopplung, es ist so, weil es irgendwie integriert ist, wäre,
diese Seite zu zwischenspeichern, im Grunde zu sagen, ich
habe eine WordPress-Website, sie läuft gut, aber wir stoßen auf einige Leistungsprobleme, also möchten wir beginnen,
die Website zu zwischenspeichern, was so etwas wie die Anfrage ist, die wir zuvor gesehen haben,
Sie läuft gut, aber wir stoßen auf einige
Leistungsprobleme, also möchten wir beginnen,
Die Website zu zwischenspeichern, was so etwas wie die Anfrage ist, die wir zuvor gesehen haben,
Also muss sie nicht den gesamten Zyklus durchlaufen,
Die Webserver sehen dies sofort und können dir die zwischengespeicherte Version der Webseite geben,
Also muss es nicht den gesamten Zyklus durchlaufen, der Webserver sieht dies sofort und kann dir die zwischengespeicherte Version der Webseite geben,
Diese Anfrage wurde zwischengespeichert und es kann dir die zwischengespeicherte Version der Webseite geben, damit du nicht den gesamten
Webseite sehen dies sofort und können dir die zwischengespeicherte Version der Webseite geben, damit du nicht den gesamten Zyklus durchlaufen musst,
Also muss es nicht den gesamten Zyklus durchlaufen, die Webseite sehen dies sofort und können dir die zwischengespeicherte Version der Webseite geben,
Das Ergebnis sofort zurückgeben, Zeit sparen
und das ist im Grunde eine Art von
Entkopplung, weil es nicht den gesamten Zyklus durchläuft,
All diesen Zyklus,
Okay.
Okay, also habe ich es hier einfach skizziert und
lass uns einen anderen anschauen und dieser wurde auch berührt, der statische Seitengenerator. Er tut im Grunde, was das Wort sagt, er generiert eine statische Seite aus deiner WordPress-Instanz. Angenommen,
du hast alles, deine Website läuft, du hast ein Front-End, und jetzt
oh, ich sehe, es sind immer noch Wörter drin,
sag es mir. Du siehst, du startest den
Seitengenerator, der ein Prozess ist,
der unabhängig von deiner Website oder jeglicher Bereitstellung läuft, und es ist ein Build-Prozess, der alle kleinen Dinge aufgreift, die du in WordPress eingerichtet hast,
und im Grunde eine HTML-basierte Website erstellt. Diese kannst du dann überall platzieren, wo du möchtest, was im Grunde den gleichen Mechanismus, nicht genau den gleichen, aber ähnlich wie das Caching ist.
Um, oh, ich sehe, es sind immer noch Wörter drin,
sag es mir. Du siehst, du startest den
Seitengenerator, der ein Prozess ist,
der unabhängig von deiner Website oder jeglicher Bereitstellung läuft, und es ist ein Build-Prozess, der alle kleinen Dinge aufgreift, die du in WordPress eingerichtet hast,
und im Grunde eine HTML-basierte Website erstellt. Diese kannst du dann überall platzieren, wo du möchtest, was im Grunde den gleichen Mechanismus, nicht genau den gleichen, aber ähnlich wie das Caching ist.
es ist ein Build-Prozess, der alle kleinen Dinge aufgreift, die du in WordPress eingerichtet hast,
und im Grunde eine HTML-basierte Website erstellt. Diese kannst du dann überall platzieren, wo du möchtest, was im Grunde den gleichen Mechanismus, nicht genau den gleichen, aber ähnlich wie das Caching ist.
Du kannst nun entscheiden, sie auf einem
Content Delivery Network oder auf GitHub Pages oder wo auch immer zu platzieren und deine Website darüber bereitzustellen. Nun stellt sich die Frage, wie du es kontinuierlich ausführst, wenn es Änderungen in deinen Website-Inhalten gibt und all das,
Aber dafür gibt es Lösungen, und wir werden uns das gleich anschauen. Das sind einfach verschiedene Konzepte. Und dann, das dritte Konzept, über das wir sprechen möchten,
ist JavaScript-basiert. Es gibt einen Begriff dafür, es wird "JAMstack" genannt, wir werden uns das auch anschauen. Es tut im Grunde dasselbe, inklusive viel mehr JavaScript, was dir viel mehr Funktionalität im Front-End ermöglicht.
gleich, aber ähnlich wie das Caching, aber um
du kannst jetzt entscheiden, es auf ein
Content Delivery Network oder auf GitHub
Pages oder wo auch immer zu platzieren und deine
Website darüber bereitzustellen. Nun stellt sich die Frage,
wie du sie kontinuierlich ausführst,
immer wenn es Änderungen auf deiner
Website gibt und all das, aber dafür gibt es
Lösungen und wir werden sie uns gleich
etwas genauer anschauen, dieses um
sind nur verschiedene Konzepte und dann, das
dritte Konzept, über das wir sprechen möchten,
ist Javascript-basiert. Es gibt einen Begriff dafür,
es wird "JAMstack" genannt, du wirst
es auch anschauen. Es tut im Grunde dasselbe,
aber es bezieht viel mehr JavaScript ein,
was dir viel mehr Funktionalität im Front-End ermöglicht.
Mehr Möglichkeiten, die du im Front-End einbringen kannst.
So ist die statische Seite das, was es sagt, es ist
eine statische Seite, die nicht unbedingt interaktive Funktionalitäten hat
für deine Benutzer, wie zum Beispiel ein Kontaktformular oder so,
und mit mehr und mehr JavaScript in deiner statischen Seite,
kannst du immer mehr Optionen im Front-End bieten. Das ist also,
warum das interessant wäre. Es basiert auch auf einem Build-Prozess,
der mit deiner WordPress-Instanz kommuniziert, und wir würden sagen, ein kontinuierlicher, um Bereitstellungszyklus, der das Ergebnis dieser statischen Seite wiederum
auf ein Content Delivery Network oder
etwas in der Art stellt.
interessant, es basiert auch auf einem Build-Prozess,
der mit deiner WordPress-Instanz interagiert, und wir würden sagen,
einen fortlaufenden Bereitstellungszyklus, der dann
das Ergebnis dieser statischen Seite wiederum
auf ein Content Delivery Network oder
etwas in der Art stellt.
Das, um es als drittes
Konzept zu betrachten. Das sind, sagen wir mal, drei
verschiedene Konzepte für die Entkopplung.
Es gibt sicherlich mehr, aber dies sind die
gängigsten, und das statische Konzept
ist tatsächlich relativ einfach umzusetzen,
da es ein schönes Plugin dafür gibt.
Es heißt einfach Static von Patrick
Posner und im Grunde installierst du es innerhalb
von WordPress, konfigurierst es und
erstellst deine statische Website recht einfach.
Du erhältst ein Ergebnis, das du auf jeder Web
Server statisch platzieren kannst, und es läuft,
deine Website ist sozusagen ein Zip-Paket am Ende.
Du platzierst es irgendwo und es
läuft.
Website ist sozusagen ein Zip-Paket am Ende,
du platzierst es irgendwo und es
läuft.
Deine Infrastruktur wird jetzt ein wenig
komplizierter, weil du
mindestens von einer WordPress-Instanz sprichst,
wo alles läuft, dein regulärer WordPress-Server, auf dem
Benutzer den Inhalt einfügen, und dann hast du
mindestens eine zweite Instanz,
wo du diese statische Website platzierst, um sie
auszuliefern. Das bringt dir bereits einige Vorteile,
dass das Frontend von Backend entkoppelt ist, sodass du sagen kannst,
niemand wird jemals das Backend sehen, außer all deinen Editoren und
Inhaltseditoren. Die Sicherheitsprobleme sind also weniger besorgniserregend.
Zum Beispiel kann WordPress vollständig verdeckt sein,
niemand kann von außen darauf zugreifen,
und im Frontend hast du nur die
statische Website, die ausgeliefert wird,
um einiges schneller als eine übliche WordPress-Anfrage wäre.
Es könnte kostenmäßig weniger sein,
weil das Ausliefern einer statischen Website zum Beispiel über
GitHub dich nichts kostet und du es sogar mit deinen
Domains integrieren kannst, denke ich, und
es könnte sogar mit deinen
Domains integriert werden. Es gibt also viele Vorteile,
und das Ausliefern einer statischen Website über
GitHub kostet dich nichts, und du kannst es sogar mit deinen
Domains integrieren, denke ich, und
es könnte sogar mit deinen
Domains integriert werden.
ja, das könnte eine interessante Option für dich sein,
abhängig von deinem Projekt, über das wir gleich sprechen werden.
GST ist jetzt viel komplizierter,
wir sprechen über viele verschiedene Bibliotheken und so, um
zurückzugehen, würden wir Gemst verwenden, um ein viel interaktiveres Frontend zu erstellen.
Und "Jam" steht für JavaScript,
APIs und Markup, also wird dieses Bundle
deine kopflose Website basierend auf den Daten von WordPress erstellen.
Du kannst Vanilla JavaScript, React oder
Vue verwenden und viele andere Varianten da draußen,
um die Website zu erstellen.
Die integrierte API ist die REST-API, die auch von WooCommerce und ACF (Advanced Custom Fields)
unterstützt wird. Für zusätzliche Bibliotheken gibt es
zusätzliche Plugins. Gatsby hat sein eigenes Plugin, unterstützt APIs,
und dann gibt es GraphQL, was eine völlig separate Version einer API basierend auf einer
SQL-ähnlichen Sprache ist, anstelle der REST-API.
die Website
um, die APIs in der integrierten Version sind die
REST-API, die auch von WooCommerce und ACF (Advanced Custom Fields)
unterstützt wird. Für zusätzliche Bibliotheken gibt es
zusätzliche Plugins, wie Gatsby, das sein eigenes
Plugin hat. Yos unterstützt APIs und um dann
hast du GraphQL, was eine völlig
separate eigene Version einer API basierend
auf mehr einer SQL-Sprache ist, anstelle von
REST-API-Befehlen. Und dann für Markup, das
einfach alles generiert und zusammenfügt, um eine
lesbare Website für den Browser zu erstellen, gibt es auch
viele verschiedene Frameworks, je nach
Geschmack. Ich würde sagen, es hängt alles davon ab,
was du bevorzugst, sei es Next.js, Gatsby oder was auch immer du gerne benutzt.
Warum headless? Wir haben schon ein wenig
über einige Vorteile gesprochen, also
ein Vorteil ist, dass deine Benutzer, deine
Kunden, immer noch daran gewöhnt sind, das
WordPress-Backend zu verwenden. Sie können es weiterhin
verwenden, alles bleibt gleich für deine
Content-Editoren. Du hast eine zusätzliche Flexibilität,
wo du mit mobilen Apps arbeiten kannst, oder wie wir
früher gesagt haben, digitale Beschilderung oder alle verschiedenen Geräte, die da draußen sind,
und verwendest trotzdem WordPress als
deine Quelle für den Inhalt oder andere Dinge,
die du daraus verwenden möchtest. Die
Performance, wir haben bereits darüber gesprochen, dass
eine statische Website nicht durch den Server gerendert werden muss,
wie wir es uns früher angesehen haben. Sie wird normalerweise schneller geliefert,
und das Sicherheitsproblem, bei dem WordPress nicht draußen ist,
um angegriffen zu werden. Du kannst es hinter jeder Art von Firewall verstecken,
die du möchtest, du kannst moderne Frameworks verwenden,
JS, was viele Front-End-Entwickler wirklich genießen und dir viele
Funktionalitäten gibt. Aber es bringt auch Nachteile mit sich,
zum Beispiel haben wir über die statische Website gesprochen, die die
Grundversion ist.
es gibt dir nicht unbedingt alle Funktionen, die du gewohnt bist. Nehmen wir an,
deine Website hat eine Funktion für
die Kontaktaufnahme, ein Kontaktformular oder Kommentare
oder alles Mögliche, was eine Interaktion erfordert. Es ist nicht
notwendigerweise statisch,
denn jemand müsste mit dem Server darüber sprechen, um die
Informationen zu speichern, die der Benutzer in die
Website eingibt. Eine statische Website allein kann das nicht unbedingt
tun. Du hast zwar ein Formular, aber die Formulardaten müssen irgendwohin gehen.
Wenn du nur die Formulardaten hast, müssen sie irgendwohin gehen.
Also, wenn du eine statische Website verwendest, musst du darüber nachdenken,
wie du das machst. Und wenn du den einfachen
statischen Ansatz verwendest, unterstützt er Kontaktanfragen, zum Beispiel mit Jamstack
hast du weit mehr Optionen, weil du
JavaScript verwenden kannst, die gesamte WordPress-API
nutzen kannst, was dann nicht mehr vollständig entkoppelt wäre, aber du könntest immer noch
die API verwenden, um etwas an dein Backend zu senden und dort Funktionalitäten zu nutzen.
Also musst du darüber nachdenken, wie du das machen möchtest. Oder du kannst andere
Integrationsmöglichkeiten nutzen. Wenn du zum Beispiel ein Newsletter-System
verwendest und Leute abonnieren möchtest, bieten sie normalerweise eine JavaScript-Methode
direkt von der Seite aus an, sodass du keine
WordPress-Funktionalität benötigst. Ein weiterer Nachteil besteht darin, dass es
derzeit weniger Themes für diese Art von Ansatz gibt,
aber es ist trotzdem interessant, sich das anzusehen, und
es werden immer mehr. In dieser Gemeinschaft gibt es auch einige Leute,
die Themes für statische Websites oder
Jamstack erstellen.
Das Frontend, so wie es ist, benötigt in der Regel viel Wissen in JavaScript und
M Marwig hat es bereits gesagt, als er React zu WordPress eingeführt hat, dass
jeder sich mit React vertraut machen sollte, und das ist ein zusätzlicher Grund dafür. Viele
Kopfzeilen-Websites basieren auf React,
und das kannst du hier verwenden.
Die Bearbeitungskomplexität, über die wir gesprochen haben,
und jetzt sprechen wir über mehrere Systeme, die Nutzung mehrerer Systeme bedeutet auch,
dass du sie auch pflegen musst und in der Regel wirst du weniger Unterstützung dafür finden als
du es innerhalb der WordPress-Community tun würdest. Also, ich denke, wir
können uns darauf einigen, dass es viele Informationen darüber gibt, wie man etwas in
WordPress macht, aber nicht so viel in all diesen verschiedenen Varianten von JavaScript oder speziell
bei der Arbeit mit WordPress-JavaScript und all diesen Elementen.
Eingeschlossen. Das wird sich auch ändern, aber es dauert natürlich, und es hängt auch davon ab,
wie viele Systeme da draußen überleben werden und wie gut sie dokumentiert sein werden.
Nun, das größte Problem meiner Meinung nach ist, dass es viele häufige Änderungen gibt
in den JavaScript-Frameworks, sei es React oder etwas anderes.
Mehrfachsysteme zu verwenden bedeutet auch, dass du sie pflegen musst und in der Regel
wirst du für diese Art von Arbeit weniger Unterstützung finden als du innerhalb der
WordPress-Community finden würdest. Also, ich denke, wir
können uns darauf einigen, dass es viele Informationen darüber gibt, wie man etwas in
WordPress macht, aber nicht so viel in all diesen verschiedenen Varianten von JavaScript oder speziell
bei der Arbeit mit WordPress-JavaScript und all diesen Elementen.
Eingeschlossen. Das wird sich auch ändern, aber es dauert natürlich, und es hängt auch davon ab,
wie viele Systeme da draußen überleben werden und wie gut sie dokumentiert sein werden.
Das größte Problem meiner Meinung nach ist, dass es viele häufige Änderungen in den
JavaScript-Frameworks gibt, sei es React oder sonst etwas. Diese
Änderungen betreffen sogar Node. Wenn du zum Beispiel von 16 auf 18 aktualisierst,
kann dein Projekt kaputt gehen und nichts funktioniert mehr. Du musst schauen, was passiert
ist, was sich geändert hat, und alles wieder zum Laufen bringen.
Diese Änderungen sind nicht wie das einfache Aktualisieren von etwas, normalerweise sind es
zerstörende Änderungen, was bedeutet, dass du manchmal von vorne anfangen musst und
dein Projekt ganz neu aufsetzen musst, weil wenn sich beispielsweise Gatsby von 4 auf 5
ändert, bedeutet das nicht, dass es rückwärtskompatibel ist, okay? Wir haben über
Node, wenn du Node von 16 auf 18 aktualisierst,
kann dein Projekt kaputtgehen und nichts funktioniert,
und du musst schauen, was passiert ist, was sich geändert hat, und alles zum Laufen bringen.
Wieder und
diese Änderungen sind nicht leicht zu aktualisieren,
normalerweise sind es breaking changes, was bedeutet, dass du manchmal von vorne anfangen musst und dein Projekt wieder einrichten musst,
weil, wenn sich die Geschwindigkeit von 4 auf 5 ändert,
bedeutet das nicht, dass es rückwärtskompatibel ist, okay, wir haben über Leistung gesprochen, um dir einen kurzen Einblick in eines unserer
Projekte zu geben, haben wir eine Analyse darüber durchgeführt, wie es lief und warum es nicht schnell genug geliefert wurde, und in diesem Fall haben wir einen New Relic-Bericht ausgeführt und gesehen, dass wir viel Zeit für Berechnungen auf der PHP-Seite verloren haben, in anderen Projekten gibt es manchmal eher ein MySQL-Problem und wir haben dann beschlossen, okay, lass uns sehen, wie wir das lösen können, und headless war eine Möglichkeit, die Performance zu verbessern, es ist auch interessant für dein SEO, natürlich, wie wir alle wissen, suchen sie heutzutage nach deinen Lieferzeiten, viel um Sicherheit ging es auch
darum, Back-End und Front-End zu trennen, spart dir eine Menge, nicht dass du dich nicht mehr um dein WordPress kümmern sollst, aber es ist nicht so präsent wie früher, um Flexibilität ging es
auch, du kannst deine Daten, die du bereits in WordPress hast, nutzen, und viele andere Kontexte und jetzt die interessanteste Frage für wen ist das interessant
für welche Art von Projekten ist das
das bedeutet nicht, dass es rückwärtskompatibel ist, okay, wir haben darüber gesprochen
Kompatibilität, um dir einen kurzen Einblick zu geben,
wir haben gerade über die Leistung gesprochen, um dir einen kurzen Einblick zu geben,
Einblick in eines unserer
Projekte, wir haben eine Analyse gemacht, wie es lief und warum es nicht schnell genug geliefert wurde,
und wir haben in diesem Fall einen New Relic-Bericht erstellt und gesehen,
dass wir viel Berechnungszeit auf der PHP-Seite verloren haben, in anderen Projekten gibt es manchmal eher ein MySQL-Problem,
und wir haben dann entschieden, okay,
lasst uns sehen, wie wir das lösen können, und headless war eine Möglichkeit, die Performance zu verbessern, es ist auch interessant für dein SEO, natürlich, wie wir alle wissen,
heutzutage suchen sie nach deinen Lieferzeiten,
viel um Sicherheit ging es auch
darum, Back-End und Front-End zu trennen, spart dir eine Menge,
nicht dass du dich nicht mehr um dein WordPress kümmern sollst,
aber es ist nicht so präsent wie früher, um Flexibilität ging es
auch, du kannst deine Daten, die du bereits in WordPress hast, nutzen,
und viele andere Kontexte und jetzt die interessanteste Frage für wen ist das interessant
heutzutage suchen sie nach deinen Lieferzeiten,
eine Menge um Sicherheit ging es auch,
wir haben auch darüber gesprochen,
Back-End und Front-End zu trennen, spart dir eine Menge,
nicht dass du dich nicht mehr um dein WordPress kümmern sollst,
aber es ist nicht so präsent wie früher,
um Flexibilität ging es auch,
wir haben darüber gesprochen,
du kannst deine Daten, die du bereits in WordPress hast, nutzen,
und in vielen anderen Kontexten,
Kontexte und um jetzt die interessanteste Frage für dich: Wer findet das interessant?
Frage für wen ist das interessant
wie für welche Art von Projekten ist
Headless interessant. Eine Möglichkeit könnte sein
dass deine Website sich nicht viel ändert und viele
Seiten dort repräsentieren ein Geschäft wie eine Geschäftskarte,
das sich nicht viel ändert. Es gibt keine wie viele
deiner Kunden tatsächlich in der Lage sind,
einen neuen Abschnitt oder so etwas bereitzustellen
selbst einen neuen Abschnitt
ändert sich einmal pro Woche oder so
es ist einfach genug, um eine statische
Website zu erstellen, nachdem ein neuer Beitrag veröffentlicht wurde
und einfach die statische Seite aktualisieren
um Website, die sehr schnell geladen werden muss
um sehr gut für diese Art von Arbeit
und die andere ist Sicherheit oder
verwundbare Websites für Hacker. Wenn du bereits sehr
kundig in JavaScript bist, kannst du dies nutzen
und Beispiele könnten rein informative Websites sein,
die wie die besprochene Business-Website sein könnten oder
du hast einen Politiker, der für eine Kampagne kandidiert
es ist sehr statisch, er präsentiert sich hat viele Besuche
stellt es statisch dar, du musst nicht
über die Pflege nachdenken
läuft WordPress dahinter
du musst nicht
über die Pflege nachdenken
lässig um Zeitschriften, äh, wie üblich
wenn wir Zeitschriften veröffentlichen, machen wir das um
quartalsweise oder monatlich oder so etwas
danach ändert sich die Zeitschrifteninformation nicht
wir rendern sie statisch aus und stellen sie auf das CDN
wir denken nicht darüber nach, wie viele
Besucher wir haben, es wird immer
ausgeliefert und in kurzer Zeit
Landingpages und Kampagnen sind auch
in der Regel Seiten, die schnell ausgeliefert werden müssen
da könntest du hinzugefügt haben
um Funktionalitäten wie du möchtest, dass jemand
etwas abonniert
um oh und du kannst so weit gehen, an
eine einzige Seite zu denken
Anwendungen, die normalerweise umgesetzt und gerendert werden
und um auch Progressive Web
Apps, und das ist es um wie viel Zeit
noch
okay, ja, um, wenn du möchtest, können wir
ein Projekt betrachten und wie es funktioniert
also, um, im Grunde habe ich schnell unser
Webpress-Meetup-Website genommen, die nicht
das schönste Projekt ist, das ich gleich sage
das im Voraus, das ist unsere um
WordPress Meetup-Website, das ist um
im Grunde äh, oops
sorry, habe etwas angeklickt, das ist im Grunde genommen
nur um ein paar Beiträge, die über
um unsere kommenden Veranstaltungen erzählen und auch
einige Bewertungen bereits stattgefundener Ereignisse geben
und um das ist es, also ziemlich einfache Seite
ändert sich nicht viel, um könnten wir leicht
es ausrendern und statisch bereitstellen
weil es keine
nicht, dass ich wüsste, es gibt keinen
Kontaktformular oder so, also super einfach
nur um anders auszuliefern
und für dieses Beispiel habe ich
um Gatsby gewählt, das auf React basiert, und ich
kann es schnell öffnen, bekommt bjs.com, es hat
um einige eingebaute WordPress-Unterstützung
bedeutet, es gibt einige Dokumentation dazu
wie man es macht, im Grunde was du tun musst
ist, zwei Plugins zu installieren, welche
das wp-getsb
Plugin und das GraphQL-Plugin sind, das
dir diese zusätzliche Benutzeroberfläche gibt, über die wir gesprochen haben
und dann kannst du
es
lokal ausführen, du kannst einen Befehl ausführen, um es einfach um
dein Projekt hochzufahren, oh nicht deine
Website, sondern dein gby-Projekt
und was es tut, es lädt
wie ein Starter, baut alles auf
aus den Gatsby-Quellen, du brauchst
Notizen dafür npm und um was es im Hintergrund macht, es setzt dein Repository zusammen
also alles, was du brauchst, um dein Frontend zu bauen, die Basis davon und um
lassen uns ansehen, wie ein Projekt wie
das aussieht, also grundsätzlich bekommst du
deine gby-Website-Inhalte aus einem Content
um Ordner, einem öffentlichen Ordner, einem Quell
um Ordner und einem statischen Ordner und einigen
Konfigurationsdateien und im Grunde was du tust
im deiner Konfigurationsdatei oops, entschuldige das
ist klein richtig also
lass uns
dies
oops also im Grunde genommen um du für diesen
Zweck du musst nur um eine Einstellung ändern
was im Wesentlichen bedeutet, welches
die GraphQL-URL ist, die deine grundlegende
Website in diesem Fall, äh, WP
D uns
s.de
graphql und
um sobald du das hast, um kannst du ausführen
lass uns einen weiteren ausführen, das ist immer noch der
Bauprozess fast fertig, aber ich habe es natürlich vorbereitet, damit wir mehr
Zeit haben
um in deinem Terminalbefehl, einfach um
sagen um getsb entwickeln, was du verwendest, während du entwickelst
und was es tut, das ist der Build
das, was du während der Entwicklung verwendest
und was es tut, das ist der Bauprozess,
über den wir zuvor gesprochen haben, also an
diesem Punkt nimmt es alle Quelldateien
von Gatsby, die wir gerade
installiert haben, verbindet sich mit deinem
bestehenden WordPress
Website und erstellt ein Paket daraus
so dass es alles lädt, was du in deinem
Frontend-Repository eingerichtet hast
Gatsby auf dieser Seite und holt die
Informationen von um allen Notizen, die du
hier siehst, Menütext, Aies-Kommentare, Beiträge
Seitenbenutzerrollen, Menüpunkte, das ist alles
die Quelle, die es aus deinem vorhandenen
WordPress
Websites lädt und jetzt wird gebaut, also
tatsächlich immer noch herunterladen, oh es ist
das Herunterladen der Medien, das dauert immer
am längsten und es fügt bereits Verbesserungen an
deinen Dateien hinzu, wie es schnelle Ladebilder
für dich generiert und so weiter, es macht bereits
um Lazy Loading und was noch nicht und jetzt
baut es das Bundle
schreibt etwas Json, das dann verwendet wird
um die Website zu liefern
ohne es tatsächlich noch fertig ist, sorry um
also jetzt bekommst du zwei URLs für deinen
Lokalen Host, der Local Host. 8000 und lokal
Host. 8000 GraphQL lautet, die du verwenden kannst
es ist eine Browser-Version von GraphQL, wo du
herumspielen kannst mit deinen
es ist eine Browser-Version von GraphQL, wo du
mit deinen Daten herumspielen kannst
und schauen wir es uns an
so dies ist der Local Host 8000, es ist
im Wesentlichen das, was es in dieser sehr einfachen
Version gemacht hat, ich habe nicht viel daran gemacht
ich habe nur ein wenig geändert, wie es aussieht
es lädt deinen Beitrag, den Beitrag, den wir
früher von der Website gesehen haben und gibt
dir jetzt ein einfaches Beitragsgitter und
alles, was du hier jetzt machst, passiert statisch
nur auf diesem Computer, es lädt den Beitrag sofort
und du siehst die Bilder eigentlich hier siehst du
wie es die Bilder lädt
es ist jetzt so schnell, dass du es nicht sehen kannst
aber es hat Vorschau-Bilder, also siehst du normalerweise
Vorschau-Bilder, bevor sie geladen werden, damit du nicht das
was ist der Name dafür, das Inhaltsdisposition-Ding
und ähm ja du du kannst, danke oh es ist tatsächlich
richtig
hier ähm ja so
[Musik]
ähm kinderleicht eine Website läuft
und vielleicht kannst du bereits einige
Probleme sehen, wie es keine
Navigation hat, wie kein Menü direkt aus der Box
du musst es bauen, also hier wird es kompliziert
im Grunde gibt dir der Starter diese
Art von Struktur, du hast du kannst
durchsuchen, du kannst sogar
suchen ähm du kannst du kannst deine
Beiträge sehen, alles ist hier
aber
Jetzt musst du damit anfangen, deine eigene
Rend in JavaScript, in diesem Fall in React,
in getp oder was auch immer du verwendest. Hier kommt
die
zusätzliche Schwierigkeit ins Spiel oder wo
einige von euch vielleicht schon daran gewöhnt sind
so zu arbeiten, aber es ist nichts wie
Arbeiten mit
WordPress ähm ja, wir sind aus der Zeit
ähm entschuldige, entschuldige, wir können
direkt zu den
Fragen gehen, danke
dir, danke dir, danke dir, also du hast uh
jetzt alle Kämpfe und was machst du
jetzt
das reicht aus für weitere zwei
Sitzungen oder Workshops ähm, aber ich kann dir schnell zeigen,
deine ähm Struktur ist im Wesentlichen ähm deine Quelldateien, du hast
einige Komponenten hier, die interessant sind, die so etwas wie die
Basislayouts für Sachen sind, du kennst diesen Ansatz von M MVC-Arbeit
oder so ähnlich, also du hast einige ähm Ansichten hier, Layout-Basisansichten,
du kannst ähm du kannst deine SEO-Sachen einrichten,
du kannst es direkt aus ähm mit Y extrahieren oder was du bereits verwendest,
und ähm ja, es unterstützt SEO sehr gut, du hast
dein CSS und du kannst ähm einzelne Seiten hinzufügen, du kannst auch
die Seiten verwenden, die du bereits in
WordPress hast, und dann hast du ähm deinen Blog
Post das ist im Grunde die Ansicht für deinen
Blog-Post, ähm, deine Vorlage lädt
das Vorschaubild jetzt und im Grunde siehst du etwas
HTML hier, wo es das Bild für
Beispiel lädt und dann deine Post-Informationen, ähm, vorwärts und rückwärts navigieren
und dasselbe gilt für das
Archiv ähm, im Grunde hast du die
Vorlage für deine
und dasselbe gilt für das
Archiv ähm, im Grunde hast du die
Vorlage für deine
Archiv, das einfach eine Liste ist, eine
ungeordnete Liste in diesem Fall und ähm
es lädt alles
von dieser Abfrage hier unten, die durchgeführt wird,
gegen das GraphQL. Dort oben hast du die Vorlage,
hier unten hast du
die Informationen darüber, woher die Daten kommen,
es zieht sie durch GraphQL von deinem bestehenden WordPress und dann
wird alles zusammengeführt
ähm ja, du kannst damit viele Dinge tun, viel mehr
Dinge, zum Beispiel kannst du deine
um deine Symbole und so automatisch generieren
bei jedem Build und so weiter
wie das, eine weitere interessante Sache ist,
es läuft live, also wenn ich diesen Beitrag hier habe
und etwas ändere, also sagen wir, oh
nein, das ist es nicht, das ist auf der
linken Seite sehen wir unsere um statische
Seite und gehen wir in die Bearbeitung in unserem r
regulären ähm Backend in WordPress und ich
habe hier etwas geändert
um das
Änderungen sollten gezogen werden und ich hoffe es
funktioniert auf deiner statischen Seite ohne
etwas zu tun, damit du irgendwie arbeiten
und sehen kannst, was du machst, dasselbe gilt
für ähm alles, was du im Backend in deinem um Gatsby um Repository machst,
lass uns sehen, wenn du etwas in deinen CSS
Dateien änderst, wird es direkt in
um in
um ich weiß nicht, was ich jetzt ändern soll
aber äh lass uns die Hintergrundfarbe ändern
also habe ich gerade die Farbe geändert und dann
können wir
sehen
wie es die Sache neu erstellt und
normalerweise wählt es es direkt aus, aber du kannst
alle deine Änderungen sehen, die du live in deinem
Browser machst, während du daran arbeitest
es ist irgendwie cool und das ist nur
ein Beispiel für ein Framework, es gibt viele
davon da draußen, gibt es noch andere Fragen oder
sind wir
fertig? Vielleicht möchtest du etwas hinzufügen,
um diese Sitzung abzuschließen, wie nein
ich wollte nur eine kurze
Einführung in dieses Thema geben
und wenn es keine Fragen gibt, denke ich
ist das Konzept verstanden, ähm ich weiß nicht
nun, ich bin sicher, es wird ähm es wird
viele Fragen geben, wenn diese Leute ein wenig
ruhen und du weißt und versuchen, das tatsächlich zu machen
und aber ich bin sicher, sie werden in der Lage sein
dich zu finden, wenn sie irgendwelche Fragen haben, dann
fürs Erste, ähm danke Mario
das war eine tolle Sitzung und ich hoffe, ihr habt alle genossen, danke
[Applaus]
nächste Sitzung