FEVR - Micro Frontend

Jakiś czas temu mikroserwisy zawładnęły umysłami i duszami backend developerów. Teraz nadszedł czas, by i ci na froncie odeszli od wiecznie żywych monolitów. Za sprawą Webpacka 5 i Module Federation pojawiła się nowa i ciekawa opcja realizacji idei mikrofrontendów. W trakcie prezentacji opowiem o tym, jak zacząć i zbudować solidny komponent z module federation, ile różnych frameworków użyć i czy w ogóle wykorzystanie mikrofrontendów jest dla wszystkich.

This document discusses micro frontends, which is a microservices approach to front end web development. It outlines some issues with monolithic frontends like scaling and communication problems. It then discusses micro frontend design principles such as autonomous features, team ownership, being tech agnostic, driving value, and following microservices patterns. Finally, it covers techniques for implementing micro frontends including using separate or shared runtimes with options like micro apps, iframes, or webpack modular federation and integrating them through runtime, build time, or iframe methods.

The document discusses micro frontends, which involve breaking large monolithic applications into independent features developed by separate teams. Micro frontends follow a single responsibility principle and are similar to a microservices approach for frontends. They allow for independent development, deployment, and use of new technologies for different parts of an application. Challenges include maintaining a consistent UI and sharing dependencies, while benefits include scalability, reduced risk, and easier integration of new teams. Common approaches use iframes, libraries, or web components. Successful examples include Spotify, Upwork, and Thoughtworks.

Good frontend development is hard. Scaling frontend development is even harder because you need to ensure that multiple teams can work on a big and complex project simultaneously and without any blockers. Today you often hear about micro frontends which are one of the more controversial Web topics. What are they? Are they worth all the fuzz? Should you implement them? As someone who worked at integrating this in Infobip’s Web Interface, I want to use our example to show you our way of thinking: how did we know that we have problems, how did we decide to approach the implementation of micro frontend architecture and why did we decide to go with it, and which problems we ran into. We will also look at alternate available possibilities useful for anyone.

This document discusses micro-frontends, an approach to building applications where the frontend is split into independent modules. It introduces micro-frontends as a way to achieve independent releases for the frontend like microservices do for the backend. It outlines some key things to consider with micro-frontends like composing multiple frontends, sharing data between them, ensuring consistent UX, and testing strategies. It describes options for composing frontends at build time vs run time and approaches for sharing data. It also discusses the importance of design consistency and provides testing strategies like consumer driven contracts and functional tests. In summary, micro-frontends allow independent teams to work on different parts of the frontend while ensuring a consistent user experience.

На JavaScript Odesa #TechTalks мы поговорили о микрофронтендах как о современном архитектурном стиле проектирования для фронтенд разработки, который облегчает поддержку и деплой обновлений для крупных проектов. Также мы обсудили: Что такое микрофронтенды? Как использовать их с старым проектом? Монорепа vs мультирепа и почему? О спикере: Максим Белкин, Senior Software Engineer с 10-летним опытом коммерческой разработки веб-приложений. У Максима большой опыт в создании одностраничных приложений с использованием современных фреймворков и инструментов, а также большой опыт в области серверной разработки и создания REST API. Он также обладает глубокими знаниями в области объектно-ориентированной разработки, алгоритмов, кодирования и шаблонов тестирования и имеет опыт в гибкой разработке программного обеспечения, включая роли SCRUM Master и Team Lead.

There is no doubt that one of the most emerging terms in today Tech Community is MicroFront end Architecture, in this Lecture, we will go through the Basics of Micro-FrontEnd Architecture Concept, and will discuss with Examples, How some techniques to implement it, Also will discuss if its suitable for you to migrate from old single Front-End App to Micro-FrontEnd Architecture.

Slides from my talk at the Coimbatore frontend Meetup on how Microfrontends MonoRepos and Trunk based Development go hand in hand with each other

How to scale production SPA's during the company growth crysis. Modularisation of FE with module federation and micro-frontends approach.

This document discusses micro frontends, which extend the microservices architecture approach to frontend web development. It defines micro frontends as distinct slices of a web application that encompass the frontend, backend service, and database. The document then discusses why companies are using micro frontends and when they should be used. It provides examples of how companies like Walmart and Emtec Digital have implemented micro frontends. Finally, it covers popular ways to implement micro frontends such as using iframes, routing, web components, monorepos, and framework libraries.

Developing with micro frontends offers enterprises many benefits over monolithic frontend development, but MFEs also present challenges. Micro frontend platforms provide DevOps benefits for large organizations seeking to innovate quickly while managing increasing complexity.

Microservices are at the top of the hype right now and perhaps you’ve already fallen for them and are replacing your good old monolith for new shiny microservices on the back-end. But have you ever considered doing the same on the front-end? Even hype-r (or crazy-er, we’ll let you judge), have you tried mixing different JavaScript frameworks (let’s say AngularJS, Angular and React for example) in a Single Page Application? That’s what Micro Frontend is and that’s what we’ve done this year at Saagie. In this talk I’d like to give you feedback on the different architectures we’ve tried, their pros and cons and help you find which one would be the best for you, just in case you’d like to opt for the dark and crazy side of front-end.

Alexandra, Matthias, and Prasanna have been working on a project with micro frontend architecture for the past year. This project involves 4 teams distributed over two countries - Germany and India, each of the teams delivering one or several micro frontends that are consolidated into one product in the browser. This talk is based on our practical insights into micro frontends using React and Redux. We will discuss the differences between this technique and micro-services, our approaches to solving the common issues, the advantages it offers and the challenges it brings.

The document discusses micro-frontend architecture, which divides the frontend UI into smaller, semi-independent applications. It covers the core ideas like technological independence and faster development. Integration approaches include server-side templates, build-time integration using packages, and runtime integration with iframes or JavaScript. Challenges include complexity, coordination, and performance, which can be overcome with standardization and DevOps practices. Popular companies using microfrontends are IKEA, Upwork, and Spotify.

The introduction covers the following 1. What are Microservices and why should be use this paradigm? 2. 12 factor apps and how Microservices make it easier to create them 3. Characteristics of Microservices Note: Please download the slides to view animations.

Architecting micro-frontends can be challenging. The right micro-frontends approach can provide many benefits for organizations. But, poorly architected can sometimes lead to many critical issues (performance, complexity, big cognitive load). In this talk, let's explore how we can keep it simple with Module Federation and enable independent release flow in modern web applications.

Marktplaats is the largest online marketplace in the Netherlands, receiving over 8 million monthly visitors. The company transitioned from 3 large monolithic frontends tightly coupled to backend services to over 25 loosely coupled microservices with corresponding backend for frontend services. This improved time to market for features, code maintainability, and developer autonomy and happiness. Key aspects of their architecture include infrastructure for routing requests to frontends, a build process for deploying frontends as packages, extensive testing, and monitoring of performance and errors.

Learn migration strategies for large front-end migration projects with an emphasis on continuous business value delivery. Identify the Bounded Contexts in your application and make your application more modular. * Transform - create a parallel new view * Coexist - leave the existing view for a time, so the functionality is implemented incrementally * Eliminate - remove the old functionality as users stop using it

Stefano discusses how to augment service mesh functionality with API management capabilities, so you can create an end-to-end solution for your entire business functionality — from microservices, to APIs, to end-user applications.

Cloud native API Management for Microservices on a Service Mesh using Istio Stefano Negri, Director - Solution Architecture at WSO2

Apcera reviews the good, bad and the amazing, based on feedback collected from 250+ early adopters, of emerging microservices platforms and best practices. You can learn more about The Trusted Cloud Platform at: https://www.apcera.com/

This session will present the different challenges for telco companies when they deploy support chatbots for clients, this is based on a real experience of working with chatbots in a telco company Telefónica based on Guatemala and some countries in Central America. Presentado por Sergio Méndez en SG Virtual Conference 2020

The document discusses microservices and their advantages over monolithic architectures. Microservices allow for greater evolvability, scalability, and resilience compared to monoliths. They also improve composability but introduce additional complexity in areas like cross-cutting concerns, service communication, and explicit dependencies between services. The document provides advice on determining service boundaries using domain-driven design principles and on gradually transitioning teams and applications to microservices at a sustainable pace that balances productivity, operability, and architectural fitness.

The document discusses the evolution of application development from monolithic backends in the 1990s to modern cloud native applications (CNAs). CNAs are optimized for modern distributed systems, use containers, are dynamically managed, and use microservices. The Cloud Native Computing Foundation aims to drive adoption of this new paradigm. For CNAs to work at scale, they need to be orchestrated regarding locality, lifecycle, and elasticity. The document then explores options for orchestrating CNAs, including fully automated management, self-organizing components, and ephemeral event-triggered functions. It also discusses tradeoffs between centralization and self-organization.