JavaScript-Entwickler-Toolbox - Sehr praktisch

Seit HTML5 populär wurde, hat die gesamte Web-Plattform erhebliche Fortschritte gemacht, und die Leute haben begonnen, JavaScript als eine Sprache zu betrachten, die komplexe Anwendungen erstellen kann. Viele neue APIs sind entstanden, und es sind auch zahlreiche Artikel darüber erschienen, wie Browser diese Technologien einsetzen.

Als Skriptsprache wurde JavaScript ursprünglich entwickelt, um die Darstellungsmöglichkeiten von Webseiten zu verbessern, aber heutzutage wird JavaScript fast überall verwendet, wo man es sich vorstellen kann. Da sich die technischen Möglichkeiten der gesamten Branche ständig verbessern, kann JavaScript heute auf der Serverseite ausgeführt und auch in Code für native mobile Anwendungen kompiliert werden. Heutige JavaScript-Entwickler sind Teil eines reichhaltigen Ökosystems und können frei aus Hunderten von IDEs, Tools und Frameworks wählen. Weil es so viele Optionen und Ressourcen gibt, wissen einige Entwickler möglicherweise nicht, wo sie mit dem Lernen beginnen sollen. Ich freue mich, die Situation moderner JavaScript-Entwickler zu erörtern und zu umreißen. Zuerst werde ich kurz die Geschichte von JavaScript vorstellen und dann die beliebtesten Frameworks, Tools und IDEs behandeln.

Ein kurzer Rückblick auf die Geschichte

Beginnen wir eine kurze Reise. Damals im Jahr 1995, als Netscape Navigator und Internet Explorer 1.0 die einzigen Browser-Optionen waren. Websites waren voll von nervigem blinkendem Text und zu vielen GIF-Bildern. Das Laden einer Seite voller reichhaltiger Inhalte über eine Einwählverbindung konnte bis zu zwei volle Minuten dauern. Dann erschien eine Websprache, die es diesen uralten Websites ermöglichte, clientseitigen Code auszuführen. Dieses Jahr war das Jahr, in dem JavaScript geboren wurde.

Diese vor 20 Jahren erstellten Websites nutzten JavaScript kaum, und natürlich schöpften sie das Potenzial der Sprache nicht voll aus. Gelegentlich teilte ein Pop-up-Dialog einige Informationen mit, oder Nachrichten wurden als Lauftext in einem Kasten angezeigt, oder ein Cookie speicherte Ihren Benutzernamen, sodass Ihr Name direkt angezeigt wurde, wenn Sie nach ein paar Monaten zur Website zurückkehrten. Natürlich gab es damals keine Stellen, bei denen JavaScript als primäre Entwicklungssprache verwendet wurde, und wenn man bei der Arbeit tatsächlich etwas JavaScript schreiben konnte, war das schon ein Glücksfall. Kurz gesagt, die Verwendung von JavaScript auf Websites war damals nur ein paar Tricks im DOM.

Heutzutage sieht man JavaScript im Grunde genommen fast überall. VonBootstrapbis ReactJS, Angular, dem allgegenwärtigen jQuery und sogar Node.js, das auf der Serverseite läuft, ist JavaScript zu einer der wichtigsten und beliebtesten Websprachen geworden.

Frameworks

Einer der größten Bereiche, in denen sich JavaScript seit seiner Entstehung verändert hat, ist die Art und Weise, wie es verwendet wird. Die Zeiten, in denen man die unhandliche Methode document.GetElementById aufrief und schwere XmlHttpRequest-Objekte erstellte, sind vorbei. Stattdessen abstrahieren verschiedene Hilfsbibliotheken diese grundlegenden Funktionen und machen JavaScript für Entwickler einfacher zu verwenden. Dies ist einer der Hauptgründe, warum JavaScript heute überall zu sehen ist.

jQuery

jQuery wurde 2006 von John Resig veröffentlicht und bietet eine reichhaltige Sammlung von Werkzeugen, die verschiedene obskure und mysteriöse JavaScript-Befehle und -Methoden abstrahieren und vereinfachen. Es gibt keine einfachere Möglichkeit, dieses Werkzeug zu demonstrieren, als mit Codebeispielen.

Erstellen einer AJAX-Anfrage mit reinem JavaScript:

function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               alert("success");
           }
           else if(xmlhttp.status == 400) {
              alert("error 400")
           }
           else {
               alert("something broke")
           }
        }
    }

    xmlhttp.open("GET", "test.html", true);
    xmlhttp.send();
}

Quelle: Stack Overflow

Und das Erstellen einer AJAX-Anfrage mit jQuery:

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

jQuery machte komplexe JavaScript-Funktionen bequem nutzbar, und DOM-Manipulation wurde zum Kinderspiel. Infolgedessen wurde jQuery eines der frühesten weit verbreiteten JavaScript-Frameworks, und seine Idee, JavaScript zu abstrahieren, wurde zur Grundlage, auf der verschiedene andere Frameworks aufgebaut wurden.

AngularJS

AngularJS, oft auch "Augular" genannt, feierte 2009 sein Debüt. Es ist ein von Google entwickeltes Framework mit dem Ziel, die Erstellung von Single-Page-Anwendungen (SPAs) zu vereinfachen. Ähnlich wie bei jQuery besteht sein Ziel auch darin, komplexe Operationen in hochgradig wiederverwendbare Methoden zu abstrahieren. Es bietet eine Model-View-Controller-(MVC)-Architektur für JavaScript.

ReactJS

ReactJS, oft auch "React" genannt, ist ein Neuling, der gerade erst ins Spiel gekommen ist. Es wurde von Facebook entwickelt und erstmals 2013 veröffentlicht. Facebook ist der Ansicht, dass React als Alternative zu Angular für die Behandlung von SPA-Problemen dienen kann, wenn Sie also denken, dass Angular und React Konkurrenten sind, haben Sie recht. Der größte Unterschied zu Angular besteht jedoch darin, dass React eine effizientere, leistungsfähigere und schnellere Bibliothek ist. Die folgende Abbildung zeigt die Zeit, die benötigt wird, um eine Liste mit 1000 Elementen im DOM mit React, Angular, Knockout (einer anderen Bibliothek, die in diesem Artikel nicht behandelt wird) und reinem JavaScript zu rendern:

Quelle: The Dapper Developer

Wenn Ihre Anwendung großen Wert auf Leistung legt, dann ist React die richtige Wahl.

JavaScript-Entwicklungsumgebung

Für eine effiziente Entwicklung ist die Verwendung einer IDE sehr wichtig. IDE steht für Integrated Development Environment, eine Anwendung, die Entwicklern eine Reihe von Werkzeugen bereitstellt. Der wichtigste Teil eines solchen Werkzeugs ist normalerweise ein funktionsreicher Texteditor, der Benutzern üblicherweise Syntaxhervorhebung, Autovervollständigung und Tastaturkürzel bietet, um verschiedene mühsame manuelle Vorgänge zu beschleunigen.

Sublime Text

Sublime Text ist eigentlich keine IDE, sondern ein leichtgewichtiger, extrem schneller Texteditor für die Programmierung, der Syntaxhervorhebung und intuitive Tastaturkürzel bietet. Es ist plattformübergreifend und damit eine ideale Wahl für Entwickler, die einen Mac in einer PC-Umgebung nutzen möchten (oder umgekehrt). Fast jeder Teil von Sublime Text kann angepasst werden, und es bietet auch eine Vielzahl von Plug-ins, die IDE-ähnliche Funktionen hinzufügen, wie Git-Integration und Code-Linting. Es ist eine großartige Wahl für JavaScript-Enthusiasten und Anfänger-Entwickler. Zum Zeitpunkt der Veröffentlichung dieses Artikels kostet eine Sublime Text-Lizenz 70 $.

Quelle: Sublime Text

WebStorm

WebStorm ist eine intelligente IDE, die vom JetBrains-Team entwickelt wurde und sich hauptsächlich auf HTML-, CSS- und JavaScript-Entwicklung konzentriert. Sie erhebt nur eine symbolische Lizenzgebühr (zum Zeitpunkt der Veröffentlichung dieses Artikels 49 $) und hat unter erfahrenen JavaScript-Experten breite Anerkennung erlangt und gilt bereits als De-facto-Standard, und das zu Recht, denn die integrierten Codevervollständigungs- und Inspektionswerkzeuge sind praktisch einzigartig. WebStorm bietet außerdem einen umfangreichen JavaScript-Debugger und integriert verschiedene beliebte Unit-Testing-Frameworks wie den Karma-Testrunner und JSDriver und enthält sogar Mocha für Node.js.

Eine der besten Funktionen von WebStorm ist die Live-Edit-Funktion. Solange ein bestimmtes Plug-in sowohl in Chrome als auch in WebStorm installiert ist, können Entwickler die Ergebnisse direkt im Browser sehen, während sie den Code ändern. Entwickler können Live Edit auch so konfigurieren, dass Änderungen im Browserfenster hervorgehoben werden, was das Debuggen und die Programmierproduktivität erheblich verbessert.

Insgesamt kann die WebStorm-IDE eine großartige Wahl sein, wenn JavaScript Ihr Vollzeitjob ist.

Quelle: JetBrains

Klammern

Brackets ist eine kostenlose Open-Source-IDE, die sich auf visuelle Tools konzentriert. Brackets bietet eine Live-Edit-Funktion ähnlich wie WebStorm, mit der du die Ergebnisse von Codeänderungen direkt im Browserfenster sehen kannst. Es unterstützt auch Inline-Bearbeitung, sodass du programmieren kannst, während du die Ergebnisse direkt siehst, ohne zwischen verschiedenen Anwendungen wechseln oder Pop-up-Fenster verwenden zu müssen. Eine der interessantesten Funktionen in Brackets heißt Extract; sie kann Photoshop-PSD-Dateien analysieren, um Informationen wie Schriftarten, Farben und Größen zu erhalten. Aufgrund dieser Funktion eignet sich Brackets sehr gut für JavaScript-Entwickler, die auch Designarbeit leisten.

(Zum Vergrößern auf das Bild klicken)

Quelle: Brackets

Atom

Atom ist ein von GitHub veröffentlichter, kostenloser Open-Source-Rich-Text-Editor, mit dem man sehr einfach loslegen kann. Nach der Installation kann er direkt ausgeführt werden, ohne dass Konfigurationsdateien geändert werden müssen, und er „funktioniert einfach“. Das Interessanteste an Atom ist, dass jeder Aspekt davon angepasst werden kann (GitHub nennt es „hackbar“). Er basiert auf einem Web-Kern, sodass Benutzer sein Erscheinungsbild durch Schreiben von Standard-HTML, CSS und JavaScript anpassen können. Möchtest du Atom einen anderen Hintergrund und eine andere Textschriftart geben? Ändere einfach das CSS. Oder du kannst verschiedene Themes herunterladen und anwenden, die für Atom erstellt wurden. Diese Flexibilität ermöglicht es Atom, sich so zu präsentieren, wie du es möchtest. Für unerfahrene JavaScript-Entwickler und Nutzer, die Anpassung lieben, ist Atom ein hervorragendes Tool.

(Zum Vergrößern auf das Bild klicken)

Quelle: Atom

Build- und Automatisierungstools

Moderne JavaScript-Projekte werden tendenziell immer komplexer, und auch die Anzahl der sich ändernden Teile wächst. Das soll nicht heißen, dass die Sprache oder die entsprechenden Tools ineffizient sind, sondern es ist vielmehr eine direkte Folge des Reichtums, der coolen Erlebnisse und der Komplexität der derzeit erstellten Webanwendungen. Bei der Arbeit an großen Projekten müssen Sie oft viele repetitive Aufgaben erledigen, sei es, dass Sie Code einchecken oder den Code für die Produktion erstellen. Zu diesen Aufgaben können Bundling, Minifizierung, das Kompilieren von LESS- oder SASS-CSS-Dateien oder sogar das Ausführen von Tests gehören. Diese Aufgaben manuell zu erledigen, ist nicht nur frustrierend, sondern auch ineffizient. Ein besserer Ansatz ist, diese Aufgaben durch ein Build-Tool zu automatisieren, das sie unterstützt.

Bundling und Minifizierung

Der größte Teil des JavaScript- und CSS-Codes, den Sie schreiben, wird auf mehreren Webseiten gemeinsam genutzt. Daher werden Sie diesen Inhalt wahrscheinlich in separate .js- und .css-Dateien legen und dann in Webseiten auf diese Dateien verweisen. Folglich muss der Browser des Benutzers, um Ihre Webseite vollständig anzuzeigen, eine separate HTTP-Anfrage senden, um jede dieser Dateien abzurufen (oder zumindest zu überprüfen, ob sich diese Dateien geändert haben).

HTTP-Anfragen sind teuer. Zusätzlich zur Größe der Anfrage selbst zahlen Sie auch für Netzwerklatenz, HTTP-Header, Cookies und so weiter. Der Zweck von Bundling- und Minifizierungstools ist es, die Auswirkungen dieser Anfragen zu verringern oder sogar vollständig zu eliminieren.

Bundling

Das Einfachste, was Entwickler tun können, um die Leistung von Webcode zu verbessern, ist, den Code zu bündeln. Beim Bundling werden mehrere JavaScript- oder CSS-Dateien zu einer einzigen JavaScript- oder CSS-Datei zusammengeführt. Es fühlt sich an, als würde man mehrere einzelne Panoramafotos zu einem einzigen durchgehenden Foto zusammenfügen. Durch das Bundling von JavaScript- und CSS-Dateien können wir einen großen Teil des HTTP-Anfrage-Overheads eliminieren.

Minifizierung

Eine weitere Möglichkeit für JavaScript-Entwickler, die Leistung zu verbessern, besteht darin, den gerade gebündelten Code zu minifizieren. Der Minifizierungsprozess komprimiert JavaScript- und CSS-Code in die kleinstmögliche Form, wobei die Funktionalität unverändert bleibt. Bei JavaScript bedeutet dies, Variablen in bedeutungslose Ein-Zeichen-Namen umzubenennen und alle Leerzeichen sowie Formatierungszeichen zu entfernen. Bei CSS, da das Seiten-Styling von den Namen der Variablen abhängt, werden in der Regel nur Formatierung und Leerzeichen entfernt. Die Minifizierung kann die Netzwerkleistung erheblich verbessern, da sie die Anzahl der Bytes in jeder HTTP-Antwort reduziert.

Nicht minifizierter AJAX-JavaScript-Code (identisch mit dem oben gezeigten Code):

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

Derselbe Code nach der Minifizierung:

$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});

Bitte beachten Sie, dass ich die minifizierte Ausgabe nur zur besseren Lesbarkeit in diesem Artikel auf zwei Zeilen aufgeteilt habe; tatsächlich besteht minifizierte Ausgabe normalerweise aus einer einzigen Zeile.

Wann gebündelt und minifiziert werden sollte

Im Allgemeinen werden die Schritte Bündelung und Minifizierung nur in der Produktion durchgeführt. Dies geschieht, damit Sie den ursprünglichen Quellcode, der Formatierung und Zeilennummern enthält, in Ihrer lokalen Umgebung oder Entwicklungsumgebung debuggen können. Das Debuggen von minifiziertem Code wie dem oben gezeigten ist sehr schwierig, weil der gesamte Code in eine einzige Zeile gequetscht wird. Außerdem wird minifizierter Code völlig unlesbar, und Sie werden ihn als nutzlos und extrem frustrierend empfinden, wenn Sie versuchen, ihn zu debuggen.

Source-Map-Dateien

Manchmal können bestimmte Fehler im Code nur in der Produktion reproduziert werden. Infolgedessen wird minifizierter Code zum Problem, wenn Sie bestimmte Probleme debuggen müssen. Glücklicherweise unterstützt JavaScript Source-Map-Dateien, die eine Zuordnung zwischen minifiziertem Code und dem ursprünglichen Quellcode herstellen können. Diese Source-Map-Dateien werden während der Minifizierungsphase von einigen der unten genannten Build-Tools generiert. Ihr JavaScript-Debugger kann dann diese Map-Dateien verwenden, um Ihnen sauberen, lesbaren Code zum Debuggen bereitzustellen. Sie sollten die Map-Dateien so weit wie möglich zusammen mit dem tatsächlichen Code veröffentlichen, damit Sie den Code debuggen können, wenn etwas schiefgeht.

Code-Linting

Linting-Tools überprüfen Ihren Code anhand vordefinierter Formatierungsregeln auf häufige Fehler und Probleme. Die von diesen Tools gemeldeten Fehler ähneln normalerweise den folgenden: Tabulatoreinzug statt Leerzeichen verwenden, Semikolons am Zeilenende weglassen oder geschweifte Klammern ohne Verwendung von if-, for- oder while-Anweisungen setzen. Die meisten IDEs enthalten Linting-Tools, und einige andere IDEs ermöglichen es Benutzern, Linting-Plugins selbst zu installieren.

Die beiden beliebtesten JavaScript-Linting-Tools sind JSHint und JSLint. JSLint ist ein von Doug Crockford entwickeltes Linting-Framework, während JSHint von Community-Mitgliedern von JSLint abgezweigt wurde. Sie unterscheiden sich nur in einigen ihrer jeweiligen Codeformatierungsstandards. Meine Empfehlung ist, beide auszuprobieren und dann dasjenige auszuwählen, das am besten zu Ihrem Codierungsstil passt.

Aufgabenautomatisierung: Grunt

Trotz seines Namens ist Grunt (was wörtlich „schnarchen“ bedeutet) keineswegs ein grobes Werkzeug; es ist ein robustes Kommandozeilen-Build-Tool, das eine Vielzahl benutzerdefinierter Aufgaben ausführen kann. Durch die Einrichtung einer einfachen Konfigurationsdatei können Sie Grunt alle möglichen Arbeiten erledigen lassen, z. B. das Kompilieren von LESS- oder SASS-Dateien, das Bündeln und Minimieren aller JavaScript- und CSS-Dateien in einem bestimmten Ordner oder sogar das Ausführen eines Linting-Tools oder Test-Frameworks. Sie können Grunt auch so konfigurieren, dass es als Git-Hook ausgeführt wird und Ihren Code automatisch minimiert und bündelt, wenn Sie in Ihr Quellcodeverwaltungs-Repository einchecken.

Grunt unterstützt benannte Targets, sodass Sie unterschiedliche Befehle für unterschiedliche Umgebungen festlegen können. Beispielsweise können Sie 'dev' und 'prod' als Targets festlegen. Dies ist sehr nützlich in Szenarien wie dem Bündeln und Minimieren von Code in der Produktion, während dieser Schritt in der Entwicklungsumgebung übersprungen wird, um das Debuggen zu erleichtern.

Ein sehr nützliches Feature in Grunt heißt 'grunt watch', mit dem Änderungen an Dateien in einem Verzeichnis oder an einer Reihe von Dateien überwacht werden können. Dieses Feature kann in IDEs wie WebStorm und Sublime Text integriert werden. Durch die Verwendung des Watch-Features können Sie Ereignisse basierend auf Dateiänderungen auslösen. Das Kompilieren von LESS oder SASS ist eine praktische Anwendung dieses Features: Sie können Grunt so einrichten, dass es Ihre LESS- oder SASS-Dateien überwacht und sie sofort kompiliert, wenn sie sich ändern, und die kompilierten Dateien können dann direkt in der Entwicklungsumgebung verwendet werden. Sie können Grunt auch überwachen lassen und nach jeder Dateiänderung automatisch ein Linting-Tool ausführen. Aufgaben in Echtzeit durch Grunt watch auszuführen ist eine hervorragende Möglichkeit, Ihre Produktivität zu steigern.

Task-Automatisierung: Gulp

Grunt und Gulp sind beides Werkzeuge zur Lösung von Problemen bei der Build-Automatisierung, und man kann sagen, dass sie direkte Konkurrenten sind. Der Hauptunterschied zwischen ihnen besteht darin, dass Grunt sich stärker auf Konfiguration konzentriert, während Gulp sich stärker auf Code konzentriert. In einer Gruntfile konfiguriert man Build-Aufgaben über deklaratives JSON, während man in einer Gulpfile dieselbe Funktionalität durch das Schreiben von JavaScript-Funktionen erreicht.

Die folgende Grunt-Konfigurationsdatei kompiliert SASS-Dateien in CSS-Dateien, wenn sich die SASS-Dateien ändern:

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: "app/styles",
        src: "**/*.scss",
        dest: "../.tmp/styles",
        expand: true,
        ext: ".css"
      }]
    }
  },
  autoprefixer: {
    options: ["last 1 version"],
    dist: {
      files: [{
        expand: true,
        cwd: ".tmp/styles",
        src: "{,*/}*.css",
        dest: "dist/styles"
      }]
    }
  },
  watch: {
    styles: {
      files: ["app/styles/{,*/}*.scss"],
      tasks: ["sass:dist", "autoprefixer:dist"]
    }
  }
});
grunt.registerTask("default", ["styles", "watch"]);

Quelle: Grunt vs. Gulp – Jenseits der Zahlen

Die folgende Gulp-Konfigurationsdatei kompiliert ebenso SASS-Dateien in CSS-Dateien, wenn sich die SASS-Dateien ändern:

gulp.task("sass", function () {
  gulp.src("app/styles/**/*.scss")
    .pipe(sass())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
  gulp.run("sass");
  gulp.watch("app/styles/**/*.scss", function() {
    gulp.run("sass");
  });
});

Quelle: Grunt vs. Gulp – Jenseits der Zahlen

Ich schlage vor, du kannst frei wählen, welches dir gefällt. Diese beiden Werkzeuge werden im Allgemeinen über den Paketmanagernpmvon Node.js heruntergeladen.

Zusammenfassung

JavaScript hat seit seiner Entstehung in den frühen Tagen des Internets enorme Verbesserungen erfahren. Heute ist es zu einer herausragenden und wichtigen Komponente interaktiver Webanwendungen geworden.

Entwickler haben ebenfalls enorme Veränderungen von 1995 bis heute erlebt. Heutige Entwickler sind eher bereit, umfangreiche und robuste Frameworks, Werkzeuge und IDEs zu verwenden, um Arbeitseffizienz und Produktivität zu verbessern.

Die Erstellung deiner ersten modernen JavaScript-Anwendung ist vielleicht einfacher, als du denkst! Wähle einfach eine IDE (für Anfänger empfehle ichAtom), dann installierenpmundgrunt. Wenn du später irgendwo nicht weiterkommst,Stack Overflowist eine sehr gute Ressource. Mit nur ein wenig Zeit, die du mit dem Erlernen der Grundlagen verbringst, wirst du schnell mit der Entwicklung beginnen und schließlich deine erste moderne JavaScript-Anwendung veröffentlichen können.

Ressourcen

Tutorials:

JavaScript-Tutorial

Frameworks:

IDE：

Linting-Tools:

Build- und Automatisierungstools

Nützliche Ressourcen

Stack Overflow

Quelle: http://www.infoq.com/cn/articles/modern-javascript-toolbox