Latest Articles

RxJS
RxJS von Grund auf: Einführung in reaktives JavaScript vom 11.11.20 [Webinar]
Recording des RxJS-Webinars Inhalte Warum Streams? Asynchronität und das Observer Pattern Arbeiten mit RxJS Unsubscriben und Completen Lernen, sich bei RxJS selbst zu helfen Q&A Links Alle Operatoren, inklusive Beispielen Visuelle Darstellung mancher Operatoren Schnell umgesetzte…
Yannick Baron
Web Components
Web Components – das Ende der SPA-Framework-Ära? vom 28.10.20 [Webinar]
Web Components – ein Begriff, den wir immer öfter hören und lesen werden. Dahinter stehen die Technologien Custom Elements, Shadow DOM und HTML Templates. Zusammen ergeben sie ein natives Komponentenmodell für unseren Browser. Es hilft uns, wiederverwendbare UI-Komponenten zu…
Manuel Rauber
BabylonJS
3D-Visualisierung im Web mit BabylonJS vom 21.10.20 [Webinar]
Im Webinar am 21. Oktober zeigt Max Schulte anhand einer Angular-Anwendung, Kernaspekte und Wege sowie einen Architekturansatz, um neue Visualisierungs- und Bedienmöglichkeiten in Ihre Anwendung integrieren zu können. Sie lernen die kritischen Unterschiede zwischen einem SPA…
Max Schulte
PWA
Additional Approaches: Advanced Progressive Web Apps - Push Notifications Under Control - Part 4
In the previous parts of this article series, we learned that Apple does not support the standardized web-based push mechanisms, and there is no sign of a possible timeline for implementation. Therefore we have to look at additional ways to bring the users' attention back to our…
Christian Liebel
Angular
Eine Angular-Anwendung offline nehmen: Herausforderung von "online" zu "offline"
"Bitte prüfen Sie, ob eine Verbindung zum Internet vorhanden ist" - ein Satz, den wir alle kennen, wenn wir eine Anwendung nutzen wollen, die nicht offline verfügbar ist. In diesem Artikel zeigen wir, wie man eine bestehende (Angular-) Anwendung und ihre Daten offline nehmen kann…
Thomas Hilzendegen
PWA
PWA Deep Dive: Offlineanwendungen im Griff [Webinar]
Christian hat in seinem Webinar am 18. September 2020 über Progressive Web Apps die Offline-Fähigkeit in den Mittelpunkt gerückt - denn: zentrale Eigenschaft jeder Progressive Web App (PWA) ist die Verbindungsunabhängigkeit. Dank dem Service Worker funktioniert die App auch dann…
Christian Liebel
SignalR
ASP.NET Core SignalR: Absicherung der Echtzeitkommunikation - Teil 2
Im ersten Teil der Artikelserie haben wir uns den generellen Verbindungsaufbau und Datenaustausch zwischen Client und Server mithilfe von SignalR angeschaut. Im zweiten Teil widmen wir uns nun der Absicherung unserer Echtzeitkommunikation. Ich zeige euch, wie ihr durch kleine…
Patrick Jahr
PWA
Speed up Your Angular PWA Development with Ionic’s Capacitor
Progressive Web Apps (PWA) are one of the most promising new technologies for the web. They enable web apps to be used similar to native apps: they can be installed on the home screen and, with some additional work, also run offline. Apart from that, you also need access to…
Max Schulte
SignalR
ASP.NET Core SignalR: Echtzeitkommunikation in Action - Teil 1
ASP.NET Core SignalR vereinfacht die Implementierung einer bidirektionalen Echtzeitkommunikation zwischen Server und Clients. In dieser kleinen Artikelserie, möchte ich anhand einer Demoanwendung zeigen, wie eine Echtzeitkommunikation mit Hilfe von SignalR aufgebaut und…
Patrick Jahr
PWA
HTTP Web Push: Advanced Progressive Web Apps - Push Notifications under Control - Part 3
The third part of the PWA push notification series will take a closer look at the HTTP Web Push protocol. If you want to learn more about the Notifications API or the Push API, check out the first two parts. Article Series Notifications API Push API HTTP Web Push ⬅ Additional…
Christian Liebel
Web Components
Creating Web Components With Modern SPA frameworks - Angular, React, and Vue.js
You might have read the article series about Web Components in which we talked about the advantages and disadvantages of Web Components in detail and how they are integrable in modern SPA frameworks. This article focuses on how you can create Web Components using a modern SPA…
Manuel Rauber
Angular
Adobe XD, Storybook & Angular in Action - From Paper Sketch to a Running Application
In this article, I will show you how to design and develop application components for a SPA. We will start of from a paper sketch, head over to a designer tool, like Adobe XD, followed by an interactive testing environment, like Storybook, to finally result in a running Angular…
Konstantin Denerz
Web Components
Data Sharing & Framework Integration: Perks & Flaws Series - Part 4
In this four part article series, we are exploring the perks, flaws, and current standards of forming Web Components. This last article will teach you how Web Components can share data and services, and which role frameworks play. Article Series The Motivation for using Web…
Manuel Rauber
Angular
Angular für XAML-Entwickler vom 10.06.20 [Webinar]
Recording des Angular-Webinars Inhalte: Templating und Data Binding Benutzerdefinierte Steuerelemente Datenhaltung Dependency Injection Reaktive Programmierung Debugging Links: Code Sample: Angular-Beispie Code Sample: WPF-Beispiel Kostenloses Ebook "Angular für XAML…
Christian Liebel
BabylonJS
3D-Visualisierung in Web Apps – Angular und BabylonJS in Symbiose vom 13.05.20 [Webinar]
Recording des 3D-Visualisierungs-Webinars Links: Repository Demo-Anwendung Slidedeck zum 3D-Visualisierungs-Webinar
Max Schulte
Web Components
The Flaws of Web Components (and possible solutions): Perks & Flaws Series - Part 3
The first article of this series introduced into the motivation for using Web Components. After looking at the perks in the second part, we are going to learn about the flaws of Web Components in this article. Please note that with the on-going development of the standards, some…
Manuel Rauber
Angular
Creating Expressive Toast Components with Angular Animations
In some of my recent projects, I have experienced the need and requirements for better user experience by incorporating animations into Angular-based user interfaces. In this article, I am showing you how you can create an expressive toast component with Angular animations…
Konstantin Denerz
Web Components
The Motivation for Using Web Components, an Introduction: Perks & Flaws Series - Part 1
Web Components - a term you most probably hear regularly in recent times as a web developer. With the standards of Shadow DOM, HTML Custom Elements, HTML Templates, and, in former times, HTML Imports, there finally is a native component model within the browser. In this four-part…
Manuel Rauber
Web Components
The Perks of Web Components: Perks & Flaws Series - Part 2
In the introduction article to this series, I wrote about the motivation, why to use Web Components. Now we are going to take a closer look at the perks of using them - from a technical and business point of view. If you are interested in all technical features of Web Components…
Manuel Rauber
Angular
Nachladen von Angular-Modulen: Eigene Lösung mit Web Components Custom Elements - Teil 3
Diese Artikelserie beschäftigt sich mit dem dynamischen Nachladen von Angular-Modulen. Der letzte Artikel der Serie beschreibt einen Weg des Nachladens mit der Berücksichtigung eines Berechtigungskonzeptes. Die Kommunikation zwischen den dynamischen Modulen und der Hauptanwendung…
Konstantin Denerz
BabylonJS
Architekturlösung für die Integration von Angular und BayblonJS - Demo und Integrationsbeispiele
In diesem Artikel werde ich zeigen wie Angular und BabylonJS erfolgreich und zukunftssicher integriert werden. Beide Frameworks – Angular als Business-Application-Framework und BabylonJS als Graphics-Engine – sind auf dem jeweiligen Gebiet gestandene Beispiele und damit perfekt…
Max Schulte
Angular
Nachladen von Angular-Modulen: Einführung & Use Cases - Teil 1
Eine hohe Performance und die Sicherheit von Webapplikationen ist für jeden Entwickler ein Dauerthema. Unter JavaScript ist es möglich, für eine hohe Performance nur die gerade benötigten oder wegen der Sicherheit nur die erlaubten Teile der Applikation zu laden. Diese…
Konstantin Denerz
Angular
Nachladen von Angular-Modulen: Lazy Modules und Routen - Teil 2
Diese Artikelserie beschäftigt sich mit dem dynamischen Nachladen von Angular-Modulen. Im zweiten Teil der Serie erfahren Sie wie die initiale Lade- und Start-Performance durch das Nachladen mit Angular Router optimiert werden kann. Die im Artikel referenzierte Demo-Anwendung…
Konstantin Denerz
PWA
Push API: Advanced Progressive Web Apps - Push Notifications Under Control - Part 2
This part of our article series on PWA push notifications focuses on the Push API that deals with creating push subscriptions and receiving push messages. If you want to learn more about web-based notifications in general, check out the first part of our series on the…
Christian Liebel
BabylonJS
Performance optimization: Integrating BabylonJS 3D engine into an Angular business application - Part 2
Welcome to the second part of this blog post series. If you want to learn how to basically integrate BabylonJS into Angular (or vice versa) please take a look at part 1. In this post, our goal is to make your application and the interactions fast! Article Series Integration…
Max Schulte
PWA
Notifications API: Advanced Progressive Web Apps - Push notifications under control - Part 1
For sure, Progressive Web Apps (PWA) are one of the hottest topics on the web today. A PWA should feel like a real app, including the ability to show push notifications. In this blog series, you will learn how to implement push messaging in your PWA or website using the Push API…
Christian Liebel
BabylonJS
Integration Basics: Integrating BabylonJS 3D Engine Into an Angular Business Application - Part 1
In this two parts article, I will demonstrate how easy it can be to integrate a 3D engine like BabylonJS into a business application built with a SPA framework like Angular. You will see how those two frameworks can interact with each other and where possible performance pitfalls…
Max Schulte
Blazor
Re-Using Angular components in a Blazor WebAssembly application using Angular Elements - Web Components custom elements, FTW!
Microsoft's Blazor WebAssembly toolkit is one of the new kids on the block in WebAssembly land. For many developers WebAssembly (or WASM) is the origin for a new revolution in the web. We can finally(?) use other languages and frameworks than JavaScript to run applications in a…
Christian Weyer
RxJS
RxJS in Angular - Antipattern 2 - Stateful Streams
This is the second part of a small series, in which I want to share some pitfalls we discovered multiple times in code reviews over the years, as well a few patterns we identified as helpful. In the first part we discussed how nesting subscriptions can be harmful. Stateful…
Yannick Baron
RxJS
RxJS in Angular - Single result data streams and async pipe
In the first and second part of this small series, we have discussed implementations that have flaws and can introduce side-effects to our data flow. We have learned how combining our streams and modeling our our data flow to yield a single result helped with solving the…
Yannick Baron
RxJS
RxJS in Angular - Antipattern 1 - Nested subscriptions
Working on numerous Angular projects over the past couple of years, it has become evident, that a lot of developers still have a hard time working with RxJS which finds its use in Angular. While RxJS is a very powerful tool, it comes with a lot of operators and a whole paradigm…
Yannick Baron
Angular
Mimicking $interpolate - An Angular 2 interpolation service
In an Angular 1 application we have been creating for one of our customers we used the $interpolate service to build a simple templating engine. The user was able to create snippets with placeholders within the web application to use these message fragments to compose an email to…
Pawel Gerr