Komponentenbasierte UX (User Experience) für Angular-Apps

If you previously wanted to integrate view transitions into your Angular application, this was only possible in a very cumbersome way that needed a lot of detailed knowledge about Angular internals. Now, Angular 17 introduced a feature to integrate the View Transition API with the router. In this two-part series, we will look at how to leverage the feature for route transitions and how we could use it for single-page animations.

In this article you will see how to enrich your test suite with functional and visual end-to-end tests for your Angular applications.

In a previous article, From paper sketch to a running application - Adobe XD, Storybook & Angular in action, I described the basics of writing Storybook stories and Angular components. In this follow-up, you will learn to enhance the Storybook workflow through visual testing to achieve fast feedback and development iterations. Not only does visual testing improve the overall quality and stability of your web-based software. The stakeholders also get to see something early, which means that changes are still possible in the developing process.

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 application.

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 yourself. During the development of user interfaces, it is essential to pay attention to the visualization of transitions. Without transitions, the state change of an element will happen instantly. We can achieve a better user experience with transitions if we are slowing down the changes. I am using Angular's domain-specific language (DSL) for animations to solve this issue.

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 für langfristige Projekte geeignet. Folgend werde ich meine Beispielarchitektur zur Integration vorstellen. Als Bonus gibt es noch eine Demoanwendung oben drauf. Alle gezeigten und diskutierten Inhalte sind nicht nur auf Angular und BabylonJS anwendbar, sondern gelten für alle Frameworks, die in einer ähnlichen Weise agieren.