Geekly articles weekly

Frontend 2018: Ergebnisse des Jahres

Die Welt der Webentwicklung wächst unglaublich schnell. Was gestern heute neu war, ist vielleicht schon veraltet, aber was heute fast niemand weiß, kann morgen zum Motor des Fortschritts werden. Das Material, dessen Übersetzung wir heute veröffentlichen, wird die interessantesten Dinge berücksichtigen, die 2018 im Front-End-Bereich passiert sind. Wir werden über die Entwicklung von Frameworks und Hilfstools, über JavaScript-Trends sowie über die Richtung sprechen, in die das Frontend 2019 gehen kann.



WebAssembly-Standardisierung


WebAssembly wird oft als eine der Technologien angesehen, auf denen das Web der Zukunft aufgebaut wird. Diese Technologie zielt darauf ab, die Codeleistung zu maximieren, ihre Größe zu verringern und die Möglichkeit der Webentwicklung mit verschiedenen Sprachen zu schaffen, indem darin geschriebene Programme in ein einziges Binärformat konvertiert werden, das von Webbrowsern unterstützt wird.

In der zweiten Jahreshälfte 2017 meldeten Entwickler aller führenden Browser Unterstützung für WebAssembly. Im Februar 2018 ereigneten sich dann drei wichtige Ereignisse: Die erste Version der WebAssembly-Spezifikation wurde veröffentlicht, die Spezifikationen der entsprechenden JavaScript-Schnittstelle und der Web-API wurden veröffentlicht.

Informationen zum Herunterladen beliebter Frontend-Bibliotheken von npm


Zu den ersten vier beliebtesten Front-End-Modulen, die von npm heruntergeladen wurden, gehören React, jQuery, Angular und Vue. Im Folgenden werden wir detaillierter auf die Situation mit Bibliotheken für die Webentwicklung eingehen.


2018 Download der Front-End-Bibliothek von npm

React dominiert weiterhin die Welt der Front-End-Bibliotheken und entwickelt sich ständig weiter


React ist seit vielen Jahren führend in der Webentwicklung. Der Umfang seiner Nutzung nahm 2018 weiter zu. Laut einer Umfrage von Stack Overflow ist diese Bibliothek nach wie vor eine der beliebtesten unter Programmierern.

Das Kern-Entwicklungsteam von React ist sehr aktiv bei der Entwicklung der Bibliothek und dem Hinzufügen neuer Funktionen. Im Jahr 2018 wurden zahlreiche Ergänzungen zu React v16 vorgenommen, darunter neue Methoden für den Komponentenlebenszyklus, eine neue Kontext-API , neue Mauszeigerereignisse, verzögerte Funktionen und eine neue React.memo - Komponente höherer Ordnung. Es sollte beachtet werden, dass den React- und Suspense-API-Hooks die größte Aufmerksamkeit geschenkt wurde.

React Hooks stießen auf großes Interesse, sie schrieben viel über sie, viele mochten sie. Mit dieser Technologie können Sie Funktionskomponenten mithilfe der useState Funktion einen Status hinzufügen und Komponentenlebenszyklusereignisse verwalten.

Hier ist ein Video, das zeigt, wie die Verwendung von Hooks den React-Anwendungscode erheblich verbessern kann.

Eine weitere interessante Neuerung dieser Bibliothek ist React Suspense. Es wurde entwickelt, um das Laden von Daten innerhalb der React-Komponenten selbst zu steuern. Mit der Suspense-API können Sie die Ausgabe von Daten anhalten, während Sie auf den Abschluss des asynchronen Vorgangs warten, bei dem Sie sie von einer beliebigen Quelle empfangen. Es ist die Suspense-API, die in Lazy-Funktionen verwendet wird, um die Trennung von Komponentencode zu implementieren. Das Hauptziel der Implementierung dieser Technologie ist die Möglichkeit, asynchrone Datendownloads zu verwalten, z. B. Anforderungen an verschiedene APIs. Darüber hinaus können Sie mit der Suspense-API Antwortanforderungen zwischenspeichern.

Es gibt ein speziell entwickeltes Beispiel, das viele Indikatoren zum Laden von Daten auf einer Seite zeigt, die angezeigt werden, solange die isFetching Flags auf true . Dank der Suspense-API verfügt der Entwickler über Steuerelemente für die Benutzeroberfläche. Diese Tools können insbesondere verwendet werden, um anzugeben, was auf dem Bildschirm angezeigt werden soll, während auf das Laden von Daten gewartet wird, um eine Zeitüberschreitung festzulegen und die Navigation zu konfigurieren. Es ist sogar weit verbreitet, dass die Suspense-API die Notwendigkeit von Redux beseitigen kann. In dieser Rede von Dan Abramov erfahren Sie mehr über die Anwendungsentwicklung mit dieser API.

Vue wächst weiter Bypassing-Reaktion nach Anzahl der Sterne auf GitHub


Nach dem explosiven Wachstum von Vue im Jahr 2017 setzte sich das Gleiche im Jahr 2018 fort. Dieses Framework übertraf sogar React in Bezug auf die Anzahl der Sterne auf GitHub.

Obwohl Webentwickler Vue lieben, liegt dieses Framework in Bezug auf seine tatsächliche Verwendung immer noch weit hinter React und Angular. Vue verfügt jedoch über eine aktive Benutzerbasis, die weiter wächst, was Hoffnung gibt, dass Vue in Zukunft eine wichtige Rolle bei der Webentwicklung spielen wird.

Ewan Yu (Schöpfer von Vue) spricht viel über Vue 3


Vue wird Version 3.0 veröffentlichen. Im Jahr 2018 sprach der Schöpfer des Frameworks, Ewan Yu, auf verschiedenen Veranstaltungen über die erwarteten Fähigkeiten des Frameworks und schrieb darüber.

Angular Framework bleibt sehr beliebt, seine siebte Veröffentlichung


Im Oktober 2018 wurde die siebte Veröffentlichung von Angular veröffentlicht. Dieses Framework wurde bisher erheblich weiterentwickelt und von der MVC-Architektur auf ein modernes System mit Komponenten umgestellt. Auch seine Popularität wächst stetig.

Obwohl Angular nicht die gleichen eifrigen Unterstützer hat, die React und Vue unterscheiden, ist dieses Framework in professionellen Projekten immer noch beliebt. Viele Entwickler haben es satt, zu reagieren, weil sie bei der Verwendung dieser Bibliothek viele Entscheidungen hinsichtlich der Auswahl zusätzlicher Tools, der Gestaltung der Anwendungsarchitektur und der Erstellung von Bauprojekten treffen müssen. Angular hingegen entlastet den Entwickler von der Notwendigkeit, viele Entscheidungen zu treffen, und stellt ihm weit verbreitete Architekturvorlagen zur Verfügung. Angular ist ein Framework, dessen Funktionen alle Anforderungen eines Webanwendungsentwicklers abdecken. Das entsprechende Befehlszeilentool übernimmt den gesamten Prozess der Erstellung des Projekts. Natürlich sind viele Dinge mit diesem Ansatz ziemlich eng im Rahmen festgelegt. Ein weiterer Vorteil der Verwendung von Angular in einer professionellen Umgebung ist die Tatsache, dass es für die Verwendung von TypeScript ausgelegt ist. Als Ergebnis von Angular können wir sagen, dass dieses Framework sich in der Webentwicklungsumgebung einen Namen gemacht hat und seine Position weiter stärkt.

Es ist zu beachten, dass das @angular/core npm-Paket das neue Angular und das Angular-Paket das alte AngularJS ist.

Hier finden Sie die npm-Daten zu den Downloads von @angular/core , angular , react und vue Paketen im Jahr 2018 sowie Informationen zum Status dieser Projekte von GitHub.


Projektdaten für Winkel / Kern, Winkel, Reaktion und Vue

Immer mehr Entwickler möchten GraphQL lernen, aber diese Technologie hat REST noch nicht umgangen.


Die GraphQL-Technologie hat in einigen großen Projekten wie GitHub Anwendung gefunden, ist aber noch nicht weit verbreitet. Laut der State of JS-Studie verwendeten nur etwas mehr als 20% der Front-End-Entwickler die GraphQL-Technologie, aber der Indikator für diejenigen, die davon gehört haben und planen, sie zu verwenden, liegt bei beeindruckenden 62,5%.


GraphQL-Technologie

Die CSS-in-JS-Technologie wird immer häufiger


Bei der Analyse einer Webentwicklungsumgebung hat man das Gefühl, dass sie auf dem Weg ist, absolut alles mit JavaScript zu vereinheitlichen. Dieser Trend ist auch sichtbar, wenn er auf die CSS-in-JS-Technologie angewendet wird, bei der Stile mit JS-Zeichenfolgenwerkzeugen erstellt werden. Auf diese Weise können Sie mit Stilen und Abhängigkeiten unter Verwendung der üblichen JS-Syntax sowie Import- und Exportmechanismen arbeiten. Darüber hinaus wird das dynamische Styling vereinfacht, da Komponenten, die CSS-in-JS verwenden, Eigenschaften in Stile konvertieren können. Im Folgenden finden Sie Beispiele für reguläres CSS und CSS-in-JS.

Um dynamische Stile mit normalem CSS zu verwalten, müssen Sie mit Klassennamen in der Komponente arbeiten und diese basierend auf Status und Eigenschaften aktualisieren. Darüber hinaus müssen Sie für verschiedene Stiloptionen CSS-Klassen verwenden:

 // JS-   const MyComp = ({ isActive }) => { const className = isActive ? 'active' : 'inactive'; return <div className={className}>HI</div> } //  CSS- .active { color: green; } .inactive { color: red; }

Dank CSS-in-JS werden CSS-Klassen nicht mehr benötigt. Es reicht aus, die entsprechende Eigenschaft an die stilisierte Komponente zu übergeben, die die dynamische Stilisierung implementiert. Der Code wird viel sauberer, wir erhalten eine klarere Trennung der Aufgaben zwischen Stilen und Reagieren, sodass CSS dynamisches Styling basierend auf Eigenschaften durchführen kann. In React sieht dieser Code wie ganz normales JavaScript aus:

 const Header = styled.div` color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => ( <Header isActive={isActive}>HI</Header> )

Zur Implementierung von CSS-in-JS-Funktionen werden hauptsächlich Bibliotheken wie Styled-Components und Emotion verwendet. Die Styled-Komponentenbibliothek existiert länger als Emotion, sie ist weiter verbreitet, aber die Popularität von Emotion wächst schnell, viele Entwickler entscheiden sich dafür. Es sollte beachtet werden, dass Kent S. Dodds sogar aufgehört hat , an seiner Glamorous CSS-in-JS-Bibliothek zu arbeiten, und Emotion bevorzugt. So sehen die Styled-Komponenten und Emotion-Bibliotheken in Bezug auf npm und GitHub aus.


Gestaltete Komponenten und Emotionsbibliotheken im Jahr 2018

Das Vue-Framework unterstützt lokales CSS bei Verwendung von Einzeldateikomponenten ohne Verwendung zusätzlicher Bibliotheken. scoped Sie dazu einfach die Eigenschaft scoped zum scoped Tag hinzu. scoped organisiert Vue mithilfe der CSS-in-JS-Technologie die Arbeit mit lokalen Stilen, die nicht über die Komponente hinausgehen und nicht in andere Komponenten fallen.

Darüber hinaus sollte beachtet werden, dass in Angular standardmäßig durch Verwendung der Ansichtskapselungstechnologie der CSS-Bereich verwendet wird.

Entwickler, die mit technologischer Müdigkeit zu kämpfen haben, finden Erlösung in Befehlszeilen-Tools


Jeder weiß, wie anstrengend es sein kann, ständig aktualisierte Bibliotheken zu überwachen, die für Webprojekte von entscheidender Bedeutung sind, sowie Projekte unter Berücksichtigung von Bibliotheksaktualisierungen korrekt zu aktualisieren und unter solchen Bedingungen die richtigen Architekturentscheidungen zu treffen. Dieses Problem ist zu einem Katalysator für die Entwicklung von Befehlszeilentools geworden, mit denen solche Probleme gelöst werden können, sodass sich Programmierer auf die Arbeit an Anwendungen konzentrieren können. All diese Tools sind zu den wichtigsten Mitteln geworden, mit denen 2018 neue Anwendungen erstellt werden. In diesem Bereich sind insbesondere folgende Projekte zu vermerken: Next.js (SSR für React), Create-React-App (Erstellen von Client-React-Anwendungen), Nuxt.js (SSR für Vue), Vue-CLI (Client-Vue-Anwendungen) , Expo CLI für React Native, Standard- Angular- Tools.

Der Wunsch der Entwickler, das Front-End zu vereinfachen und die Produktivität zu steigern, hat zu einer zunehmenden Beliebtheit statischer Site-Generatoren geführt


Während der rasanten, revolutionären Entwicklung von JavaScript lernten alle gerne die neuesten Bibliotheken und setzten sie in die Praxis um. Nachdem sich jedoch alles mehr oder weniger stabilisiert hat, haben Entwickler erkannt, dass nicht alle Websites komplexe Single-Page-Anwendungen (SPA) sein sollten. Dieses Verständnis hat zur Entstehung, zum Wachstum und zur Entwicklung statischer Standortgeneratoren geführt. Dank ihnen können Sie Projekte mit verschiedenen Front-End-Tools wie React oder Vue entwickeln, die dann während der Assemblierung in statische HTML-Dateien konvertiert werden. Auf diese Weise können Sie Ihren Kunden sehr schnell eine vollständig fertige Seite geben.

Statische Sites sind insofern gut, als sie die perfekte Kombination aus Einfachheit und Leistung darstellen. Wenn während der Zusammenstellung des Projekts HTML-Dateien generiert werden, können fertige Seiten an Benutzer gesendet werden, die fast sofort geladen werden, ohne auf Server- oder Client-Rendering zurückgreifen zu müssen. Zusammen mit dem HTML-Code lädt der Client auch die JS-Dateien, die für das Funktionieren der Seite erforderlich sind, wodurch Benutzer dieselben Funktionen wie bei gewöhnlichen Anwendungen mit nur einer Seite erhalten.

Statische Site-Generatoren eignen sich hervorragend zum Erstellen persönlicher Sites oder Blogs, können aber auch in größeren Projekten verwendet werden. Im Jahr 2018 wurden Generatoren wie Gatsby und React Static for React-Apps sowie Tools wie VuePress for Vue-basierte Projekte immer beliebter. Tatsächlich sind statische Websites so beliebt geworden, dass das Open-Source-Projekt Gatsby zu einem Unternehmen herangewachsen ist und Risikokapitalinvestitionen erhalten hat.

Serverlose Architekturen und JAMStack


Die wachsende Beliebtheit statischer Websites hat zur Entwicklung von Servertechnologien geführt, die diese unterstützen. In den letzten Jahren im Bereich der Webentwicklung wurde ständig über serverlose Architekturen gesprochen. Dies lag an der Tatsache, dass Sie damit die Trennung von Server- und Clientcode organisieren und die Kosten für die Wartung von Projekten senken können.

Die Bewegung in Richtung Serverlosigkeit wurde dank der JAMStack-Webprojektentwicklungsmethode erweitert (J ist JavaScript, A ist API, M ist Markup, dh Markup). JAMStack basiert auf den Konzepten zur Entwicklung statischer Sites, über die wir im vorherigen Abschnitt gesprochen haben. Mit dieser Technik können Sie aufgrund vorgeformter Markups extrem hohe Standortladegeschwindigkeiten erzielen. Auf dem Client werden solche Sites mithilfe spezieller Server-APIs zu dynamischen SPA. 2018 bestand er sogar unter der Schirmherrschaft von freeCodeCamp, Netlify und GitHub den ersten JAMStack-Hackathon . In diesem Material werden die Funktionen der Verwendung der JAM-Architektur auf freecodecamp.com demonstriert, mit denen Sie die Möglichkeiten zur Entwicklung umfangreicher Anwendungen mithilfe der JAMStack-Methodik bewerten können.

TypeScript mag die Zukunft von JS sein, aber das Gleiche gilt nicht für Flow


JavaScript wird häufig wegen fehlender statischer Typisierung kritisiert. Die Hauptwerkzeuge zur Lösung dieses Problems sind TypeScript und Flow . Gleichzeitig ist TypeScript viel beliebter als Flow, und tatsächlich hat eine Studie zu Stack Overflow gezeigt, dass Entwickler TypeScript noch mehr lieben als JavaScript selbst (die entsprechenden Zahlen für diese Sprachen liegen bei 67% und 61,9%). Laut der State of JS-Studie planen mehr als 80% der Entwickler, TS zu verwenden, oder verwenden es bereits mit Vergnügen. Wenn wir über Flow sprechen, verwenden es nur 34% der Entwickler oder möchten es verwenden.

Nach allen Indikatoren zu urteilen, ist TypeScript eine Standardlösung für die statische Typisierung in JS, viele bevorzugen TS gegenüber normalem JavaScript. In diesem Jahr stieg die Anzahl der TS-Downloads in npm ständig und signifikant an, während der Zeitplan für den Flow-Download ziemlich flach blieb. Man hat das Gefühl, dass TypeScript, ein Tool, das nur von begeisterten Anhängern der statischen Typisierung verwendet wird, zu einem äußerst weit verbreiteten Tool für die Webentwicklung wird. Hier sind die TypeScript- und Flow-Daten (als babel-preset-flow ) von npm und GitHub.


TypeScript- und Flow-Downloads in der zweiten Hälfte des Jahres 2018

Webpack 4 wurde Anfang 2018 veröffentlicht


Webpack 4 wurde nur 8 Monate nach der Veröffentlichung von Webpack 3 veröffentlicht. Die neue Version von Webpack hat die Arbeit immer weiter vereinfacht und den Erstellungsprozess beschleunigt. Manchmal kann die Leistung von Webpack 4 die Leistung von Webpack 3 um 98% übertreffen. Webpack 4 zielt darauf ab, angemessen ausgewählte Standardparameter zu verwenden, unterstützt mehr Funktionen, ohne dass Plug-Ins erforderlich sind, und um Webpack verwenden zu können, muss zunächst keine Konfigurationsdatei mehr vorbereitet werden. Darüber hinaus unterstützt Webpack jetzt WebAssembly und ermöglicht den direkten Import von WebAssembly-Dateien.

Babel 7.0 veröffentlicht


Babel 7 wurde 2018 veröffentlicht - nach fast drei Jahren seit der Veröffentlichung von Babel 6. Babel ist eine Bibliothek, mit deren Hilfe JavaScript-Code, der die Funktionen neuer Standards (ES6 +) nutzt, in ES5-Code umgewandelt wird, der Cross- ermöglicht Browserkompatibilität von JS-Projekten. Das Material , das über die Veröffentlichung der neuen Version von Babel informiert, zeigt, dass Babel 7 schneller und moderner ist, erweiterte Konfigurationsoptionen unterstützt, verbesserte Funktionen in Bezug auf die Minimierung bietet, JSX-Fragmente und TypeScript-Technologien unterstützt und neue Sprachkonstrukte in einem frühen Stadium sind Harmonisierung und mehr. Es ist zu beachten, dass Babel-Pakete in npm jetzt den Namespace @babel .

Wichtige Veröffentlichungen von 2018


Betrachten Sie mehrere wichtige Veröffentlichungen, die 2018 veröffentlicht wurden.

  • Hier ist das Material darüber, wie viel Sie für die Verwendung von JavaScript im Jahr 2018 bezahlen.
  • Hier ist ein Beitrag vom React Conf-Event, in dem Sie mehr über die Zukunft von React erfahren können.
  • In diesem Artikel teilt Airbnb seine Erfahrungen mit React Native, die das Unternehmen über 2 Jahre erworben hat.
  • Hier zeigt Google jedem, der es möchte, ein Google Photos Web UI-Gerät.
  • Hier können Sie lesen, dass Microsoft den Edge-Browser auf die Chromium-Plattform übertragen wird.
  • Und hier ist eine sehr interessante Präsentation von Ryan Dahl, dem Schöpfer von Node.js.

Prognose für 2019


Was erwartet das Frontend 2019? Hier ist unsere Prognose:

  • WebAssembly wird in Webprojekten aufgrund der kontinuierlichen Weiterentwicklung dieser Technologie, der Standardisierung und des Wunsches der Entwickler nach Produktivität immer häufiger.
  • React wird weiterhin ganz oben im Ranking der Webentwicklungstools stehen, während Vue und Angular ihre Benutzerbasis weiter ausbauen werden.
  • CSS-in-JS kann der Standard-Styling-Ansatz sein und reguläres CSS ersetzen.
  • Vielleicht werden Entwickler auf Standard-Webkomponenten achten.
  • Es überrascht nicht, dass die Produktivität weiterhin weltweite Aufmerksamkeit erregen wird. Dies deutet darauf hin, dass in den meisten Webprojekten fortschrittliche Webanwendungen (PWA) und Code-Sharing-Technologien verwendet werden.
  • Dank der Verbreitung und Entwicklung von PWA werden Webprojekte enger in die Funktionen von Mobil- und Desktopgeräten integriert und bieten Benutzern umfassende Arbeitsmöglichkeiten, ohne eine Verbindung zu einem Netzwerk herzustellen.
  • Das Wachstum und die Entwicklung von Befehlszeilentools, die Entwickler von der Notwendigkeit befreien sollen, Tools unabhängig zu konfigurieren und ihnen die Möglichkeit zu geben, in Ruhe Webprojekte zu erstellen, werden fortgesetzt.
  • Weitere Unternehmen werden mobile Lösungen implementieren, die auf Standardtechnologien wie React Native oder Flutter basieren.
  • In der Front-End-Entwicklung wird die Rolle der Containerisierung zunehmen (insbesondere handelt es sich um Docker und Kubernetes).
  • Es wird eine bedeutende Förderung von GraphQL stattfinden, diese Technologie wird in mehr Unternehmen eingesetzt.
  • TypeScript wird nicht mehr als Alternative zu normalem JavaScript betrachtet, sondern als Standardauswahl in Situationen, in denen JavaScript normalerweise zuvor ausgewählt wurde.
  • Die Virtual-Reality-Technologie wird mit Bibliotheken wie A-Frame , React VR und Google VR einen großen Schritt nach vorne machen.

Liebe Leser! Was erwarten Sie von der Front-End-Entwicklung im Jahr 2019?

Source: https://habr.com/ru/post/de433396/

More articles:


All Articles