Frontend 2019: Ergebnisse des Jahres

2019 entwickelte sich die Welt der Front-End-Entwicklung, wie bereits geschehen, rasant. Das Material, dessen Übersetzung wir heute veröffentlichen, widmet sich einem Rückblick auf wichtige Ereignisse, Neuigkeiten und Trends von 2019.



Und hier ist übrigens ähnliches Material, das wir 2018 veröffentlicht haben. Dort gibt es am Ende einen Prognoseabschnitt für 2019. Nach unserer Meinung waren viele von ihnen gerechtfertigt. Dieser Artikel wird nicht ohne Prognosen auskommen, aber wir werden uns selbst nicht übertreffen.

Informationen zum Herunterladen beliebter Frontend-Frameworks und -Bibliotheken von npm

Die React-Bibliothek nimmt wieder die Handfläche und wächst weiter, und seltsamerweise belegte jQuery den zweiten Platz. Nicht weit von den Führern gingen Angular und Vue. Beide Frameworks verfügen über eine starke Basis begeisterter Entwickler. Das Svelte-Rahmenwerk hat in diesem Jahr erhebliche öffentliche Aufmerksamkeit erfahren, seine Umsetzung ist jedoch noch nicht sehr aktiv.


Frontend-Frameworks und Bibliotheken von npm herunterladen ( Quelle )

WebAssembly wird die vierte Sprache des Webs und verbindet HTML, CSS und JavaScript

Nach einem eher ruhigen Jahr war die WebAssembly-Technologie Anfang Dezember allen bekannt. Tatsache ist, dass es offiziell für die W3C-Webentwicklung empfohlen wird . W3C (World Wide Web Consortium) ist eine zentrale internationale Organisation, die sich der Standardisierung von Webtechnologien widmet.

Die WebAssembly-Technologie hat seit ihrer Einführung im Jahr 2017 breite Aufmerksamkeit erregt. Viele benutzen es bereits. In den vergangenen Jahren wurde die WebAssembly 1.0-Spezifikation veröffentlicht und die Unterstützung für diese Technologie in alle gängigen Browser integriert.

Weitere Neuigkeiten im Zusammenhang mit WebAssembly im Jahr 2019 beziehen sich auf die Gründung der Bytecode Alliance . Das Ziel von Allianzorganisationen ist es, die Zukunft von WebAssembly außerhalb des Browsers zu sichern, indem sie zusammenarbeiten, um Standards zu implementieren und neue Standards vorzuschlagen.

Wir warten noch auf den Moment, in dem die Position von WebAssembly wirklich gestärkt wird und diese Technologie in großen Mengen implementiert wird. Jede Verbesserung in WebAssembly bringt uns diesem Punkt näher. Die W3C-Erklärung ist natürlich ein großer Schritt zur Legitimation dieser Technologie in der Unternehmenswelt. Wir müssen die Eintrittsbarrieren in die Welt der WebAssembly-Programmierung weiter senken, um die Entwicklung neuer WebAssembly-Projekte zu vereinfachen.

Die Verwendung von TypeScript nimmt rasant zu, viele Entwickler geben zu, dass sie diese Sprache lieben

2019 kann das Jahr von TypeScript genannt werden. Diese Sprache ist nicht nur zum De-facto-Standard bei der Lösung des Problems der Eingabe von JS-Code geworden. Viele Entwickler bevorzugen es auch gegenüber gewöhnlichem JavaScript sowohl in persönlichen Projekten als auch bei der Arbeit.

In einer StackOverflow- Studie, die Anfang dieses Jahres veröffentlicht wurde, teilte TypeScript in der Rangfolge der von Entwicklern am meisten geliebten Sprachen den zweiten Platz mit Python, nur hinter Rust. Und es wird nicht überraschen, wenn TypeScript in derselben Studie, deren Ausgabe Anfang 2020 erwartet wird, noch weiter ansteigt.


Viele Entwickler lieben TypeScript

TypeScript hat die Welt der Webentwicklung buchstäblich übernommen. Dies gilt sowohl für das Frontend als auch für das Backend. Einige Programmierer haben versucht, TypeScript als einen weiteren kurzfristigen Trend zu verwerfen. Sie dachten, er würde das traurige Schicksal von Coffeescript teilen. TypeScript hat sich jedoch bei der Lösung des zugrunde liegenden Problems der JS-Entwicklung bewährt. Es gibt das Gefühl, dass seine Popularität im Laufe der Zeit nur wächst.

TypeScript bietet Webentwicklern durch die Integration in alle wichtigen Code-Editoren einen hohen Komfort. JavaScript-Entwickler betrachten TypeScript als ein Tool, dessen Verwendung zu weniger Fehlern führt. TypeScript ist in ihren Augen geschriebener Code, der leichter zu lesen ist als JavaScript-Code. Dies sind Objektschnittstellen, die zur Erstellung selbstdokumentierender Programme beitragen.

Wenn wir über die Popularität von TypeScript sprechen, ist es erwähnenswert, dass es zumindest React im Jahr 2019 bei der Anzahl der Downloads von NPM umgangen hat. Er hat auch viel mehr Downloads als seine Konkurrenten - Projekte wie Flow und Reason.

Ich möchte Ihre Aufmerksamkeit auf die Tatsache lenken, dass TypeScript und React völlig unterschiedliche Technologien sind, um unterschiedliche Probleme zu lösen. Daher ist ein solcher Vergleich wie ein Vergleich von warm zu weich. Dies ist nur eine Demonstration der Popularität von TypeScript.


TypeScript-Bypässe Reagieren in NPM

TypeScript 3.0 wurde Ende 2018 veröffentlicht. Im Jahr 2019 erhielt er die Version 3.7, die die neuesten Funktionen des ECMAScript-Standards enthielt, wie z. B. optionale Ketten und das Überprüfen nur von null und nicht undefined Werten. Die neue Version von TypeScript hat die Funktionalität im Zusammenhang mit der Arbeit mit Typen verbessert.

React führt weiter, Entwickler lieben Hooks

Vue und Angular haben spezielle Benutzergemeinschaften. Vue übertraf sogar Reagierte in der Anzahl der Sterne auf GitHub. Aber in Bezug auf die praktische Anwendung, sei es persönliche Projekte von Programmierern oder deren Arbeit, steht React mit Zuversicht an erster Stelle.

Ende 2018 veröffentlichte das React-Team die sogenannten Hooks. Im Jahr 2019 eroberten Hooks buchstäblich die Welt von React. Die überwiegende Mehrheit der React-Entwickler verwendet sie als Hauptmechanismus für die Verwaltung des Status von Komponenten und für die Arbeit mit Ereignissen in ihrem Lebenszyklus. Im Laufe des Jahres wurden unzählige Artikel über Hooks geschrieben, die Verwendungsmuster wurden deutlicher, und die wichtigsten React-Pakete haben begonnen, benutzerdefinierte Hooks bereitzustellen, die für die Arbeit mit diesen Paketen verwendet werden können.

Mithilfe von Hooks kann ein Programmierer den Status und den Lebenszyklus von Funktionskomponenten mithilfe einer einfachen und präzisen Syntax verwalten. Darüber hinaus können Sie mit React benutzerdefinierte Hooks erstellen, mit denen Entwickler Code schreiben können, der für die Wiederverwendung geeignet ist, und mit denen Sie eine Logik erstellen können, die zusammen verwendet werden kann. Dadurch werden keine Komponenten höherer Ordnung oder Rendereigenschaften benötigt.

Das React-Entwicklungsteam legt besonderes Augenmerk auf die Benutzerfreundlichkeit von Programmierern und Tools, mit denen produktiver gearbeitet werden kann. Nach dem lauten Erscheinen von Hooks in React 16.8, als die Bibliothek 2019 auf Version 16.4 kam, waren die restlichen Neuerungen nicht mehr so ​​groß.

Man kann sagen, dass sich das React-Entwicklungsteam nach der Freigabe der Hooks auf den Komfort der Programmierer konzentrierte, indem es Hilfstools erstellte. Der Komfort des Programmierers und die Empfindungen, die er bei der Entwicklung von React-Anwendungen verspürt, stellten das Hauptthema der Konferenz React Conf 2019 dar. Tom Ochchino, führender Konferenzsprecher und React-Team-Manager, sagte, dass die Gefühle des Entwicklers in Bezug auf die Verwendung von React auf drei Ideen beruhen: Geringer Input Barriere, hohe Produktivität, Skalierbarkeit der Lösungen. Sehen Sie sich an, was vom React-Team veröffentlicht wurde (oder veröffentlicht werden soll), um diese Ideen zu unterstützen:

• Neue Version der React Developer Tools.
• Neuer Leistungsprofiler.
• Erstellen Sie die React App v3.
• Utility-Updates zum Testen.
• Wettbewerbsmodus (erwartet).
• Das von Facebook verwendete CSS-in-JS-System (erwartet).
• Progressive / selektive Vorbereitung des vorgerenderten Seitencodes für die Arbeit (erwartet).
• Reagieren Sie auf Kernverbesserungen hinsichtlich der Verfügbarkeit (erwartet).

Es wird angenommen, dass ein Programmierer, wenn er angenehm arbeitet, etwas erreicht, das einen positiven Eindruck auf die Benutzer hinterlässt. Infolgedessen ist die oben beschriebene React Developer Initiative ein Gewinn für alle. Hier finden Sie einen Vortrag von React Conf 2019 zu den erwarteten React-Funktionen. Hier finden Sie einen Link zu allen Vorträgen dieser Veranstaltung.

Vue Framework bereitet sich auf Release Version 3 vor und wird immer häufiger eingesetzt

Wahrscheinlich kann Vue zwar nicht als das gebräuchlichste Framework bezeichnet werden, aber es fällt schwer, nicht zu bemerken, dass sich um ihn herum eine Community gebildet hat, deren Mitglieder sich wie kein anderer für ihr Geschäft begeistern. Es ist bekannt, dass Vue das Beste aus React und Angular herausholt, aber es ist einfacher zu bauen als sie sind. Ein weiterer wichtiger Vorteil von Vue ist seine größere Offenheit und dass es von keinem großen Unternehmen wie Facebook (React ist seine Idee) oder Google (dieses Unternehmen unterstützt Angular) kontrolliert wird.

Die Hauptnachrichten in der Vue-Welt sind die kommenden Releases 3.0. Die Alpha-Version wird Ende des Jahres erwartet. In diesem Jahr hat Vue 2.x nur wenige Updates erhalten, es war näher am Jahresanfang. Tatsache ist, dass alle Kräfte der Entwickler auf die Veröffentlichung von Vue 3.0 gerichtet sind.

Die Tatsache, dass Vue in diesem Jahr nicht viele Veröffentlichungen hatte, bedeutet nicht, dass mit diesem Framework nichts Interessantes passiert. Als Ewan Yu den RFC für die dritte Version von Vue veröffentlichte, gab es in der Community eine breite Diskussion über Veränderungen. Zum Beispiel können Sie sie hier und hier lesen.

Das Hauptproblem, das Vue-Entwickler beschäftigte, war eine große Änderung der Framework-API. Nach dem Auftreten einer solchen negativen Reaktion wurde jedoch gesagt, dass die neuen APIs zu den alten hinzugefügt werden und abwärtskompatibel mit Vue 2 sind. Viele Entwickler sagen, dass sie überlegen werden, ob die neue Vue-Version nicht so aussieht, wie sie es gerne hätten die Fähigkeit, zu Svelte zu wechseln. Die Leute befürchten, dass Vue-Änderungen dazu führen, dass dieses Framework zu sehr wie React aussieht. Obwohl viele Mitglieder der Community immer noch besorgt über die Zukunft des Frameworks sind, besteht das Gefühl, dass der Lärm abgeklungen ist und jeder nur auf eine neue Veröffentlichung wartet.

In Vue 3 werden neben der umstrittenen Funktionalität einige neue interessante Funktionen und nützliche Änderungen erwartet:

• API-Zusammensetzung.
• Änderungen an den Konfigurations- und Mount-APIs.
• Fragmente.
• Unterstützung für die Time Slicing-Technologie (experimentell).
• Unterstützung für mehrere V-Modelle.
• Portale
• Neue benutzerdefinierte Direktiven-API.
• Verbesserte Reaktivität.
• Virtuelles DOM umgeschrieben.
• Erhöhung der statischen Eigenschaften.
• Hook API-Unterstützung (experimentell).
• Optimierung der Slot-Generierung (Trennung von Rendering für Parent- und Child-Komponenten).
• Verbesserte TypeScript-Unterstützung.

Ein bemerkenswertes Ereignis in der Vue-Welt war die Veröffentlichung der vierten Version von Vue CLI in diesem Jahr, bei der das Hauptaugenmerk auf der Aktualisierung der grundlegenden Tools liegt.

Hier ist Ewan Yus Vortrag über Vue.

Die 8. und 9. Version von Angular sowie die neue Ivy Compilation / Rendering-Engine werden herauskommen

Angulars Philosophie, bei der das Framework dem Entwickler bestimmte Aktionsschemata vorschreibt, verhalf diesem Tool zu einer großen Anwenderbasis. Angular teilt Entwicklern mit, was richtig ist und was nicht, bietet jedoch alle Tools, die Entwickler benötigen.

Dies beseitigt viele Gründe für die Diskussion, welche Bibliotheken und Abhängigkeiten in das Projekt aufgenommen werden sollten. Es ist zu beachten, dass solche Probleme häufig in Teams auftreten, die React verwenden. Darüber hinaus schreiben Angular-Anwendungen in TypeScript. Da derjenige, der Angular wählt, zustimmen muss, dass bereits viele Entscheidungen für ihn getroffen wurden, ist dieses Framework bei verschiedenen Unternehmen sehr beliebt. Auf diese Weise können sich Entwickler auf die Entwicklung von Softwareprodukten konzentrieren, anstatt Zeit mit dem Nachdenken über Pakete zu verschwenden.

Im Jahr 2019 wurde Version 8 von Angular veröffentlicht. Im selben Jahr wurde die neue Ivy Compilation / Rendering Engine veröffentlicht. Die Hauptstärke von Ivy ist, dass es die Größe von Bündeln reduziert. Aber in der Tat bringt es Angular und viele andere Nützlichkeiten. Vor der Veröffentlichung von Angular 9 ist Ivy eine optionale Funktion. Hier können Sie die Details zu den Neuerungen in Angular 8 lesen. Ich möchte insbesondere Folgendes erwähnen:

• Differenzielles Laden von modernem JavaScript-Code.
• Eine Gelegenheit, sich mit der Ivy-Technologie vertraut zu machen.
• Gewährleistung der Abwärtskompatibilität des Angular-Routers.
• Verbesserte Montage von Webworkern.
• Möglichkeit, Angular-Entwicklerinformationen zur Verwendung der Angular-CLI weiterzugeben.
• Abhängigkeitsaktualisierungen.

Im Dezember 2019 bereitete sich das Angular-Team auf die Veröffentlichung von Angular 9 vor. Es scheint, dass diese Version des Frameworks entweder Ende dieses Jahres oder Anfang des nächsten Jahres veröffentlicht wird. Die größte Neuerung in Angular 9 ist, dass Ivy zur Standard-Rendering-Engine wird. Hier ist ein Video, in dem Sie mehr über Angular 9 erfahren.

Der Erreichbarkeit (a11y) und der Internationalisierung (i18n) wird jetzt mehr Aufmerksamkeit geschenkt als zuvor

Das Web sollte ein für alle Menschen offener und für alle Menschen nutzbarer Raum sein. Infolgedessen sind die Erreichbarkeit des Frontends und die Internationalisierung zu Prioritäten geworden. Nach der rasanten Entwicklung von JavaScript und Web, die im Jahr 2015 begann, beginnen sich Muster und Frameworks endlich zu stabilisieren. Wenn Technologien heute stabiler sind als vor einigen Jahren, können Entwickler Tools zur Lokalisierung von Anwendungen mehr Aufmerksamkeit schenken und ihre Verfügbarkeit erhöhen. Dies macht das Web zu einem einladenden Ort für alle Nutzerkategorien. Wir sollten stolz auf den Weg in diese Richtungen sein, den wir bereits gegangen sind, aber es bleibt noch viel zu tun.

Folgendes wird über die Barrierefreiheit in MDN gesagt: „Die Barrierefreiheit ermöglicht es, dass Ihre Website von möglichst vielen Personen verwendet wird. Wir betrachten dies traditionell als Barrierefreiheit für Menschen mit Behinderungen. Tatsächlich umfasst diese Zahl jedoch auch andere Benutzergruppen, die mobile Geräte verwenden oder eine langsame Netzwerkverbindung haben. “

Über die Internationalisierung auf w3.org heißt es : „Wenn Sie ein Projekt internationalisieren, bedeutet dies, dass Sie Ihre eigenen Materialien, Anwendungen, Spezifikationen und andere ähnliche Ressourcen entwerfen oder erstellen, damit diese für Benutzer jeder Kultur normal funktionieren in irgendeiner Region leben, irgendeine Sprache sprechen oder es einfach machen, sie für solche Benutzer anzupassen. "

Funktionen von ES2019

ECMAScript (die Spezifikation, auf der JavaScript basiert) folgt weiterhin dem diesjährigen jährlichen Aktualisierungszyklus. Der ES2019-Standard bietet viele neue Funktionen . Hier sind einige von ihnen:

• Methode Object.fromEntries() .
• String.trimStart() und String.trimEnd() -Methode.
• Verbesserte Unicode-Unterstützung in der JSON.stringify() -Methode.
• Array.flat() Methode.
• Array.flatMap() Methode.
• Verbesserte Arbeit mit try/catch .
• description von Symbol Objekten.

Obwohl in ES2019 sehr interessante neue Funktionen erschienen sind, wird der kommende ES2020- Standard möglicherweise die wahrscheinlich am meisten erwarteten Funktionen seit ES6 / ES2015 enthalten:

• Private Klassenfelder.
• Optionale Ketten sind obj.field?.maybe?.exists .
• Werte nur auf null und undefined - item ?? 'use this only if item is null/undefined' item ?? 'use this only if item is null/undefined' .
• BigInt Datentyp.

Explosive Flatter Popularität

Flutter erschien 2 Jahre nach React Native, gewann aber schnell an Popularität. Dieses Projekt kommt React Native in Bezug auf die Anzahl der Sterne auf GitHub sehr nahe. Und wenn die Popularität des Projekts im gleichen Tempo weiter zunimmt, wird es React Native bald überholen. Flutter konkurriert mit React und ist ein weiteres großartiges plattformübergreifendes Tool für die Entwicklung mobiler Anwendungen.

Angesichts der Tatsache, dass Flutter nicht die gleiche Community freundlicher Entwickler vorweisen kann, die React Native hat und die von Webentwicklern vertreten wird, die React verwenden, sehen solche Erfolge besonders eindrucksvoll aus. Flutters Ziel ist es, das beste plattformübergreifende mobile Entwicklungsframework zu sein.

Hier ist eine Tabelle, in der React Native und Flutter für einige Indikatoren übereinstimmen.

Node.js Foundation und JS Foundation fusionierten zur OpenJS Foundation. Node.js 12 wird die LTS-Version sein

Um das JavaScript-Ökosystem zu unterstützen und das Wachstum der Sprache zu beschleunigen, haben sich die Node.js Foundation und die JS Foundation zur OpenJS Foundation zusammengeschlossen . Die Hauptidee dieses Schritts ist es, eine Zusammenarbeit und technologische Entwicklung unter der Schirmherrschaft einer neutralen Organisation aufzubauen, die nun 31 Open-Source-Projekte vereint. Diese Projekte umfassen Node, jQuery und Webpack. Diese Initiative kann als positive Bewegung für die gesamte JS-Gemeinschaft angesehen werden. Es wird von führenden Technologieunternehmen wie Google, IBM und Microsoft unterstützt.

Die 12. Version von Node.js, die in diesem Jahr gemäß der etablierten Tradition veröffentlicht wurde, wird bis April 2023 langfristigen Support (LTS, Long Term Support) erhalten. Node.js 12 bietet viele neue Funktionen, Sicherheitsupdates und Leistungsverbesserungen. Einige bemerkenswerte Neuerungen umfassen native Unterstützung für import/export , Unterstützung für private Klassenfelder, Kompatibilität mit der V8-Engine-Version 7.4, Unterstützung für TLS 1.3 und die Einführung zusätzlicher Diagnosetools. Hier finden Sie Informationen zu den 12 Innovationen von Node.js.

Das Svelte-Framework zieht viel Aufmerksamkeit auf sich, ist aber noch nicht weit verbreitet.

Das Svelte-Framework konnte seinen Platz in der bereits überfüllten Welt der Front-End-Frameworks finden. Wie bereits erwähnt, hat dies jedoch noch nicht zu einer breiten Anwendung dieses Rahmens geführt. Um die Essenz von Svelte auf den Punkt zu bringen, können wir sagen, dass dies ein "einfaches, aber leistungsstarkes" Werkzeug ist. Die Website des Projekts hat drei Hauptstärken:

• Svelte-Entwickler schreiben weniger Code.
• Das Framework verwendet kein virtuelles DOM.
• Er ist wirklich reaktiv.

Svelte versucht, den Großteil der Arbeit in die Kompilierungsphase zu bringen, anstatt etwas im Browser zu tun, während die Seite arbeitet. Svelte verfügt über eine komponentenbasierte Architektur, deren Strukturen in reinem HTML und JavaScript kompiliert sind. Dies verspricht den Bedarf an weniger Boilerplate-Code. Das Framework verwendet die Ideen der reaktiven Programmierung, mit der Sie direkte Änderungen am DOM vornehmen können, anstatt das virtuelle DOM zu ändern, und die Änderungen dann mit dem realen abgleichen können.

Svelte bietet Front-End-Entwicklern etwas Neues und Interessantes, das ihnen nicht mehr Möglichkeiten bietet, sondern weniger. Im Jahr 2020 wird es interessant sein, das Wachstum und die Entwicklung von Svelte zu beobachten. Ich hoffe, dass wir Beispiele für den Einsatz in Großprojekten sehen können. So erfahren Sie, wie es im Vergleich zu den größeren Mitbewerbern - React, Vue und Angular - aussieht.

Statische Sites sind immer noch relevant, Entwickler führen JAMStack ein

Statische Websites haben bewiesen, dass sie Teil des Webs sind und Positionen nicht aufgeben werden. Diese Aussage wird durch die Ausweitung des Einsatzes von Frameworks wie Gatsby, das rasante Wachstum des Hostings statischer Websites wie Netlify und die zahlreichen neuen Unternehmen, die CMS ohne Benutzeroberfläche entwickeln, unterstützt.

Statische Websites kombinieren das, was bereits im Web vorhanden war, mit neuen Tools und Bibliotheken. Mit ihnen können Sie Projekte erstellen, die mit nichts anderem zu vergleichen sind. Wir können Sites mit modernen Bibliotheken wie React erstellen und diese dann während der Erstellung des Projekts zu statischen HTML-Seiten kompilieren. Da jetzt alle Seiten vorgefertigt gespeichert sind, verwendet der Server keine Ressourcen, um sie mit Daten zu füllen, wenn der Client darauf zugreift. Seiten können sofort an den Client geliefert werden, Projekte können die Vorteile des CDN-Cachings voll ausnutzen. Auf diese Weise können Sie den Inhalt von Websites so nah wie möglich an den Benutzern halten.

Beim Erstellen statischer Websites ist das JAMStack- Muster (JavaScript, API, Markup) sehr beliebt. Dies ist ein hybrider Ansatz, bei dem statische Websites und Anwendungen mit nur einer Seite kombiniert werden. Bei diesem Ansatz werden Seiten in statischer Form an den Client übergeben. Wenn sie jedoch auf dem Client angezeigt werden, verhalten sie sich wie SPAs, die mithilfe von APIs und Benutzeraktionen den Status der Benutzeroberfläche ändern.

PWAs wachsen, ihre Implementierung nimmt zu

Die Verwendung statischer Websites ist eine Möglichkeit, extrem schnelle Webprojekte zu erstellen. Sie sind aber nicht für alle Fälle geeignet. Eine weitere interessante Option ist eine progressive Webanwendung (PWA, Progressive Web Application). Mit PWAs können Sie Ressourcen in einem Browser zwischenspeichern, um die Reaktionszeit von Seiten auf Benutzereinflüsse zu beschleunigen und die Effizienz von Projekten ohne Internetverbindung sicherzustellen. Darüber hinaus können Sie Hintergrundworkflows verwenden, die diese Anwendungen näher an systemeigene Anwendungen bringen und beispielsweise die Funktionalität von Push-Benachrichtigungen implementieren.

Einige behaupten sogar, dass PWA herkömmliche mobile Anwendungen ersetzen kann. Wie dem auch sei, es besteht kein Zweifel, dass PWAs für lange Zeit ein wichtiger Bestandteil der Technologien sein werden, die von Unternehmen bei der Entwicklung ihrer Projekte eingesetzt werden.

Frontend-Tools von höchster Qualität

Frontend-Entwickler beklagen sich seit einigen Jahren über die Müdigkeit von JavaScript. Aber Sie können sehen, wie dieses Problem dank der enormen Anstrengungen derer, die Open-Source-Projekte unterstützen, allmählich verschwindet.

Wenn Sie zuvor ein SPA erstellen mussten, mussten Sie mithilfe von Bower oder NPM eigene Abhängigkeiten erstellen. Um zu verstehen, wie man den Code mit Browserify oder Webpack übersetzt, musste man einen Express-Server von Grund auf neu schreiben und seine Anwendungen im Sturm der Bibliotheksaktualisierungen am Laufen halten.

, , . , . , , Create React App, Vue CLI, Angular CLI. — Gatsby, , Expo, React Native. Next Nuxt , . GraphQL- Hasura, TypeScript- GraphQL Code Generator. Webpack. — , .

, « -»?

GraphQL ,

GraphQL , , REST. , , GraphQL. , API GitHub GraphQL , .

GraphQL- . , JSON-. API GraphQL , , API .

API GraphQL , , , TypeScript-. GraphQL Code Generator , TypeScript-, .

GraphQL . Apollo .


GraphQL

CSS-in-JS

-, , JavaScript. CSS-in-JS, , JavaScript-.

, , , JavaScript- import/export . , , , , CSS-in-JS , . , , Facebook CSS-in-JS — , .

, CSS CSS-in-JS. CSS , . , CSS-:

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

CSS-in-JS CSS- . , . , React, , . JS-, React:

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

styled-components emotion — CSS-in-JS-. emotion 2019 styled-components . , , , CSS-in-JS. , .


CSS-in-JS-

VS Code

IDE . , , , . -, , . , , VS Code. — , , , , .

State of JS Survey 2019 .


VS Code —

Webpack 5 -

Webpack , JavaScript-. — . Webpack , , . 5 Webpack :

• .
• .
• , , Webpack.

Jest Flow TypeScript

Facebook , Jest . Flow — TypeScript. 2019 , Jest Flow TypeScript. , TypeScript JS-. TypeScript 2020 , .

Chrome 72-78

Chrome . , -, . 2019 7 Chrome. Chrome 79 -, Chrome 80 dev-, Chrome 81 — canary-. , Chrome 2019 .

Microsoft Edge Chromium

Internet Explorer, Edge, - . , , . , - . , Microsoft Chromium Google. 2019 -.

Facebook Hermes — JavaScript- Android, React Native

Facebook , JavaScript- Android . — Hermes . Facebook React Native. , , React Native .

2020

, 2020 :

• - . PWA.
• WebAssembly , .
• GraphQL REST, , GraphQL.
• TypeScript .
• , , -. .
• CSS-in-JS , CSS, .
• «» . , . , . 2020 .
• Flutter React Native - .
• , Svelte.
• Deno ( TypeScript, Node.js).
• AR/VR A-Frame , React VR Google VR . AR/VR.
  
• - (Docker, Kubernetes).

Sehr geehrte Leser! -2020?