Schwerpunktthema

JavaScript

Fachartikel, Podcasts, Vorträge und mehr zum Thema JavaScript.
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

A natural language calculator

In my prior post I’ve written about how to run a chat with a large-language-model on your PC. This time I want to focus on scripting this with Node.js and letting the AI- and the “normal”-world interact with each other.

Blog-Post

Clientseitige Speichertechnologien 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.

Artikel

Blaupausen

JavaScripts Art der Objektorientierung ist anders als die anderer Sprachen. Daran hat auch die Einführung von Klassen nichts geändert, obwohl es auf den ersten Blick so aussehen mag. So funktioniert das ungewöhnliche System.

Blog-Post

Offline with redux

A different approach to Web applications that work offline

Artikel

Dependently-Typed TypeScript

TypeScript ist eine Programmiersprache mit einigen Besonderheiten: Im Gegensatz zu den allermeisten anderen getypten Programmiersprachen wurde sie als Aufsatz für JavaScript (JS) entwickelt. Dabei hat Microsoft besonderen Wert darauf gelegt, dass sich die Sprache möglichst nahtlos in die bestehenden Ökosysteme (Node.js und Browser) integriert. Das wird dadurch erreicht, dass die TypeScript-Syntax “bloß” die Typen zu JavaScript hinzufügt und die Kompilierung aus dem Entfernen der Typannotationen besteht. Damit hat sich TypeScript zum de-facto Standard entwickelt, wenn es darum geht, typsichere Anwendungen auf JS-Basis zu bauen.

Artikel

TypeScript – Die Komplexität von JavaScript bändigen

2022 feiert TypeScript zehnjähriges Jubiläum. Anlass genug, auf die Anfänge zurückzublicken – und Einsteiger:innen alles an die Hand zu geben, was sie für die Arbeit mit der Programmiersprache brauchen.

Artikel

Der Nächste, bitte!

Wie die Event-Loop asynchronen Code im Browser ermöglicht

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.

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

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.

Podcast

JavaScript

Von der düsteren Vergangenheit in eine glorreiche Zukunft

Robert Glaser
Lucas Dohmen
Lisa Maria Moritz
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
Artikel

React: Lessons Learned

This article describes React from a backend programmers' perspective. It is not meant to be a tutorial, and it also does not present any new, fancy patterns or features. Rather, it is an interpretation of React with focus on shedding light on its functional aspects. Many experienced React developers appreciate the framework for being pragmatic, simple and easy to get work done with. This article unveils some of the theory behind this simplicity and shows how the core ideas behind the framework can be carried over to the lower levels of a Javascript application.

Blog-Post

Injecting polyfills for missing JavaScript functions into WKWebView
Podcast

TypeScript

Was sind das denn für Typen?

Lucas Dohmen
Dr. Lars Hupel
Blog-Post

Cross-platform testing of TypeScript code with Jasmine and Karma

I like TypeScript. Writing code that already underwent basic checks (i.e. typechecking) before it can even touch an execution engine is a big win in my book. In particular, TypeScript is nice because it integrates well into the broader JavaScript ecosystem and comes with batteries (i.e. types) included. Unfortunately, most test runners require extra setup to work with tests written in TypeScript. Some even require staggering amounts of configuration.

Blog-Post

Using Javascript plugins in Go

More than the sum of its parts

Blog-Post

An Introduction to TypeScript

An ongoing architecture trend towards smaller services and faster, agile feature development gives developers some freedom to try out new languages and frameworks. TypeScript and Node seem to have a bad reputation amongst some backend developers although the language can be a perfect fit for many challenges in modern software development.

Blog-Post

Animating SVG Icon Transitions

This describes options for morphing one SVG icon into another using both SMIL or CSS transforms.

Artikel

JavaScript? Gern, aber bitte in Maßen

Klassischer Architekturansatz für Webanwendungen

Blog-Post

Type checking JSX: A can of props

In this post, I’d like to describe how JSX type checking in TypeScript actually works and the problems you’re going to encounter when implementing custom, non-React JSX components.

Blog-Post

(De-)Serializing JavaScript Models with Metaprogramming

DIY abstraction for serializing and deserializing JavaScript model instances

Blog-Post

How to add Swift functions as polyfills in JavaScriptCore
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
Blog-Post

Declarative Data Transformations

This describes a declarative approach to validating and transforming inconsistently structured data.

Artikel

Blockchain hausgemacht

120 Mitarbeiterinnen und Mitarbeiter bauen eine Blockchain in 12 Sprachen. Bei INNOQ veranstalten wir jedes Jahr einen so genannten Hands-On-Event. Dieser ist Teil unserer regulären Mitarbeiter-Events und findet typischerweise im Frühjahr statt. Wir treffen uns alle für zwei Tage an einem Ort und versuchen mit der Programmiersprache unserer Wahl in Gruppen eine definierte Aufgabe zu lösen. Optimal also, um neue Sprachen und neue Kolleginnen und Kollegen in Gruppenarbeit kennenzulernen. Die Aufgabenstellung lautete in diesem Jahr: Baue eine Blockchain!

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.

Podcast

twwwr

INNOQ Digital Art 2018

Lucas Dohmen
Simon Kölsch
Artikel

Tooling für JavaScript-Frontends

Hämmer und Schraubenzieher

Blog-Post

Marrying Rails, Turbolinks and JavaScript Custom Elements

Rails 5.1 just arrived and brought with it a curated setup for webpack. Think what you want about webpack, but it’s the new default for JavaScript module loading and bundling in Rails and therefore here to stay. So here’s a quick post on how to get the new JavaScript goodness up and running with your existing Turbolinks setup.

Blog-Post

Rendering Self-Contained Custom Elements

This is a response to Paul Kinlan’s post on creating custom elements, explaining how JSX can be used for declarative templating.

Blog-Post

Progressive Web Components
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

Web Scraping mit PhantomJS-CEF

In Anlehnung an den Blogbeitrag von Martin Weck zu Beginn des Jahres, stellt Gastautor Andreas Knuth in diesem Artikel mit PhantomJS-CEF ein weiteres Tool vor, mit dem sich effizientes Web Scraping betreiben lässt.

Blog-Post

Transklusion in Self-Contained Systems
Blog-Post

Kriterien zur Bewertung von ROCA Komponenten

Mal angenommen, jemand wollte ROCA machen. Wie müssten dann JavaScript-Komponenten aussehen, die zu diesem Zweck benutzbar wären?

Artikel

Artenvielfalt

Durch Node.js hält das vielerorts als nur unzulängliche Programmiersprache belächelte JavaScript heute Einzug in die professionelle Serverprogrammierung. Doch welche Möglichkeiten die Plattform bietet und welche Entscheidungen bei ihrem Einsatz zu treffen sind, ist nicht immer einfach zu ermitteln.

Artikel

Ceylon auf der JVM und node.js

Schwarzer Tee mit syntaktischem Zucker

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.

Case Study

HILFE FÜR JUNGS: Verlässliche Software für die mobile Sprechstunde

Zur Case Study
Case Study

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

Zur Case Study