c't < webdev >

In this interactive hands-on workshop, you’ll dive deep into the development of modern AI applications using Node.js. Together, we’ll build a sophisticated application step by step, leveraging the power of LangChain and LangGraph. You’ll learn how to implement a modular architecture for your AI projects and how to handle complex tasks by intelligently chaining components with LangChain.

The workshop covers the seamless integration of Large Language Models (LLMs) and how to extend their capabilities through tool-calling to interact with external systems and data sources. With LangGraph, we’ll take it a step further by implementing dynamic logic such as loops and conditional executions to build adaptive, stateful AI agents. You’ll also learn how to create standardized interfaces on both the client and server side using the Model Context Protocol (MCP), and how to integrate them into your host application.

Learn how Nielsen's timeless 10 usability heuristics can revolutionize your web interfaces.

In this full-day hands-on workshop, we'll dive deep into these fundamental principles that still form the backbone of every usability evaluation. During the morning session, we'll explore the theoretical foundation and understand how these heuristics impact user experience.

The afternoon gets practical: In small groups, you'll analyze real applications using these heuristics and conduct initial usability tests. Together, we'll reflect on the method's strengths and limitations - where are heuristics particularly valuable and where do they reach their limits? You'll also discover how just 5 test users can uncover the most critical usability issues.

Webcomponents are... well, what are they actually? The basics seem simple enough, the promise is grand, yet there doesn't seem to be that much interest compared to frameworks.

And recently there has even been a bit of resistance from prominent figures.

So, should you give up on the promise of webcomponents? Is the resistance justified?

In this workshop we'll build a few webcomponents, learn a few tricks (or more) along the way and explore where the platform can help us and what should best be left to frameworks.

In this hands-on workshop, you'll learn the fundamentals of web security through real-world scenarios and current best practices. We’ll start with the OWASP Top 10 and take a deep dive into common vulnerabilities such as injection attacks (e.g., XSS, SQL Injection), Cross-Site Request Forgery (CSRF), authentication failures, and broken access control – with a special focus on the risks surrounding access tokens and OAuth.

Of course, it's not just about the attacks – we’ll place a strong emphasis on effective defense strategies:

• Secure data handling through sanitization
• Implementing a Content Security Policy
• Secure cookie usage and proper attribute settings
• Validating access tokens correctly

What makes this workshop special: you’ll immediately put your knowledge into action! Using hands-on examples in an Angular application, you'll get to try out and apply the concepts live.

This workshop is ideal for developers looking to better protect their applications against security vulnerabilities and provides a solid foundation for securing modern web applications.

AI-powered coding tools like GitHub Copilot, Cursor, bolt.new, and v0 are rapidly changing software development. They write code, suggest optimizations, and automate entire workflows – but what does this mean for us as developers?

Is the role of software developers at risk, or does AI open up new opportunities? This keynote explores how AI coding tools are reshaping our daily work, which skills will be essential in the future, and how you can future-proof your career. Discover how to leverage AI to work more productively, increase your value, and actively shape your professional path.

Many AI applications today are still limited to chat interfaces directly connected to a Large Language Model (LLM). This talk explores how the full potential of AI agents goes far beyond these basic chatbot implementations. You’ll learn how thoughtful architectures and specialized tools in JavaScript like LangChain or LangGraph enable the development of more complex and autonomous AI solutions.
Through concrete, practical examples, real-world use cases will be demonstrated—showcasing how AI agents can be applied to solve real problems, from intelligent data analysis and preparation, to automated multi-step workflows, and even proactive assistant systems. Discover how leveraging the right frameworks and design principles can significantly expand the capabilities of your AI applications. The goal is to equip and inspire you to think beyond traditional chat apps and design the next generation of intelligent, action-oriented agents for your projects.

Frontend developers strive to deliver smooth user experiences, but security is often sacrificed for functionality.
In this talk, we take a close look at JSON Web Tokens (JWT) and the risks of storing them in the frontend – from token theft to session hijacking.
Through hands-on examples, you'll learn why this practice is insecure and how the Backend-for-Frontends (BFF) architecture can help protect your application. You'll be convinced to ban JWTs from the frontend and will walk away with practical strategies to boost your app's security without compromising performance.

Several strategies exist for the migration of legacy applications and a complete greenfield rebuild from scratch is not always recommended. The talk presents the different 5R strategies (retire, replace, rehost, retain, reengineer) for legacy migration and makes a comparison with their advantages and drawbacks. Special characteristics of the strategies for a migration to the cloud (e.g. lift & shift) are also considered.

A strategy for itself will not be enough to master the challenges of legacy migration. Dependencies to other applications are sometimes ignored when the strategy is chosen and often it is necessary to prepare the application to meet the preconditions for the migration. At this point concrete tactics or patterns are used to convert the strategy to a successful project. Some tactics are the usage of bridging technologies or the layer-based approach for an iterative modernization of the complete application. The strangler fig pattern is quite popular for the stepwise migration of legacy applications. The talk presents concrete examples from successful migration projects for these and other tactics and patterns.

"Your solution sucks!" We've all heard something like this at work. How did it make you feel? And the last time you needed to criticize a colleague's work, did you handle it as skillfully as you could have?

In this practical session, Vicky examines the psychological mechanisms that make giving and receiving criticism so challenging, especially in technical environments where different teams must collaborate.

She offers effective strategies to deliver honest feedback without damaging relationships. Whether you're struggling to speak up to authority figures or looking to create a culture where constructive criticism thrives, you'll leave with techniques you can apply immediately.

Hypermedia frameworks like htmx or Unpoly are positioning themselves as simpler alternatives to single-page applications. Yet many of us recall earlier server-rendered experiences as slow, cumbersome and limited. Can hypermedia apps really meet the needs we've come to expect SPA frameworks to handle for us?

But just as modern React is unrecognizable from its early days, hypermedia frameworks have improved radically over the last decade. Today's server-rendered approaches effectively handle UI problems traditionally thought to require extensive client-side scripting. At the same time, hypermedia apps have some surprising limitations that you might not even have on your radar.

In my talk, I want to help you decide whether adopting hypermedia makes sense for your project, especially if your experience is mostly with SPAs.

I will address questions frontend developers typically have:

• Is it possible to achieve the same responsiveness that users have come to expect from SPAs?
• How would dynamic forms with dependent fields and inline validation work without extensive JavaScript?
• Can server-side rendering manage intricate UI interactions, such as multi-step modals, optimistic rendering, and client-side state preservation?
• Where does state go when I don't have components on the client?

I want to show where SPAs still have an edge, in particular with highly interactive, offline-first applications and with their ecosystem of pre-built component libraries.

The talk will feature examples from the Unpoly hypermedia framework, which has many parallels to htmx. But where htmx emphasizes minimalism and simplicity, Unpoly aims for a high-level API that supports SPA-like interactivity out of the box. I'll show how Unpoly:

• ... updates page fragments to preserve client-side state.
• ... handles forms with complex dependencies and concurrent input.
• ... handles flaky internet connections with caching, preloading and offline events.
• ... implements multi-page interactions within overlays, then returns to the background page with additional context.
• ... makes long-loading interactions appear more responsive through optimistic UI updates.

We will also explore why "just using the platform" without a framework often falls short. While the minimalism of avoiding frameworks entirely seems appealing at first, platform APIs are often too low-level to support robust UIs without substantial custom code.

After ten years of building both hypermedia apps and SPAs, I'm eager to share what works and what doesn't. I hope that by the end of my talk you'll know all the trade-offs to decide when hypermedia can simplify your stack, and when an SPA remains the better fit.

Have you ever discussed with your colleagues whether a particular test makes sense? Me too, and sometimes it was difficult to find common ground.

In this interactive format, the “Four Pillars of a Good Test” by Vladimir Khorikov are presented. These four pillars provide us with clear criteria to evaluate the value of tests more objectively and to have an informed discussion about them.

We will first look at the individual pillars and then work in small groups to classify and evaluate specific tests based on these criteria. The aim is to develop a better understanding and a common language for the question: “How valuable is this test?”

In an era of complicated frontend architectures, we took a different approach in a web application: Embracing web standards, server-rendered HTML, and minimal JavaScript. We managed to build a robust, user-friendly interface using "boring" but powerful web technologies. Our approach without a system of distributed microservices broke traditional silos and enabled developers to own full-stack features and with that accelerated prototyping.

In our talk you will learn about our experiences along the way and how returning to core web principles and working with a design engineering mindset can create more maintainable, performant and user-centric interfaces.

In this talk, we dive into the world of reactivity. Starting from Excel, through Knockout.js, and up to modern frameworks like Vue, Solid, or Angular. Over the past years, one concept has stood out: Signals.

We’ll look under the hood to see how Signals work. To do this, we’ll develop a simplified version together and, along the way, discover not only the brilliance and simplicity of this architecture but also its pitfalls.

This talk is aimed at all frontend developers who want to gain a deeper understanding of modern frameworks. This knowledge enables you to write better, more performant, and more robust code.

In projects with hundreds of thousands of lines, it is easy to lose track of code, architecture and quality. Are we still on the right track, are we blocking ourselves with internal dependencies, or are we already stuck? Software is immaterial, we cannot see how it is doing.

In this talk, we will therefore look at the forensic techniques and tools we can use to make the quality of code and architecture tangible. The tools extract quantitative information from code, architecture, git history, and the technique qualify these results. Put together we have accurate picture where we stand. This also support us in having a dialog with non-technical stakeholders at eye level about the required quality.

Some of the techniques we will look at in-depth are Quality Views and feature injection. The forensic tools include the open-source tool CodeCharta and CodeGraph.

The notion that a person uses only a small percentage percent of their brain may be a myth... but developers do, in fact, not use close to all that JavaScript has to offer! The ECMAScript specifications are full of hidden gems that can be very useful under (very) specific circumstances, yet next to nobody ever uses them, making developer's lives harder than they need to be. But do not worry — this session is here to help!

This talk is a whirlwind tour through absolutely unknown JavaScript features, with a focus on recent-ish additions to the ECMAScript standard. We investigate the garbage collection semantics of revocable Proxies (a subtype of the already under-utilized proxy API), explore the magic of meta properties, build a message passing protocol out of transferable objects (plus a tiny bit of rules lawyering) and gently stretch the semantics of class constructors — just to see what happens.

This session aims to drag a few unknown JavaScript features into the limelight and empower developers to solve some of the more esoteric challenges that can crop up in web development.

This keynote takes you on a provocative journey through the evolution of User Experience, starting with key milestones in UX history before examining today's landscape. We'll explore amusing examples of overly ambitious UX concepts alongside life-saving implementations that demonstrate how essential thoughtful design becomes in truly critical situations.

Looking toward the future, we'll examine why UX is becoming increasingly important – spanning AI interfaces and the ethical questions of human-machine interaction. This talk delivers an entertaining yet profound analysis of why good UX is far more than just "nice to have" and explores the responsibility we carry as designers of our digital world.

Through spectacular failures and inspiring successes, this presentation demonstrates why UX matters more than ever in today's complex technological landscape.

As web applications evolve to include intelligent, adaptive behavior—from AI-generated suggestions to real-time task assistance—the need for structured, standardized interaction between agents and user interfaces is becoming critical. Relying on ad hoc APIs or closed SDKs leads to brittle integrations, limited extensibility, and inconsistent UX patterns. This talk introduces two open protocols — AG-UI (Agent-User Interaction Protocol) and MCP (Model Context Protocol) — designed to bring clarity, modularity, and interoperability to the way agents interact with modern web frontends.
MCP's enable dynamic context hydration and semantic grounding, allowing agents to operate on structured and unstructured inputs tailored to specific tasks. AG-UI specifies how agents exchange intents, updates, and feedback with the user interface in real time. Together, they provide a consistent way to connect agents with UI components across frameworks like Angular, React, Vue, or vanilla JavaScript.
You’ll see how these protocols can be applied in real-world frontend code to build intelligent, user-facing features — without relying on deeply coupled integrations. This session is aimed at developers who want to integrate AI in a way that’s modular, testable, and understandable.

Is VibeCoding the new hot stuff? What happens when users without any programming skills start jamming with AI or throw the entire spec into the magic machine at once? We've seen it—the "code of horror."

Is AI now completely useless for professional software development? We don’t think so. A brief demo will show how we manage to retain control using iterative prompting and test-driven development (TDD). And yes, it doesn't work entirely without programming knowledge...

CSS is a basic requirement on most job applications and many people would think that as long as you know about classes, ids and selectors you're good, right? That one person that knows about pseudo-elements? The go-to contact when it comes to CSS at your company. Okay, maybe I'm exaggerating a bit here but the truth is that CSS has a lot of features most people simply don't know about. In this talk we'll take a look at some of the most useful things that have been added to CSS over the past years that can possibly eliminate quite a bit of JS.

Since the end of June 2025, many products have to be accessible. Larger products often use component systems whose smallest building blocks are web components. And these, of course, must also be accessible.
In this talk, you'll learn which technical pitfalls to look out for. We'll explore the oddities of the Shadow DOM and look at component semantics. A complete implementation also includes tests—and there are a few things to consider here, too. Finally, we'll look at how we can document the accessible use of our components.

Frameworks solved real problems – but also created new ones: unreadable markup, massive build chains, and teams that no longer understand how the browser works.

This talk is about undoing that damage. It's a journey back to the basics – not out of nostalgia, but as strategy. We'll explore how browser-native capabilities: HTML, CSS, JavaScript, Web APIs, the Web Platform's built-in patterns – can deliver fast, modern, and maintainable experiences without the overhead.

We'll also look at the power of the browser itself: DevTools, live editing, and the ability to inspect and understand your site in seconds. Framework-heavy apps make this nearly impossible. In contrast, framework-free sites bring back real inspectability, rapid debugging, and a “view source” culture that's both empowering and educational.

And here's the reality: we don't control the browser and device our software runs on. It could be slow, old, tiny, touch-only, or painfully underpowered. The less we ask of the client, the more users we reach. It's time to get better on the server and let the client do less.

Fewer dependencies. More control. Better performance. Real understanding.

Let's build like we trust the browser again.

Manual testing doesn't sound sexy, but it's unfortunately necessary for accessibility. Only some of the issues can be detected automatically; we have to fix the rest ourselves.
I'll take you on a journey through the land of barriers. In a live demo, we will look at how to find dead ends for keyboard users, how to identify contrast problems, spot structural errors, and much more.
The session gives you an insight into the most important points and serves as a starting point for your own manual tests.

For years, tools like Rollup and ESLint have been part of our workflows. But whether you love or hate the linter screaming at you, or your build running while you grab a coffee, these tools hardly meet the scale and speed demands of modern development, especially in the enterprise. As apps grow and expectations rise, our build chains are starting to show their age.

Enter a new wave of tools like Rolldown and Oxc, designed from the ground up for performance, simplicity, and modern use cases, often written in systems languages like Rust or Go.
Never heard of these tools? Perfect, this talk is for you then!

We’ll dive knee-deep into some of the new tools and explore how they aim to replace familiar solutions, often with low effort and more speed. We’ll also look at whether they’re ready to form the foundation of the next-gen frontend stack, no matter which framework you use.

Expect practical takeaways, real-world performance and DX examples, and actionable advice on how to integrate these tools today to speed up your development workflow.