It’s #FrontendFriday – Kann ich dieses npm Paket nutzen?

11.10.2019

Hallo #FrontendFriday-Leser/in,

endlich ist es wieder #FrontendFriday!  Heute geht es um einen sehr effizienten Weg, npm Pakete zu evaluieren, ohne diese vorher auszuprobieren.

Zum Node Package Manager (kurz: npm) gehört neben essentiellen JavaScript Tools auch das globale npm-Repository (https://www.npmjs.com).
Hier finden sich über 1.000.000 JavaScript-Pakete. Die meisten davon sind OpenSource. Im Entwickleralltag stößt man häufig auf Aufgabenstellungen, die durch ein solches npm-Paket gelöst werden könnten.

Dabei sollte man sich jedoch stets die Frage stellen:
Kann ich dieses npm-Paket nutzen, oder sollte ich die Funktion lieber selbst implementierten?

Entscheidet man sich für ersteres, hat man oft die Wahl zwischen mehreren npm Paketen.
Für welches npm Paket man sich letztendlich entscheidet, hängt im wesentlichen von 6 Faktoren ab:

  1. Wie groß ist die Community?
  2. Wie viele Bugs gibt es aktuell?
  3. Wann wurde das Paket zuletzt aktualisiert? (Wartung und Pflege durch Herausgeber.)
  4. Seit wann gibt es das Paket? (Neue Pakete gibt es viele, welche jedoch lange bestehen sieht man erst mit der Zeit.)
  5. Wie groß ist das Paket? (umso kleiner, desto besser – vor allem auf mobilen Endgeräten)
  6. Wie gut ist die Dokumentation?

Um diese Punkte zu beantworten, ist ein relativ hoher Zeitaufwand zur Prüfung und zum Vergleich notwendig.

Dieser Zeitaufwand lässt sich jedoch auf ein Minimum reduzieren, wenn man npmtrends.com kennt!

npmtrends hilft Dir dabei, die Faktoren 1 bis 5 auf einen Blick zu evaluieren.

Ein Beispiel: du benötigst einen Date-Picker in deiner Angular Webanwendung

Die Hauptanforderung ist, dass der Datepicker sich zu 100% in das GUI Design der Webanwendung integrieren soll. D.h. du musst mit CSS den Style auf jeden Fall nachträglich anpassen. Deshalb kannst du auch kein natives nutzen.

Auf npm findest du zwei potenzielle Pakete, die du einsetzen könntest: ng2-datepicker und ng2-date-picker (man beachte die Schreibweise).

Jetzt musst du nur noch auf npmtrends.com die beiden Paketnamen eingegeben und vergleichen: https://www.npmtrends.com/ng2-datepicker-vs-ng2-date-picker
npm-trends

  1. Wie groß ist die Community?
    ng2-datepicker wird nur etwa halb so oft heruntergeladen, wie ng2-date-picker. Insgesamt lässt sich auch ablesen, dass ng2-date-picker eher auf dem „aufsteigendem Ast“ ist. Bei den Stars liegt jedoch ng2-date-picker minimal vorne. Die Forks sprechen wiederum klar für ng2-datepicker.
  2. Wie viele Bugs gibt es aktuell?
    In der Tabelle „Stats“ darunter kannst du auf einen Blick sehen, dass bei ng2-datepicker deutlich mehr Bugs gemeldet wurden (198), als bei ng2-date-picker (26).
    Bei der Anzahl der gemeldeten Bugs muss beachtet werden, dass diese Zahl in Relation zur Community-Größe (Stars, Forks und Downloads) gesehen werden muss. Denn umso größer die Community, desto eher werden auch Bugs gefunden.
  3. Wann wurde das Paket zuletzt aktualisiert?
    Die letzte Aktualisierung durch den Herausgeber ist bei ng2-datepicker schon über ein Jahr her. Bei ng2-date-picker lediglich zwei Monate.
  4. Seit wann gibt es das Paket?
    Beide Pakete gibt es schon seit über 3 Jahren.
  5. Wie groß ist das Paket?
    Hier ist ng2-datepicker deutlich leichtgewichtiger (13,6 KB), als ng2-date-picker (79,3 KB). Da deine Webanwendung jedoch nicht auf mobilen Endgeräten funktionieren soll, ist dies zu vernachlässigen.
  6. Wie gut ist die Dokumentation?
    Nun musst du nur noch den letzten Faktor prüfen. Das geht leider nur, indem du selbst kurz einen Blick in die Dokumentationen wirfst.

Nachdem du fast alle Faktoren mit Hilfe von npmtrends.com schnell vergleichen konntest, weißt du nun, dass du ng2-date-picker in deiner Webanwendung nutzen wirst.

Fazit

Mit npmtrends.com gibt es eine schnelle und einfache Möglichkeit, (OpenSource) npm-Pakete zu vergleichen und einen ersten Eindruck zu gewinnen.
Wie hoch du die Faktoren 1 bis 6 gewichtest, hängt von deinem Projektumfeld und/oder den jeweiligen Anforderungen ab.

Ob das Paket auch wirklich zu 100% mit deinen Anforderungen matched, zeigt sich immer erst während der Entwicklung. Fehltritte in diese Richtung lassen sich aber mit Hilfe von npmtrends.com meist im vornherein vermeiden.

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*