Schwerpunktthema

Frontend-Entwicklung

Fachartikel, Podcasts, Vorträge und mehr zum Thema Frontend-Entwicklung.
Artikel

Kombinierbare Elemente für Benutzungsoberflächen im Web

Die Art und Weise, wie wir Benutzungsoberflächen im Web entwickeln, hat sich über die letzten Jahre stark verändert. In dieser Kolumne wollen wir uns deswegen ansehen, wie ein moderner Ansatz aussieht und vor welche Herausforderungen dieser, vor allem für klassische Templateengines der Java-Welt, uns stellt.

Blog-Post

Micro Frontends With Ionic And Capacitor

We planned and set up a micro frontend architecture using Capacitor and Ionic. In this article, I talk about some of the challenges we faced and the ways we solved them.

Blog-Post

Improve your CSP with Style Nonces in Angular 16

Enabling stricter content security policies in your SPA

Blog-Post

Clientseitige Speichertechnologien im Browser

Ein kurzer Überblick über diverse Technologien zur clientseitigen Speicherung von Daten und Zustand im Browser

Blog-Post

Custom Elements are NOT for Templating

Custom elements are a main technology included in the Web Components Browser specification. They provide a set of APIs for adding custom behavior and interactions to an HTML element – and they do this very well. However, they often are unfairly compared with JavaScript component frameworks. Custom elements were never intended to be a drop-in replacement for a JavaScript framework. This article focuses on what custom elements are, what they do well, and, most importantly, what they do not do.

Blog-Post

Offline with redux

A different approach to Web applications that work offline

Artikel

Der Nächste, bitte!

In der Regel läuft der Code von Webseiten in nur einem Thread, modernen Multicore-Prozessoren zum Trotz. Echte Parallelität gibt es so nicht, aber ein schlaues Programmiermodell erlaubt dennoch „asynchronen“ Code, der nicht linear abgearbeitet wird.

Artikel

What Does a Bundler Actually Do?

Frontend development without JavaScript is rarely possible. Seasoned backend developers are then confronted with a completely new toolchain overflowing with unknown technical terms. But there is method behind the complexity.

Podcast

Das technologische Rückgrat des Webs

Der Kern des Pudels

Robert Glaser
Lucas Dohmen
Blog-Post

Just add Code (Teil 2)

Dass Web Components ein gutes Mittel sind um in sich gekapselt Logik für Progressive Enhancement an den Browser auszuliefern hatten wir uns ja schon angeschaut. In diesem Teil des Blog Posts zeige ich im Detail, wie GitHubs Catalyst uns dabei unterstützt Web Components zu entwickeln, die dem Progressive Enhancement Paradigma folgen.

Blog-Post

Just add Code (Teil 1)

Will man in einer Webapplikation auf dem Browser Logik ausführen, so bieten sich mittlerweile Web Components an um mit sinnvollem Scoping Code und Markup zu senden. In den üblichen Beispielen führt das leider dazu, dass man im Browser ohne JavaScript nichts sieht, weil der gesamte Inhalt der Web Component in JavaScript generiert wird.

Podcast

Responsible Web Apps

Responsive + Accessible

Lucas Dohmen
Joy Heron
Blog-Post

Progressive Enhancement mit Hotwire

Ein REST basiertes Backend und oben drauf einen Javascript-Monolithen, ist heute der de-facto Standard für Webapplikationen. Mit Hilfe von hotwire lassen sich aber auch viel leichtgewichtiger Webapplikationen bauen, die die Vorteile von SPAs mitnehmen aber deren Nachteile vermeiden. Wir wollen zeigen, was Hotwire alles bietet.

Blog-Post

Innovation in the web without sacrificing accessibility

We’ve truly stretched the boundaries of what is possible on the web. However, to do this we’ve sacrificed semantic HTML and made our applications inaccessible to a huge amount of different users. Instead of breaking the foundation of the web, we should consider this as an opportunity: how can we implement applications in a way that works for any user who might come along and want to interact with it?

Blog-Post

Good arguments for SPA frameworks

When to use an SPA framework and when maybe not

Podcast

faucet-pipeline

JavaScript, CSS, Bilder und Fonts bereit zum Ausliefern

Robert Glaser
Lucas Dohmen
Podcast

Intrinsic Design

Responsive Design weitergedacht

Lucas Dohmen
Joy Heron
Artikel

Design- und Entwicklungs­prinzipien für ein besseres Frontend
Artikel

JavaScript? Gern, aber bitte in Maßen

Die Vorteile eines klassischen Architekturansatzes für Web-Anwendungen

Artikel

Optionen der Frontend-Integration

Die Integration von Daten und Funktionalität im Frontend ist ein mächtiges aber trotzdem relativ selten beleuchtetes Thema. Dieser Artikel soll versuchen gängige Muster aufzuzeigen und kurz mögliche Vor- und Nachteile zu benennen.

Artikel

Wider die SPA-Fixierung

Ein Plädoyer für eine klassische Frontend-Architektur

Artikel

Was sind eigentlich Web Components?

Für die Erstellung von Benutzeroberflächen im Web sind HTML, CSS und JavaScript gesetzt. Doch die Wiederverwendung und Kapselung von so erstellten Komponenten lässt zu wünschen übrig. Um eine fertige Komponente zu nutzen, muss man das HTML übernehmen und passendes CSS und JavaScript separat einbinden. Web Components versprechen, hier zu helfen. In dieser Kolumne schauen wir uns gemeinsam an, was Web Components sind und wie diese funktionieren.

Blog-Post

Report Generator in Rust

In this blog post, we are going to build a backend application in Rust for converting HTML report into PDF format. Rust is a system programming language which focuses on performance, stability and memory safety. There are thousands of Rust libraries built by its community and we are going to build our application using some of these libraries.

Podcast

Microfrontends

Unabhängige Teams im Frontend

Stefan Tilkov
Franziska Dessart
Lucas Dohmen
Podcast

Transklusion

Frontendintegration im Web

Lucas Dohmen
Franziska Dessart
Blog-Post

Taking Screenshots of DOM Elements

Now that PhantomJS is dead, we need an alternative. Turns out that Puppeteer, Google’s official remote-control API for Chrome, is just the ticket.

Blog-Post

ROCA-Compliant Table Sorting
Artikel

Tooling für JavaScript-Frontends

Nahezu jede Webanwendung besitzt einen Anteil an JavaScript im Frontend. Im Vergleich zu früher haben sich jedoch viele Dinge geändert. So sind heute zahlreiche Tools üblich, die den Entwickler unterstützen. Dieser Artikel gibt einen Überblick über aktuell genutzte Entwicklungswerkzeuge für die Entwicklung von JavaScript-Frontends.

Blog-Post

Building Component-Based Front Ends with Rails

Our latest Ruby on Rails front-end project strongly emphasizes a component-based approach. In this post, we briefly explain how a tiny helper not only helped us render UI components, but also resulted in better components thanks to well-defined contracts and effortless composition.

Blog-Post

How Browsers Load and Process JavaScript
Blog-Post

The Power of the HTML Form

The HTML form is a powerful tool for telling a server what you want to do. But does everybody know how it works? With the multifarious JavaScript frameworks currently available today, software developers in the industry today often do not know how to create a web application without JavaScript. Is there an alternative? The web has been around for ages. What did people do before JavaScript?

Podcast

Self-contained Systems und Frontend-Integration – Teil 2

Alternativen zu SPAs und Umsetzung von SCS

Falk Hoppe
Till Schulte-Coerne
Eberhard Wolff
Podcast

Self-contained Systems und Frontend-Integration – Teil 1

Eigenschaften und Vor- und Nachteile

Falk Hoppe
Till Schulte-Coerne
Eberhard Wolff
Artikel

Web Components mit Polymer

Wie im ersten Teil dieses Artikels bereits angekündigt wurde, beschäftigt sich dieser zweite Teil mit der technischen Anwendung von Polymer 1.0. Wo der erste Teil die Spezifikation und den Einsatz der Technologie aus einer Vogel-Perspektive zeigt, werden wir hier die konkreten APIs vorstellen.

Artikel

Nachhaltige Webarchitekturen

Heutzutage gewinnt man leicht den Eindruck, dass es für moderne Webanwendungen nur einen einzig wahren Architekturansatz gibt: REST und Single-Page-Anwendungen (SPAs). Doch ist alles, was REST genannt wird, wirklich REST? Sind REST und SPAs immer die beste Lösung? Um diese Fragen beantworten zu können, sollte man sich anschauen, was REST eigentlich ist, wofür es gedacht ist und ob es möglicherweise auch Alternativen zu SPAs gibt; insbesondere mit dem Blick auf Nachhaltigkeit, also Wartbarkeit und Erweiterbarkeit.

Blog-Post

ROCA vs. SPA

Comparing two architectural styles with a concrete example

Artikel

Web Components mit Polymer

Die vom W3C standardisierten Web Components erleichtern die komponentenbasierte Entwicklung von Benutzungsoberflächen für Webanwendungen. 2013 hat Google die Open-Source-Bibliothek Polymer initiiert, die Entwicklern beim Einsatz von Web Components Unterstützung an die Hand gibt. Mit der Vorstellung von Version 1.0 dieses Frameworks stellt sich die Frage, ob Polymer nun produktionsreif ist und in realen Projekte eingesetzt werden kann. Im ersten Teil der Serie stellen wir die Version 1.x vor und prüfen die Möglichkeit der Nutzung für Geschäftsanwendungen.

Blog-Post

Transklusion in Self-Contained Systems

Frontend-Integration im Web ist ein riesiges Themengebiet. Dieser Post befasst sich mit dem Teilaspekt der Transklusion “fremder” Inhalte in den DOM einer anderen Seite.

Blog-Post

Frontend Dependency-Management in Rails
Blog-Post

Frontend Dependency-Management mit Bower

Paket Management hat sich in so ziemlich jedem populären Ökosystem der Softwareentwicklung in irgendeiner Form breit gemacht. Und das nicht zu Unrecht: In den seltensten Fällen wird in einem Software-Projekt bei null angefangen. Ob Frameworks oder kleinere Bibliotheken, ein Software-Projekt besteht in der Regel aus vielen einzelnen Bausteinen, die zu einem größeren Ganzen zusammen gesetzt werden. Die Abhängigkeiten von Bausteinen zu Anderen lassen sich bis zu einem bestimmten Grad zwar manuell verwalten, mit zunehmender Größe eines Projekts ist dies auf lange Sicht aber weder praktikabel noch wartbar. Genau an dieser Stelle helfen Dependency-Management Tools dabei Bausteine neu hinzuzufügen, bestehende zu aktualisieren oder deren Abhängigkeiten aufzulösen.

Podcast

Eine Website — viele Geräte

Mit Responsive Web-Design Ordnung schaffen

Robert Glaser
Till Schulte-Coerne
Roman Stranghöner
Artikel

ROCA: Keine Angst vor HTML und JavaScript

Web-Apps zum Wohlfühlen

Podcast

CSS-Architektur

Architekturaspekte von Cascading Style Sheets

Stefan Tilkov
Falk Hoppe
Roman Stranghöner
Podcast

Frontend-Optimierung von Webanwendungen

Techniken für schnelle Frontends

Stefan Tilkov
Till Schulte-Coerne
Case Study

Belegclearing und Fraud Detection: Krombacher setzt im Rahmen seines Loyaltyprogramms auf Automatisierung

Zur Case Study
Case Study

Spacy – mit Radical Simplification zu einer barrierefreien Anwendung für Online-Events

Zur Case Study