Implementing Micro Frontends Using Signal-based Web Components

Abstract

Micro frontends are an emerging architectural style that involves combining independently created frontend applications to develop a larger application. In JavaScript, the high modularity required for micro frontends can be achieved using the Web Components API, but passing data between components requires the use of event mechanisms and their corresponding callback functions, which make the code difficult to understand. In this paper, we propose using signals in reactive programming (RP) as an API to solve this problem and enable declarative dataflow, as well as maintain high modularity. To demonstrate the effectiveness of the proposed approach, we have developed a JavaScript extension that can express the web components themselves as signals and used it to implement a simple single-page application (SPA), which is then compared with the implementation using the Web Components API. We have also conducted a similar implementation in the existing reactive frontend application framework called React and argue that the implementation using signals has better modularity.