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!