Focus

Frontend Development

Articles, podcasts, talks, and more about Frontend Development.
Article

Combinable Elements for User Interfaces on the Web

The way we develop user interfaces on the web has changed significantly in recent years. In this column, we therefore want to examine what a modern approach looks like and which challenges this poses, especially for classic template engines from the Java world.

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.

Article

Frontend integration options
Blog Post

Offline with redux

We’ve been writing a web application that supports users being offline without using a service worker. We’d love to share how we’ve done that and what we think are the advantages.

Article

Next Please!

Despite modern multicore processors, website code usually runs in only one thread. True parallelism therefore does not exist, but a clever programming model still allows “asynchronous” code that is not processed linearly.

Article

What Does a Bundler Actually Do?
Podcast

Das technologische Rückgrat des Webs

Der Kern des Pudels

Robert Glaser
Lucas Dohmen
Blog Post

Just Add Code
(Part 2)

The last post in this series established that Web Components are a good way to ship markup and logic to a browser in order to provide progressive enhancement. In this part I will show, how Githubs Catalyst library supports us to develop such Web Components.

Blog Post

Just add Code (Part 1)

Using Hotwire Stimulus for Progressive Enhancement with Web Components

Podcast

Responsible Web Apps

Responsive + Accessible

Lucas Dohmen
Joy Heron
Blog Post

Progressive Enhancement with Hotwire

A REST-based backend with a JavaScript monolith on top – that’s todays de-facto standard for web applications. With Hotwire you can build much more lightweight web applications, that both inherit the advantages of SPAs and avoid their disadvantages. In this blog post we’ll give an overview of Hotwire.

Blog Post

Innovation in the web without sacrificing accessibility
Blog Post

Good arguments for SPA frameworks

I love SPAs when they are used with a clear purpose. I hate them when they are not. This blog post tries to explain my personal conflict.

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
Article

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

Moderne Frontends sollen wartbar und zukunftsfreundlich sein, unabhängig vom Gerät oder Browser gut aussehen und performant sein. Es gibt eine Reihe von Design- und Entwicklungsprinzipien, die dabei helfen, diese Ziele besser zu erreichen. Im folgenden Artikel sollen einige Prinzipien vorgestellt werden, die sich in der Praxis als tragfähig erwiesen haben. Dabei treffen wir neben alten Bekannten wie Responsive Web Design und Mobile First auch auf neuere Ansätze wie Atomic Design und Pattern Libraries.

Article

JavaScript? Yes, but in moderation

The benefits of classic architecture decisions for web applications.

Article

Wider die SPA-Fixierung

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

Article

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
Article

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
Article

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.

Article

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

Article

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
Article

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

Movacar PRO: Eine Mobile App für effiziente Fahrzeuglogistik im „Tech4Equity“- Modell

Read case study
Case Study

Proof of payment clearing and fraud detection: Krombacher is leveraging automation as part of its loyalty program

Read case study
Case Study

Spacy – A universal-design application for online events through radical simplification

Read case study