Maven-Benutzer beginnen mit der Paketverwaltung in Javascript

Ich wollte mit Javascript und AngularJS anfangen, einem Framework zur Erstellung von Frontends für Anwendungen - z.B. menschliche Benutzeroberflächen. Grund: Software frisst die Welt auf, aber Javascript frisst alle Software auf. Ich mag den chaotischen Javascript-Ansatz nicht, bei dem man js-Dateien herunterlädt und manuell in seinem Projektverzeichnis speichert, oder noch schlimmer, Schnipsel kopiert und einfügt. Ich bin es gewohnt, mit Java zu programmieren, Maven zur Verwaltung meiner Java-Abhängigkeiten zu verwenden und brew (Mac) oder apt-get (Ubuntu) zur Verwaltung der plattformspezifischen Abhängigkeiten einzusetzen. In diesem Beitrag schreibe ich meine Erfahrungen mit dem Einstieg in die Javascript-Entwicklung und der praktischen Verwendung von Paketmanagern auf.

Paketverwaltung in Javascript

AngularJS sowie viele andere Javascript-Frameworks, darunter so bekannte wie jquery, können über einen Paketmanager, bower, installiert werden. Bower ist ein einfacher und leichtgewichtiger Paketmanager für das Web . Die erste Herausforderung, die ich hatte, war, wie installiere ich bower? Auf der Website von bower wird npm erwähnt, ein Paketmanager, der mit NodeJS kombiniert wird. NodeJS ist eine Javascript-Engine, die gleiche Engine, die auch in Chrome verwendet wird. npm ist der Paketmanager, der mit ihr installiert wird. Die Funktionen von npm und bower überschneiden sich, sind aber unterschiedlich genug, um beide zu verwenden: npm dient in erster Linie der Installation von serverseitigen Javascript-Komponenten, die mit NodeJS verwendet werden sollen. Bower dient der Installation von clientseitigen Javascript-Komponenten, die in einem Webbrowser verwendet werden (weitere Informationen bei Stackoverflow).

Zunächst die plattformspezifische Paketverwaltung

Wie installiere ich dann node? Natürlich möchte ich einen Paketmanager verwenden, aber da Node pro Plattform kompiliert wird (es kann nicht durchgängig Schildkröten sein), müssen wir den Paketmanager pro Plattform verwenden. Wenn Sie Linux verwenden, sind Sie wahrscheinlich besser mit Yum (Redhat, CentOS) oder apt-get (Debian, Ubuntu) vertraut. Tippen: [sourcecode language="bash"] sudo yum install node [/sourcecode] oder [sourcecode language="bash"] sudo apt-get install node [/sourcecode] reicht aus, um node zu installieren. Hinweis: Ich habe jedem Befehl sudo hinzugefügt, weil Sie für die Installation der Anwendung Root-/Admin-Rechte benötigen. Ich verwende derzeit einen Mac, und der beste Paketmanager ist Homebrew. Er ist nicht standardmäßig installiert, aber wenn Sie die Homebrew-Website besuchen, haben Sie das Tool schnell zum Laufen gebracht. Danach kann ich node über: [sourcecode language="bash"] brew install node [/sourcecode] Ich verwende kein sudo: brew speichert Dateien nur in /usr/local und ich habe dieses Verzeichnis so eingestellt, dass es für Admin-Benutzer schreibbar ist. Wenn Sie das für ein Sicherheitsrisiko halten, sollten Sie brew überhaupt nicht verwenden. Wenn Sie Windows verwenden, können Sie nu-get verwenden, um nodejs zu installieren, aber ich habe noch keine Erfahrung mit diesem Tool. Wenn Sie keinen Paketmanager verwenden möchten, dann installieren Sie node auf die traditionellere Weise, indem Sie das Installationspaket von der Node.js-Website herunterladen.

Paketverwaltung mit Bower

Jetzt ist Node installiert und ich kann npm verwenden, um bower zu installieren: [sourcecode language="sh"] npm install bower [/sourcecode] Jetzt, wo bower installiert ist, kann ich Angularjs abrufen. Zuerst erstelle ich ein Verzeichnis, in dem sich meine Anwendung befinden kann, dann verwende ich bower, um Angular zu meiner Anwendung hinzuzufügen. [sourcecode language="bash"] mkdir workspace/MyNewapp [/sourcecode] bower init bower install angular Die angular-Bibliothek ist jetzt in dem Verzeichnis verfügbar, das ich gerade erstellt habe. Die Datei angular.js können Sie genauso einbinden, wie Sie normalerweise js-Dateien einbinden würden. [sourcecode language="html"] <Kopf> <script src="components/angular/angular.js"></script> </head> [/sourcecode] Die Komponenten enthalten alle js-Dateien, die von den Anwendungen verwendet werden. Wenn Sie das Verzeichnis löschen, stellt die Ausführung von bower install das gesamte Verzeichnis anhand der Datei bower.json wieder her. Das ist also die einzige Datei, die wir überprüfen müssen, um unsere Bibliotheken zu erhalten. Anstatt die js-Dateien durch manuelles Hinzufügen der Skript src-Anweisungen einzubinden, können Sie auch Frameworks wie require to require.js verwenden, um die javascript-Dateien dynamisch zu laden, aber das würde den Rahmen dieses Artikels sprengen.

Teil des Baus

Javascript wird noch nicht meine gesamte Software gefressen haben. Bei vielen Anwendungen wird das Backend als Java-Webapplikation (.war) geschrieben und mit Maven gebaut, während das Frontend aus Javascript besteht. Hier kann bower helfen, das Projekt wartbar zu halten: Anstatt die Javascript-Bibliotheken in das Verzeichnis src/main/webapp einzuchecken, könnte die bower Build-Datei bower.json in die Versionskontrolle eingecheckt werden. Mit dem exec-maven-Plugin können Sie bower einfach als Teil Ihres regulären Maven-Builds ausführen. Auf diese Weise müssen Sie keine Javascript-Dateien in Subversion, Git oder einem anderen Versionskontrollsystem überprüfen! [sourcecode language="xml"] ... <Plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <Hinrichtungen> <Ausführung> <phase>generieren-Quellen</phase> <Ziele> <Ziel>exec</Ziel> </goals> </execution> </executions> <Konfiguration> <Ausführbar>bower</ausführbar> <Argumente> <argument>installieren</argument> </arguments> <workingDirectory>${basedir}/src/main/webapp</workingDirectory> </configuration> </plugin> ... [/sourcecode]

Ein Javascript-Framework zum Erstellen: Yeoman

Kein Code ist vollständig, wenn er nicht automatisch getestet und/oder validiert wird. In Maven ist das nur ein Schritt des Build-Prozesses. Und obwohl Javascript eine interpretierte Sprache ist und daher kein Kompilierschritt erforderlich ist, möchten Sie vielleicht dennoch eine Nachbearbeitung Ihrer Javascript-Anwendung vornehmen. Dies könnte in Maven möglich sein, aber die Verwendung eines Javascript-Build-Frameworks (das Sie genauso gut von Maven aus anstoßen könnten) könnte vielseitiger sein. Yeoman scheint ein guter Anfang zu sein. Angesichts des Funktionsumfangs sind Yeoman und Javascript-Build-Tools im Allgemeinen einen ganz neuen Beitrag wert, so dass ich nicht weiter darauf eingehen werde.

Eine IDE

Jetzt möchte ich in einer IDE programmieren, die so gut ist wie Eclipse. Ich möchte auf jeden Fall Code-Vervollständigung und automatische Überprüfungen meines Quellcodes auf Typen, Synax und ähnliche Fehler. Nach meiner Erfahrung und dem, was man so hört, bietet IntelliJ eine sehr gute Javascript-Unterstützung. Auch Sublime ist ein guter Editor. Eclipse kann sogar mit verschiedenen Plugins verwendet werden. Ich habe noch nicht genug Erfahrung mit einer dieser IDEs, um eine Empfehlung aussprechen zu können.

Fazit

Als Java-Entwickler und Maven-Benutzer bin ich es gewohnt, Paketmanager zum automatischen Herunterladen von Bibliotheken zu verwenden. Mit dem aktuellen Stand von Javascript ist diese Arbeitsweise bei der Entwicklung von Javascript-Webanwendungen immer noch möglich. Die zunehmende Popularität von Javascript ist also nicht so schlimm, wie es scheint. Das komplette Projekt, das ich während des Schreibens dieses Beitrags erstellt habe, ist in meinem öffentlichen github-Account verfügbar.