Micro Frontends with Web Components Approach
Autor: | Otri, Mahmoud |
---|---|
Jazyk: | němčina |
Rok vydání: | 2021 |
Předmět: |
DDD Domain-Driven Design
SSI Server-side Include MVC Model-View-Control UI User Interface UX User Experience Web Components Cross-framework development CDN Content Delivery Network MF Micro Frontend Modern web application Frontend web development CBA Component-Based Architecture ESI Edge-side Include Custom Elements AJAX Asynchronous JavaScript And XML Microservices CI Continuous Integration Micro frontends SOA Service-Oriented Architecture Event-driven Architecture CD Continuous Delivery SPA Single-Page App JS JavaScript Self-contained systems |
Popis: | Diese Arbeit befasst sich mit Web Components als Integrationsansatz zum Aufbau von Micro Frontends. Sie zielt darauf ab, die Leistung von Web Components Standards einzuführen und präsentiert die Stärke von Micro Frontends, die die Webentwicklung des Frontends modernisieren. In den letzten Jahren haben sich Micro Frontends zu einem Trend entwickelt, der 2016 von ThoughtWorks veröffentlicht wurde. Seitdem haben große Unternehmen wie ikea, zalando, spotify und dazn versucht, in dieses Muster zu investieren, um es in ihre Webanwendungen einzubinden und sich von der alten, klassischen, monolithischen Struktur zu befreien. Mirco Frontends bauen auf der Idee der Microservices auf, die aufgrund ihrer erfolgreichen Entwicklung bis heute die gängigste Architektur für die Backend-Entwicklung sind. Web Components sind Webstandards und wurden im Jahr 2011 offiziell eingeführt. Sie bieten eine verlässliche Grundstruktur, um autonome Teile von Benutzeroberflächen zu entwerfen, die in einen gemeinsamen Bildschirm integriert werden können. Früher bezeichnete man Web Components als Custom Elements. Tatsächlich aber ist Custom Element eine API von Web Component, die dabei hilft, benutzerdefinierte HTML-Tags in JavaScript zu entwerfen, die in verschiedenen Web-Frameworks wiederverwendbar sind. Daher können Webkomponenten jede Anwendung, die in einem beliebigen Web-Framework geschrieben wurde, aufnehmen (zusammenfassem) und als API zur Verfügung stellen. Auf diese Weise können verschiedene JavaScript-Frameworks in einer einzigen Anwendung kombiniert werden.In jüngster Zeit ist die Landschaft der Web Components gewachsen und hat die Entwicklung von Web Components (wie z.B. LitElement) weiter vereinfacht. Diese Arbeit ist zu dem Ergebnis gekommen, dass Web Components ein zuverlässiger Ansatz zur Implementierung von Micro Frontends sind. Außerdem vergleicht sie die Implementierung von Web Components mit Vanilla JavaScript und drei anderen bekannten Web-Frameworks. This thesis deals with Web Components as an integration approach to build micro frontend. It aims to introduce the power of Web Components standards and presents the strength of micro frontends that modernize the web development of the frontend. In recent years, micro frontends have become a trend since it was published in 2016 by ThoughtWorks. Since then, big companies like ikea, zalando, spotify, and dazn, were trying to invest in this pattern to embrace it in their web applications and moving out from the old classic monolithic. Micro frontends extend the idea of microservices which have been until now the most common architecture for the backend development because of its successful journey. Web Components are web standards and introduced officially in 2011. They provide a basic reliable structure to design autonomous pieces of the user interfaces, that can be integrated into one screen. People used to call Web Components as Custom Elements. But in fact, Custom Element is an API from Web Component helps to design custom HTML tags in JavaScript that are reusable across web frameworks. Hence, Web Components could wrap any application written in any web framework and expose it as an API. By this way, different JavaScript frameworks could be combined as one single page app. Recently, the landscape of Web Components have grown and become more fruitful to ease the development of Web Components (such as LitElement). This thesis has came to result, that Web Components are reliable approach to implement micro frontends. Also, it compares implementing Web Components with vanilla JavaScript and three other known web frameworks. |
Databáze: | OpenAIRE |
Externí odkaz: |