Dieser Beitrag am Freitag widmet sich der Übersetzung eines interessanten Artikels, der gestern auf
Medium veröffentlicht wurde . Ich habe mich entschlossen, ein neues Genre von Übersetzungen für mich selbst zu lernen. Bitte treten Sie nicht viel, wenn irgendwo etwas nicht stimmt. Und wenn möglich, benachrichtigen Sie sogar über Fehler und Tippfehler in PM.
Danke und gute Lektüre!
Eine Geschichte darüber, wie die neuen Funktionen der Webplattform und kompilierten Frameworks die nächste Ära der Webentwicklung definieren.
Foto:
Stefan BucherHeute sind Frameworks wie
Angular ,
React und
Ember der Schlüssel zur Entwicklung komplexer Webanwendungen. In den letzten zehn Jahren (
Angular wurde 2010 veröffentlicht) ist die Verwendung dieser Frameworks für viele von uns zum De-facto-Standard geworden. Sie helfen uns, unseren Code zu strukturieren, den Status von Anwendungen zu verwalten und komplexe Schnittstellen basierend auf wiederverwendbaren Komponenten zu erstellen.
Wie Sie wissen, ist JavaScript jedoch die teuerste Webressource, die sich direkt auf die Interaktivität unserer Seiten auswirkt. Und der JavaScript-Code unserer Webanwendungen ist größer als je zuvor. Die durchschnittliche Webseite ist größer als 3 MB, was größer ist als die Größe des ursprünglichen Doom-Spiels. Wir als Entwickler können schnelles Internet und erschwingliche Tarifpläne haben, aber unsere Benutzer haben möglicherweise nicht all dies.
Laut
Alex Russell kann das Überschreiten der Größe von nur 130 KB für alle unsere Ressourcen dazu führen, dass das 5-Sekunden-Downloadintervall in einem Standardtelefon und einem Mobilfunknetz nicht eingehalten werden kann. Einige unserer bevorzugten Frameworks benötigen jedoch möglicherweise mehr für sich.
Können wir die Vorteile nutzen, die Frameworks uns bieten, aber gleichzeitig vermeiden, den Code aufzublähen? Haben Sie Komfort für den Entwickler und gleichzeitig eine hervorragende Benutzererfahrung? Ich glaube daran. Und ich glaube, dass wir in eine neue Ära der Webentwicklung eintreten, die davon bestimmt wird ... Eine Ära, in der unsere Frameworks zu verschwinden beginnen.
Svelte
Ein Beispiel für diesen Trend ist
Svelte , „das magisch verschwindende UI-Framework“ (Artikel „Das magisch verschwindende UI-Framework“
auf Habré - ca.).
Svelte ist ein Framework zur "Kompilierungszeit", das keine bestimmte Laufzeit auf dem Client hat. Wir sind es gewohnt, große JavaScript-Pakete an unsere Benutzer zu senden und erwarten von ihren Browsern, dass sie Skripte analysieren und ausführen. Aber so funktioniert
Svelte nicht. Stattdessen kompiliert es Ihre Anwendung in kleine, eigenständige Vanille-JavaScript-Module. Mit anderen Worten,
sobald die Anwendung an Ihre Benutzer geliefert wird, wird
Svelte verschwinden!
Ein Beispiel für eine Anwendung, die mit
Svelte entwickelt wurde, ist
Pinafore , ein
Mastodon PWA-Client für das von
Nolan Lawson von Microsoft erstellte dezentrale soziale Netzwerk. Pinafore zeigt
sehr schnelle Ergebnisse im Webseitentest und eine Punktzahl von 98 Punkten im
Leuchtturm .
Svelte an sich ist sehr minimalistisch, aber es gibt auch
Sapper (
S velte
App Maker - ca.) - ein darauf basierendes Framework mit vollem Funktionsumfang.
Sapper wurde von Next.js inspiriert und umfasst serverseitiges Rendern, Codetrennung, Stile mit Gültigkeitsbereich, deklaratives Routing und Hot-Reload. Darüber hinaus bietet die
Sapper- Startervorlage standardmäßig PWA mit einem Webanwendungsmanifest und einem Servicemitarbeiter mit automatischem Ressourcen-Caching.
Ich fragte Nolan, wie er sich mit
Svelte und
Sapper fühle. Er sagte mir, es sei ein „Traum, mit
Svelte zu arbeiten“.
Sapper ist "etwas weniger reif" und hatte einige Probleme mit ihm, aber er ist auch zufrieden. Ich habe auch begonnen, diese beiden Frameworks für ein neues Projekt zu verwenden, und bis jetzt fühlt sich die Kombination aus Funktionalität und hoher Betriebsgeschwindigkeit wirklich perfekt an.
Schablone
Svelte inspirierte ein alternatives Projekt von Ionic:
Stencil .
Auch hier ist das Ziel, die „besten Konzepte der beliebtesten Frameworks“ zu übernehmen und gleichzeitig eine bessere Leistung zu erzielen:
"Mit ... traditionellen Frameworks und Bündelungstechniken hatte das Team Probleme, die Anforderungen an Latenz und Codegröße für Progressive Web Apps zu erfüllen, die in schnellen und langsamen Netzwerken auf einer Vielzahl von Plattformen und Geräten gleich gut funktionieren." - stenciljs.com
Um zu verstehen, woraus
Schablone besteht, fand ich eine nützliche
Einführung von Rob Bearman . Es gibt auch ein
Video von
Maximilian . Das Ergebnis von
Stencil ist eine Standard-Webkomponente (mehr zu Webkomponenten weiter unten), die nicht spezifisch für
Stencil ist . Dies bedeutet, dass Sie es in Kombination mit einem anderen Framework verwenden können, wenn Sie möchten (in diesem Artikel geht es jedoch darum, wie Frameworks verschwinden und nicht multiplizieren!).
Unabhängig davon möchte ich darauf hinweisen, dass trotz der Tatsache, dass die
Svelte- Dokumentation dies nicht besonders beachtet, die
Svelte- Komponente auch direkt in die
Webkomponente kompiliert werden kann (
hier ein Beispiel - wenn Sie
hier customElement festlegen - erhalten
wir das Ergebnis ).
Rich Harris , der Schöpfer von
Svelte (und
Rollup und vielen anderen erstaunlichen Dingen!), Sagte mir jedoch, dass er der Meinung sei, dass die Verwendung dieser Funktion im Moment keine besonderen Vorteile habe.
Stencil sieht ebenfalls aus wie Googles bekannteres
Polymer , verschwindet jedoch beim Beenden vollständig. Ich habe Polymer jedoch nicht zu oft verwendet, um es genauer zu kommentieren. Vielleicht verdient er auch mehr Aufmerksamkeit. In der neuesten
dritten Version wurden ES-Module (mehr dazu weiter unten) anstelle von
HTML-Importen und
npm anstelle von
Bower verwendet . Es gibt auch ein
PWA Starter Kit , das
Alex Russell als bestes Tool zum Erstellen produktiver Webanwendungen empfiehlt. Sie erhalten
sofort ein
PRPL- Muster (Push, Render, Pre-Cache, Lazy-Load).
Winkel der nächsten Generation
Vielen Dank an Rich Harris, der mich wissen ließ, dass Angular auch diesem Trend folgt!
Mit Angular Elements - einer Innovation in
Angular 6 - können Sie Angular-Komponenten als selbstoptimierende Webkomponenten exportieren. Derzeit ist noch eine "minimale, eigenständige Version von Angular" erforderlich, aber sie "arbeiten mit benutzerdefinierten Elementen, die in Webanwendungen verwendet werden können, die auf der Grundlage anderer Frameworks erstellt wurden".
Darüber hinaus ist
Ivy ein Renderer der neuen Generation in Angular, mit dem die Größe des resultierenden Codes drastisch reduziert werden soll. (Obwohl es immer noch einen Blick wert ist: Im Geiste eines freundlichen Wettbewerbs hat Rich
die Kompilierungsergebnisse
von Webkomponenten von Svelte und Ivy
verglichen !)
Es ist sehr cool, dass beliebte Frameworks diesen Ansatz verfolgen und ihren endgültigen Code auch kompakter machen. Wir hoffen, dass immer mehr Webanwendungen einen neuen Ansatz verfolgen und dies einen großen Einfluss auf die Leistung des gesamten Internets haben wird.
Darüber hinaus gibt es immer mehr Voraussetzungen dafür, dass wir bald überhaupt keine Frameworks mehr benötigen. Frameworks können natürlich die Entwicklung vereinfachen und weiterhin nützliche Add-Ons bereitstellen, aber die Webplattform selbst bietet mehr Funktionen als je zuvor ...
Webplattform als Framework
In meinem Artikel
„A Rube Goldberg Machine“ und dem
anschließenden Gespräch beschrieb meine Kollegin
Ada Rose Cannon , wie neue CSS- und JavaScript-Funktionen „als in die Webplattform eingebettete Frameworks betrachtet werden können“.
Beispielsweise können benutzerdefinierte CSS-Eigenschaften (besser bekannt als CSS-Variablen) bedeuten, dass Sie keinen CSS-Precompiler wie
Sass mehr benötigen. Und CSS Grid kann Sie jetzt vor dem Laden von Bootstrap bewahren.
„Sie benötigen kein Framework, um CSS Grid zu verwenden. CSS Grid ist ein Framework. “
- Rachel Andrew
Webkomponenten
Webkomponenten sind besonders stark und der Schlüssel zu einem Großteil dieses Trends. Sie enthalten die folgenden Funktionen - Benutzerdefinierte Elemente, Shadow DOM und HTML-Vorlagen -
sind noch nicht überall verfügbar , aber wie
Ada sagt , haben sie eine ziemlich gute Unterstützung, und
es gibt Polydateien , die sie noch besser unterstützen, sodass Sie sie heute verwenden können!
Ada und
Ruth John haben kürzlich eine Webanwendung zur Visualisierung von Musik mithilfe von Webkomponenten entwickelt und
ihre Lektionen geteilt .
Darüber hinaus können Sie sich mit neuen Funktionen wie Webkomponenten sicherer fühlen, wenn Sie serverseitiges Rendering (SSR) verwenden und Ihre Clientseite mit
Progressive Enhancement implementieren.
Meine persönliche Präferenz ist es, ein großartiges SSR-Erlebnis aufzubauen und es dann zu einer Single Page App zu erweitern.
- Ada Rose Cannon
Isomorphe ES-Module
Sie können jetzt auch
ES-Module verwenden ! Auch hier ist die Browserunterstützung ziemlich gut, und Sie können ältere Browser mithilfe des
Fallbacks "nomodule" unterstützen .
Wenn Sie mit dem SSR + Progressive Enhancement-Ansatz einverstanden sind, können Sie sogar ES-Module verwenden, ohne Build-Tools verwenden zu müssen, um sie in andere Browser zu übertragen, da ältere Browser weiterhin ohne JavaScript arbeiten können. Mit dem
ESM- Modullader können wir
ES-Module auch direkt in NodeJS verwenden .
Dies ist großartig, da wir unsere Skripte im Frontend und Backend (dh "Isomorphic Rendering") wiederverwenden können, ohne mit einem Tamburin zu tanzen. Wir können unseren Frontend-Code strukturieren, ohne unsere Skripte zusammenkleben, viele Skript-Tags auf einer Seite platzieren oder clientseitige Loader verwenden zu müssen.
Genau das hat Ada in ihrem
ersten Twitch-Vortrag in diesem Monat demonstriert. Es gibt auch einen
Blogeintrag mit Erklärungen.
Ich hoffe, dass ich meine Gedanken teilen konnte, als wir in eine neue Ära der Webentwicklung eintreten. Eine Ära, die weniger von traditionellen UI-Frameworks, CSS-Bibliotheken und Bundlern abhängig ist. Eine Ära, in der wir weniger Bytes senden und unsere Webanwendungen schneller laden. Die Ära gefährdeter Rahmenbedingungen.
Vielen Dank an Nolan Lawson, Rich Harris und Ada Rose Cannon für ihre Hilfe und Inspiration für diesen Artikel. Dieser Artikel ist auch hier in meinem persönlichen Blog veröffentlicht.***.
Von mir selbst möchte ich bemerken, dass im Moment leider nur ich auf Habré über
Svelte schreibe. Daher gibt es auf Russisch einige Informationen über diesen wunderbaren Rahmen.
Wenn Sie ihn zum ersten Mal getroffen haben, könnten Sie interessiert sein, andere Artikel zu diesem Thema zu lesen:
Wer seine Entwicklung aktiv überwachen möchte - willkommen beim russischsprachigen Telegrammkanal
SvelteJS . Wir freuen uns, Sie zu sehen!
Herzlichen Glückwunsch an alle zum Sommer und den Siegen unseres Teams! Ein schönes Wochenende! Hurra!