Node.js

Ein Erklärungsversuch, sodass auch Laien es verstehen.

    Inhaltsangabe
  1. Was ist Node.js?
    1. Beispiel
    2. Wie es aussieht
  2. Mein Favorit: webpack
  3. Fazit

Das Internet entwickelt sich unglaublich schnell weiter und man kommt als normaler Programmierer überhaupt nicht mehr hinterher. Mit der Entwicklung hat sich mittlerweile eine Plattform entwickelt, was das ganze Internet revolutionieren soll. Es nennt sich Node.js.

Was ist Node.js?

Node.js ist eine Javascript Plattform, womit man einfache Sachen machen kann, wie z.B. seine Programmieraufgaben einfacher erledigen zu können aber auch mehr Komplexe sachen wie einen Webserver aufzusetzen.

Man kann Node auf seinen Arbeitsrechner oder auch auf dem Server installieren und sich sogenannte Packages herunterladen. Diese Packages kann man sich wie Apps auf den Smartphones vorstellen. Jede Package hat seine funktion und diese kann man dann in seine Webseite / App integrieren.

Beispiel

Wenn mehrere Programmierer an einem und den selben Projekt arbeiten, kann es sehr schnell dazu kommen, dass jeder einzelne davon sehr unterschiedliche Codes schreibt. Das muss natürlich verhindert werden. Man kann dafür einen Linter einsetzen. Der sorgt dafür, dass eine gemeinsame Struktur eingehalten wird, wenn man Code schreibt.

In einem Projekt schreibt man eine Menge Funktionen und Style Eigenschaften. Diese ganzen Funktionen können zusammen gefasst und verkleinert werden, damit die Seite schneller geladen wird.

Danach kann man das programmierte automatisch auf den Server hochladen und den Browser automatisch neu laden lassen, damit man die Änderungen sofort sieht.

Das Beispiel, was ich oben geschrieben habe, ist mit node packages sehr einfach realisierbar. Man muss nur sagen mach das das das das und LOS GEHT’S.

Wie es aussieht

Als erstes legt man sich eine package.json an. Dort wird angegeben, welche packages man für seine Programmierung benötigt. Wie bereits erwähnt, hat jede Package seine eigene Aufgabe:

{
  "name": "MyProject",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-concat": "*",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-nodeunit": "*",
    "grunt-contrib-sass": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-ftp-push": "*",
    "grunt-sass": "*"
  }
}

Hier sage ich z.B.: Ich brauche die letzte Version von:

  • grunt
  • grunt-contrib-concat
  • grunt-contrib-jshint
  • grunt-contrib-sass
  • grunt-contrib-uglify
  • grunt-contrib-watch
  • grunt-ftp-push

Mit grunt und grunt-contrib-watch sage ich: Hey ich werde gleich arbeiten. Bitte beobachte die Dateien, an denen ich arbeite und je nach Datei werde ich dir bestimmte aufgaben geben.

Ab dann wird meine Arbeit vom Computer beobachtet und unterstützt.

grunt-contrib-jshint sorgt dafür, dass während der Programmierung eine bestimmte Norm eingehalten wird. Wenn ich aus der Norm ausweiche, sagt der Computer: In der Datei xyz.js in der Zeile 234 stimmt etwas nicht. Bitte korrigiere das.

grunt-contrib-concat führt nach erfolgreichen Tests alle Javascript Dateien zusammen und versammelt alle Funktionen in einer Datei.

grunt-contrib-uglify nimmt alle zusammengeführten Dateien und verkleinert sie. Es wird für den Menschen unlesbar aber der Computer kann dann diese verkleinerte Datei besser lesen und interpretieren.

grunt-contrib-sass nimmt alle Styling Elemente und führt diese zusammen in einer Datei. Er erstellt auch eine sogenannte map, was dafür sorgt, dass ich mir alle Styling Elemente im Browser anschauen kann und ablesen kann, in welcher Datei und in welcher Zeile das programmiert worden ist. Falls ich eine veränderung machen möchte kann ich direkt an dieser Datei arbeiten.

Wenn alle oben genannten prozesse durch sind kommt grunt-ftp-push zum Einsatz. Der lädt alle oben vorbereiteten Dateien automatisch dann auf den Server hoch und das einzige was ich noch machen muss, ist die Seite neu zu laden.

Mein Favorit: webpack

Webpack ist ein Opensource-JavaScript-Modul-Packer. Webpack macht eigentlich alles, was auch Grunt macht aber legt noch eine Schippe drauf. Es ist viel flexibler und kann viel mehr Sachen machen.

Die innovativste Funktion, was Webpack mit liefert ist das Clustern von der Webseite. Das kann in etwa so erklärt werden: Wenn du auf eine herkömmliche Webseite gehst, werden alle Funktionen und Styling Elemente geladen, welche höchstwahrscheinlich auch noch auf unterschiedlichen Servern liegen. Das sorgt dann für eine erhöhte Seitenladezeit. Webpack hilft dabei aus, indem er nur das lädt, was benötigt wird. Wenn du runter scrollst, werden die weiteren zusätzlichen funktionen geladen. Klickst du dann auf eine Bildergalerie, werden die Bildergalerie Funktionen geladen. Das bedeutet, dass man immer nur das nötigste lädt und die Ladezeiten unglaublich verkürzt werden.

Fazit

Ich bin durch vue.js und der Programmierung von Gutenberg Blöcken erst in Berührung mit node gekommen. Am Anfang ist es unglaublich kompliziert und man kann sich nicht vorstellen, dass es eine Erleichterung sein kann. Je mehr man sich jedoch damit beschäftigt, desto einfacher kommen einem die Prozesse vor.

Node hat weltweit einen impact erreicht, welches sehr wenigen open source Projekten gelingt. Es hat die ganze denke und die Peozedur des programmierens von Grund auf verändert. Ich sehe noch mehr Potential in im node Projekt und denke, dass jeder Programmierer, der für die Zukunft gerüstet sein möchte auf jeden Fall node und Webpack beherrschen müsste bevor es zu spät ist.

Themen

Grunt Javascript node Programmieren Technik Webpack Website

Beitrag teilen

WhatsAppen

Folgen Sie uns