MicroFrontends — The Past, the Present, and the Future

Slide 1

Slide 1 text

Micro Frontends: The Past, the Present, and the Future. @duffleit *and some of "Micro Frontends — The Bad Parts".

Slide 2

Slide 2 text

David Leitner @duffleit Coding Architect ✉ [email protected] 🐥 @duﬄeit

Slide 3

Slide 3 text

@duffleit

Slide 4

Slide 4 text

@duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa to David from Perform Payment Banking Monolith Backend Frontend

Slide 5

Slide 5 text

@duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa to David from Perform Payment Payment Backend Frontend Finances Onboarding

Slide 6

Slide 6 text

@duffleit WebBanking New Payment 💸 € 20, 00 👧 Lisa to David from Perform Payment Payment Backend Frontend Finances Onboarding

Slide 7

Slide 7 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:

Slide 8

Slide 8 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:

Slide 9

Slide 9 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Veriﬁcation Service Customer Service Backend For Frontend

Slide 10

Slide 10 text

Slide 11

Slide 11 text

@duffleit Persistence Logic Domain Logic Process Flow Presentation Backend For Frontend Domain Services

Slide 12

Slide 12 text

@duffleit No Domain Logic in Backend For Frontends. It's about Ui-Speciﬁc Aggregation, to get rid of over-fetching and over-requesting. Bad Part #1

Slide 13

Slide 13 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:

Slide 14

Slide 14 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Integration?

Slide 15

Slide 15 text

@duffleit Just well structure and don't mess up your monolith. 🚀 Links are still wonderful. 💯 Monorepo

Slide 16

Slide 16 text

@duffleit WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity:

Slide 17

Slide 17 text

@duffleit Just well structure and don't mess up your monolith. 🚀 Links are still wonderful. 💯 Monorepo

Slide 18

Slide 18 text

@duffleit Just well structure and don't mess up your monolith. 🚀 Server Side Integration. Links are still wonderful. 💯

Slide 19

Slide 19 text

@duffleit Server Side Integration Server Side Includes or Edge Side Includes

Slide 20

Slide 20 text

@duffleit Server Side Integration dashboard.layout.html profile.layout.html landing.layout.html layout server Onboarding Service Finances Service HTML Fragments HTML Fragments

Slide 21

Slide 21 text

@duffleit Just well structure and don't mess up your monolith. 🚀 Server Side Integration. Integrate it all on the client side. ✌

Slide 22

Slide 22 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: Iframes 👴 @duffleit Pure JS 😱 Web Components 😎

Slide 23

Slide 23 text

MicroFrontend A MicroFrontend B MicroFrontend C What are the downsides? @duffleit Angular Angular Angular RxJS RxJS RxJS

Slide 24

Slide 24 text

@duffleit Don't go for Micro Frontend only to fulﬁll your obsession with using the latest javascript frameworks out there. Bad Part #2

Slide 25

Slide 25 text

MicroFrontend A MicroFrontend B MicroFrontend C What are the downsides? @duffleit Angular RxJS SystemJS

Slide 26

Slide 26 text

MicroFrontend A MicroFrontend B MicroFrontend C Webpack Module Federation, FTW! @duffleit Angular v13 Angular v12 Angular v13

Slide 27

Slide 27 text

MicroFrontend A MicroFrontend B MicroFrontend C Webpack Module Federation, FTW! @duffleit . Angular v12 Angular v13

Slide 28

Slide 28 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: This Integration Layer can become very complex. 🤯 @duffleit

Slide 29

Slide 29 text

@duffleit Micro Frontends should allow us to enable fully verticalized teams not to be an interesting for your lead Frontend Engineer. Bad Part #3

Slide 30

Slide 30 text

@duffleit Just well structure and don't mess up your monolith. 🚀 Server Side Integration. Integration it all on the client side. ✌ Complexity 💰

Slide 31

Slide 31 text

Pure Server Side Integration, nor pure Client Side Integration is how we build WebApps today. @duffleit

Slide 32

Slide 32 text

We embrace Progressive Enhancement. @duffleit

Slide 33

Slide 33 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: @duffleit @duffleit

Slide 34

Slide 34 text

@duffleit

Slide 35

Slide 35 text

@duffleit Again, Webpack Module Federation, FTW!

Slide 36

Slide 36 text

WebBanking Payment Backend Frontend Finances Onboarding WebBanking € 20, 00 👧 Lisa to Perform Payment New Payment 💸 Latest Transactions: WebBanking Proof your Identity: @duffleit @duffleit

Slide 37

Slide 37 text

tl/dr: Build Micro Frontends with Progressive Enhancement in mind. @duffleit so, probably build it on top of Webpack Module Federation.

Slide 38

Slide 38 text

if you plan to build Micro Frontends @duffleit give me a call, I'd love to challenge that you really need them. & even more important:

Slide 39

Slide 39 text

David Leitner @duffleit Coding Architect ✉ [email protected] 🐥 @duﬄeit