Schwerpunktthema

Frontend-Entwicklung

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

Was ist eigentlich htmx?

Nicht nur, aber vor allem im JVM-Umfeld stößt man in letzter Zeit immer wieder auf die Bibliothek htmx. Das Versprechen von htmx ist dabei nichts Geringeres, als das fehlende Puzzlestück von HTML zu sein. Deswegen wollen wir uns hier diese Bibliothek im Detail anschauen. Schließlich sollten wir in der Lage sein zu beurteilen, ob es uns in unseren Projekten hilft oder ob wir doch nach etwas anderem suchen sollten.

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
Blog-Post

Improve your CSP with Style Nonces in Angular 16

What to do, to enable your Angular application to use style-src: nonce in a CSP for stricter security rules

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

Untangling the confusion between browser defaults and JavaScript component frameworks

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.

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?
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)

Hotwire Stimulus für Progressive Enhancement mit Web Components

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
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
Artikel

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.

Artikel

JavaScript? Gern, aber bitte in Maßen

Die Vorteile eines klassischen Architekturansatzes für Web-Anwendungen

Artikel

Optionen der Frontend-Integration
Artikel

Wider die SPA-Fixierung

Die Vorteile einer klassischen Frontend-Architektur für Webanwendungen, bei der die Serverseite für das Erzeugen von HTML verantwortlich ist und JavaScript zwar erlaubt ist, aber nicht die komplette Kontrolle übernimmt, werden häufig unterschätzt. Dabei ist sie den im Moment viel gehypten, JavaScript-zentrischen Ansätzen in vielen Fällen überlegen.

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
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
Blog-Post

ROCA-Compliant Table Sorting

The article presents an easy way to enable table column sorting without JavaScript. In addition to the avoided complexity, the solution is also compliant to ROCA.

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
Blog-Post

How Browsers Load and Process JavaScript

This is a rundown of how browsers process JavaScript references within HTML.

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

Warum REST und SPAs nicht immer die Lösung sind

Blog-Post

ROCA vs. SPA

Currently, a lot of companies are migrating from Desktop applications (mostly written in Java) to Web applications for their products as well as for their internal tooling. When they start with this process they often ask themselves: Which technologies should we use to build our Web application? Should we use Angular.js or React? Or should we go with recommendations like ROCA instead of a Single Page Application?

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
Blog-Post

Frontend Dependency-Management in Rails

Im letzten Blogpost über Bower sind viele Gründe für die Verwendung eines Dependency-Management Tools für Frontend-Komponenten genannt worden. Dieser Artikel soll dort anknüpfen, wo der letzte aufgehört hat, und eine Reihe von Möglichkeiten aufzeigen, mit denen Bower in ein fremdes Ökosystem integriert werden kann. Denn in der Regel trifft ein Webframework wie Ruby on Rails oder Play! eigene Vorgaben darüber wie Frontend-Artefakte von einer Webanwendung verwaltet und ausgeliefert werden. Im Folgenden wird Rails als populärer Vertreter eines Webframeworks für einige dieser Integrations-Strategien herhalten.

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

ROCA ist ein Architekturstil zur Entwicklung anständiger und zukunftsfähiger Web-Frontends. Er umfasst eine Reihe von Empfehlungen sowohl für die Client- als auch für die Serverseite. Der ROCA-Stil erfordert von vielen Java-Entwicklern ein gewisses Umdenken. Grund genug, sich den Stil genauer anzuschauen.

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

Zur Case Study
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