polito.it
Politecnico di Torino (logo)

Micro Frontends, Server Components and how these technologies can provide a paradigm shift with architectural changes in modern enterprise web app development

Davide Borello

Micro Frontends, Server Components and how these technologies can provide a paradigm shift with architectural changes in modern enterprise web app development.

Rel. Luca Ardito. Politecnico di Torino, Corso di laurea magistrale in Ingegneria Informatica (Computer Engineering), 2024

[img]
Preview
PDF (Tesi_di_laurea) - Tesi
Licenza: Creative Commons Attribution Non-commercial No Derivatives.

Download (2MB) | Preview
Abstract:

In the realm of modern web application development, the microservices architecture has significantly transformed back-end systems, offering scalability and maintainability. Correspondingly, the emergence of micro-frontends extends this paradigm to the front-end, catering to the demands of enterprise-scale applications striving for seamless User Experience (UX) while handling extensive data. React, a prominent JavaScript framework, introduces server-side rendering (SSR) and, more recently, React server components (RSC), combining server-centric approaches with client-centric interactivity. The thesis conducts a thorough review of the current state of literature of Micro Frontend Architecture and React Server Components, aiming to integrate these technologies into an already-deployed enterprise web application. The purpose is to provide valuable insights offering guidance for efficient and effective implementation in large-scale web applications.. The study begins from a comprehensive analysis of Micro Frontend architectural patterns the work focused on the study of the concept of Module Federation. Module Federation is a key requirement for adopting Micro-Frontends, as it allows for seamless integration and communication between different micro-frontends. To implement Module Federation, the adoption of Vite.js and Webpack is necessary. These tools provide the infrastructure and configuration to enable module sharing and dynamic micro-frontend loading. Additionally, the thesis delves into the complexities of utilizing React Server Components without native framework support, emphasizing the importance of frameworks like Next.js, Remix.run, or Modern.js, which offer built-in mechanisms such as Server Side Rendering. The usage of Micro Frontend emerged as a useful solution for a gradual adoption of server rendering practices, modularizing the application without the need for a complete rewrite and reducing challenges and risks associated with a full-scale implementation. The thesis illustrates a demo application implementing Micro Frontend Architecture showing the most used patterns involving the usage of Vite bundler and its module federation plugin, exposing and sharing components between React micro-apps. Considerations for styling using libraries like Carbon and Tailwind, as well as state management with tools like Recoil, are discussed. Furthermore the demo shows how to integrate server rendered components using the Remix framework.

Relators: Luca Ardito
Academic year: 2023/24
Publication type: Electronic
Number of Pages: 77
Subjects:
Corso di laurea: Corso di laurea magistrale in Ingegneria Informatica (Computer Engineering)
Classe di laurea: New organization > Master science > LM-32 - COMPUTER SYSTEMS ENGINEERING
Aziende collaboratrici: aizoOn
URI: http://webthesis.biblio.polito.it/id/eprint/31061
Modify record (reserved for operators) Modify record (reserved for operators)