Building Scalable Web Applications with Angular, Nx, and Modern Development Practices

In this one-day workshop, you’ll learn how to harness the latest Angular and its ecosystem to build modern, scalable web applications. Starting with Nx, we’ll walk you through creating a new application in a monorepo environment, setting the foundation for efficient development. You’ll discover how to integrate state management seamlessly, implement effective architectural patterns, and employ testing strategies to ensure reliability and maintainability. Whether you’re aiming to streamline development workflows or improve scalability, this workshop will equip you with the practical tools and insights to develop robust applications that grow with your needs.

Monorepos Und Architektur mit Angular and Nx

Angular ist wie geschaffen für clientseitige Applikationen mit einer umfangreichen Architektur. Helfende Features wie Testing, Dependency Injection oder Http-Kommunikation kommen out of the box. Wenn eine Anwendung jedoch wächst und wächst, kann die Applikationen und die Architektur unhandlich werden und es wird schnell unklar, wo welches Feature in welcher Form platziert werden soll. In diesem Vortrag zeigt Fabian Gosebrink, wie man mit Nx eine Angular Architektur in einem Workspace mit einem Monorepository erstellen kann, um eine wartbare und sauber strukturierte Angular Applikation zu entwerfen. Mithilfe von Libraries, Tests und visuellen Graphen kann auch eine grosse Architektur unter Kontrolle gehalten werden. Denn grosse Angular-Apps müssen nicht schwer zu pflegen sein.

Introduce NgRx State Management in Angular - Master Class

In this intensive one-day workshop, you'll gain practical experience in bringing state management to life in an existing Angular application. We’ll guide you through the migration process step-by-step, highlighting the key differences between classic NgRx and the innovative NgRx Signal Store. You'll explore essential architectural approaches for a robust state management setup, and dive into effective testing techniques to ensure stability and maintainability. Whether you’re an Angular developer looking to streamline complex state requirements or seeking best practices for your applications, this workshop equips you with the knowledge and tools to elevate your app’s performance and maintainability.

Angular Signale: Revolution der Angular-Entwicklung

Angular mitten im Wandel. In der modernen, neuen Angular-Entwicklung spielen Signals als kleine Revolution eine zentrale Rolle. Dieser Vortrag taucht in die Welt der Signals ein, erklärt, wie sie funktionieren und warum sie die Angular-Anwendungsentwicklung revolutionieren. Wir werden die technischen Aspekte und Best Practices für den effektiven Einsatz von Angular-Signals untersuchen und schauen, wie ein Angular Applikation mit Signals aussehen kann. Dieser Vortrag ist eine unverzichtbare Ressource für alle, die ihr Wissen in der Angular-Entwicklung erweitern und die Möglichkeiten von Angular-Signals voll ausschöpfen möchten.

Angular & NgRx Signal Store – Der Weg zur effizienten State-Verwaltung

Komplexe Angular-Anwendungen kämpfen oft mit dem State-Management, was zu aufgeblähtem und ineffizientem Code führt. Der NgRx Signal Store bietet als skalierbare Lösung einen Mix aus Erweiterbarkeit, Übersichtlichkeit & Effizienz. In diesem Vortrag wird Fabian Gosebrink zeigen, wie der NgRx Signal Store Angular-Anwendungen verbessert, mit einem Fokus auf Erweiterbarkeit und bewährte Praktiken. Es wird dargelegt, wie der Store zu integrieren und zu erweitern ist, und wie der State sich von anderen NgRx-Lösungen unterscheidet. Damit ist State Management in ihren Applikationen kein Problem mehr.

Enrich your Angular App with Typed Angular Forms

In almost every Angular application, you come to the point where you need information from the user. Angular Forms are a great solution for this. Angular Forms makes it possible to get rich information about the people interacting with the page and provides many possibilities with a large variety of forms.
But user inputs even in it's obviously the simplest form can get very complex: Fields must be validated, can have complex dependencies on each other and should be testable.
In this talk, Fabian Gosebrink will look at the complexity of Angular Forms and provide solutions which he encountered after maintaining lots of projects, web apps and connected forms. The talk will look at the worst examples, complex validations and the best solutions. Hopefully in your next projects, getting your user information will be easy, well testable and easy to implement.

Statemanagement in Angular mit NgRx Stores & Effects

Angular bietet im Frontend viele Möglichkeiten, aber auch Herausforderungen. Falls eine Applikation wächst, muss man sich früher oder später mit dem Thema des States der Applikation beschäftigen. Aber was heisst "stateful" und "stateless" überhaupt? Was sind "Container Components" und "Presentation Components"? Und wie bekomme ich den Status meiner Applikation im Frontend sauber in den Griff? Tools wie ngrx können dabei helfen, unsere Applikation sauber zu designen. Gerade bei komplexen Applikationen helfen sie, den Überblick über den Status zu behalten. In diesem Workshop erfahren Sie, wie diese Tools eingesetzt werden wie sie und Ihnen helfen, auch grosse Applikationen mit Angular zu bewältigen.

Real time messaging with Angular and ASP.NET Core SignalR

Getting your data into your Angular application via a REST API is one of the essential things while developing and app. But what if the server could also push messages into your angular applications without reloading the whole page? In this session Fabian Gosebrink shows how to use real time synchronization with ASP.NET Core SignalR in an Angular application. With SignalR you can keep your customers applications in sync and display updates immediately.

JavaScript Testing leicht gemacht am Beispiel von Angular

Immer wieder wird das Testing im Frontend auf die lange Bank geschoben. Dabei ist es für eine moderne Businessapplikation auch im Frontend unausweichlich, vernünftige Tests zu schreiben. Bei der Entwicklung von Angular gehörte die Testbarkeit von Anfang an zum Konzept. In diesem Workshop zeigt Fabian Gosebrink, wie man seine Angular-Applikationen auf Herz und Nieren testen kann. Es wird ein Blick auf die Tools und auf die verschiedenen Möglichkeiten von Testing geworfen, damit am Ende kein Fall mehr ungetestet bleibt.

Erstellen von WebAPIs mit ASP.NET Core

In verteilten Anwendungen spielt das Backend eine entscheidende Rolle und die Entwicklung des Backends ist ein eigener Bereich geworden. Es sollte schnell und einfach zu benutzen sein, die Daten für das Frontend bereit stellen und gut dokumentiert sein. In diesem Talk von Fabian Gosebrink hören Sie nicht nur, wie Sie eine RESTful WebAPI mit ASP.NET Core erstellen. Sie erfahren ausserdem praxisnah, wie Sie diese mithilfe von Tools dokumentieren und nützlichen Features erweitern können. Damit am Ende ein sauberes Backend entsteht, das von überall aus benutzt werden kann.

Cross-Plattform-Applications with Angular, Electron and Cordova

Angular provides web developers a platform where applications can be written not only for the web. Mobile devices such as smartphones or tablets as well as the desktop also consume line of business (LOB) apps and are indispensable. Once the angular code has been written, it doesn't take much to port the application to the smartphone or desktop. In this talk Fabian Gosebrink shows how an existing angular application can be ported to a mobile device with a few steps using Cordova and how native features can also be used. With Electron, the desktop is also used as a platform, so that at the end a code base can serve all platforms and the application can be used via any end device.

Architecting Angular Applications with Angular Libraries

Angular offers a large ecosystem when it comes to separation and architecture of your application. There are often pieces of code that you don't just want to reuse within your application, but to make available to other applications in your organization or via package managers like npm over the Internet. This is where angular libraries come into play. In this talk, Fabian Gosebrink explores the way Angular Libraries are built, what the Angular Package format is good for, and how we can move code from an existing application to an Angular Library to reuse the code across multiple applications. This makes scaling and the architecture of angular applications a breeze.

Angular Testing made easy with Jasmine, Karma and Cypress

Time and again, the testing in the frontend is put on the back burner. For a modern business application it is inevitable to write reasonable tests in the frontend as well. When developing Angular, testability was part of the concept right from the start. In this workshop Fabian Gosebrink shows how to put his Angular applications through their paces. A look is taken at the tools and the different possibilities of testing, so that no case is left untested in the end.

HOld this talk as a workshop two times at the AngularDays in Switzerland and will hold it on the BASTA! in Germany.

State management with NgRx Stores and Effects

Angular offers you nearly endless possibilities in frontend but with great power comes great responsibility. If an application grows we sooner or later have to face the question of state management on clinet side. But what is state exactly? And what does "stateful" and "stateless" mean? And How can I manage the state of my application in a nice and clean way? Tools like NgRx with stores and effects can help us to design our application in a very lightweight and beautiful way. In this talk Fabian Gosebrink will shed a light on how to use NgRx with stores and seperate effects so that we do not have to fear big angular architectures again.

Detecting and solving pain points in Angular Applications

Starting any Angular Project is easy. AngularCLI provides a great user API, scaffolding is powerful, and the first pages, components are easy to create. But when the application grows you and your team can run into a lot of problems when developing, architecting and maintaining a single page application.
Suddenly the architecture gets unmaintainable, dividing the application in logical parts is a challenge and implementing asynchronous operations is hard. Handling the application state and including third party libraries in a proper manner becomes a real challenge. In this talk Fabian Gosebrink shows typical tasks, problems and solutions for mistakes which can be found in Angular applications. We will look at different problems, understand the challenge and develop a solution for common mistakes in Angular solutions so that your next project doesn't end with "If only somebody told me this before I started my Angular SPA"

Enrich your Angular App with Angular Forms

In almost every Angular application you come to the point where you need information from the user. Angular Forms is a great solution for this. Angular Forms makes it possible to get rich information about the people interacting with the page and provides many possibilities with a large variety of forms.
But user inputs even in its obviously simplest form can get very complex: Fields must be validated, can have complex dependencies on each other and should be testable.
In this talk Fabian Gosebrink will look at the complexity of Angular Forms and provide solutions which he encountered after maintaining lots of projects, web apps and connected forms. The talk will look at the worst examples, complex validations and the best solutions. Hopefully in your next projects, getting your user information will be easy, well testable and easy to implement.

Taking your Angular app to the next level with Progressive Web Apps

Angular Apps in the web are nothing spectacular anymore for us. We create apps, we upload and host them and enjoy them working when being online. But to provide users the best experience we also have to take care of the fact that the user can be offline, and our application should still be working flawlessly. Our users may want a mobile app, too which provies the same functionality with the same look and feel like our webapp has! In this talk Fabian Gosebrink describes how we can turn our Angular application into a Progressive Web App to be offline available, how we can use the todays mechanisms and techniques to provide the best functionality for our users with push notifications or background sync. We will see how we can create a (PWA) which is installable on desktop and mobile devices and have an app experience with our existing Angular codebase.

Creating modern WebAPIS with ASP.NET Core

In distributed applications, the backend plays a decisive role and the development of the backend has become a separate area. It should be quick and easy to use, provide data for the frontend, and be well documented. In this talk by Fabian Gosebrink you will not only hear how to create a RESTful WebAPI with ASP.NET Core in the latest version. You will also learn how to document them with tools and how to extend them with useful features. The end result is a clean backend that can be used from anywhere.

Nx-Workspace - Simplified Scaling for Large Angular Projects

Die Ausführung des Production-Builds und der Tests dauert immer länger. Es braucht mehr und mehr Zeit, die richtige Komponente oder den gewünschte Service zu finden, der Aufwand für das On-Boarding neuer Kollegen wächst. Was sagt Euch das? Richtig, ihr arbeitet an einem großen Angular-Projekt - nicht mehr, nicht weniger. Wenn die Komplexität eines Projekts stark wächst, braucht es eines: Fokus auf die wesentlichen Dinge ohne wiederholtes, manuelles Tunen der CI/CD-Pipeline. NX bietet Lösungen für das Erweitern, Prüfen und Veröffentlichen eures Angular Projekts. In diesem Talk erfahrt ihr, wie ihr mit NX mehrere Builds und Unit- & UI-Tests organisiert. Ihr werden NX’s Erweiterungen für zentrales State-Management in Aktion erleben. Außerdem seht ihr die Integration von StoryBook in Nx für lebende und aktuelle Dokumentation Ihrer Komponentenbibliothek. Als weiteres Werkzeug lernt ihr die Workspace-Schematics kennen, mit denen ihr den Entwicklungsprozess weiter automatisieren könnt.

Realtime Cross-Platform-Applikationen mit Angular, ASP.NET Core and SignalR

Verteilte Systeme mit eigenem Front- und Backend werden dann richtig interessant, wenn man das Frontend mit dem gleichem Code für mobile Systeme, Desktop und Web bereitstellen kann und dabei das gleiche Backend konsumiert. Mit Angular und ASP.NET haben wir Plattformen, die dies ermöglichen. Mit Hilfe von SignalR lassen sich die verschiedenen Frontend-Applikationen miteinander synchronisieren und somit immer auf dem neuesten Stand halten. Dieser Talk erklärt, wie Sie eine Frontend-Applikation schreiben, diese auf mobile Endgeräte und den Desktop portieren und über ein ASP.NET-Core-Backend mit Hilfe von SignalR synchronisieren. Und all das mit einer Codebasis!

Securing your Angular App with Auth0

One of the biggest problems of applications in distributed systems is authentication and authorization and ensuring that users see the correct data. Securing Angular applications on the web can be complex due to the endless possibilities and solutions for this. Most APIs that offer data should be secured. Auth0 is a cloud identity provider that makes it possible to outsource the complete user accounting and provides OpenID Connect client APPs for tech stacks like Angular as well as any APIs, for example implemented with ASP.NET Core. In this talk, Fabian Gosebrink shows how you could secure an Angular App with Auth0, how a user can sign in and how data can be securely requested from an ASP.NET Core API. After this talk, modern security with Angular and ASP.NET Core should be no longer a problem for your project.