Presented at The Global Dev Study #1.
inside the micro frontends toolboxMichael Geers / @naltatisThe Global Dev Study #1
View Slide
Michael Geersfrontend engineernaltatisTwitter & GitHubauthor of the bookMicro Frontends in Actionand the website micro-frontends.orgbuilding tailored e-commerce systems
pages & fragments** aka includable Micro Frontends, Podlets, Parcels, Pilets, …Michael Geers / @naltatis
teams can own one or more pages233 $66 $99 $ buy2166 $11listhome detail basket payment confirm$ $ %%TeamInspireTeamDecideTeamCheckoutCustomer JourneyMichael Geers / @naltatis
TeamDecideTeamInspireTeam CheckoutFragmentFragmentPagefragments are embedded mini-applicationsMichael Geers / @naltatis
Cross Functional Teamsux/design, frontendbackend, data science, opsSelf-Contained Systemsseparate applications thatdon’t rely on each otherEnd-to-End Responsibilityfrom user interfaceto databaseIndependent Teams & SystemsMichael Geers / @naltatislike a chunky microserivce,but with its own UI
each team shipsuser interfaceMichael Geers / @naltatis
real world projects
manufactum.com2 teams
Team Sellproduct pageTeam After-Selllogin status fragment mini basket fragmentMichael Geers / @naltatis
Team Sellnavigation fragmentTeam After-Sellbasket pageMichael Geers / @naltatis
Klingel Group5 teams from 4 software companies 15 brands, 12 countries, ~65 shops
Team Searchcategory pageTeam Checkoutmini basketTeam DecidewishlistTeam Accountlogin status feedback supportTeam Inspirepromotion inspirationMichael Geers / @naltatis
Team SearchnavigationTeam Checkoutmini basketTeam Decidewishlistproduct pageTeam Accountlogin status feedback supportTeam InspirepromotionMichael Geers / @naltatis
Team Checkoutlogin pageTeam InspirerecommendationsTeam Accountfeedback supportMichael Geers / @naltatis
Who uses micro frontends?logos link to the sourcesMichael Geers / @naltatis
how do weintegrate?
What needs to be integrated?Michael Geers / @naltatis
buy for 66 €0 items0 itemsTractorbuy for 66 €serverTeam Decidereverse-proxy (nginx, …)serverTeam Checkout/red-tractorTractor/checkout/basket/checkout/buy/red-tractorcompositionon the server using SSI or ESI
compositionin the browser with Custom ElementsMichael Geers / @naltatis
Linked Single Page Apps Unified Single Page Apppage transitions between SPAsMichael Geers / @naltatis
jobs of the application shell?‣ central entry point for the user‣ can load, start and stop all SPAs‣ switches between SPAs if necessaryMichael Geers / @naltatis
single-spahttps://single-spa.js.org/‣ ready-to-use application shell‣ most popular solution‣ plugins for nearly all frameworks‣ also supports compositionMichael Geers / @naltatis
libraries & meta frameworkshttps://github.com/zalando/tailorhttps://github.com/opencomponents/ocPodiumhttps://podium-lib.iometa-spa-routerhttps://github.com/manfredsteyer/meta-routerhttps://github.com/onerzafer/microfe-clientPiralhttps://piral.ioArahttps://github.com/ara-frameworkpuzzle.jshttps://github.com/puzzle-jshttps://github.com/SAP/luigiLuigihttps://qiankun.umijs.orgILChttps://github.com/namecheap/ilcicestarkhttps://ice-lab.github.io/icestark/Michael Geers / @naltatis
but why?
🥇 faster feature development …
three 8-person teamsare more effective thanone 24-person teamMichael Geers / @naltatis
teams should be decoupled
🐌micro frontends are bad for #webperf, right?
🚴micro frontend sitescan be very fastor slow - it’s mostly about good engineeringall using a micro frontends architecturesource: Textil WirtschaftAnalyses of loading performance (LCP)in German fashion e-commerce shops
I’ve written a book270 pages143 illustrations21 examples 64 listings35% off with code mtpdevstudy21and all other books at manning.comM A N N I N GMichael GeersMichael Geers / @naltatis
book examples the-tractor.store
need more?micro-frontends.orgarticle by Cam Jacksonarticle by Gustaf Nilsson Kotte blogposts by Florian Rapplblogposts by Luca Mezzalira👓 awesomelist by Rajasegar ChandranMichael Geers / @naltatis
thank you for listening!stay healthyMichael Geers / @naltatis
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 creditsbuilt with micro frontends
naltatis
megabitsenmzq
oracle4engineer
line_developers
yayoi_dd
6onoda
akki_megane
nikkei_engineer_recruiting
bun913
robots
safie_recruit
uzulla
line_developers_tw
matthewcrist
zakiyama
pedronauck
bkeepers
tanoku
lara
lynnandtonic
jnunemaker
robhawkes
lauravandoore
shpigford