Implementing Micro Front End Architecture: Vue.Js' Diversified Strategy

Abstract

This paper presents an in - depth exploration of micro - frontend architectures, a burgeoning methodology designed to address the complexities and scalability challenges inherent in large - scale web application development. As digital projects expand, they often become unwieldy, with increased build times, extensive unit testing requirements, and larger team sizes, all of which contribute to maintenance and collaboration difficulties. This research argues for the subdivision of monolithic applications into smaller, more manageable projects, facilitated by micro - frontends, to enhance team performance and accelerate product delivery to end - users. However, the integration of numerous features within a single application can complicate the division into smaller projects and teams. Micro - frontends emerge as a strategic solution to this dilemma, not as a framework or library, but as an architectural approach that divides large applications into manageable segments. These segments, or micro - frontends, are then orchestrated to appear as a cohesive application to the end - user. The paper outlines eight distinct strategies for implementing micro - frontends, regardless of the underlying technology: Webpack Module Federation, Iframes, NGINX, Web Components, React Component Libraries, Monorepos, Utilization of Frameworks, and Custom Orchestrators. Through a high - level architectural overview, this study sets the stage for a series of detailed analyses on each approach, aimed at providing a comprehensive framework for deploying micro - frontend architectures effectively.