Im Vergleich zur Entwicklung von Backend-Website wurde der Entwicklung von Frontend-Website nicht immer die Aufmerksamkeit geschenkt, die sie verdient.
JavaScript wurde früher von vielen Technologen verachtet. Allerdings haben sich die Zeiten geändert. Die Einführung von Open-Source-Technologien hat das Wachstum von Web-Apps beschleunigt.
Als Ergebnis dieses Fortschritts verwendet praktisch jedes Softwareunternehmen jetzt das neueste JavaScript und Tools wie Eslint, Babel und Webpack anstelle von jQuery.
Heutzutage bewegt sich das Frontend in einem halsbrecherischen Tempo, mit dem man nur schwer Schritt halten kann.
In diesem Artikel geht es darum, mit den Entwicklungstrends in diesem Bereich im Jahr 2022 Schritt zu halten. Vielleicht entdecken Sie etwas Nützliches in diesen Moden.
Svelte wird immer beliebter.
Svelte ist eine sehr neue Technologie, die im Prinzip viel zu spät herausgekommen ist, um mit React, Vue und Angular zu konkurrieren. Es erfreut sich jedoch in einem beispiellosen Tempo wachsender Beliebtheit.
Es wurde von StackOverflow-Benutzern im Jahr 2021 zum beliebtesten Front-End-Framework gekürt.
Svelte hingegen ist mehr als das. Es ist ein Compiler, der ein optimiertes Frontend erstellt.
Svelte wird im Gegensatz zu anderen gängigen Frameworks nicht in die Anwendung importiert. Svelte-Code hingegen wird in reines JavaScript kompiliert. Dadurch kann Svelte Frameworks wie React und Vue in Bezug auf die Geschwindigkeit übertreffen.
Das Svelte-Framework ist einfach zu bedienen. Hier ist ein Beispiel dafür, wie Zustand + Formulare verwendet werden könnten:
Formulare werden auf einfache, schöne Weise gehandhabt, ähnlich wie vor dem Aufkommen von SPA-Frameworks. OnChange-Requisiten müssen nicht an die Eingänge angehängt werden.
Markup und Logik koexistieren, kapseln die Logik und bieten eine visuelle Ebene.
Es ist keine Überraschung, dass das Framework in der Community immer beliebter wird. Es wird nur eine Frage der Zeit sein, bis Svelte die Schaffung neuer populärer Plattformen sieht.
React, Vue und Angular gehen nirgendwo hin.
Ich habe meine Front-End-Reise kurz vor der Veröffentlichung von Angular 2 vor ungefähr sechs Jahren begonnen. Ich kann Ihnen gar nicht sagen, wie oft ich seitdem gelesen habe, dass Vue, React oder Angular tot sind.
Die Realität sieht jedoch anders aus. Seit ihrer Einführung hat jedes dieser drei Frameworks an Bedeutung gewonnen.
Es ist erwähnenswert, dass die Popularität von Angular um den Faktor 10 gestiegen ist. React und Vue wuchsen sogar noch schneller. Die Anwendungsfälle, die von allen drei Frameworks unterstützt werden, sind nahezu identisch.
Dies bedeutet, dass jedes der drei von Ihnen gewählten Frameworks über viele Jahre verwendet und gewartet wird.
Es ist erwähnenswert, dass es im Jahr 2021 keine wesentlichen Änderungen an React gab. Trotzdem ist die Geschwindigkeit, mit der es sich anpasst, unglaublich. Das liegt höchstwahrscheinlich an der Ökologie der Technologie. Die meisten Bibliotheken und begleitenden Frameworks sind für React verfügbar.
Next und Gatsby sind zwei hervorragende Beispiele. Letzterer gehört zu den Tätern des folgenden Trends.
Sowohl statische als auch dynamische Seiten müssen von Frameworks unterstützt werden.
Lassen Sie uns statische und dynamische Seiten in Bezug auf die Praxis definieren.
Wenn ein Benutzer eine dynamische Seite öffnet, ruft sie den Inhalt ab und verarbeitet ihn. Während des Konstruktionsprozesses werden statische Seiten vordefiniert. Sie werden als eigenständige Dateien auf der CD erstellt. Sie scheinen dynamisch zu sein, erfordern jedoch weniger Aufwand vom Browser des Benutzers.
Sie haben möglicherweise eine einzelne dynamische Produktseite oder Hunderte von statischen Produktseiten, eine für jedes Produkt, wenn Sie ein Geschäft haben.
Statische Seiten sind für Benutzer performanter, aber ihre Erstellung dauert lange.
Die Popularität von Single-Page-Application (SPA)-Frameworks wie React und Vue führte dazu, dass statische Seiten aufgegeben wurden. Sie brachten sie auch wieder in Gunst.
Das von SPAs generierte dynamische Material ist oft erheblich langsamer als anzeigefertige HTML-Inhalte. Wenn die Seite Daten vom Server herunterlädt, ist der Unterschied deutlicher. Solche Daten müssten normalerweise von einer dynamischen Seite heruntergeladen und verarbeitet werden.
Als Folge davon wurden statische Seiten in SPAs geboren. Gatsby löste dieses Problem, indem er ein React-Framework und eine Infrastruktur für statische Seiten erstellte.
Eine statische Website wie ein Blog, ein Portfolio oder sogar eine freeCodeCamp-Kursplattform ist erheblich schneller. Auch serverseitiges Rendering, wie es bei Next.js üblich ist, sorgt nicht für schnellere Performance (Quelle: Sidney Alcantara).
In anderen Frameworks wie Vue oder Svelte führt ein Fokus auf die Zeit bis zum ersten inhaltsreichen Malen zu einer Vielzahl von Methoden zum Erstellen statischer Seiten.
Statische Seiten hingegen lassen sich nur schwer auf Millionen von Seiten anwachsen. Sie sollten im Allgemeinen dynamische Seiten verwenden, wenn Sie eine App mit vielen veränderbaren Materialien wie Benutzerprofilen erstellen. Beide Ansätze für das Content Management sind hier, um zu bleiben.
Plattformen verwandeln einzelne Programmierer in große IT-Organisationen.
Plattformen, die die Frontend-Entwicklung beschleunigen, haben den Markt in den letzten Jahren überschwemmt. Dies ist von Bedeutung, da es kleinen Gruppen ermöglicht, sich schnell zu bewegen.
Mit Twilio oder Agora.io können Sie Videos schnell integrieren. Mit Firebase, Amazon Cognito oder Okta können Sie die Authentifizierung schnell integrieren (Okta hat auch Auth0 erworben).
Es ist besonders wichtig zu diskutieren, wie Front-End-Code automatisch und global bereitgestellt werden kann. Vercel, Gatsby Cloud und Netlify sind die drei beliebtesten Optionen. In 5 Minuten können sie einen einzelnen Front-End-Ingenieur mit einem GitHub-Konto in die komplette DevOps-Abteilung verwandeln.
Gatsby Cloud ist exklusiv für React, aber es macht den Umgang mit einer großen Anzahl statischer Seiten fast zu einfach. Es ist wohl die beste Wahl, wenn Sie eine Gatsby-App erstellen.
Vercel unterstützt alle wichtigen Frameworks, einschließlich serverseitiger Frameworks wie Next.js, das von den Gründern des Unternehmens entwickelt wurde. Vercel wird Ihr Leben viel einfacher machen, wenn Sie an einem serverseitig gerenderten Programm arbeiten.
Netlify ist ein clientseitiges Framework, das sich auf reines React und Vue konzentriert. Es verfügt über eine Reihe praktischer Funktionen, darunter vorgefertigte Formulare, Authentifizierung und serverlose Dienste. Für typische clientseitige Anwendungen halte ich es für die beste Option.
Shuffle.dev ist ein Außenseiter, der es wert ist, hervorgehoben zu werden. In Sekundenschnelle kann es ein professionelles Website-Layout nach dem Zufallsprinzip generieren. Es bietet eine große Anzahl von Themen und CSS-Frameworks, und wöchentlich werden neue Funktionen und Materialien hinzugefügt. Wir verwenden es häufig bei CodeAlly.io, um das Prototyping zu beschleunigen.
Die Optimierung des Frontends ist entscheidend.
In den letzten Jahren hat sich beim Frontend ein Kreis geschlossen. Leichte Websites werden zu mächtigen Plattformen mit langen Renderzeiten. Einige erinnern sich vielleicht, als Slack die Entwicklungsversion von React verwendet hat (Quelle: Robert Pankowecki). Der Trend, SPAs schneller zu machen, gibt es schon seit Jahren, aber er gewinnt weiter an Bedeutung.
Bibliotheken, die sich nachteilig auf die Geschwindigkeit auswirken, wie Moment.js, werden durch leichtere, schnellere Alternativen wie Day.js ersetzt. Andere werden umgestaltet, um die Bündelgröße zu minimieren. Material UI und Lodash sind zwei Beispiele.
Sentry, der Branchenführer in der Fehlerprotokollierung, hat erst kürzlich damit begonnen, sich auf die Minimierung der Bündelgröße zu konzentrieren. Im Frontend-Ökosystem liegt der Fokus zunehmend darauf, Lazy Loading, das Rendern des Frontends auf dem Server oder die Verwendung von CSS-Dateien zu verwenden, anstatt die Anwendung mit JavaScript zu stylen, wie es beispielsweise bei styled-components der Fall war.
Tailwind hat in letzter Zeit viel Anklang gefunden und wird dies zweifellos auch im Jahr 2022 tun. Es leistet bessere Arbeit als praktisch jedes andere CSS-Tool, wenn es darum geht, die Ladezeit von Anwendungen zu verkürzen.
Es hat jedoch eine strenge Lernkurve. Der Code von Tailwind ist notorisch schwer zu entziffern.
Linaria ist eine andere Sache, die ich dringend vorschlage. Linaria vereint die Vorteile von Stilkomponenten mit der Leistung statischer CSS-Dateien.
Als Konsequenz erhalten Sie ein hervorragendes Entwicklungserlebnis sowie ein blitzschnelles Front-End.
Fazit
Als ich anfing, ging es wesentlich langsamer. Es gibt viele Innovationen, und das Frontend verändert sich in rasantem Tempo.
Neue Programmierer mit wenig bis gar keiner Erfahrung können auch die integrierten VSCode- und Docker-Codierungsherausforderungen nutzen, um ihre Fähigkeiten unter Beweis zu stellen.
