#Microfrontend

3 weeks ago

25 Minutes to Change a Button Color | Marek Honzal Migrating 15 React apps from Webpack to Rspack, and what I learned shipping the microfrontend architecture I disagreed with.

25 minutes to change a button color.

one css property. six steps across multiple repos. webpack, craco, gulp - configs nobody dared touch.

migrated 15 react apps to #rspack. shipped #microfrontend i argued against. wrote about what worked, what didn't, and the trade-offs

#modulefederation

0 0 0 0

JSer.info

@jser.info.web.brid.gy

3 months ago

2025-11-25のJS: webpack v5.103.0、Prisma 7、Angular 21 JSer.info #756 - webpack v5.103.0がリリースされました。 * Release v5.103.0 · webpack/webpack プラグインとしてDotenvPluginとWebpackManifestPluginが追加されました。また、`import.meta.env`、`import.meta.dirname`、`import.meta.filename`のサポートが含まれています。そのほかには、`import.defer()`のサポート、CSS向けの`exportType`オプションの追加、CSS Modulesの`composes`プロパティのサポートなどが含まれています。 * * * Prisma 7.0.0がリリースされました。 * Release 7.0.0 · prisma/prisma * Prisma 7 Release: Rust-Free, Faster, and More Compatible このバージョンでは、Rust-freeのPrismaクライアントがデフォルトに変更されました。`prisma generate`のコード生成先の変更やpostinstall hookの削除が行われています。また、生成する型を改善することで、型チェックの速度が向上しています。 * * * Angular v21がリリースされました。 * Announcing Angular v21. Authors: Jens Kuehlers, Mark "Techson"… | by Angular | Nov, 2025 | Angular Blog 新しい機能として、実験的なSignal Formsが追加されました。また、アクセシビリティを重視したヘッドレスコンポーネントライブラリAngular AriaがDeveloper Previewになっています。VitestがデフォルトのテストランナーとしてStableになり、新しいアプリケーションではzone.jsがデフォルトで含まれなくなりました。その他、Angular MCPサーバーがStableになり、テンプレートでの正規表現サポートなどが含まれています。 * * * ### JSer.infoをサポートするには * 😘 知り合いにJSer.infoをおすすめする * ❤️ GitHub Sponsorsで@azuのスポンサーになる * 🐦 X(Twitter)で@jser_infoをフォローする ### JSer.info Sponsors **JSer.info Sponsors** はGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 * * * # ヘッドライン * * * ## Release v5.103.0 · webpack/webpack github.com/webpack/webpack/releases/tag/v5.103.0 webpack ReleaseNote webpack v5.103.0リリース。 DotenvPlugin/WebpackManifestPluginの追加、`import.meta.env`/`import.meta.dirname`/`import.meta.filename`サポート。 `import.defer()`サポート/CSS向けの`exportType`オプション追加/CSS Modulesの`composes`プロパティサポートなど * * * ## Release v11.0.0 · immerjs/immer github.com/immerjs/immer/releases/tag/v11.0.0 JavaScript library ReleaseNote Immer v11.0.0リリース。内部実装を書き直してパフォーマンス改善 * * * ## Bun v1.3.3 | Bun Blog bun.com/blog/bun-v1.3.3 Bun ReleaseNote Bun v1.3.3リリース。 `CompressionStream`/`DecompressionStream`のサポート、standalone executableの`.env`と`bunfig.toml`読み込み制御するオプションの追加。 `bun test`の`retry`/`repeats`オプション追加、`--no-env-file`フラグ追加、SQLite 3.51.0へ更新など * * * ## Release 7.0.0 · prisma/prisma github.com/prisma/prisma/releases/tag/7.0.0 prisma ReleaseNote Prisma 7.0.0リリース。 Rust-freeのPrismaクライアントがデフォルトへと変更、`prisma generate`のコード生成先の変更やpostinstall hookの削除。生成する型を改善して型チェックの速度の改善など * Prisma 7 Release: Rust-Free, Faster, and More Compatible * * * ## Release pnpm 11 Alpha 0 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.0.0-alpha.0 pnpm ReleaseNote pnpm v11.0.0-alpha.0リリース。 Pure ESMに変更、設定の読み取りの変更、Node.js 18のサポート終了、キャッシュをv8.serializeしたバイナリファイルを使うように変更 * * * ## Announcing Angular v21. Authors: Jens Kuehlers, Mark “Techson”… | by Angular | Nov, 2025 | Angular Blog blog.angular.dev/announcing-angular-v21-57946c34f14b Angular ReleaseNote Angular v21リリース。実験的なSignal Formsの追加、アクセシビリティを重視したヘッドレスコンポーネントライブラリAngular AriaがDeveloper Previewに。 VitestがデフォルトのテストランナーとしてStableに、新しいアプリケーションではzone.jsがデフォルトで含まれなくなった。 Angular MCPサーバーがStableに、テンプレートでの正規表現サポートなど * * * ## Release v1.57.0 · microsoft/playwright github.com/microsoft/playwright/releases/tag/v1.57.0 playwright ReleaseNote playwright v1.57.0リリース。 HTMLレポータにテストの遅い順で表示するSpeedboardを追加、ChromiumでなくChrome for Testingを利用するように、`webServer`に`wait`オプションを追加。Page#accessibility APIを削除など * * * # アーティクル * * * ## Introducing Phased Package Installations blog.vlt.sh/blog/vlt-build npm vlt article vltでは`vlt install`と`vlt build`にコマンドを分けることで、インストール時にスクリプトを実行をデフォルトで行わないようになっている話 * * * ## Moving Mountains: How We Migrated from Enzyme to React Testing Library product.hubspot.com/blog/migrated-from-enzyme-to-react-testing-library JavaScript React refactoring article EnzymeからTesting Libraryへの移行について * * * # サイト、サービス、ドキュメント * * * ## Fumadocs fumadocs.dev/ React document library Reactを使ったドキュメントフレームワーク * * * # ソフトウェア、ツール、ライブラリ関係 * * * ## arktype/ark/attest at main · arktypeio/arktype github.com/arktypeio/arktype/tree/main/ark/attest TypeScript testing benchmark library ArkTypeが利用しているTypeScriptのテスト、ベンチマークフレームワーク。 TypeScriptの型パフォーマンスのメトリクスを表示できる * * * ## Web Fragments - A radically new way to do micro-frontends. web-fragments.dev/ MicroFrontend library JavaScriptのコンテキストをiframeで分離し、CSSのスタイルのコンテキストをShadow DOMで分離するMicrofrontendフレームワーク。 Cloudflareで利用されている * * * ## Type-safe Composable CSS - styleframe www.styleframe.dev/ TypeScript css library TypeScriptで型安全に書くCSSフレームワーク。 CSS VariableやThemeなどをComposablesとして合成できるAPIを持っている * * * ## tmikov/imgui-react-runtime: React + Dear ImGui + Static Hermes github.com/tmikov/imgui-react-runtime React Native Tools HermesとDear ImGuiとReactを使ったGUIフレームワーク。数MB程度の単体で実行できるネイティブバイナリとへコンパイルができる * ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies * * * ## 3ru/eslint-plugin-baseline-js: ✅ ESLint plugin to enforce the JavaScript Baseline. github.com/3ru/eslint-plugin-baseline-js ESLint plugin library BaselineをチェックするESLintプラグイン * * *

0 0 0 0

azu

@azu.bsky.social

3 months ago

JavaScriptのコンテキストをiframeで分離し、CSSのスタイルのコンテキストをShadow DOMで分離するMicrofrontendフレームワーク。
Cloudflareで利用されている "Web Fragments - A radically new way to do micro-frontends." https://web-fragments.dev/ #MicroFrontend #library

0 0 0 0

azu

@azu.bsky.social

4 months ago

VercelのMicrofrontendサポートのドキュメント "Microfrontends" https://vercel.com/docs/microfrontends #document #JavaScript #vercel #monorepo #MicroFrontend

2 0 0 0

Lorenzo De Francesco

@lory1990.bsky.social

4 months ago

Starting today, you can join the open beta and experience how #microfrontend orchestration should feel.

Built for #Vite, #Webpack, and many more, MFE Orchestrator gives you the power to unify your frontend ecosystem — without the pain.

👉 Try it now: mfe-orchestrator.dev

1 0 0 0

Nube Colectiva

@nubecolectiva.bsky.social

4 months ago

Los 5 Mejores Frameworks Para Micro Frontends.

The 5 Best Frameworks for Micro Frontends.

Los 5 Mejores Frameworks Para Micro Frontends.

👉 nubecolectiva.com/blog/los-5-m...

#programming #coding #programación #code #webdevelopment #devs #softwaredevelopment #framework #microfrontend

2 0 0 0

Lorenzo De Francesco

@lory1990.bsky.social

4 months ago

Just published #mfeorchestrator — a #opensource tool to create and host multiple #microfrontends with zero config and full flexibility.

From repo to production in 10 minutes

If you want to join the beta release comment under this port with #microfrontend

Check it out 👉 mfe-orchestrator.dev

1 0 0 0

Doug Parker

@develwithoutacause.dwac.dev

6 months ago

Isolating CSS Inheritance - Devel without a Cause How can we prevent styles from leaking between multiple microfrontend applications on the same page?

Just published a #blog post on #CSS inheritance and how to isolate multiple #microfrontend web applications running on the same page.

There's some fun nuances with `initial` and `revert` as well as background on user-agent stylesheets. Hope you enjoy!

blog.dwac.dev/posts/isolat...

4 2 1 0

SearchEngine

@searchengine.activitypub.awakari.com.ap.brid.gy

6 months ago

Building True Micro-Frontends: Beyond iFrames with Module Federation The Evolution of Frontend Architecture In today's fast-paced development landscape,...

Building True Micro-Frontends: Beyond iFrames with Module Federation The Evolution of Frontend Architecture In today's fast-paced development landscape, monolithic frontend applications often b...

#webdev #microfrontend #react #slidev

Origin | Interest | Match

0 0 1 0

leeefficiency

@p-iknow.bsky.social

7 months ago

Struggling with NX's single-version policy in our micro frontend setup 🤔

Each team needs different dependency versions, but NX enforces everything in root package.json. Also dealing with barrel export issues affecting tree-shaking.

#NX #microfrontend #monorepo #pnpm

4 0 2 0

Reza Baar

@rebaar.com

9 months ago

Thanks @madvue.es for having me there. I was in my element live coding on the stage with @vuejs.org and @nuxt.com to build a #monorepo #microfrontend. I met so many nice people, spent time with old friends, and made new ones.

Special thanks to Israel Ortuño and Itziar Gómez for the 10/10 planning!

3 0 0 0

Mozilla

@mozilla.activitypub.awakari.com.ap.brid.gy

9 months ago

How Microfrontends Work: From iframes to Module Federation Microfrontends are transforming how te...

www.freecodecamp.org/news/how-microfrontends-...

#frontend #architecture #JavaScript #Microfrontend

Result Details

0 0 0 0

Mozilla

@mozilla.activitypub.awakari.com.ap.brid.gy

9 months ago

How Microfrontends Work: From iframes to Module Federation Microfrontends are transforming how te...

www.freecodecamp.org/news/how-microfrontends-...

#frontend #architecture #JavaScript #Microfrontend

Result Details

1 0 0 0

Xavier JULIEN

@xju.fr

11 months ago

Le micro-frontend décomplexé : les dessous d’une migration incrémentale et itérative - La Duck Conf YouTube video by LaDuckConf

Le replay de notre conférence sur les #MicroFrontend avec Brandone Martins à la #DuckConf est disponible. À voir et revoir pour s'inspirer, se challenger ou tout simplement passer un bon moment. Un game changer pour la Digital Factory d'InVivo

www.youtube.com/watch?v=1zbg...

0 0 0 0

Nube Colectiva

@nubecolectiva.bsky.social

11 months ago

Los 5 Mejores Frameworks Para Micro Frontends.

The 5 Best Frameworks For Micro Frontends.

Los 5 Mejores Frameworks Para Micro Frontends.

👉 blog.nubecolectiva.com/los-5-mejore...

#programming #coding #webdevelopment #devs #softwaredevelopment #frameworks #microfrontend

0 0 0 0

Xavier JULIEN

@xju.fr

11 months ago

Aujourd’hui c’est #DuckConf avec Brandone Martins. On parle de #MicroFrontend en #VueJS et comment la Digital Factory d’Invivo a migré sa plateforme B2B vers cette architecture sans douleurs. www.laduckconf.com/talks-2025

1 1 0 0

v1v3k

@vivek-a.bsky.social

1 year ago

Came to know, a popular web app is using micro front-end !

#microfrontend
#web

0 0 0 0

@mamsbillyboy.bsky.social

1 year ago

Nodify Headless CMS - Micro FrontEnd #Microfrontend #HeadlessCMS #Nodify #WebDevelopment #Frontend #JavaScript #API #ModernWeb #UXUI #ScalableArchitecture #WebComponents #CSS #HTML #SoftwareEngineering

2 0 0 0

Florian Rappl

@florianrappl.bsky.social

1 year ago

A #microfrontend is just a self-contained set of components or UI fragments. But how can you integrate them #framework-agnostically? 🤔

Find out in my #article: Cross-Framework Components (dev.to/florianrappl/cross-framework-components-3kcb).

0 0 0 0

v1v3k

@vivek-a.bsky.social

1 year ago

Learning #microfrontend ...Continuing to read Chapter 3.

0 0 0 0

Flavien (56kode)

@56kode.bsky.social

1 year ago

Building Scalable Micro-Frontends with Next.js Multi Zones - iO tech_hub Let's see how Next.js Multi Zones can make building micro frontends a breeze.

💡 Build scalable micro-frontends easily with Next.js Multi Zones - independent deployments with seamless UX! #NextJS #microfrontend techhub.iodigital.com/articles/bui...

1 0 0 0

Giovanni

@gio.wtf

1 year ago

Idk how to call this approach tho?
Cross-origin LiveView?
Embedded LiveView?

The approach can also be used for a #microfrontend architecture.

Anyone exploring something like this?

1 0 0 0

Martin

@chaosmonster.bsky.social

1 year ago

In all my years I fought every request of #microfrontend as they were either (almost always) a political result, where the software had to provide the compromise of departments fighting. Or could be solved with the server side include (read mosaic9) pattern

1 0 0 0

Florian Rappl

@florianrappl.bsky.social

1 year ago

How is #Piral different from other #microfrontend approaches? Find out in my #article:

Introduction to Micro Frontends with Piral (dev.to/florianrappl/introduction-to-microfrontends-with-piral-4mpp).

Discover a fresh take on #scalability! 🚀

3 3 0 0

Florian Rappl

@florianrappl.bsky.social

1 year ago

CSS is global, making it tricky for #microfrontend #components to coexist without iframe boundaries. 🌀

Dive into the challenges and explore solutions in my #article:

CSS in Micro Frontends (dev.to/florianrappl/css-in-micro-frontends-4jai).

6 0 0 1

Sachin Kulkarni 👋🏻

@sachingk.bsky.social

1 year ago

#MicroFrontend and #MicroService architecture from the day one of #SaaS product development must be considered as over engineering.

1 0 0 0

Nube Colectiva

@nubecolectiva.bsky.social

1 year ago

Terminología de Kubernetes !

Kubernetes Terminology !

Terminología de Kubernetes !

Aprende a "Como Crear un Micro Frontend con Vue 3 – Parte 4 (Final)":
👉 blog.nubecolectiva.com/como-crear-u...

#devs #programación #100DaysOfCode #worldcode #developerlife #kubernetes #microfrontend #vue

0 0 0 0

Jonathan Gelin

@smartsdlc.dev

1 year ago

Hey 👋

Do you need help with:

🌊 #Monorepos using @nx.dev
🧩 #MicroFrontend architecture
👨‍💻 #TypeScript development
🎨 UI Design Systems
🎓 Developer coaching & workshops

Watch my 1-minute video below 👇👇👇

6 2 1 0

Jonathan Gelin

@smartsdlc.dev

1 year ago

Hey 👋 I’m available for new short- or long-term projects! 🫡 Want to know who I am? Watch my 1-minute video below 👇👇👇 #FreelanceEngineer #OpenForProjects @NxDevTools #MicroFrontend

0 0 0 0

Chris Woody Woodruff

@woodruff.dev

1 year ago

ASP.NET Core | Open-source web framework for .NET Build web apps and services that run on Windows, Linux, a...

Anyone have a good implementation of using http://ASP.NET Core for a Mincro Front-End?

#aspnet #aspnetcore #microfrontend

0 0 0 0

Posts tagged #Microfrontend