Autor/in: Markus Wingler
It’s #FrontendFriday – Kann ich dieses npm Paket nutzen?
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:
- Wie groß ist die Community?
- Wie viele Bugs gibt es aktuell?
- Wann wurde das Paket zuletzt aktualisiert? (Wartung und Pflege durch Herausgeber.)
- Seit wann gibt es das Paket? (Neue Pakete gibt es viele, welche jedoch lange bestehen sieht man erst mit der Zeit.)
- Wie groß ist das Paket? (umso kleiner, desto besser – vor allem auf mobilen Endgeräten)
- 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
- 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. - 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. - 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. - Seit wann gibt es das Paket?
Beide Pakete gibt es schon seit über 3 Jahren. - 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. - 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.
It’s #FrontendFriday – Xing Premium Feature per Lesezeichen
Es ist wieder soweit: heute ist #FrontendFriday! :)
Im heutigen Blogpost geht es um die Umsetzung von berechtigungsabhängigen Features am Beispiel von Xing.
Sehr viele Kollegen/innen sind – so wie ich auch – bei Xing angemeldet. Die meisten meiner Xing Kontakte haben nur einen kostenlosen Xing Basis Account, wie ich selbst auch.
Das wohl reizvollste Feature einer Premium-Mitgliedschaft ist vermutlich “Besucher deines Profils sehen“.Mehr
It’s #FrontendFriday – Canvas Fingerprinting: Tracking deines digitalen Fingerabdrucks
Wie jeden 2. Freitag ist heute wieder #FrontendFriday!
Das heimliche Tracking im Internet hat (leider) schon eine lange Tradition. Spätestens seit der DSGVO ist jedem bekannt, was über Cookies technisch möglich ist und wie man sich dagegen schützen kann.
In diesem #FrontendFriday möchten wir jedoch nicht die klassische Methode des Trackings durch das Internet beleuchten, sondern eine alternative, unbekanntere Methode: das Canvas Fingerprinting.Mehr
It’s #FrontendFriday – WebAssembly: die Zukunft der Webapps?
Vielleicht haben Sie schon von WebAssembly (kurz: Wasm) gehört, denn immerhin gibt es zumindest die WebAssembly Community Group (W3C) schon seit April 2015. Inzwischen ist Wasm in der Version 1.0 verfügbar.
Doch was ist Wasm genau und wofür braucht man das? In diesem Blogbeitrag erfahren Sie alles dazu!
Was ist WebAssembly?
WebAssembly is a binary instruction format for a stack-based virtual machine.
Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
Kurz gesagt: WebAssembly ist ein neuer Typ Code. Er ermöglicht es Webanwendungen in C/C++ oder Rust zu implementieren und diese (fast – in einer Sandbox) nativ im Browser auszuführen. Dabei kann es auch in Kombination mit HTML/CSS verwendet werden [1].
Warum möchte man Webapps in einer maschinennahen Sprache implementieren und ausführen?
Gute Frage! Denn um Logik auf Webseiten zu implementieren, gibt es doch schon JavaScript? Wie wir aber alle wissen, ist JavaScript vergleichsweise leider sehr langsam. Das macht sich vor allem bei komplexen Webanwendungen wie z.B. bei der 3D Visualisierung im Browser bemerkbar.
Deshalb sind vor allem folgende Gründe dafür verantwortlich, dass es Wasm gibt:
In folgender Demoanwendung kann man sehr gut selbst den Unterschied sehen, spüren und ausprobieren: WebAssembly VS JavaScript
- Link öffnen und oben rechts auf den Debug-Monitor klicken, bis die blaue FPS-Anzeige zu sehen ist
- Über das DropDown oben rechts kann zwischen Wasm und JS gewechselt werden
- Darunter kann die Anzahl der animierten Menschen erhöht/verringert werden
Im aktuellen Google Chrome Canary (Version 72.0.3610.0) erhalte ich z.B. bei 20 Menschen mit JS gerade mal ~13 FPS, mit Wasm ~30 FPS. Das sind mehr als 100% Performance-Steigerung!
Wie funktioniert WebAssembly im Browser?
Um den geschriebenen C/C++ Code zu WebAssembly zu kompilieren, gibt es emscripten. Mit emscripten kann über folgenden Befehl der Code zu Wasm kompiliert werden:
emcc hello.c -s WASM=1 -o hello.html
Um das ganze im Browser auszuführen, muss die jeweilige Browserengine auch Wasm unterstützen. In Chrome übernimmt das Ausführen von Wasm beispielsweise der Chrome Native Client in einer Sandbox.
Wer noch tiefer einsteigen möchte: https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/
Welche Browser bzw. Browserengines unterstützen WebAssembly?
Man mag es kaum glauben, aber da sind sich alle (wichtigen) Browser (nicht Internet Explorer) einig: https://caniuse.com/#feat=wasm
Wird WebAssembly der Nachfolger von JavaScript?
Nein. Wasm ist als “schnelle Ergänzung” für JavaScript gedacht [4].
Wasm wird in Zukunft parallel existieren und voraussichtlich nur bei besonders komplexen Webanwendungen zum Einsatz kommen (Rechenintensive Anwendungen, 3D, etc.).
Quellen:
[1] https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
[2] https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/
[3] https://medium.com/samsung-internet-dev/performance-testing-web-assembly-vs-javascript-e07506fd5875
Was ist eigentlich TypeScript?
TypeScript etabliert sich zur neuen Standard-Programmiersprache im Webfrontend. In diesem Blogpost möchte ich die Herkunft und die Grundlagen dieser Sprache, sowie die Vorteile und Unterschiede gegenüber JavaScript erläutern.
Was ist ECMAScript?
Bevor wir über TypeScript reden, muss erklärt werden, woher die Spezifikation von TypeScript kommt. Die ECMAScript-Spezifikation wird seit jeher von der European Computer Manufacturers Association festgelegt und definiert quasi, wie JavaScript funktioniert.
Die ECMA-Organisation beschäftigt sich jedoch nicht nur mit JavaScript, sondern auch mit anderen Standards, wie z.B. die gute alte CD-ROM, die Floppy-Disk oder das Office-Open-XML-Format. Hier eine Liste aller ECMA-Standards).
ECMA-Script (kurz ES) wird – seit 2015 – jedes Jahr im Juni neu Released und trägt auch den entsprechenden Jahresnamen in der Spezifikation. Die aktuelle Version ist z.B. ECMAScript 2017.
Aber Vorsicht (!) ECMAScript 2017 heißt in der Kurzform ES8 oder ECMAScript 8 (für 8th Edition) – ziemlich verwirrend, oder?
| Versionsname (kurz) | Versionsname (lang) | Name der Spezifikation | Signifikanteste Änderungen |
|---|---|---|---|
| ES6 | ECMAScript 6 | ECMAScript 2015 | Added classes and modules. |
| ES7 | ECMAScript 7 | ECMAScript 2016 | Added exponential operator (**). Added Array.prototype.includes. |
| ES8 | ECMAScript 8 | ECMAScript 2017 | Async Functions, Shared memory and atomics. |
| ES.Next | Generischer Name für die nächste, kommende Spezifikation. | ||
JavaScript ist also nichts weiter, als eine Implementierung der ECMAScript Spezifikation.
Was ist mit dem Browser-Suppport? Siehe: caniuse.com/#search=ES6 oder w3schools.com/js/js_versions.asp
Was ist TypeScript?
TypeScript (kurz: TS) ist ein Superset von JavaScript. Das bedeutet, TS ist ebenfalls eine Implementierung von ECMAScript, erweitert aber JavaScript mit zusätzlichen “Features”.
Jeder JavaScript-Code funktioniert auch in TypeScript, aber nicht jeder TypeScript-Code funktioniert auch in JavaScript.
Wie der Name schon verrät, erweitert TypeScript JavaScript um Typings (und Annotations). Das heißt die Programmiersprache ist Typsicher – wie z.B. auch Java oder C#.
Hier ein Beispiel zur Verdeutlichung:
| JavaScript | TypeScript |
|---|---|
var companyName= "doubleSlash"; |
let companyName: string = "doubleSlash"; |
Die Typsicherheit unterstützt in erster Linie den Entwickler und resultiert somit in einer höheren Code-Qualität, obwohl am Ende die Software in einer “alten JavaScript-Umgebung” lauffähig ist. Durch statische Codeanalyse kann die Softwarequalität noch weiter gesteiert werden.
Die Typings gehen nach dem Kompilieren verloren (da JavaScript keine Typings kennt) und müssen eigentlich gar nicht genutzt werden. Sie sind laut TS-Spezifikation optional (beim Thema Clean Code sind sie natürlich Mandatory!).
Auf der Homepage typescriptlang.org heißt es übrigens: “TypeScript – JavaScript that scales.“.
Aber nicht nur das: Die von Microsoft entwickelte Sprache kompiliert TypeScript-Code “herunter” zu einer (fast) beliebigen Ziel-ECMAScript Definition (JavaScript-Version), z.B. ES5 – was von so gut wie allen Browsern unterstützt wird. Dies kann in den Compiler-Options (tsconfig.json) konfiguriert werden. Das bedeutet, in der produktiven Webapp läuft am Ende immernoch JavaScript im Browser, kein TypeScript.
Somit schafft TypeScript in Webfrontend-Projekten auch eine gewisse Browser-Unabhängigkeit, da der/die Entwickler/in sich nicht mehr darum kümmern muss, welche ECMAScript-Features er in welchen Browsern verwenden darf, und welche nicht.
Wie der Code nach der Kompilierung aussieht, kann hier live ausprobieren:
FAQ zu TypeScript
- Gibt es auch Browser, die TypeScript direkt verstehen (ohne Kompiliervorgang zu JavaScript)?
→ Ja, z.B. Firefox, Chrome oder sogar der IE ab Version 11! Dadurch ist es z.B. möglich über die sog. Source-Maps den TypeScript-Code direkt im Browser zu debuggen. - Gibt es auch Konkurrenz zu TypeScript?
→ Ja, z.B. Flow von Facebook – kann im Prinzip genau das gleiche. - Mit welchen Frameworks kann ich TypeScript nutzen?
→ Mit so gut wie allen aktuellen, z.B. Angular, React, Electron, Ionic, …
Zusammenfassung (tl;dr)
- die Benamung der ECMAScript Spezifikationen ist äußerst kompliziert und verwirrend
- TypeScript ist eine Implementierung der ECMAScript-Spezifikation und erweitert JavaScript um Typen, Annotationen und mehr (Superset von JS)
- man kann als Faustregel sagen, TypeScript ist der aktuellen ECMAScript Spezifikation immer etwas vorraus.
- der TypeScript Compiler ermöglicht es, zu einer bestimmten Target-Language (JavaScript-Version) zu kompilieren, z.B. ES5 → Stichwort “Browser-Unabhängigkeit”.
- Debugging von TypeScript ist über Source-Maps direkt im Browser möglich
Mehr zum Thema Webfrontend Entwicklung erfahren
Was ist eine progressive Web App?
Progressive Web Apps (kurz: PWA) sind im Webfrontend-Bereich das Buzzword 2018. Genauer gesagt existiert der Begriff progressive Web App schon seit mehreren Jahren. Jedoch ist vielen noch nicht klar, um was es sich dabei handelt. Oft werden responsive Webapps damit in Verbindung gebracht – doch wie hängen diese beiden Paradigmen zusammen? Und welche Technologien werden für progressive Web Apps benötigt? Diese und weitere Fragen möchte ich in diesem Beitrag beantworten.
Welche Softwarearchitektur nutzt Pokémon Go?
Der Aktienkurs von Nintendo schießt mit über 70% in die Höhe und Schlagzeilen über Unfälle erscheinen fast täglich. Kein anderes Spiel – nein, keine andere Software – hat in den vergangenen Jahren einen so großen Einfluss auf das tägliche Leben gehabt, wie Pokémon Go. Doch aus Entwicklersicht ist für mich vor allem die Softwarearchitektur hinter dem mobilen MMO-Spiel interessant.
Was ist Configure, Price, Quote (CPQ)?
Ein neues Buzzword ist am Himmel der digitalen Vertriebswelt aufgestiegen: “Configure, Price, Quote” oder kurz – CPQ. Doch was ist das eigentlich genau und worin besteht der Unterscheid zu einem klassischen Online Konfigurator?
Mehr
Die Erfolgs-Checkliste für Ihren Online Konfigurator
Online Konfiguratoren finden sich heute auf fast allen Webseiten großer Anbieter von sogenannten “variantenreichen Produkten”. Da geht es um die Personalisierung von Markenschuhen, Mützen oder sogar von ganzen Autos. Die Online Konfiguratoren unterstützen dabei nicht nur den Vertrieb als digitaler Verkaufsberater, sondern erzielen vor allem auch Erfolge im Marketing. Ob Ihr Konfigurator das Potenzial hat, diese Ziele zu erreichen, finden Sie mit unserer Erfolgs-Checkliste heraus.Mehr
VBA Makros in Unternehmen
Im Jahr 1993 hat Microsoft eine auf Visual Basic basierende Skriptsprache veröffentlicht, die bis heute in den Microsoft-Office Dateien der Unternehmen eingesetzt wird. Eine proprietäre Skriptsprache, die nur für ein einziges Office-Paket entwickelt wurde und dessen Quellcode heutzutage eigentlich kein Unternehmen mehr pflegen möchte – es aber trotzdem macht. Ich spreche hier von VBA (Visual Basic for Applications). In vielen Excel-Sheets von Unternehmen steckt unperformanter VBA-Code, der so manchen Anwender und Entwickler auf eine Gedulds-Probe stellen kann. Mehr
