Bekanntlich wird Code viel öfter gelesen als geschrieben. Häufig wird er auch von anderen Personen gelesen als von derjenigen, die ihn verfasst hat. Und hast du nicht selbst schon erlebt, dass dein eigener Code nur wenige Monate später völlich unverständlich für dich war…? ;-) Umso wichtiger ist es, dass du dir darüber Gedanken machst, wie du deinen Code so lesbar und verständlich wie möglich gestalten kannst.

Doch was macht lesbaren, verständlichen Code aus? Er ist ausdrucksstark, das heißt er drückt aus was er tut. Und zwar genau das, und nur das.

Allerdings ist das Schreiben von lesbarem Code nicht wirklich leicht. Robert C. Martin (“Uncle Bob”) zieht in seinem Buch über Clean Code¹ den Vergleich zur Malerei: Es ist einfach zu erkennen ob ein Bild gut oder schlecht gemalt ist. Aber selbst ein gutes Bild zu malen, dafür braucht es viel Übung.

Daher möchte dir die folgenden 7 Tipps an die Hand geben, die dir dabei helfen können, lesbaren Code zu schreiben.Mehr

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

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.

Endlich ist es wieder soweit – Es ist Freitag und das bedeutet It’s #FrontendFriday

Was ist Trusted Web Activity?

Trusted Web Activity ist eine neue Möglichkeit, eure Webinhalte mit Hilfe einer Chrome Activity im Vollbildmodus in euer Android-App zu integrieren.

Technisch ist eine Trusted Web Activity (kurz: TWA) eine besondere Version des Chrome Custom Tab (kurz: CCT). Dadurch könnt ihr viele Chrome-Features nutzen, die auch mit dem CCT möglich sind – nicht aber in der klassischen Webview.

Konkret sind das Funktionen wie Push-Benachrichtigungen, Hintergrundsynchronisierung, Autofill bei Eingabeformularen, Media-Source-Extensions oder die Sharing API. Ein weiterer Pluspunkt: Die TWA teilt den Cache, Speicher und Sessions mit dem installierten Webbrowser.

Wenn der Nutzer sich also in der TWA anmeldet, ist er es auch weiterhin beim Starten der Web-App im Browser – weil eben die Session geteilt wird.

Wie funktioniert Trusted Web Activity?

Eine TWA führt Chrome im Vollbildmodus innerhalb einer Android-Anwendung aus, ohne dass eine Browseroberfläche sichtbar ist.

Dies ist eine leistungsstarke Funktion und ist nur erlaubt, wenn die zu öffnende Seite und die Android-Applikation demselben Entwickler gehören. Diese Validierung wird durch Digital Asset Links erreicht.

Unterschied zu anderen Integrationen von Webinhalten in einer App

Inhalte in einer TWA sind vertrauenswürdig. Es wird erwartet, dass die App und die Website, die sich öffnet, vom gleichen Entwickler stammen. (Dies wird mit Hilfe von Digital Asset Links überprüft.)

Vertrauenswürdige Web-Aktivitäten kommen aus dem Web: Diese werden vom Browser des Benutzers gerendert, genau so, wie ein Benutzer es in seinem Browser sehen würde, außer, dass sie im Vollbildmodus ausgeführt werden.

Webinhalte sollten zunächst im Browser zugänglich und nützlich sein. Der Browser wird auch unabhängig von Android und Ihrer App aktualisiert

Wenn die Benutzerversion von Chrome heute keine Trusted Web-Aktivitäten unterstützt, greift Chrome über eine benutzerdefinierte Registerkarte auf eine einfache Symbolleiste zurück.

Es ist auch möglich, dass andere Browser das gleiche Protokoll implementieren, welches auch Trusted Web-Aktivitäten verwendet.

Während die Host-App das letzte Wort darüber hat, welcher Browser geöffnet wird, wird die gleiche Richtlinie wie bei Custom Tabs empfohlen: Verwende den Standardbrowser des Benutzers, sofern dieser die erforderlichen Funktionen bereitstellt.

Wofür kann dies verwendet werden?

TWAs eignen sich hervorragend, um Vollbild-Webinhalte in eine Android-Anwendung einzubinden, welcher Chrome-Funktionen benötigt, die in einem WebView nicht verfügbar ist oder wenn der Shared Origin Storage mit dem Chrome-Browser die Benutzerreise erleichtert.

Ein Beispiel dafür ist eine E-Commerce-Site, bei der Produktseiten in nativen Ansichten implementiert sind, der Checkout-Ablauf jedoch auf der Website stattfindet. Durch die Verwendung eines TWA hat die App die Leistung von Chrome und kann die One-Tap-Anmeldung von Chrome und die automatischen Formularausfüllfunktionen nutzen.

Welche Kriterien gibt es hierzu?

Alle Inhalte in TWAs müssen den Richtlinien des Play Stores entsprechen, einschließlich der Richtlinien für den Kauf innerhalb der App und anderen digitalen Gütern.

App-Nutzer erwarten ein tolles Erlebnis auf ihrem Gerät. Um die Qualität der Erfahrung zu gewährleisten, müssen TWAs die Progressive Web Apps Installationsfähigkeitskriterien erfüllen und schnell laden.

Die Ladegeschwindigkeit wird mit Hilfe von Lighthouse gemessen und Webinhalte in TWAs müssen einen Leistungswert von 80 erreichen. Lighthouse ist ein Open-Source, automatisiertes Werkzeug zur Überprüfung von Performance und progressiven Webanwendungen. Ist sowohl als Benchmark als auch zur Unterstützung bei der Erstellung besserer Websites nützlich.

Hattet ihr schon mal Erfahrung mit Trusted Web Activity? Wenn ja, welche?

Wenn es dann soweit ist – wünscht euch die WebfrontendAG ein schönes Wochenende :)

Alle halbe Jahre wieder – erscheint ein neues Java-Release. Am morgigen Dienstag, 17.09.2019, ist es wieder soweit: Java 13 wird veröffentlicht.

Folgende Funktionalitäten wurden im Rahmen der Entwicklung des Releases fertig gestellt, und halten Einzug in Java 13:

Mehr

Vor ein paar Monaten gab es von mir bereits einen Workshop zum Thema Node.js + Express. Da es meiner Meinung nach noch eine viel zu unterschätze Technologie ist wollte ich diesen #FrontendFriday in komprimierter Form nutzen um auch allen anderen einen Einblick zu geben, die beim Workshop nicht dabei sein konnten.

Mehr