Außerdem: Animationen für React-Native-App erstellen

Fast Forward: Google Open Source Report Card & Lazy Loading mit Layzr.js
Kommentare

Heute im Fast Forward: Mit der ersten Open Source Report Card zeigt Google, welches seine beliebtesten Open-Source-Projekte sind. Außerdem zeigen drei Tutorials, wie Lazy Loading mit Layzr.js funktioniert, wie sich Animationen für React-Native-Apps erstellen lassen und wie eine Datenbankschema-Migration mit FlywayDB und Hibernate funktionieren. Des Weiteren haben wir Tipps und Tricks für CSS 3D für euch und zeigen, wie man Firebase Analytics und Google BigQuery für eine Datenanalyse einsetzt.

Tipps und Tricks für CSS 3D

Der 3D-Support in CSS ist inzwischen ausgereift und ermöglicht viele spannende, visuelle Tricks. Es gibt aber immer noch ein paar Fallstricke. Ana Tudor hat ein Tutorial erstellt, mit dem sie dabei hilft, die größten Probleme zu  umschiffen. Mit vielen Beispielen und Bildern kann man im Handumdrehen lernen, wie man einzelne Objekte und ganze Gruppen in der dritten Dimension transformiert, rotiert und mit Filtern variiert.

Firebase Analytics und Google BigQuery für eine erfolgreiche Datenanalyse

Für Entwickler, die es nach einer tiefgreifenden Datenanalyse ihrer über Firebase Analytics erstellten Datensätze verlangt, hat Sara Robinson das passende Tutorial bereitgestellt. Firebase Analytics trackt zunächst die kundenspezifischen Parameter der mit Firebase programmierten iOS- oder Android-App. Mit dem Importieren der Datensätze in Big Query lassen sich diese Daten nun analysieren und auswerten. Weiterhin lässt sich für flexiblere Analysen zudem der Rohdatensatz abrufen oder Analysedaten weiterer Backend-Services wie Google Analytics 360 für ein vollständigeres Bild hinzufügen. Aufbewahren kann man die Daten schließlich im Google Cloud Storage. Mit Google Data Studio lassen sich nach dem erfolgreichen Export des Firebase-Projekts die analysierten Datensätze anschaulich visualisieren. Ein besseres Verständnis seiner App und vor allem dem Verhalten seiner User ist dem Entwickler damit garantiert.

Datenbankschema-Migration mit FlywayDB und Hibernate

Genauso wie sich Quellcode weiterentwickelt, entwickeln sich auch Datenbankschemata über die Zeit hinweg weiter. Während für einzelne Tests oder erste, initiierende Scripts das Hibernate-Schema-Generation-Tool noch ausreicht, erkennt man oftmals erst auf den zweiten Blick die Vorteile eines automatischen Schema-Migrations-Tools wie FlywayDB. Einen umfangreichen ersten Einstieg in die Thematik bietet Vlad Mihalcea.

Animationen für React-Native-App erstellen

Animationen sind ein entscheidender Bestandteil des UX-Designs. Wer seine Mobile-Apps mit React Native erstellt und dessen Grundlagen beherrscht, kann mit Wernher-Bel Anchetas Tutorial lernen, Animationen in seine App zu implementieren. Unter der Verwendung des Animated APIs, LayoutAnimations und einigen Third-Party-Libraries lassen sich Animationen in die gewünschte React-Native-App implementieren. Auch wenn es vergleichsweise viel Code bedarf, lässt sich die bearbeitete Animation mit einem erstellten app/components-Verzeichnis und App.js manuell anpassen und gestalten. Wen das viele Coden ermüdet, kann zur einfachen Implementierung auf die Third-Party-React-Native-Libraries zurückgreifen, die genau für diesen Zweck erstellt wurden.

Google Open Source Report Card

Open-Source-Software wird auch bei Google sehr geschätzt, da sie es ermöglicht, schnell und effizient zu programmieren, ohne das Rad neu zu erfinden. Mit seiner ersten Open Source Report Card hat Google nun eine Übersicht veröffentlicht, die die beliebtesten Open-Source-Projekte darstellt. Dazu gehören bisher zum Beispiel Android, Chromium, Angular und Go. Die Report Card zeigt außerdem, dass vor allem JavaScript zu den populärsten Programmiersprachen bei Google-Mitarbeitern zählt. Ausgewertet wurden hierfür die von ihnen auf GitHub veröffentlichten Projekte.

Lazy Loading ohne AMP mit Layzr.js

Eine der Best Practices zur Optimierung von AMP-Websites ist das sogenannte Lazy Loading. Darunter versteht sich die Technik, nur die Images der Website aktiv zu laden, die der User beim ersten Besuch sofort zu Gesicht bekommt, denn erst mit dem Runterscrollen werden die verbleibenden Bilder geladen. Das führt nicht nur zur schnelleren Darstellung des Contents, sondern kann sich auch positiv auf das Suchmaschinenranking auswirken. Kezz Bracey zeigt in ihrem Tutorial, wie man Lazy Loading auch auf nicht-AMP-Seiten einrichten kann – nämlich mit dem Script Layzr.js. Dafür wird die Funktionalität des amp-img-Element so gut wie möglich repliziert, aber auch mit eigenen Layzr.js-Features gearbeitet. Der Vorteil des manuellen Einpflegens liegt ganz einfach in der verbesserten Steuerbarkeit der Elemente; so kann etwa der Ladevorgang nach Belieben eingestellt werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -