Vorbereitungen für 2020: 8 Trends in der clientseitigen JavaScript-Entwicklung, die Sie kennen müssen

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er den Lesern eine Prognose zur Entwicklung der Webtechnologien für die kommenden Jahre mitteilen möchte. Insbesondere werden wir hier darüber sprechen, was es laut Autor wahrscheinlich wert ist, heute mit Front-End-Entwicklern zu beginnen.

Alles, was mit JavaScript zu tun hat, entwickelt sich sehr schnell. Dies gilt auch für das, was dem Bereich der Webentwicklung zugeschrieben werden kann. Heutzutage spüren diejenigen, deren Projekte nicht auf den modernsten Technologien basieren, besonders die Kluft zwischen dem, was sie verwenden, und der neuen, die fast täglich auftaucht. Diese Technologien umfassen Webpack, React, Jest, Vue und Angular in ihrem aktuellen Zustand. Während die „Bevölkerung“ der Welt der Front-End-Entwicklung, zu der technische Spezialisten und Programmierer gehören, ständig wächst, strebt diese Welt nach Standardisierung. Das Aufkommen neuer Technologien und Werkzeuge verändert bereits die Situation.



Wir können mit hinreichender Sicherheit sagen, dass die Standardisierung der Entwicklung von Benutzeroberflächen ein allgemeiner Trend bei der Entwicklung von Front-End-Technologien sein wird. Insbesondere handelt es sich um eine komponentenbasierte Komposition, den Wunsch nach modularen Systemen. Dieser Trend betrifft fast alles - vom Styling über das Testen bis hin zur Verwaltung des Anwendungsstatus. Dieser Trend kann Technologien umfassen, die auf Webkomponenten, ES-Modulen, den entsprechenden Tools und vielem mehr basieren.

1. Systeme für die Arbeit mit Webkomponenten, unabhängig von Frameworks und Bibliotheken

Generell können wir sagen, dass dies die Zukunft ist. Warum? Die Sache ist, dass die fraglichen Systeme unabhängig von den Frameworks sind. Dies bedeutet, dass sie aufgrund ihrer Merkmale hinsichtlich der Darstellung von Code sowohl völlig unabhängig als auch mit jedem Framework zusammenarbeiten können. Diese Systeme sind nicht durch die sogenannte "JavaScript-Ermüdung" oder "JavaScript-Ermüdung" gekennzeichnet. Sie werden von modernen Browsern unterstützt. In Projekten, die mit ihrer Verwendung erstellt wurden, ist die optimale Menge an Hilfscode enthalten. Sie nutzen die Funktionen von VDOM.

Die betreffenden Komponenten werden nach dem Standard für benutzerdefinierte Elemente erstellt. Sie können damit neue HTML-Tags erstellen und deren Eigenschaften optimieren - vom Erscheinungsbild bis zu internen Mechanismen und Funktionen für die Arbeit mit Shadow DOM.

Bemerkenswerte Projekte in diesem Bereich sind Lit-html (und Lit-element ), StencilJS , SvelteJS , Bit .

Wie sollten die Prinzipien von Modularität, Wiederverwendung, Kapselung und Standardisierung im Zeitalter der Komponenten aussehen? Wenn Sie darüber nachdenken, denken Sie über die Zukunft der UI-Entwicklung nach, es stellt sich heraus, dass diese Zukunft durch Webkomponenten dargestellt wird. Wir werden auf diese Idee zurückkommen. In der Zwischenzeit finden Sie hier einige nützliche Materialien zu Webkomponenten. Hier erfahren Sie mehr über Tools zur Entwicklung von Webkomponenten. Hier finden Sie Material zu Webkomponentenbibliotheken. Hier finden Sie ein Beispiel für das Prototyping eines RSS-Readers mithilfe von Webkomponenten.

2. Über die Zukunft der Kriege von Frameworks und Bibliotheken

In Bezug auf die Anzahl der Downloads von NPM umgeht React Angular und Vue immer noch stetig. Zumindest für den Moment .

Hier werden wir nicht darüber sprechen, welche Frameworks und Bibliotheken besser sind als andere und warum dies so ist. Wenn Sie daran interessiert sind, darüber zu lesen - hier ist es - Materialien, in denen anhand realer Daten Angular, React und Vue verglichen werden. Wir werden das große Ganze studieren. Und so sieht es aus: In der Front-End-Entwicklung wächst der Anteil komponentenbasierter Technologien. Es wächst ständig. Die Anzahl der Entwickler, die ähnliche Technologien verwenden, wächst ebenfalls und zwar schnell. Darüber hinaus gibt es in diesem Bereich genügend freien Speicherplatz für die Einführung neuer Tools.

Welcher Rahmen wird also in 5 Jahren an erster Stelle stehen? Niemand weiß das. Man kann jedoch mit Sicherheit sagen, dass jeder, der auf die Zukunft vorbereitet sein möchte, die grundlegenden Technologien des JavaScript-Ökosystems studieren und sich an die Umgebung gewöhnen sollte, in der das DOM von Webkomponenten gesteuert wird. Vielleicht wird React in 5 Jahren das führende Tool für die Entwicklung von Schnittstellen sein. Sie können darüber nachdenken, indem Sie sich das obige Diagramm ansehen, das auf NPM-Daten basiert. Aber nicht so einfach. Schauen Sie sich zum Beispiel diese Metriken an. Sie erlauben uns zu sagen, dass die Lücke zwischen React und Vue im Hinblick auf den tatsächlichen Gebrauch sehr klein ist.


Vue und React sind in Bezug auf ihre tatsächliche Verwendung sehr nahe beieinander

In Zukunft erwarten wir, die Standardisierung von Webkomponenten unabhängig von Frameworks zu verbessern. In dieser Hinsicht kann man darüber nachdenken, welche Auswirkungen dies auf den Rahmenkrieg haben wird. Übrigens ist React, wie wir alle wissen, nicht einmal ein Framework, sondern nur eine Bibliothek.

3. Isolierung, Wiederverwendung und Zusammensetzung von Komponenten

Bit ist ein Beispiel für eine Plattform, die sich darauf konzentriert, Komponenten zu entwickeln, mit ihnen zusammenzuarbeiten und sie wiederzuverwenden

Wenn man über die Front-End-Entwicklung und die Komponenten spricht, aus denen Benutzeroberflächen aufgebaut sind, kann man sich an Bit erinnern.

Mit dieser Open Source- Plattform können Sie Komponenten (oder für die Wiederverwendung geeignete Teile des JS-Codes) isolieren und in Bausteine ​​umwandeln, die in vielen Projekten verwendet werden können. In diesem Fall kann der Entwickler den Quellcode der Komponenten steuern, seine Änderungen verwalten und einen vollständigen Baum seiner Abhängigkeiten erstellen.

Einfach ausgedrückt, dank Bit hat der Entwickler die Möglichkeit, seine Komponenten in verschiedenen Projekten zu verbessern und Änderungen zu synchronisieren. Dank des Hubs für bit.dev- Komponenten erstreckt sich diese Idee auf die Teamentwicklung, sodass Teammitglieder Code organisieren und freigeben können.

Der Bit-Hub bietet dem Entwickler alles, was für die gemeinsame Erstellung und Verwendung von Komponenten erforderlich ist. Zum Beispiel - praktische Suchwerkzeuge, eine interaktive Umgebung, in der Sie mit Komponenten experimentieren können, volle Unterstützung für CI / CD.

Dank Bit können Sie nicht nur die Komponenten verwenden, die durch die Bemühungen Ihres Teams erstellt wurden, sondern auch Open Source-Projekte. Dies beinhaltet die Möglichkeit, Änderungen an vorhandenen Komponenten zu empfehlen und deren Entwicklungen zu teilen.

4. ES-Module und CDN

ES-Module sind Teil des ES6-Standards, der beschreibt, wie mit Modulen im Browser gearbeitet wird. Mit dieser Technologie können Sie einige Funktionen auf Module übertragen, die beispielsweise über CDN heruntergeladen werden können. Nach der Veröffentlichung von Firefox 60 können wir sagen, dass ES-Module alle gängigen Browser unterstützen . In Node.js wird ebenfalls an der Unterstützung von ES-Modulen gearbeitet. Darüber hinaus wird erwartet, dass die Unterstützung für ES-Module zu WebAssembly hinzugefügt wird.

5. Zustandsverwaltung auf Komponentenebene

Was ist neu an der Verwaltung des Anwendungsstatus? Heutzutage läuft das State Management darauf hinaus, alles in das globale Redux-Repository zu stellen.

Ein solcher Ansatz kann jedoch die Arbeit mit Komponenten erschweren und ein Hindernis für die vollständige Offenlegung ihrer Fähigkeiten in Bezug auf Wiederverwendung und Modularität darstellen. Wenn wir die Situation unter diesem Gesichtspunkt betrachten, können wir sagen, dass Projekte wie MobX uns einen interessanten, reaktiveren Ansatz für die Arbeit mit dem Status von Anwendungen bieten (hier können Sie sich auch an das nicht angegebene Projekt erinnern).

Wenn wir über die neuen Standardreaktionsmechanismen für die Statusverwaltung sprechen, können wir die Kontext-API und die Hooks abrufen. Aufgrund ihres Erscheinungsbilds benötigt der Programmierer keine Bibliotheken von Drittanbietern mehr, um den Status zu verwalten, und dieser Status kann auf der Ebene der Funktionskomponenten verwaltet werden. Dies verbessert die Modularität von Projekten und die Möglichkeit, Komponenten wiederzuverwenden.

Wenn Sie also versuchen, in die Zukunft zu schauen, kann es durchaus vorkommen, dass der Begriff „Status“ hauptsächlich in Anwendungen für gekapselte Komponenten und nicht in Anwendungen für einige globale Data-Warehouses auf Anwendungsebene verwendet wird.

6. Die Stilisierung von Komponenten ist eine Komposition

Trennung von Komponenten, die Logik und Stile implementieren - die Möglichkeit, Komponenten durch Komposition zu stilisieren

Es wurde viel darüber gesagt, wie man Komponenten stylt. In diesem Bereich gibt es viele Möglichkeiten. Dies sind eingebettetes CSS, CSS-Module, CSS-Beschreibung in JS-Code, stilisierte Komponenten und Zwischenlösungen wie Stylable.

Wenn ich über das zukünftige Styling von Komponenten nachdenke, neige ich dazu, mir Styling als Komposition vorzustellen. Dies bedeutet, dass Komponentenentwurfssysteme sowohl Komponenten enthalten müssen, die eine bestimmte Logik implementieren, als auch Komponenten, die Stile beschreiben. Mit diesem Ansatz können Sie ein Komponentendesignsystem erstellen, das sich im Verlauf des Projekts entwickelt. Dadurch müssen Entwickler keine umfangreichen Bibliotheken für das Styling mehr beherrschen. Tools zum Entwerfen von Komponenten wie Sketch oder Figma können diese Idee ebenfalls verwenden.

7. GraphQL-API und datengesteuerte Clientanwendungen

Die GraphQL-Technologie und ein komponentenbasierter Entwicklungsansatz bieten aufregende Möglichkeiten für webbasierte Clientanwendungen. Mit Apollo können Sie beispielsweise problemlos UI-Komponenten erstellen, die über GraphQL mit Daten arbeiten. Es gibt viele andere Tools , die die Arbeit mit GraphQL erleichtern.

Ein angemessener Umgang mit verschiedenen APIs vereinfacht die Entwicklung datengesteuerter Anwendungen. Auf diese Weise können Sie die Entwicklungsgeschwindigkeit erhöhen. Daher ist GraphQL eine Technologie, die denjenigen Aufmerksamkeit geschenkt werden sollte, die über die Zukunft nachdenken.

8. Komponentenbasierte Designertools

Komponenten werden allmählich zu einem integralen Bestandteil von Webprojektdesignsystemen. Dies verringert die Lücke zwischen Designern und Programmierern. Beide nähern sich einander.

Beispielsweise bietet Sketch bereits Tools für die modulare Entwicklung von Komponentendesigns, die Abhängigkeiten zwischen Komponenten erfordern. Es gibt bereits Tools für die Arbeit in Sketch mit Komponenten, die ihre visuelle Darstellung programmgesteuert gestalten. Der weit verbreitete Einsatz solcher Werkzeuge ist nur eine Frage der Zeit. Tools wie Figma zielen hauptsächlich auf wiederverwendbare Benutzeroberflächenkomponenten ab. Das Framer- Projekt entwickelt ein Tool für Programmierdesigner. Mit diesem Tool können Designer steuern, wie Benutzeroberflächenelemente in React-Komponenten umgewandelt werden.

Zusammenfassung

Hier haben wir Ihnen einige Trends in der Client-Webentwicklung vorgestellt, die laut dem Autor des Materials auf jemanden achten sollten, der für die Zukunft gerüstet sein möchte. Wir hoffen, diese Veröffentlichung hat Sie zum Nachdenken angeregt.

Liebe Leser! Wie sehen Sie die Zukunft der Webentwicklung?