# micro-frontends Published articles for micro-frontends. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Introducing Argonaut: Part Seven. DevFeed: [Introducing Argonaut: Part Seven.]() Original publisher: [Read original article]() Author: Grant Sheppard Published: 2024-07-11T02:08:10Z Content type: opinion Language: en Sources: [REA Group]() Topics: [Web Development](), [Front end](), [Web](), [Monitoring](), [Accessibility]() Tags: [accessibility](), [cli](), [core-web-vitals](), [development](), [frontend](), [micro-frontends](), [monitoring](), [platform](), [tech]() ### AI overview The seventh article in REA's Argonaut series discusses the future of its micro-frontend platform. It describes plans to reduce operational overhead through standardized monitoring and dependency updates, simplify platform-wide changes, and extend the platform CLI with performance and accessibility checks. ### Source excerpt Introducing Argonaut: Part Seven. Authors: Grant Sheppard and Tim Watts The previous post reflected on the past, talking about what worked and what did not whilst building Argonaut, the micro-frontend platform at REA. Valuable lessons have been learnt and applied to the platform, allowing its architecture to be extended to support the needs of web teams across REA. But what does the future hold, and will the journey so far help influence the direction of Argonaut? ## Migrating Udemy's Homepage to Micro Frontends DevFeed: [Migrating Udemy's Homepage to Micro Frontends]() Original publisher: [Read original article]() Author: Eugenia Leong Kato Published: 2024-05-01T20:41:02Z Content type: article Language: en Sources: [Udemy Engineering]() Topics: [migration](), [Front end](), [Development](), [Web](), [React](), [modules](), [User Stories](), [Requirements]() Tags: [architecture](), [developer-velocity](), [development](), [frontend](), [micro-frontends](), [migration](), [module](), [react](), [requirements](), [user-stories]() ### AI overview Udemy describes migrating its logged-out homepage from a monolithic architecture to micro frontends. The article covers the migration's motivations, preparation through user stories and requirements, modular team organization, React component reuse, and shared npm packages, with reported improvements in development speed and web performance motivating the architectural change. ### Source excerpt By Eugenia Kato, Anthony Nichols, Sol Zhu, Eyupcan Bodur, Stephen Duke, David Gao, Michael Palisano, Izabela Bulska, Elaine Zhou, Matt Schaefer, Marty Note, Matthew Bise, Chris Nienhuis, Jilles Soeters, Trey Briggs, Seth Hodgson Introduction This blog delves into the migration of Udemy's logged-out homepage from a monolith architecture to a micro frontends architecture, detailing the motivations behind the migration, challenges faced, and the impact on developer velocity and web performance metrics as a result of the migration. Udemy's logged-out homepage is the second most frequently visited destination, following the course landing pages. Our current focus revolves around professional skills development to cater the needs of professionals seeking upskilling and reskilling opportunities. However, the design and content of the logged-out homepage did not align with this focus. As a result, a new homepage was redesigned that aimed to showcase Udemy's range of offerings and emphasize its commitment to professional skills development. Beyond a mere facelift, the redesign presented an opportunity for us to transition the logged-out homepage from a monolith architecture to micro frontend architecture. With the enhanced web performance metrics, especially for international users, and increased development speed demonstrated in the previous blog post, we are motivated to adopt the new frontend architecture. Preparing for the migration We laid the groundwork for the new logged-out homepage by creating a new micro-frontend application, keeping it isolated from other existing frontend applications. This allows for a more streamlined and efficient development process, as React components and pages that are not relevant can be excluded. As a preparatory step for the migration, we broke down each of the homepage modules into user stories. Then, we collaborated with our design and product partners to define clear and concise requirements for each module. This structured approach ## A Journey from Monolith to Micro frontends at Udemy -- Part 3 of 3 DevFeed: [A Journey from Monolith to Micro frontends at Udemy -- Part 3 of 3]() Original publisher: [Read original article]() Author: Hamza ERBAY Published: 2024-01-16T18:23:06Z Content type: article Language: en Sources: [Udemy Engineering]() Topics: [Front end](), [migration](), [Design system](), [GitHub Actions](), [Monitoring](), [npm packages](), [Hackathon]() Tags: [architecture](), [design-system](), [development](), [development-process](), [frontend](), [github-actions](), [micro-frontends](), [migration](), [monitoring](), [npm-packages](), [overcoming-obstacles](), [performance-metrics]() ### AI overview Part 3 of Udemy's series describes implementing a migration from a monolithic frontend to a more modular micro-frontend architecture. It covers migration guidance, shared design-system npm packages, team education, monitoring with Datadog and Sentry, simplified local development, and GitHub Actions-based releases. ### Source excerpt Transforming Frontend Architecture: A Journey from Monolith to Micro Frontends at Udemy -- Part 3 of 3 By: Chris Nienhuis, Hamza Erbay, Matthew Bise, Nathan Chapman, Seth Hodgson, Trey Briggs, Charles Pham Photo by Venti Views on UnsplashIntroduction In the previous section, we walked through the Udemy Hackathon event, and the decisions and preparations made that laid the foundation for our move toward a more modular frontend architecture. In this section, we will focus on the implementation of our vision post-Hackathon, how we are planning to execute the migration, and the impact it has had so far. If you missed Part 1 and Part 2 of this series, you can find them here: Transforming frontend Architecture: A Journey from Monolith to Micro frontends at Udemy -- Part 1... Transforming frontend Architecture: A Journey from Monolith to Micro frontends at Udemy -- Part 2... Post-Hackathon: Implementing the Vision Following the green light from the Shark Tank jury, we've taken decisive steps to translate our hackathon prototype into a scalable and robust frontend architecture. A dedicated frontend team has been formed at Udemy with the express purpose of driving this evolution. "Where the journey began... A throwback to the spark that ignited our incredible voyage. Thanks to Gregg (our former CEO) for recognizing the hard work! #Milestone #Hackathon #OriginStory" Our commitment to this new direction is reflected in a series of strategic actions: Migration Guidance: We've laid out clear guidelines for transitioning (transitioning implies migration) from the monolithic application, ensuring a smooth and structured shift to the new architecture. Collaboration with Design Systems: By partnering with the design system team, we've begun decoupling foundational components and design tokens, packaging them into shared npm packages. This initiative is critical for consistency and efficiency across all applications. Education and Alignment: Recognizing the importance of knowledge sharing, we ## A Journey from Monolith to Micro frontends at Udemy -- Part 2 of 3 DevFeed: [A Journey from Monolith to Micro frontends at Udemy -- Part 2 of 3]() Original publisher: [Read original article]() Author: Hamza ERBAY Published: 2024-01-08T18:30:04Z Content type: article Language: en Sources: [Udemy Engineering]() Topics: [Front end](), [Next.js](), [React](), [Hackathon](), [Web Development](), [GraphQL]() Tags: [architecture](), [collaboration](), [decoupling](), [frontend](), [graphql](), [hackathon](), [hackathons](), [infrastructure](), [micro-frontends](), [next-js](), [performance](), [react](), [static-site]() ### AI overview This second article in a three-part series describes Udemy's hackathon exploration of decoupling its monolithic frontend into micro frontends. It explains the limitations of tightly coupled React components, the choice of Next.js, and criteria used to select the Featured topics page as an initial candidate. ### Source excerpt Transforming Frontend Architecture: A Journey from Monolith to Micro Frontends at Udemy -- Part 2 of 3 By: Chris Nienhuis, Hamza Erbay, Matthew Bise, Nathan Chapman, Seth Hodgson, Trey Briggs, Charles Pham Photo by Hamza Erbay on UnsplashIntroduction In the previous section, we discussed the challenges in our current monolith architecture and the reasons why we are keen on transitioning to a micro frontend architecture. Now, we are going to delve into the hackathon event at Udemy where we explored the idea of decoupling our frontend structure, the preparations we made, and the options we considered for this transformation. If you missed Part 1 of this series, it is located here: Transforming frontend Architecture: A Journey from Monolith to Micro frontends at Udemy -- Part 1... Udemy Hackathon During the Hackathon event at Udemy, which we organize every six months, I had the opportunity to meet some amazing people in 2021. We collaborated on ideas for decoupling the frontend structure, which was a great experience. Our team comprised Chris Nienhuis, Hamza Erbay, Matthew Bise, Nathan Chapman, and Trey Briggs. We would like to thank Seth Hodgson for bringing us together. Preparation Our React components are currently tightly linked to the monolith runtime environment, making it impossible to use them across our various sites or in different rendering environments -- client-side, server-side, or offline via static site generation tools (B2C/B2B, support center, blogs, microsites, etc.). Udemy Monolith's high-level architecture Decoupling the frontend would improve our daily workflow and make it easier to make significant style changes across the apps. After researching modern frontend technologies, we chose Next.js for its strong community support and performance. Then, we worked on the high-level structure for the hackathon. Analyze the inventory The hackathon posed challenges related to our infrastructure and GraphQL integration that needed to be addressed. Our goal was t ## Migrating Strava's My Routes Page to a React Microfrontend DevFeed: [Migrating Strava's My Routes Page to a React Microfrontend]() Original publisher: [Read original article]() Author: Navika Budhraja Published: 2022-11-15T17:01:28Z Content type: article Language: en Sources: [Strava Engineering]() Topics: [React](), [Front end](), [Ruby on Rails](), [monorepo]() Tags: [frontend](), [micro-frontends](), [react](), [search]() ### AI overview A Strava web-frontend intern describes migrating the My Routes page from the Active Ruby on Rails monolith to a React microfrontend, then adding filtering and search for athletes' saved routes. ### Source excerpt Me and my mentors Patrick & NomnomsIntroduction Hi, my name is Navika Budhraja and I'm a rising senior at UC San Diego studying Computer Science. This summer I was a web-frontend engineering intern on the Athlete Services team and consequently, got to learn a lot about how to develop athlete-facing products! During my internship, I worked with 3 other interns, Emily (Server), Sahil (iOS), and Ryan(Android), on a project to add filtering and searching logic to athlete's saved routes, which in my case, meant working on the My Routes page on the web. "Old" My Routes that I would be improving Like the paths of many Strava routes, adding this feature on the web was not going to be a straightforward process. As you may already know, Strava is currently in the process of moving code out of their Ruby on Rails monolith called Active to React-based frontends. Since the code for the current My Routes page lives in active, I was also tasked with migrating the page from active to a React microfrontend before adding filtering/search logic. 😱...My Face exactly when I first read my project description, especially with super rusty React skills and no conception of what a microfrontend was (was it like a tiny frontend or like a craft, hipster frontend sort of like a microbrew?). However, what I came to learn is that when you work in an incredibly supportive and encouraging environment, the process of rolling out a requested feature in just 12 weeks with no experience isn't actually as daunting as it sounds. In the spirit of the Warriors winning the championship earlier this summer (Yes, I am still riding the high), I will break down these past 12 weeks in terms of quarters of a basketball game! First Quarter: Onboarding & Jams Although I wanted to jump in and start working on a project right away, I first had to get acclimated to a new code base, actually 2 new code bases: active (the monolith) and web (the monorepo where my microfrontend will live). By fixing some minor bugs on the w ## Introduction to Angular Elements DevFeed: [Introduction to Angular Elements]() Original publisher: [Read original article]() Published: 2019-04-28T00:00:00Z Content type: tutorial Language: en Sources: [Juri Strumpflohner]() Topics: [Angular](), [Web Components](), [Angular CLI](), [Single-page application (SPA)](), [Web Development]() Tags: [angular](), [angular-elements](), [components](), [course](), [egghead](), [how-to](), [html](), [introduction](), [micro-frontends](), [videos]() ### AI overview This tutorial introduces Angular Elements, explains how Angular components can be wrapped as browser Custom Elements, and describes use cases such as embedding them in non-Angular applications, CMS systems, and legacy AngularJS applications. It also begins a step-by-step example of creating an Angular Element with the Angular CLI. ### Source excerpt Lorem ipsum dolor sit amet