So fühlt es sich an, im Jahr 2016 JavaScript zu lernen

Während des Schreibens dieses Artikels wurden keine JavaScript- Frameworks erstellt.

Das Folgende ist inspiriert vom Artikel „It's the future“ von Circle CI. Sie können das Original hier lesen . Dieser Beitrag ist nur eine Meinung und sollte wie jedes JavaScript-Framework nicht zu ernst genommen werden.

Hey, ich habe dieses neue Webprojekt, aber um ehrlich zu sein, habe ich seit ein paar Jahren nicht mehr viel für das Web programmiert und ich habe gehört, dass sich die Landschaft ein wenig verändert hat. Du bist der aktuellste Webentwickler hier, oder?

- Der eigentliche Begriff ist Frontend-Ingenieur, aber ja, ich bin der Richtige. Ich beschäftige mich 2016 mit dem Web. Visualisierungen, Musikplayer, fliegende Drohnen, die Fußball spielen, was auch immer. Ich bin gerade von JsConf und ReactConf zurückgekommen, also kenne ich die neuesten Technologien zum Erstellen von Web-Apps.

Cool. Ich muss eine Seite erstellen, die die neuesten Aktivitäten der Benutzer anzeigt. Dazu muss ich nur die Daten vom REST-Endpunkt abrufen, sie in einer Art filterbarer Tabelle anzeigen und sie aktualisieren, wenn sich auf dem Server etwas ändert. Ich dachte, vielleicht könnte ich jQuery verwenden, um die Daten abzurufen und anzuzeigen?

-Oh mein Gott, nein, niemand verwendet mehr jQuery. Sie sollten versuchen, React zu lernen, wir haben 2016.

Oh, okay. Was ist React?

– Es handelt sich um eine supercoole Bibliothek, die von ein paar Leuten bei Facebook erstellt wurde. Sie bringt wirklich Kontrolle und Leistung in Ihre Anwendung, indem sie Ihnen ermöglicht, alle Ansichtsänderungen sehr einfach zu handhaben.

Das klingt gut. Kann ich React verwenden, um Daten vom Server anzuzeigen?

-Ja, aber zuerst müssen Sie React und React DOM als Bibliothek zu Ihrer Webseite hinzufügen.

Moment, warum zwei Bibliotheken?

-Eine ist also die eigentliche Bibliothek und die zweite dient zur Manipulation des DOM, das Sie jetzt in JSX beschreiben können.

Was ist JSX?

-JSX ist nur eine JavaScript-Syntaxerweiterung, die XML sehr ähnlich sieht. Es ist eine Art andere Art, das DOM zu beschreiben. Betrachten Sie es als besseres HTML.

Was ist falsch an HTML?

-Wir schreiben das Jahr 2016. Niemand codiert HTML mehr direkt.

Richtig. Wenn ich diese beiden Bibliotheken hinzufüge, kann ich dann React verwenden?

-Nicht ganz. Sie müssen Babel hinzufügen, und dann können Sie React verwenden.

Noch eine Bibliothek? Was ist Babel?

-Oh, Babel ist ein Transpiler, mit dem Sie bestimmte Versionen von JavaScript ansprechen können, während Sie in einer beliebigen Version von JavaScript programmieren. Sie MÜSSEN Babel nicht einbinden, um ReactJS zu verwenden, aber wenn Sie das nicht tun, müssen Sie ES5 verwenden, und seien wir ehrlich, wir haben 2016, Sie sollten in ES2016+ programmieren, wie der Rest der coolen Kids es tut.

ES5? ES2016+? Ich komme hier nicht mehr weiter. Was ist ES5 und ES2016+?

-ES5 steht für ECMAScript 5. Dies ist die Edition, auf die sich die meisten Leute konzentrieren, da sie heutzutage von den meisten Browsern implementiert wird.

ECMAScript?

-Ja, wissen Sie, der Skriptstandard, auf dem JavaScript basierte, wurde 1999 nach seiner Erstveröffentlichung 1995 verwendet, damals hieß JavaScript noch Livescript und lief nur im Netscape Navigator. Das war damals sehr chaotisch, aber zum Glück ist jetzt alles sehr klar und wir haben ungefähr 7 Editionen dieser Implementierung.

7 Editionen. Im Ernst. Und ES5 und ES2016+ sind es?

-Die fünfte und siebte Ausgabe.

Warte, was ist mit dem sechsten passiert?

-Sie meinen ES6? Ja, ich meine, jede Edition ist eine Obermenge der vorherigen. Wenn Sie also ES2016+ verwenden, nutzen Sie alle Funktionen der vorherigen Versionen.

Richtig. Und warum dann ES2016+ statt ES6 verwenden?

-Nun, Sie KÖNNTEN ES6 verwenden, aber um coole Funktionen wie async und await zu nutzen, müssen Sie ES2016+ verwenden. Andernfalls sind Sie auf ES6-Generatoren mit Coroutinen angewiesen, um asynchrone Aufrufe für einen ordnungsgemäßen Kontrollfluss zu blockieren.

Ich habe keine Ahnung, was Sie gerade gesagt haben, und all diese Namen sind verwirrend. Sehen Sie, ich lade nur eine Menge Daten von einem Server. Früher konnte ich einfach jQuery von einem CDN einbinden und die Daten einfach mit AJAX-Aufrufen abrufen. Warum kann ich das nicht einfach tun?

-Wir haben 2016, Mann, niemand verwendet mehr jQuery, es endet in einem Haufen Spaghetticode. Das weiß jeder.

Richtig. Meine Alternative besteht also darin, drei Bibliotheken zu laden, um Daten abzurufen und eine HTML-Tabelle anzuzeigen.

-Nun, Sie schließen diese drei Bibliotheken ein, bündeln sie aber mit einem Modul-Manager, um nur eine Datei zu laden.

Ich verstehe. Und was ist ein Modulmanager?

– Die Definition hängt von der Umgebung ab, aber im Web meinen wir normalerweise alles, was AMD- oder CommonJS-Module unterstützt.

Riiiiichtig. Und AMD und CommonJS sind…?

-Definitionen. Es gibt Möglichkeiten, zu beschreiben, wie mehrere JavaScript-Bibliotheken und -Klassen interagieren sollen. Sie wissen schon, Exporte und Anforderungen? Sie können mehrere JavaScript-Dateien schreiben, die die AMD- oder CommonJS-API definieren, und Sie können etwas wie Browserify verwenden, um sie zu bündeln.

OK, das macht Sinn … denke ich. Was ist Browserify?

-Es ist ein Tool, mit dem Sie in CommonJS beschriebene Abhängigkeiten in Dateien bündeln können, die im Browser ausgeführt werden können. Es wurde erstellt, weil die meisten Leute diese Abhängigkeiten im npm-Register veröffentlichen.

npm-Registrierung?

-Es ist ein sehr großes öffentliches Repository, in dem kluge Leute Code und Abhängigkeiten als Module ablegen.

Wie ein CDN?

-Nicht wirklich. Es ist eher eine zentrale Datenbank, in der jeder Bibliotheken veröffentlichen und herunterladen kann, sodass Sie sie lokal für die Entwicklung verwenden und sie dann bei Bedarf auf ein CDN hochladen können.

Oh, wie Bower!

-Ja, aber wir haben jetzt 2016 und niemand verwendet Bower mehr.

Oh, ich verstehe … also muss ich die Bibliotheken dann von npm herunterladen?

-Ja. Wenn Sie beispielsweise React verwenden möchten, laden Sie das React-Modul herunter und importieren es in Ihren Code. Sie können das für fast jede beliebte JavaScript-Bibliothek tun.

Oh, wie Angular!

-Angular ist so 2015. Aber ja. Angular wäre da, neben VueJS oder RxJS und anderen coolen 2016-Bibliotheken. Möchten Sie mehr darüber erfahren?

Bleiben wir bei React, ich lerne jetzt schon zu viele Dinge. Wenn ich also React verwenden muss, hole ich es von diesem npm und verwende dann dieses Browserify-Ding?

-Ja.

Es erscheint zu kompliziert, einfach eine Reihe von Abhängigkeiten zu greifen und sie miteinander zu verknüpfen.

-Ja, deshalb verwenden Sie einen Task-Manager wie Grunt, Gulp oder Broccoli, um die Ausführung von Browserify zu automatisieren. Sie können sogar Mimosa verwenden.

Grunzen? Schlucken? Brokkoli? Mimosa? Wovon zum Teufel reden wir jetzt?

-Task-Manager. Aber die sind nicht mehr cool. Wir haben sie etwa 2015 verwendet, damals noch Makefiles, aber jetzt verpacken wir alles mit Webpack.

Makefiles? Ich dachte, das wird hauptsächlich bei C- oder C++-Projekten verwendet.

-Ja, aber im Web machen wir die Dinge anscheinend gerne kompliziert und kehren dann zu den Grundlagen zurück. Das machen wir ungefähr jedes Jahr. Warten Sie nur ab, in ein oder zwei Jahren werden wir Assembly im Web einführen.

Seufz. Du hast etwas namens Webpack erwähnt?

-Es ist ein weiterer Modulmanager für den Browser und zugleich eine Art Task-Runner. Es ist wie eine bessere Version von Browserify.

Oh, ok. Warum ist es besser?

-Nun, vielleicht nicht besser, es ist nur eine subjektivere Vorstellung davon, wie Ihre Abhängigkeiten verknüpft werden sollten. Webpack ermöglicht Ihnen die Verwendung verschiedener Modulmanager, und nicht nur von CommonJS, also beispielsweise native ES6-unterstützte Module.

Ich bin von dieser ganzen CommonJS/ES6-Sache äußerst verwirrt.

-Das ist bei jedem der Fall, aber mit SystemJS sollte es Ihnen egal sein.

Herrgott, noch ein Nomen-JS. Ok, und was ist dieses SystemJS?

- Im Gegensatz zu Browserify und Webpack 1.x ist SystemJS ein dynamischer Modullader, der es Ihnen ermöglicht, mehrere Module in mehreren Dateien einzubinden, anstatt sie in einer großen Datei zu bündeln.

Moment, aber ich dachte, wir wollten unsere Bibliotheken in einer großen Datei erstellen und diese laden!

-Ja, aber da jetzt HTTP/2 kommt, sind mehrere HTTP-Anfragen eigentlich besser.

Moment, können wir nicht einfach die drei ursprünglichen Bibliotheken für React hinzufügen??

-Nicht wirklich. Ich meine, Sie könnten sie als externe Skripte von einem CDN hinzufügen, aber dann müssten Sie trotzdem Babel einbinden.

Seufz. Und das ist schlecht, oder?

-Ja, Sie würden den gesamten Babel-Kern einbinden, und das wäre für die Produktion nicht effizient. In der Produktion müssen Sie eine Reihe von Vorarbeiten durchführen, um Ihr Projekt fertig zu machen, die das Ritual zur Beschwörung Satans wie ein Rezept für gekochte Eier aussehen lassen. Sie müssen Assets minimieren, sie verunstalten, CSS über dem Falz einbinden, Skripte verschieben und –

Ich habe es verstanden, ich habe es verstanden. Wenn Sie die Bibliotheken also nicht direkt in ein CDN einbinden würden, wie würden Sie es dann tun?

-Ich würde es mit einer Kombination aus Webpack + SystemJS + Babel aus Typescript transpilieren.

Ich dachte, wir programmieren in JavaScript!

-Typescript IST JavaScript, oder besser gesagt, eine Obermenge von JavaScript, genauer gesagt JavaScript in der Version ES6. Wissen Sie noch, die sechste Version, über die wir vorhin gesprochen haben?

Ich dachte, ES2016+ wäre bereits eine Obermenge von ES6! WARUM brauchen wir jetzt dieses Ding namens Typescript?

-Oh, weil es uns ermöglicht, JavaScript als typisierte Sprache zu verwenden und Laufzeitfehler zu reduzieren. Wir schreiben das Jahr 2016, Sie sollten Ihrem JavaScript-Code einige Typen hinzufügen.

Und Typescript macht das offensichtlich.

-Flow ebenfalls, obwohl es nur die Eingabe überprüft, während Typescript eine Obermenge von JavaScript ist, die kompiliert werden muss.

Seufz… und Flow ist?

-Es handelt sich um einen statischen Typprüfer, der von ein paar Leuten bei Facebook entwickelt wurde. Sie haben ihn in OCaml codiert, weil funktionale Programmierung großartig ist.

OCaml? Funktionale Programmierung?

-Das ist das, was die coolen Kids heutzutage benutzen, Mann, weißt du, 2016? Funktionale Programmierung? Höherwertige Funktionen? Currying? Reine Funktionen?

Ich habe keine Ahnung, was Sie gerade gesagt haben.

- Am Anfang weiß das niemand. Sie müssen nur wissen, dass funktionale Programmierung besser ist als OOP und dass wir das im Jahr 2016 verwenden sollten.

Moment, ich habe OOP im College gelernt und dachte, das wäre gut?

-Das war auch bei Java so, bevor es von Oracle gekauft wurde. Ich meine, OOP war damals gut und hat auch heute noch seine Verwendung, aber jetzt wird jedem klar, dass das Ändern von Zuständen dem Treten von Babys gleichkommt, also wechseln jetzt alle zu unveränderlichen Objekten und funktionaler Programmierung. Haskell-Leute haben es jahrelang genannt, - und von den Elm-Leuten will ich gar nicht erst anfangen - aber zum Glück haben wir im Web jetzt Bibliotheken wie Ramda, die es uns ermöglichen, funktionale Programmierung in reinem JavaScript zu verwenden.

Willst du nur so mit Namen um dich werfen? Was zum Teufel ist Ramnda?

-Nein. Ramda. Wie Lambda. Wissen Sie, die Bibliothek von David Chambers?

David wer?

-David Chambers. Cooler Typ. Spielt ein gemeines Coup-Spiel. Einer der Mitwirkenden bei Ramda. Sie sollten sich auch Erik Meijer ansehen, wenn Sie ernsthaft funktionale Programmierung lernen möchten.

Und Erik Meijer ist…?

-Auch ein Typ für funktionale Programmierung. Toller Typ. Er hat eine Menge Präsentationen, in denen er Agile schlechtmacht, während er dieses komisch gefärbte Hemd trägt. Sie sollten sich auch einige Sachen von Tj, Jash Kenas, Sindre Sorhus, Paul Irish und Addy Osmani ansehen.

Ok. Hier werde ich Sie unterbrechen. Das ist alles schön und gut, aber ich denke, das ist alles so kompliziert und unnötig, wenn es nur darum geht, Daten abzurufen und anzuzeigen. Ich bin mir ziemlich sicher, dass ich diese Leute nicht kennen oder all diese Dinge lernen muss, um eine Tabelle mit dynamischen Daten zu erstellen. Kommen wir zurück zu React. Wie kann ich mit React die Daten vom Server abrufen?

- Also, mit React holen Sie die Daten eigentlich nicht ab, Sie zeigen die Daten nur mit React an.

Oh, verdammt. Also, was verwenden Sie, um die Daten abzurufen?

-Mit Fetch holen Sie die Daten vom Server ab.

Wie bitte? Du nutzt Fetch, um die Daten abzurufen? Wer diese Dinge benennt, braucht einen Thesaurus.

-Ich weiß, richtig? Fetch ist der Name der nativen Implementierung zum Ausführen von XMLHttpRequests an einen Server.

Ach ja, also AJAX.

-AJAX ist nur die Verwendung von XMLHttpRequests. Aber klar. Fetch ermöglicht Ihnen AJAX basierend auf Promises, die Sie dann auflösen können, um die Callback-Hölle zu vermeiden.

Rückrufhölle?

-Ja. Jedes Mal, wenn Sie eine asynchrone Anfrage an den Server stellen, müssen Sie auf dessen Antwort warten. Das führt dazu, dass Sie eine Funktion innerhalb einer Funktion hinzufügen müssen. Das nennt man Callback-Pyramide aus der Hölle.

Oh, ok. Und diese Sache mit dem Versprechen löst das Problem?

-In der Tat. Indem Sie Ihre Rückrufe durch Versprechen manipulieren, können Sie leichter verständlichen Code schreiben, ihn simulieren und testen sowie gleichzeitige Anfragen auf einmal ausführen und warten, bis alle geladen sind.

Und das geht mit Fetch?

-Ja, aber nur, wenn Ihr Benutzer einen Evergreen-Browser verwendet, andernfalls müssen Sie einen Fetch-Polyfill einbinden oder Request, Bluebird oder Axios verwenden.

Wie viele Bibliotheken muss ich um Himmels Willen kennen? Wie viele gibt es davon?

-Es ist JavaScript. Es muss Tausende von Bibliotheken geben, die alle dasselbe tun. Wir kennen Bibliotheken, tatsächlich haben wir die besten Bibliotheken. Unsere Bibliotheken sind riesig und manchmal fügen wir Bilder von Guy Fieri darin ein.

Haben Sie gerade Guy Fieri gesagt? Bringen wir es hinter uns. Was machen diese Bluebird-, Request- und Axios-Bibliotheken?

-Sie sind Bibliotheken zum Ausführen von XMLHttpRequests, die Versprechen zurückgeben.

Hat die AJAX-Methode von jQuery nicht auch begonnen, Promises zurückzugeben?

- Wir verwenden das Wort mit „J“ im Jahr 2016 nicht mehr. Verwenden Sie einfach Fetch und füllen Sie es mit Polyfill aus, wenn es sich nicht in einem Browser befindet, oder verwenden Sie stattdessen Bluebird, Request oder Axios. Verwalten Sie dann das Promise mit „await“ innerhalb einer asynchronen Funktion und schon haben Sie einen ordnungsgemäßen Kontrollfluss.

Sie erwähnen „Warten“, aber ich habe keine Ahnung, was es ist.

-Await ermöglicht Ihnen, einen asynchronen Aufruf zu blockieren, sodass Sie besser kontrollieren können, wann die Daten abgerufen werden, und die Lesbarkeit des Codes insgesamt verbessern. Es ist großartig, Sie müssen nur sicherstellen, dass Sie die Stage-3-Vorgabe in Babel hinzufügen oder die Plugins „Syntax-Async-Functions“ und „Transform-Async-to-Generator“ verwenden.

Das ist verrückt.

-Nein, verrückt ist die Tatsache, dass Sie Typescript-Code vorkompilieren und ihn dann mit Babel transpilieren müssen, um await zu verwenden.

Was? Es ist nicht in Typescript enthalten?

– In der nächsten Version ist dies der Fall, ab Version 1.7 zielt es jedoch nur auf ES6 ab. Wenn Sie also „await“ im Browser verwenden möchten, müssen Sie zuerst Ihren Typescript-Code für ES6 kompilieren und diesen Mist dann mit Babel auf ES5 hochrüsten.

An diesem Punkt weiß ich nicht, was ich sagen soll.

-Sehen Sie, es ist ganz einfach. Coden Sie alles in Typescript. Alle Module, die Fetch verwenden, kompilieren sie für ES6, transpilieren sie mit Babel auf einer Stage-3-Vorgabe und laden sie mit SystemJS. Wenn Sie Fetch nicht haben, füllen Sie es mit Polyfills auf oder verwenden Sie Bluebird, Request oder Axios und behandeln Sie alle Ihre Promises mit await.

Wir haben sehr unterschiedliche Definitionen von einfach. Mit diesem Ritual habe ich also endlich die Daten abgerufen und kann sie jetzt mit React anzeigen, richtig?

-Wird Ihre Anwendung Statusänderungen verarbeiten?

Ähm, ich glaube nicht. Ich muss nur die Daten anzeigen.

-Oh, Gott sei Dank. Sonst müsste ich Ihnen Flux und Implementierungen wie Flummox, Alt, Fluxible erklären. Obwohl Sie ehrlich gesagt Redux verwenden sollten.

Ich werde diese Namen einfach überfliegen. Noch einmal, ich muss nur Daten anzeigen.

-Oh, wenn Sie nur die Daten anzeigen, brauchten Sie React von Anfang an nicht. Eine Template-Engine wäre für Sie ausreichend gewesen.

Willst du mich verarschen? Findest du das lustig? Behandelst du so deine Lieben?

-Ich habe nur erklärt, was Sie verwenden könnten.

Hör auf. Hör einfach auf.

- Ich meine, selbst wenn ich nur eine Template-Engine verwende, würde ich an deiner Stelle trotzdem eine Kombination aus Typescript + SystemJS + Babel verwenden.

Ich muss Daten auf einer Seite anzeigen und nicht Sub Zeros originalen MK-Fatality ausführen. Sagen Sie mir einfach, welche Template-Engine ich verwenden soll, und ich mache von dort weiter.

-Da gibt es eine Menge, welche kennen Sie?

Ugh, ich kann mich nicht an den Namen erinnern. Es ist lange her.

-jVorlagen? jZitat? PURE?

Ähm, das sagt mir nichts. Noch einer?

-Transparenz? JSRender? MarkupJS? KnockoutJS? Das hatte eine bidirektionale Bindung.

Noch einer?

-PlatesJS? jQuery-tmpl? Lenker? Manche Leute verwenden es immer noch.

Vielleicht. Gibt es ähnliche wie das letzte?

- Schnurrbart, Unterstrich? Ehrlich gesagt, ich glaube, mittlerweile hat sogar Lodash einen, aber die sind irgendwie 2014.

Ähm... vielleicht war es neuer.

-Jade?

NEIN.

-DotJS?

NEIN.

-Nunjays? usw.?

NEIN.

-Mah, die Coffeescript-Syntax mag sowieso niemand. Jade?

Nein, das hast du schon gesagt: Jade.

-Ich meinte Mops. Ich meinte Jade. Ich meine, Jade ist jetzt Mops.

Seufz. Nein. Ich kann mich nicht erinnern. Welches würdest du verwenden?

– Wahrscheinlich nur native ES6-Vorlagenstrings.

Lass mich raten. Und das erfordert ES6.

-Richtig.

Je nachdem, welchen Browser ich verwende, wird Babel benötigt.

-Richtig.

Wenn ich es einbinden möchte, ohne die gesamte Kernbibliothek hinzuzufügen, muss ich es als Modul von npm laden.

-Richtig.

Dafür ist Browserify oder Wepback oder höchstwahrscheinlich dieses andere Ding namens SystemJS erforderlich.

-Richtig.

Sofern es sich nicht um Webpack handelt, sollte dies idealerweise von einem Task Runner verwaltet werden.

-Richtig.

Da ich aber funktionale Programmierung und typisierte Sprachen verwenden sollte, muss ich zuerst Typescript vorkompilieren oder dieses Flow-Ding hinzufügen.

-Richtig.

Und dann sende ich das an Babel, wenn ich await verwenden möchte.

-Richtig.

So kann ich dann Fetch, Promises und Control Flow und all diese Magie nutzen.

- Vergessen Sie nur nicht, Fetch mit Polyfill zu versehen, falls es nicht unterstützt wird, Safari kann damit immer noch nicht umgehen.

Weißt du was. Ich glaube, wir sind hier fertig. Eigentlich glaube ich, ich bin fertig. Ich bin fertig mit dem Web, ich bin komplett fertig mit JavaScript.

-Das ist in Ordnung, in ein paar Jahren werden wir alle in Elm oder WebAssembly programmieren.

Ich gehe einfach zurück zum Backend. Ich kann mit diesen vielen Änderungen und Versionen und Editionen und Compilern und Transpilern einfach nicht umgehen. Die JavaScript-Community ist verrückt, wenn sie glaubt, dass irgendjemand damit Schritt halten kann.

-Ich verstehe dich. Dann solltest du es mal bei der Python-Community versuchen.

Warum?

- Schon mal von Python 3 gehört?

Update: Danke für den Hinweis auf Tippfehler und Fehler, ich werde den Artikel wie angegeben aktualisieren. Diskussion in HackerNews und Reddit .