Native Federation: The Future of Micro Frontend...

July 18, 2024

400

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

July 18, 2024

Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer

Effective Signals in Angular 19+: Rules and Helpers

0

700

Effective Signals in Angular 19+: Rules and Helpers @ngbe2024

0

390

Your Architecture as a Crime Scene: Improvements with Forensic Analysis

0

21

Micro Frontends Unmasked Opportunities, Challenges, Alternatives

0

410

3 Effective Rules for Using Signals in Angular

0

270

Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024

0

330

3 Effective Rules for Using Signals in Angular

0

170

Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München

0

170

3 Effective Rules for Using Signals in Angular

1

170

Other Decks in Programming

See All in Programming

Pythonでもちょっとリッチな見た目のアプリを設計してみる

1

480

Linux && Docker 研修/Linux && Docker training

23

4.5k

自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ

8

2.6k

2024年のWebフロントエンドのふりかえりと2025年

1

230

Amazon Bedrock Multi Agentsを試してきた

1

280

SpringBoot3.4の構造化ログ #kanjava

2

970

Unity Android XR入門

0

140

Open source software: how to live long and go far

0

620

個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!

0

340

GAEログのコスト削減

0

110

XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2

1

770

技術を根付かせる / How to make technology take root

1

240

Featured

See All Featured

29

1k

Save Time (by Creating Custom Rails Generators)

29

1k

Site-Speed That Sticks

3

370

Documentation Writing (for coders)

67

4.6k

[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails

33

2.1k

Six Lessons from altMBA

27

3.6k

Building Adaptive Systems

40

2.4k

CSS Pre-Processors: Stylus, Less & Sass

356

29k

Build your cross-platform service in a week with App Engine

229

18k

Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything

29

2.2k

Principles of Awesome APIs and How to Build Them.

126

17k

Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure

44

9.4k

Transcript

@ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in
Angular WeAreDevelopers World Congress
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Federation & esbuild Frankenstein w/ Web Components Island Architectures
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@ManfredSteyer
@ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config
3. Start Shell and Micro Frontends
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Title Content Call to Action Info More Info
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF
Frankenstein Biz Apps B2C Team Autonomy →
@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters
@ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading
SSR with HTML Fragments
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io