Einführung in den Jamstack: Bauen Sie sichere Hochleistungsstandorte auf

Jamstack: Erstellen Sie eine moderne Architektur für schnellere, sichere und skalierbare Websites

Bild bereitgestellt von: netlify

In den letzten Jahren hat sich die Webentwicklungstechnologie mit jedem Tag geändert. In diesem Artikel wird die Jamstack -Architektur vorgestellt und ihre Konzepte und Vorteile klargestellt.

In der Vergangenheit dominierte die Lampenarchitektur die Entwicklung dynamischer Websites. Anschließend legte die mittlere Architektur die Grundlage für eine neue Generation von Webanwendungen. Heute sind statische Websites mit dem Aufstieg von APIs und wiederverwendbaren Komponenten wieder zum Trend geworden. Dies ist eine Möglichkeit, "zu den Grundlagen zurückzukehren", aber nicht genau.

Kernpunkte:

• JamStack ist eine moderne Webentwicklungsarchitektur, mit der schnellere, sichere und skalierbare Websites erstellt werden. Es repräsentiert die Kombination von JavaScript (J), APIs (A) und Markup (M), und sein Arbeitsstil hat viele Entwickler auf der ganzen Welt inspiriert.
• JamStack konvertiert dynamische Websites in statische Websites, die die Geschwindigkeit erheblich verbessern, die Sicherheit verbessern und die SEO verbessert. Dies kann durch das Erstellen von Artikeln und Seiten mit statischen Site -Generatoren, Synchronisieren statischer Inhalte mit Code -Repository und Automatisierung der Bereitstellungsprozesse erfolgen.
• JamStack verwendet CDN für globale Bereitstellungen, automatisierte Pipelines und vorgezogene Seiten, um die Geschwindigkeit im Vergleich zur herkömmlichen Full-Stack-Entwicklung zu verbessern. Es ermöglicht auch die Entkopplung von Front-End und Back-End-Durchmesser durch APIs und Microservices und verwendet einen einzelnen Technologie-Stack-JavaScript.

Was ist Jamstack?

Jamstack ist eine Architektur, die das moderne Web neu definiert, um schnellere und sicherere Websites zu erstellen. Diese Websites sind besser skalierbar und einfacher (mehr Spaß), sich mit dem richtigen Werkzeugsatz zu entwickeln und zu warten. Lassen Sie uns diesen Begriff aufbrechen:

J steht für JavaScript.
• Es ist gewachsen, seit Netscape JavaScript im Jahr 1995 gestartet hat. Mit reaktionsschnellen und progressiven Bibliotheken können Sie Webanwendungen entwerfen, die fast die gleichen wie mobile Anwendungen verhalten.
A steht für APIs.
• Anstatt alle Funktionen selbst zu schreiben, können Sie sich auf Dritte verlassen, um eine große Anzahl von Aufgaben zu erledigen.
m steht für Markup.
• Sie können entwickelte Komponenten wiederverwenden oder neue Komponenten erstellen, die leichter aufrechterhalten sind.
Ist das nur ein Hype?

Ja in gewissem Maße. Der Begriff „Jamstack“ (ursprünglich als Jamstack stilisiert) wurde von Netlify geprägt, um seine „Allround-Plattform für die Automatisierung moderner Webprojekte“ zu bewerben. Die Prinzipien hinter Jamstack sind nicht ganz neu, da Webkomponenten und APIs schon seit einiger Zeit gibt.

, aber sehr ähnlich zu dem, was Ajax (asynchrones JavaScript und XML) von einem anderen Unternehmen erstellt hat, in diesem Jahr - obwohl die XMLHTTPrequest (XHR) -API, die Ajax möglich machte Eine erfrischende Verbesserung der bestehenden Philosophie und hat einen legitimen Zweck, der von der Gemeinschaft schnell übernommen wurde. Dieser Hype ist verdient: Diese Arbeitsweise hat viele Entwickler auf der ganzen Welt inspiriert.

Statische Website?

"Statische Website" ist das Gegenteil von "Dynamic Website", oder? Wie können wir also reichhaltige und dynamische Interaktionen mit nur einfachen HTML -Dateien bereitstellen? Die Antwort ist JavaScript.

JavaScript hat sich seit dem ersten Browserkrieg und mit der Entstehung von Node.js und der Entstehung von Bibliotheken wie React, Angular und Vue.js stark verändert. Die Möglichkeiten, erweiterte Benutzeroberflächen (UIs) zu entwerfen, sind endlos.

Natürlich ist JavaScript kein Allheilmittel. Sie werden es höchstwahrscheinlich nicht für die Datenanalyse oder KI verwenden. Für die Webentwicklung ist jedoch wenig mit der API zu tun, die Sie mit JavaScript -Methoden nicht durchführen können, da es sehr wahrscheinlich ist, dass jemand dafür einen Microservice erstellt hat.

Und wenn Sie alle diese Prozesse und Markups in wiederverwendbare Komponenten einkapseln können, können Sie jederzeit anschließen, wenn Sie eine bestimmte Funktion benötigen -, können Sie jedes Mal Stunden sparen.

Dies ist der j · a · m Stack: JavaScript, API, Tags.

Entkopplung, Kopflos, Microservice, serverlos ... Entschuldigung, was ist das?

All dies sind heiße Themen in der Webentwicklung, sie sind eng miteinander verbunden, aber nicht genau gleich. Sie werden diese Begriffe ziemlich oft hören. Lassen Sie uns also von Anfang an einige von ihnen klarstellen.

Kopplung und Entkopplung und kopflos

gekoppelt bezieht sich auf den Inhalt einer Website, die im Backend der Website erstellt, verwaltet und gespeichert wird (wo sich die Datenbank befindet, wie z. B. das WordPress -Administratorfeld). Dieser Inhalt wird dann aus dem Backend extrahiert und im Browser über eine Front-End-Schnittstelle (z. B. eine WordPress-Vorlage) dargestellt. In gewissem Maße sind "gekoppelte" Anwendungen traditionell "vollständige Stapel" -Anwendungen, und das Backend und Frontend sind unterschiedliche Aspekte derselben Anwendung. Im Gegensatz dazu bedeutet

Entkoppelung

, dass das Backend und Frontend separat verwaltet werden - dies bedeutet, dass die -Datenbank- und Verwaltungs -Tools auf einem Server lokalisiert werden, während sich die Frontend auf einem anderen Server befindet . Natürlich wird ein Medium benötigt, um beide, normalerweise eine API, zu verbinden. Da das Backend jetzt tatsächlich vom Frontend getrennt ist, kann es tatsächlich mehrere Frontenden an verschiedenen Orten geben! (Denken Sie an verschiedene Ladenfronten mit demselben Motor wie Shopify.) Kurz gesagt, die kopflose

Software

hat überhaupt keine Front-End- oder Präsentationsschicht. Ein kopfloses CMS kann beispielsweise statische Inhalte erzeugen und überall drücken: mobile Anwendungen, IoT -Geräte, statische Websites. Zugegebenermaßen ist dies auch eine "Entkopplung" -Station, aber hier brauchen Sie möglicherweise nicht einmal eine API. Stellen Sie sich eine WordPress -Engine vor, die Beiträge als statische HTML -Dateien für den Service exportiert: Dies ist kopflos. Tatsächlich sind Sie jetzt auf einer auf diese Weise generierten Seite.

Monobody (eng gekoppelt) und Mikrodienste (lose gekoppelt)

Einfach ausgedrückt, monotyp kann als als Ganzes erstellt werden. Beispiele können mobile Anwendungen, die meisten Anwendungen, die auf Ihrem Computer installiert werden können, sowie Webanwendungen wie WordPress umfassen. Diese Anwendungen können weiterhin interne "Module" oder "Komponenten" haben, aber wir sagen, diese sind eng gekoppelt, da sie integrale Teile der Anwendung sind. Ohne sie funktioniert die Anwendung nicht. Andererseits funktionieren die locker gekoppelten Softwarekomponenten eher wie Plugins, die entfernt oder ersetzt werden können, und die Funktionalität kann sich ändern, aber der Kern der Anwendung kann weiterhin funktionieren. Dieses Prinzip ermöglicht die „Outsourcing“ -Funktionalität durch APIs von Drittanbietern (allgemein als „Microservices“ bezeichnet) - da sie Zugänglichkeitsfunktionen (Image -Größen, Login, Speicher) bieten, die inhärent nicht inhärent in die Anwendung sind.

serverlose und herkömmliche Computing

authentisch, "serverlos" ist ein bisschen eine Fehlbezeichnung. Unabhängig davon, welche Art von Computerarbeit Sie erledigen, wird der Server beteiligt. Die Art und Weise, wie Sie auf Ihre Server zugreifen und diese verwalten, kann jedoch sehr unterschiedlich sein. im herkömmlichen Modell haben Sie möglicherweise einen tatsächlichen physischen Server (manchmal als bares Metall bezeichnet) oder einen virtuellen privaten Server, auf dem Sie auf dem physischen Server Ressourcen - und andere Benutzer - zugeteilt werden. Die Ressourcen sind begrenzt, und ob Sie 100% der Ressourcen verwenden oder nicht, müssen Sie für sie bezahlen, als ob Sie sie verwendet hätten.

Im serverlosen Modell

sind viele Server miteinander verbunden und bieten einen riesigen Ressourcenpool. Sie extrahieren einfach die erforderlichen Ressourcen bei Bedarf und skalieren sie bei Bedarf (nach oben und unten). Sie können nicht sicher sein, dass ein physischer Server bei Ihnen gehört - Sie wissen nur, woher die Ressource stammt.

traditionelles Modell

serverloses Modell

physischer Server mit begrenzten Ressourcen Unbegrenzter Ressourcenpool anfällig für Versagen (wie Festplattenversagen) zuverlässiger Architektur*

begrenzte Skalierbarkeit unbegrenzte Skalierbarkeit Alle Gebühren zahlen, einschließlich IDIAL -Dienste Bezahlung für den Gebrauch (Bezahlung bei Bedarf) Einfach und einfach zu verwenden muss lernen und implementieren ** Bitte beachten Sie, dass noch Festplatten-, CPU- und Speicherchipfehler auftreten. Da die Ressourcen jedoch transparent zugewiesen werden, werden Sie es nicht bemerken, selbst wenn Hardware fehlschlägt und ersetzt. Praktisches Beispiel für Jamstack Es gibt viele Dinge, insbesondere wenn Sie mit diesen Konzepten nicht vertraut sind. Machen wir also eine Pause von der Theorie und sehen einige der praktischen Anwendungen von Jamstack im wirklichen Leben.

Fallstudie 1: WordPress mit 10x Speed ​​

in eine statische Website konvertieren

Wenn statisch die beste Wahl ist, was besser ist, als ein dynamisches WordPress (WP) -Blog in ein statisches Blog zu konvertieren? Auf diese Weise reduzieren wir die Ladegeschwindigkeit und Latenz von Seiten um mindestens eine Größenordnung, verbessern die Sicherheit erheblich und verbessern gleichzeitig unsere SEO. Kurz gesagt, der Prozess ist wie folgt:

Artikel und Seiten aus WP mit statischer Site -Generator (SSG) erstellen, jedoch im statischen Format (Text, Markdown, HTML).

1. statische Inhalte mit einem Repository auf Github, Gitlab oder Bitbucket synchronisieren.
2. automatisch den Bereitstellungsprozess automatisch, damit jedes Mal, wenn sich ein Code -Repository ändert, die Änderungen sofort im globalen CDN online werden.
3. Entspannen Sie sich, genießen Sie kostenloses Hosting, eine sichere und schnelle Website und eine automatische Bereitstellung. ?
Aber ...

Dies schafft natürlich viele Probleme:

Was soll ich mit dem Management -Panel machen?

• Was tun mit Kategorie und RSS -Feed?
• Wie verwalte ich jetzt Inhalte?
• Was tun mit dem Kommentarbereich und dem Newsletter?
Zu diesem Zeitpunkt können Sie sich vom WP -Administratorbereich verabschieden, da Sie von nun an SSG verwenden, um Inhalte zu generieren. Tatsächlich sind SSGs wie Jekyll speziell für Blogs entwickelt, während SSGs wie gatsby.js bereits alle Funktionen enthalten.

Verwalten von Inhalten (z. B. das Ändern vorhandener Beiträge), wo sich kopfloses CMS ins Spiel bringt. Verwenden Sie für Kommentare und Newsletter bereits externe APIs (z. B. Disqus und MailChimp)?

Wie hast du es eigentlich gemacht? Wir können hier nicht die Vor- und Nachteile von SSG und kopflosen CMS abdecken, aber bitte achten Sie auf die Follow-ups dieser Serie. Wir bieten eine Schritt-für-Schritt-Anleitung für die Migration von WordPress-Websites.

Fallstudie 2: Hosting statischer Websites kostenlos mit automatischer Pipeline

In der JamStack -Community hören Sie oft "kostenlos" - zum Glück ist es nicht kostenlos, denn

Sie müssen uns immer noch Ihre Kreditkartennummer

kostenlos mitteilen.

Kurz gesagt, der Prozess ist wie folgt:

In diesem Fall nehmen wir unsere statische Website (z. B. den Blog, den wir in Fallstudie 1 migriert haben) und stellen sie online:

GitHub, GitLab oder Bitbucket Repository einrichten.

Bereitstellen von Seiten, GitLab -Seiten oder GitHub -Seiten.

1. Zu diesem Zeitpunkt wird jede Änderung des Repositorys automatisch eine neue Bereitstellung (über das Webhook) ausgelöst und kann sehr anmutig zurückgerollt werden, wenn etwas schief geht.
2. Warum bieten Unternehmen diese Dienste kostenlos an?

Der Overhead des Einlegens von HTML -Dateien auf eine bereitgestellte CDN ist klein. Denken Sie daran, dass keine tatsächlichen Berechnungen beteiligt sind, es ist kein PHP -Rendering beteiligt. Wenn Sie nicht eine sehr beliebte Website veranstalten, die viel Bandbreite verbraucht, haben Unternehmen nichts dagegen, einige Hosting -Dienste anzubieten. Dies kann ihnen eine gute Werbung bringen.

Das Unternehmen wird Sie auch einsperren, indem Sie viele Werbegeschenke verschenkt. Wenn Sie erweiterte Dienste benötigen (Sie benötigen sie, wenn Ihr Unternehmen wächst), arbeiten Sie bereits mit ihnen. Es ist fair - und zu diesem Zeitpunkt müssen Sie eine temporäre Lösung entwickeln, um Ihr Problem zu lösen oder den Dienst für eine bezahlte Zeit zu nutzen.

Wie hast du es eigentlich gemacht?

netlify oder github/gitlab sind beide sehr einfach und erfordern minimale Anstrengungen. (Trotzdem werden wir im folgenden Artikel ausführlich in den Prozess eingehen.)

Vergleich zwischen Jamstack und Full-Stack-Entwicklung

Lassen Sie uns sehen, wie dieser neue Ansatz mit Lampe oder mittlerem Stack vergleichbar ist:

Lampe/Mittelstapel Jamstack

Webserver Ausführen der Website globale Bereitstellung zu CDN FTP/SSH -Upload, Server Neustart Automatisierungsmontagelinie laufende Seite Vorbereiten Sie die Seite, um die Geschwindigkeit zu erhöhen Monobody -Anwendungen (wie WordPress) API und Microservices (Front-End/Back-End-Entkopplung) Voller Stack (vorne und Backendsprachen) Single Tech Stack ("JavaScript überall")

Was können Sie noch mit Jamstack machen?

Ich hoffe, Sie haben die Vorteile des Erstellens einer Website zu diesem Zeitpunkt gelernt. Möglicherweise sind Sie jedoch immer noch skeptisch, wie Sie die grundlegendsten Operationen ohne Backend -Verarbeitung ausführen können, z. B. das Anmeldung und Verwalten von Dynamikinhalten ohne relationale Datenbanken (RDBMS).

Hier sind einige andere Beispiele, die Sie mit Jamstack machen können:

• implementieren serverlose Datenbank mit statischen Websites
• Identität als Dienst (IDAAS): Statuslose Authentifizierung
• Kopfloses Content -Management -System
• serverlose Funktionen in statischen Websites
verwenden
Management von Mehrzweckformen
Verarbeitung von Multi-Plattform-Benachrichtigungen
kopflosen Einkaufswagen
Responsive Search

Schlussfolgerung

Die Entwicklung der Dinge ist unvermeidlich, insbesondere im IT -Bereich. Zuvor war es der Lampenstapel, dann der Mittelstapel. Jetzt ist es Jamstack und in fünf bis zehn Jahren wird es noch etwas anderes sein. Es ist besser, diese Änderungen zu akzeptieren und sie zu unserer eigenen zu machen!

neue Wege zum Tun von Dingen lernen, mag minderjährig klingen, kann aber auch Ihre Leidenschaft für die Entwicklung wieder beleben. Möglicherweise verbringen Sie weniger Zeit damit, Server zu pflegen und sich um Sicherheitsprobleme zu sorgen. Sie können feststellen, dass die Entwicklung weniger Mühe erfordert und Ihre Kunden zufriedener sind. Sie sind möglicherweise sogar wettbewerbsfähiger (und in der Lage, um eine Erhöhung zu bitten). ?

Jamstack -Grundlagen

Bitte folgen Sie weitere Artikel zu diesem Thema. Obwohl wir Jamstack seit Jahren einführen, ist es zu einer unabhängigen Disziplin und Praxis geworden. Wir stellen Ihnen die Tutorials zur Verfügung, die Sie benötigen, um ein Jamstack -Profi zu werden und sie auf dieser Seite im Index zu aktualisieren. Sie können auch über unsere RSS -Feed oder soziale Medien auf dem Laufenden bleiben.

Jamstack -Grundlagen

• Einführung in Jamstack: Erstellen Sie eine sichere Hochleistungs-Website
Jamstack -Tools, APIs und Dienste: umfassender Vergleich
So verwenden Sie automatische Pipeline, um statische Websites kostenlos zu hosten
wie man von WordPress zu statischer Site -Generator migriert

Jamstack -Tools
• Gatsby Erste Schritte: Erstellen Sie Ihre erste statische Website

Anfänger von ELEGENTY

und laufende Arbeit.

häufig gestellte Fragen zu Jamstack

Was ist Jamstack? JamStack steht für "JavaScript, APIs und Tags". Dies ist eine Architektur zum Erstellen von Websites und Webanwendungen, in denen die Entkopplung des Front-Ends vom Back-End für eine bessere Leistung, Sicherheit und Entwicklererfahrung hervorgehoben wird.

Wie unterscheidet sich JamessStack von der traditionellen Webentwicklung? In der traditionellen Webentwicklung ist der Server für die dynamische Generierung von HTML in jeder Anfrage verantwortlich. Auf der anderen Seite ist Jamstack die Seite während des Build-Prozesses vorgefertigt, bietet dem Client direkt statische Assets und verwendet die API, um dynamische Funktionen zu implementieren.

Was sind die wichtigsten Prinzipien der Jamstack -Architektur? Zu den Hauptprinzipien von Jamstack gehören Vorrendern, API-zentrierte Entwicklung und die Verwendung eines globalen Inhaltsnetzwerks (CDN). Die Vorrenderung beinhaltet die Erzeugung statischer HTML während der Build-Phase, während die API die dynamische Funktionalität übernimmt.

Was sind die Vorteile der Verwendung von Jamstack? JamStack bietet viele Vorteile, wie z. B. eine verbesserte Leistung aufgrund der statischen Site -Erzeugung, verbesserte Sicherheit, indem die Angriffsfläche des Servers reduziert und die Skalierbarkeit mit CDN vereinfacht wird. Darüber hinaus führt dies oft zu einer besseren Entwicklererfahrung.

Kann ich die serverseitige Funktionalität in meiner Jamstack-Anwendung verwenden? Ja, JamStack-Anwendungen können die serverseitige Funktionalität durch serverlose Funktionen oder APIs nutzen. Mit serverlosen Funktionen können Sie den serverseitigen Code als Antwort auf Ereignisse ausführen und dynamische Funktionen bereitstellen und gleichzeitig die Vorteile der statischen Site-Zustellung beibehalten.

Ist Jamstack für alle Arten von Websites geeignet? JamStack eignet sich für eine Vielzahl von Websites, von einfachen Blogging- und Marketing -Websites bis hin zu komplexen Webanwendungen. Die Anwendbarkeit hängt jedoch von den spezifischen Anforderungen des Projekts und den Anforderungen für die serverseitige Echtzeitverarbeitung ab.

Das obige ist der detaillierte Inhalt vonEinführung in den Jamstack: Bauen Sie sichere Hochleistungsstandorte auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!