Slide 1

Slide 1 text

inside the micro frontends toolbox Michael Geers / @naltatis The Global Dev Study #1

Slide 2

Slide 2 text

Michael Geers frontend engineer naltatis Twitter & GitHub author of the book Micro Frontends in Action and the website micro-frontends.org building tailored e-commerce systems

Slide 3

Slide 3 text

pages & fragments* * aka includable Micro Frontends, Podlets, Parcels, Pilets, … Michael Geers / @naltatis

Slide 4

Slide 4 text

teams can own one or more pages 2 33 $ 66 $ 99 $ buy 2 1 66 $ 1 1 list home detail basket payment conﬁrm $ $ %% Team Inspire Team Decide Team Checkout Customer Journey Michael Geers / @naltatis

Slide 5

Slide 5 text

Team Decide Team Inspire Team Checkout Fragment Fragment Page fragments are embedded mini-applications Michael Geers / @naltatis

Slide 6

Slide 6 text

Cross Functional Teams ux/design, frontend backend, data science, ops Self-Contained Systems separate applications that don’t rely on each other End-to-End Responsibility from user interface to database Independent Teams & Systems Michael Geers / @naltatis like a chunky microserivce, but with its own UI

Slide 7

Slide 7 text

each team ships user interface Michael Geers / @naltatis

Slide 8

Slide 8 text

real world projects

Slide 9

Slide 9 text

manufactum.com 2 teams

Slide 10

Slide 10 text

Team Sell product page Team After-Sell login status fragment   mini basket fragment Michael Geers / @naltatis

Slide 11

Slide 11 text

Team Sell navigation fragment Team After-Sell basket page Michael Geers / @naltatis

Slide 12

Slide 12 text

Klingel Group 5 teams from 4 software companies   15 brands, 12 countries, ~65 shops

Slide 13

Slide 13 text

Team Search category page Team Checkout mini basket Team Decide wishlist Team Account login status   feedback   support Team Inspire promotion   inspiration Michael Geers / @naltatis

Slide 14

Slide 14 text

Team Search navigation Team Checkout mini basket Team Decide wishlist product page Team Account login status   feedback   support Team Inspire promotion Michael Geers / @naltatis

Slide 15

Slide 15 text

Team Checkout login page Team Inspire recommendations Team Account feedback   support Michael Geers / @naltatis

Slide 16

Slide 16 text

Who uses micro frontends? logos link to the sources Michael Geers / @naltatis

Slide 17

Slide 17 text

how do we integrate?

Slide 18

Slide 18 text

What needs to be integrated? Michael Geers / @naltatis

Slide 19

Slide 19 text

buy for 66 € 0 items 0 items

Tractor

buy for 66 € server Team Decide reverse-proxy (nginx, …) server Team Checkout /red-tractor

Tractor

/checkout/basket /checkout/buy /red-tractor composition on the server   using SSI or ESI

Slide 20

Slide 20 text

      composition in the browser   with Custom Elements Michael Geers / @naltatis

Slide 21

Slide 21 text

Linked Single Page Apps Uni fi ed Single Page App page transitions between SPAs Michael Geers / @naltatis

Slide 22

Slide 22 text

jobs of the application shell? ‣ central entry point for the user ‣ can load, start and stop all SPAs ‣ switches between SPAs if necessary Michael Geers / @naltatis

Slide 23

Slide 23 text

single-spa https://single-spa.js.org/ ‣ ready-to-use application shell ‣ most popular solution ‣ plugins for nearly all frameworks ‣ also supports composition Michael Geers / @naltatis

Slide 24

Slide 24 text

libraries & meta frameworks https://github.com/zalando/tailor https://github.com/opencomponents/oc Podium https://podium-lib.io meta-spa-router https://github.com/manfredsteyer/meta-router https://github.com/onerzafer/microfe-client Piral https://piral.io Ara https://github.com/ara-framework puzzle.js https://github.com/puzzle-js https://github.com/SAP/luigi Luigi https://qiankun.umijs.org ILC https://github.com/namecheap/ilc icestark https://ice-lab.github.io/icestark/ Michael Geers / @naltatis

Slide 25

Slide 25 text

but why?

Slide 26

Slide 26 text

🥇 faster feature development …

Slide 27

Slide 27 text

three 8-person teams are more effective than one 24-person team Michael Geers / @naltatis

Slide 28

Slide 28 text

teams should be decoupled

Slide 29

Slide 29 text

🐌 micro frontends are bad for #webperf, right?

Slide 30

Slide 30 text

🚴 micro frontend sites can be very fast or slow - it’s mostly about good engineering all using a   micro frontends   architecture source: Textil Wirtschaft Analyses of loading performance (LCP) in German fashion e-commerce shops

Slide 31

Slide 31 text

I’ve written a book 270 pages 143 illustrations 21 examples   64 listings 35% off with code mtpdevstudy21 and all other books at manning.com M A N N I N G Michael Geers Michael Geers / @naltatis

Slide 32

Slide 32 text

book examples the-tractor.store

Slide 33

Slide 33 text

need more? micro-frontends.org article by Cam Jackson article by Gustaf Nilsson Kotte   blogposts by Florian Rappl blogposts by Luca Mezzalira 👓 awesomelist by Rajasegar Chandran Michael Geers / @naltatis

Slide 34

Slide 34 text

thank you for listening! stay healthy Michael Geers / @naltatis

Slide 35

Slide 35 text

St. Mary Axe Bruno Glätsch   https://www.pexels.com/photo/low-angle-photography- of-30-st-mary-axe-1397752/ Man Welding Metal Kateryna Babaieva   https://www.pexels.com/photo/man-welding- metal-2880871/ Action Bicycling Roman Pohorecki   https://www.pexels.com/photo/action-bicycling-bike- biking-287398/ Running Kids (me) Tractors Manufactum   https://www.manufactum.com/tin-toys-c193667/ image credits built with micro frontends