JAMstack entmystifizieren: Ein Interview mit Phil Hawskworth

Einige von Ihnen haben vielleicht schon von JAMstack gehört und vielleicht sogar davon, wie man von WordPress zu Hugo wechselt, aber ist JAMstack eine praktikable Option für jede Art von Projekt?

Ich habe mit Phil Hawksworth gesprochen, einem Front-End-Ingenieur, der sich (nach 9 Jahren Arbeit in Agenturen wieder auf die Arbeit an einem eigenständigen Produkt zurückgekehrt) jetzt auf die Entwicklung von Strategien für JAMstack-Technologien konzentriert, um das Erstellen für das Web einfacher, schneller und mehr zu machen sicher. Phil wird außerdem vom 9. bis 10. Juli in London Mitveranstalter der JAM_stack ldn sein, einer Konferenz, die sich statischen Site-Generatoren, Serverless und JAMstack widmet.

Vitaly: Also hallo und willkommen zu einem unserer Gespräche mit unseren Rednern auf der Smashing Conf und allgemein netten Leuten. Sie erinnern sich vielleicht an die Zeiten, als FTP eine große Sache war, und vielleicht stellen Sie immer noch bereit, warum FTP ein absolut sicherer Bereich ist, sodass Sie sich darüber keine Sorgen machen müssen. Aber die Änderungen sind so hoch, dass Sie FTP nicht mehr verwenden und stattdessen zu Git-basierten Workflows und wahrscheinlich kontinuierlicher Bereitstellung wechseln. All diese ausgefallenen Pfeifen und Glocken. Und deshalb freue ich mich sehr, heute Phil Hawksworth willkommen zu heißen, der derzeit bei Netlify arbeitet, Entwicklerbeziehungen [unverständlich 00:10:00]. Hallo Phil. Wie geht es dir heute?

Phil: Mir geht es super, wie geht es dir Vitaly? Es ist schön dich zu sehen.

Vitaly: Oh, mir geht es großartig. Es ist immer eine Freude, Sie zu sehen. Du bist wie ein Sonnenschein, der Netlify und Jump Stack und alles streamt.

Philipp: Ich versuche es. Ich bin nicht einmal gebrandmarkt, was für eine verpasste Gelegenheit.

Vitaly: Das ist okay, das ist okay. Aber du musst mir sagen, also, dass Gem oder Jen oder Jeet, wie, Jem? Ist es jem?

Phil: Marmelade. Es ist Marmelade. Es dreht sich alles um die Marmelade.

Vitaly: Es ist alles Marmelade. Also der JAMstack. Für Entwickler oder Designer, den Begriff eigentlich noch nie gehört. Wenn Sie vielleicht zusammenfassen wollten, was es ist und warum es gut ist und welche Vorteile es überhaupt hat. Warum sollten Sie jemals von Ihrem traditionellen, guten alten Stack zu JAMstack wechseln wollen? Vielleicht kannst du es kurz zusammenfassen.

Phil: Mal sehen, ob ich es versuchen kann, denn es ist verlockend, einfach zu sagen, JAMstack, das JAM steht für Javascript, APIs und Mockup. Aber das an sich erklärt nicht wirklich viel, nur zu wissen, wofür es steht. Bei JAMstack geht es also wirklich darum, Websites bereitzustellen und zu bedienen, die sich nicht auf einen Ursprungsserver verlassen, sie verlassen sich nicht darauf, dass Anfragen ständig einen aktiven Server treffen.

Phil: Sie sind vielleicht besser vertraut mit Stacks wie dem LAMP-Stack, der Linux, Apache, MySQL und PHP war, das war die Art von Stack, die Ihre Site dort bediente. Mit JAMstack wird es ein bisschen anders, weil wir eine Art Ebene höher gestiegen sind, weg vom Server und näher zum Browser, also denken wir viel darüber nach, so schnell wie möglich in einen Browser zu kommen und dann Technologien im Browser zu verwenden später erweitern und ergänzen. Bei JAMstack geht es also darum, Websites vorab zu rendern, sie in den Browser zu bringen und sie dann vielleicht zu verbessern, zu erweitern, die Erfahrung mit Javascript in Ihrem Browser zu machen, vielleicht Anfragen an APIs zu stellen und so etwas.

Phil: Das ist also das Modell, zu versuchen, davon wegzukommen, einen Server zu haben, den man warten muss, weil ich weiß, dass die Wartung eines Servers schwierig ist. Ich weiß nicht, wie es euch geht, aber ich habe viele Seiten, die verschwunden sind, als ich ihnen einfach für ein paar Jahre den Rücken gekehrt habe. Ich musste PHP aktualisieren, was bedeutete, dass ich die Version von Linux aktualisieren musste, was ich einmal in einem blauen Mond getan habe. Die Wartung von Servern ist also schwierig, daher besteht die Idee des JAMstack darin, zu versuchen, es so einfach wie möglich zu machen, Websites als statische Assets bereitzustellen und dann das Beste aus allen APIs und Unfähigkeiten im Browser zu machen, um Erweiterungen vorzunehmen und mehr Dinge damit zu tun die dort.

Vitaly: Richtig, macht Sinn. Nun, tatsächlich sind wir vor ungefähr 2 Jahren zu JAMstack gewechselt.

Phil: Zwei Jahre?

Vitaly: Ja, es war eine ziemliche Reise für uns. Und natürlich haben wir dabei einige Lektionen gelernt. Aber ich frage mich, würden Sie sagen, dass im Wesentlichen jedes Projekt irgendwie davon profitieren könnte, einige Teile davon zu JAMstack oder ähnlichem zu verschieben, wo sehen Sie seine Grenzen? Ist es etwas, das potenziell jeder Entwickler in einem Projekt verwenden könnte, oder ist es etwas, das einer bestimmten Gruppe von Websites oder einer Gruppe von Projekten gewidmet ist?

Phil: Ja, ich meine, es ist verlockend zu sagen, oh ja, man kann es für alles verwenden, aber ich denke, man sollte vorsichtig sein, das über jede Technologie zu sagen. Wissen Sie, Sie müssen wirklich die Anwendungsfälle auswählen und sicherstellen, dass sie gut zugeschnitten sind. Ich würde sagen, der erste Instinkt, wenn Sie an eine JAMstack-Site denken und vielleicht an etwas denken, das als statische Assets bereitgestellt wird, vielleicht direkt von einem CDN. Sie könnten denken, das ist nur gut für Websites, die sich nicht sehr oft ändern, sie sind Zitat für Zitat, statisch, sie ändern sich nicht. Aber in Wirklichkeit ist das nicht wirklich der Fall, weil es jetzt so viele Tools gibt, die die Reibung bei der Bereitstellung von Dingen verringern können.

Phil: Sie können viele Male am Tag oder mehrmals pro Stunde bereitstellen, wenn Sie möchten, und die Dinge tatsächlich viel dynamischer wirken lassen als zuvor. Einige dieser Anwendungsfälle, bei denen Sie denken, dass sie nicht angemessen wären; die kommen tatsächlich auch in die Falte. Die Zeit, in der es vielleicht schwierig wird, ist jedoch, wenn wir Websites erstellen, die viele, viele Seiten, viele Hunderttausende oder viele Millionen Seiten haben, weil das JAMstack-Modell wirklich sehr sinnvoll ist, wenn Sie Ihre Website vorab generieren können Sie verwenden also möglicherweise einen statischen Site-Generator. Die sind momentan total im Trend; die sind wirklich sehr beliebt.

Phil: Aber natürlich müssen sie jedes Mal, wenn sie ein Update bereitstellen, ein Stück Arbeit leisten. Wenn Sie also eine Website haben, die viele Millionen Seiten hat, z. B. eine Zeitungswebsite, ist die Arbeit erforderlich, um diese neu zu generieren kann ziemlich sein, wissen Sie, das kann lange dauern, so dass Sie anfangen, auf einige der Einschränkungen zu stoßen, bei denen JAMstack sozusagen einfach verwendet werden kann. Sie können anfangen, ein bisschen schlau zu werden und anfangen, das zu umgehen, wenn Sie sehr, sehr schlau sind, aber es bringt definitiv einige Herausforderungen mit sich.

Phil: Eines der Dinge, die ich langsam von einer Vielzahl unterschiedlicher Static-Site-Generatoren wie Gatsby zum Beispiel oder React Static und auch Hugo sehe. Die Teams hinter diesen statischen Website-Generatoren beginnen damit, Möglichkeiten zu erkunden, wie Sie die Seiten progressiv generieren können, mit anderen Worten, Sie müssen nicht die gesamte Website erneut bereitstellen oder die gesamte Website neu erstellen, wenn sich etwas ändert, sondern versuchen, Wege zu finden um inkrementelle Builds durchzuführen. Es ist ein ziemlich herausforderndes Problem, das es zu überwinden gilt, aber daran wird im Moment gearbeitet, damit auch versucht werden kann, diese Barriere zu überwinden. Aber sicherlich kann es im Moment eine kleine Herausforderung sein, Wege zu finden, eine JAMstack-Site für eine Website mit vielen Millionen Seiten oder vielen Hunderttausenden von Seiten zu verwenden.

Vitaly: Oh, das ist interessant. Also eigentlich die Idee, dann einen Div des Staates zu bedienen, den Sie haben, und im Wesentlichen, dass alles, was Sie bauen müssen, wie ein neues Portal, irgendwie darin eingeblättert werden muss, also ist es interessant zu sehen, wie das passiert. Weil Sie auch erst vor kurzem, ich glaube vor zwei Wochen, einen Artikel von Jason Pamental veröffentlicht haben, in dem die Idee eigentlich sehr ähnlich war, wo Sie tatsächlich die Schriftarten laden würden, und dann laden Sie die erste Seite, die Sie brauchen, und dann Sie Laden Sie die zweite und führen Sie sie dann tatsächlich zusammen, um eine neue Schriftart zu erstellen, wie auch das inkrementelle Laden von Schriftarten.

Philipp: Interessant.

Vitaly: Das wäre wirklich interessant, das zu erforschen.

Phil: Ja, und es ist nicht nur so sehr das Laden, es ist die Generation-

Vitaly: Die Generation, der Ausbau.

Phil: Ja, genau.

Vitaly: Ich verstehe. Aber was sind Ihrer Meinung nach die gemeinsamen Herausforderungen, vor denen die meisten Entwickler stehen? Nun, ich meine, lassen Sie mich zuerst zurückgehen. Wenn Sie noch nie mit JAMstack gearbeitet haben und mit Ihrem LAMP-Stack sehr zufrieden und zufrieden sind und vielleicht die Möglichkeiten und Vorteile wie Sicherheit und Leistung von JAMstack erkunden möchten. Wie würdest du eigentlich anfangen? Was würden Sie bewegen, was bedeutet es, den Arbeitsablauf zu ändern?

Phil: Also, die Änderungen am Workflow können tatsächlich ziemlich tiefgreifend sein, weil Sie einen Großteil der Infrastruktur wegnehmen, auf die Sie normalerweise angewiesen wären, und sagen, dass wir das eigentlich abschaffen und anfangen können, Dinge direkt in einem CDN bereitzustellen. Aber in Bezug darauf, wie jemand anfangen könnte, damit zu experimentieren, stehen die Chancen gut, dass er einige der Aspekte davon bereits verwendet. Weißt du, sogar auf traditionelle Weise, Dinge für das Web zu bauen.

Phil: Wenn Sie darüber nachdenken, wie Sie etwas auf dem LAMP-Stack bauen könnten, stehen die Chancen gut, dass Sie dort Dinge wie das Schreiben einer Vorlage schreiben, die Daten aus einer Datenquelle, in diesem Fall der MySQL-Datenbank oder so, abruft der Datenbank, machen diese Dinge sichtbar und lassen sie dann bedienen. Und das ist ähnlich wie statische Site-Generatoren funktionieren. Sie haben Vorlagen, sie holen sich Daten von irgendwoher, die eine Art strukturierte Daten in Dateien sein können, oder sie könnten auf eine Art Datenbank oder eine Inhalts-API treffen. In jedem Fall werden Daten erfasst, diese Daten mit Vorlagen kombiniert, Ansichten generiert, und der einzige Unterschied besteht darin, dass dies nicht bei Bedarf geschieht, sondern im Voraus. Daher sind einige der logischen Schritte in dieser Art von kognitiven Schritten für einen Entwickler möglicherweise nicht so groß.

Phil: Die größte Veränderung besteht darin, darüber nachzudenken, wie Sie Dinge bereitstellen. Denn was Sie tatsächlich bereitstellen, sind Ihre erstellten, gerenderten Assets in ihrer Gesamtheit, jedes Mal, wenn Sie eine Bereitstellung durchführen möchten. Das bringt Dinge wie die Verwaltung des Inhalts und die Verwaltung des Codes an einen Ort, sodass Dinge wie die Vision all diese Dinge zusammen steuern. Es beginnt also eine etwas andere Denkweise darüber zu sein, wie Sie Websites und die darin enthaltenen Inhalte entwickeln und verwalten können. Da gibt es also ein paar Änderungen. Aber das Schöne ist, dass viele Static-Site-Generatoren recht einfach zu experimentieren sind, und das Schöne ist, dass Sie dafür keine Unmenge an Infrastruktur benötigen. Das Schöne ist also, dass Sie wirklich damit beginnen können, Dinge direkt auf Ihrem lokalen Computer aufzubauen. Sie führen einen Static-Site-Generator direkt auf Ihrem Computer aus und können sich ein wirklich gutes Bild davon machen, was das Ergebnis sein wird, ohne sich auf viele andere Infrastrukturen stützen zu müssen.

Phil: Also kann diese Art von erstem Schritt, das On Ramp, ziemlich oberflächlich sein, damit du anfängst zu sagen: „Nun, ich werde diese speziellen Tools ausprobieren. Ich kann sie lokal ausführen.“ Und Sie können sich darauf verlassen, dass, wenn Sie die Ausgabe davon irgendwo bereitstellen, das dort, wo Sie sie bereitstellen, genau dasselbe sein wird, wie es lokal wäre. Das ist eines der Dinge, die ich am Rendern statischer Dinge liebe, weil Sie nicht auf eine Menge Infrastruktur und bewegliche Teile angewiesen sind, um sie zu bedienen. Sie können sie sich auf dem statischen Server auf Ihrem eigenen Computer ansehen und denken: „Ja, so wird es funktionieren, wenn es zu einem CDN geht.“

Vitaly: Mm-hmm (bestätigend); Und auch die Infrastruktur, wenn wir uns zum Beispiel ansehen, wie wir Single bauen [unverständlich 00:10:07], und es gibt eine riesige Anzahl von Möglichkeiten, was man tun könnte. Für den Server, für den Client und alles dazwischen.

Phil: Ja.

Vitaly: Und so, denke ich, in unserem Fall, weil wir eine Art Skelett aufbauen und es direkt über CDI mit Inhalten und allem versorgt und mit Javascript verbessert. Es war eigentlich ziemlich vernünftig und ziemlich, ich würde nicht sagen, einfach, aber es machte Sinn, zu dieser Art von Einrichtung zu wechseln. Denn am Ende bleiben nur Inhalte auf der Seite. Es ist nur HTML mit ein paar Kommentarbereichen und einem Suchfeld und ein paar anderen Dingen. Aber wenn Sie sich zu einer wirklich eigenständigen Anwendung bewegen, vielleicht sogar zu einer Finanzanwendung, Online-Banking und so weiter. Denken Sie immer noch, dass JAMstack eine gute Option wäre, wenn Sie etwas haben, das viel Logik erfordert? Braucht es einen Server oder nicht?

Phil: Nun, ich hasse es, den alten Satz „es kommt darauf an“ zu wiederholen. Aber es hängt ein bisschen davon ab. Abgesehen davon gibt es viele Anwendungen, die genauso gut als Javascript-Anwendung funktionieren, wie wenn sie tatsächlich eine dienstseitige Komponente haben. Ich sage das mit einer gewissen Vorsicht, denn ich bin ein bisschen altmodisch, wenn es um Webentwicklung geht, und ich mag es wirklich, Dinge so weit wie möglich als HTML in den Browser zu bringen und dann eine wirklich hohe Wassermarke zu haben, von der aus Sie schrittweise verbessern von. Ich persönlich mag es also nicht, alles in Javascript zu machen und nur ein leeres Body-Tag zu versenden und dann alles durch Javascript laufen zu lassen.

Phil: Abgesehen davon gibt es manchmal Situationen, in denen das vollkommen akzeptabel ist. Wenn Sie über eine bestimmte Art von Anwendung nachdenken, die natürlich stark von Javascript abhängt und Sie Ihr Publikum kennen. Das kann ganz vernünftig sein. Es gibt Dinge, die kürzlich versendet wurden. Ich denke tatsächlich an etwas, das an Google IO geliefert wurde, zum Beispiel, das Chrome-Team hat ein Spiel zusammengestellt, das sehr stark Javascript war und das wunderbar statisch funktionierte. Es gibt viele Anwendungsfälle, in denen das funktionieren kann.

Phil: Um auf Ihr finanzielles Beispiel zurückzukommen, ich habe früher gearbeitet, mein allererster Job eigentlich, Zahlen auf Bildschirme zu bringen, damit Trader mit Hilfe von Webtechnologien tauschen konnten, und das war vor Web-Sockets, es war vor Ajax, es war vor allem wirklich Das war hilfreich, um Ihnen dabei zu helfen, und es ist eine Art Herausforderung, aber in letzter Zeit würden Sie eine Menge solcher Dinge in Javascript tun, und das macht absolut Sinn. Sie können direkt vom Browser aus sichere Anfragen an APIs stellen. Es gibt jetzt viele Modelle, um die Authentifizierung und Autorisierung direkt von Ihrem Browser aus durchzuführen. In vielerlei Hinsicht kann dies den Stack für Finanzinstitute vereinfachen, die einige dieser Dinge aufbauen möchten, da die Art und Weise, wie sie einige dieser Dinge entkoppeln können, sie viel besser handhabbar machen kann. Ich würde also sicherlich denken, dass das JAMstack-Modell auch in diesem Szenario perfekt funktionieren könnte.

Vitaly: Okay, vielleicht kommen Sie jetzt zurück, um die Welt von JAMstack und Frontend zu erkunden. Worauf freust du dich dieser Tage am meisten, Phil? Wenn Sie sich JAMstack und das Frontend im Allgemeinen ansehen, ist es etwas, das Sie nachts wirklich wach hält, wo Sie morgens aufwachen und hoffen, dass ich eines Tages daran arbeiten werde? Eines Tages werde ich es schaffen. Hast du [Übersprechen 00:13:33]

Phil: Ja, und das ist die Art von Dingen, bei denen deine Antwort von Tag zu Tag anders sein kann, weil es sich anfühlt, als ob sich diese Welt so schnell bewegt. Und das allein ist eines der Dinge, die mich so aufregen. Jetzt, wo wir sehen, dass die Browser-APIs wirklich Fortschritte machen und die Art von Dingen, die wir direkt im Browser tun können, ohne sie selbst implementieren zu müssen. Das ist irgendwie aufregend für mich. Ich bin immer noch ein ziemlicher Dummkopf, wenn es um SVGs geht. Ich sollte das Wort Duffer erklären, wenn jemand, der kein Engländer ist und das sieht, es einen Narren bedeutet. Es bedeutet, dass ich weit hinter der Kurve bin.

Phil: Aber ich möchte wirklich mehr mit SVGs machen, und Animationen sind Dinge, bei denen ich einfach weit hinterherhinke, und ich möchte damit spielen. Aber Dinge wie die Browser-APIs, ob das nun Dinge für Offline oder zur Verbesserung der Leistung sind, und besonders im Moment scheint die Art und Weise, wie das Laden von Schriftarten immer zugänglicher wird, so dass wir anfangen können, wirklich Dinge zu erstellen, die visuell sehr reichhaltig und näher an der Sache sind was wir vielleicht mit Typografie machen wollen. Ich bin ein bisschen ein Nerd für solche Sachen, ich mag solche Sachen, also möchte ich mehr und mehr damit spielen.

Vitaly: Also Phil, wir sprechen über die JAMstack conf in London. Können Sie auch in wenigen Worten erklären, worum es gehen wird, was der Fokus ist und für wen es ist und was Ihre Rolle dort ist? Direkt hinter den Kulissen, kümmert sich um den Inhalt und alles. Was ist Ihre Rolle dort?

Phil: Ich hatte also den lustigen Teil des Jobs. Ich hatte also die Gelegenheit, Redner zu finden und interessante Inhalte zu finden, also bin ich wirklich gespannt, wie die Programme zusammenkommen. Wir haben Leute wie Chris Coia, der darüber sprechen wird, Front-End-Entwickler zu stärken und wie viel wir mit Front-End-Technologien tun können, die jetzt auf diesem JAMstack-Modell basieren. Wir haben Leute wie Jake Archibald und Surma vom Google Chrome-Team, die über Dinge wie die Leistung im Front-End und Möglichkeiten sprechen werden, wie wir entweder mit statischem Hosting oder Infrastruktur oder Code, der direkt ausgeführt wird, wirklich sehr leistungsstarke Erfahrungen machen können der Browser.

Phil: Wir werden auch Yuna Kravitz haben, die über Dinge spricht, die mit CSS und Houdini und all diesen Dingen zu tun haben. Und noch viel mehr. Wir werden auch über Dinge sprechen, die mit dem kulturellen Wandel zu tun haben, den ein JAMstack-Modell für Ihre Organisation und Ihre Projekte haben kann, damit es wirklich überall wirkt. Also ich bin irgendwie aufgeregt darüber. Ich werde auch die Gelegenheit bekommen, all diese Leute vorzustellen, weil sie mich ausgelassen haben und auch der MC sein lassen, also kann ich mit diesen Leuten sprechen und ein paar Fragen stellen und solche Dinge. Daher denke ich, dass es für jeden sehr interessant sein sollte, der sich für Frontend-Entwicklung und auch für neue Modelle zur Bereitstellung von Projekten im Web auf wirklich effiziente Weise interessiert.

Vitaly: Oh, also magst du das Rampenlicht auf der Bühne, huh?

Phil: Ich bin ein Aufmerksamkeitssuchender. Das solltest du inzwischen wissen, Vitaly.

Vitaly: Oh, eigentlich dachte ich immer, Sie seien eine sehr bescheidene und nette und freundliche Person, anscheinend war ich-

Phil: Es ist ein Akt, es ist ein Akt.

Vitaly: Okay, das ist in Ordnung. Phil, wir treffen uns in ein paar, oh eigentlich, morgen.

Phil: Ich sehe dich bald bei einem anderen Event, aber ansonsten sehe ich dich im Juli, am 9. und 10. Juli.

Vitaly: [unverständlich 00:16:52] In diesem Sinne danke Phil und verabschiede mich. Auf Wiedersehen alle.

Philipp: Bis bald.

Das ist ein Wrap!

Wir freuen uns darauf, Phil auf der SmashingConf Toronto 2019 mit einer Live-Session auf JAMstack begrüßen zu dürfen. Wir würden uns freuen, Sie auch dort zu sehen!

Bitte lassen Sie uns wissen, ob Sie diese Reihe von Interviews nützlich finden und wen Sie gerne interviewen würden oder welche Themen wir behandeln sollen, und wir machen uns gleich daran!