InnoQ defines six patterns for web frontend integration

InnoQ consultants Tammo van Lessen and Till Schulte-Körne developed a taxonomy of six patterns for web frontend integration, presented at the Europlop conference at Kloster Irsee. The patterns include Hyperlinks, including Return-URIs for navigation; Transklusion, involving server-side or client-side HTML fragment injection; iFrames, which provide isolated browser contexts; Self-Contained Components, using Web Components with Custom Elements and Shadow DOM for styling isolation; and Plug-in Modules, which involve runtime loading of framework-specific modules via Module Federation. The authors define frontend integration as a provider exposing a UI fragment for runtime integration by another system, emphasizing loose coupling and team autonomy.

Key forces in this architecture include team independence, UX consistency, and authentication complexity. The authors argue that while AI agents may enable monolithic single-page apps by generating disposable frontends over secure backend APIs, architectural decisions remain binding for multi-system integrations. The paper serves as a reference for choosing integration strategies based on coupling strength and autonomy requirements. The authors maintain that frontend integration patterns are essential for maintaining team autonomy and loose coupling in distributed systems, and that explicit architectural choices for integration remain critical despite potential shifts toward monolithic UIs driven by AI.