{"id":33578,"date":"2025-11-04T17:31:59","date_gmt":"2025-11-04T14:31:59","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/mikro-frontendler-angularda-module-federation-ile-pratik-rehber\/"},"modified":"2025-11-04T17:31:59","modified_gmt":"2025-11-04T14:31:59","slug":"mikro-frontendler-angularda-module-federation-ile-pratik-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/mikro-frontendler-angularda-module-federation-ile-pratik-rehber\/","title":{"rendered":"Mikro Frontendler Angular’da: Module Federation ile Pratik Rehber"},"content":{"rendered":"

<\/p>\n

Modern web uygulamalar\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, onlar\u0131 geli\u015ftirmek ve s\u00fcrd\u00fcrmek giderek zorla\u015f\u0131yor. Monolitik yap\u0131lar\u0131n getirdi\u011fi k\u0131s\u0131tlamalar, ekiplerin h\u0131z\u0131n\u0131 yava\u015flat\u0131rken, \u00f6l\u00e7eklenebilirlik ve esneklik gibi kritik ihtiya\u00e7lar\u0131 kar\u015f\u0131lamakta yetersiz kalabiliyor. Peki, Angular projelerinizde bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in daha mod\u00fcler, ba\u011f\u0131ms\u0131z ve verimli bir yakla\u015f\u0131m benimsemek m\u00fcmk\u00fcn m\u00fc? Bu rehber, Angular tabanl\u0131 uygulamalar\u0131n\u0131z\u0131 Mikro Frontend mimarisine ta\u015f\u0131rken, Webpack 5’in g\u00fcc\u00fc olan Module Federation’\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.<\/p>\n

B\u00fcy\u00fck, karma\u015f\u0131k ve \u00e7ok \u00f6zellikli web uygulamalar\u0131 geli\u015ftiren ekiplerin en s\u0131k kar\u015f\u0131la\u015ft\u0131\u011f\u0131 sorunlardan biri, uygulaman\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fcyle do\u011fru orant\u0131l\u0131 olarak artan geli\u015ftirme ve bak\u0131m y\u00fck\u00fcd\u00fcr. Geleneksel monolitik bir mimaride, t\u00fcm kullan\u0131c\u0131 aray\u00fcz\u00fc tek bir kod taban\u0131nda bulunur. Bu durum, ba\u015flang\u0131\u00e7ta h\u0131zl\u0131 bir geli\u015ftirme s\u00fcreci sunsa da, projenin kapsam\u0131 geni\u015fledik\u00e7e ciddi zorluklar\u0131 beraberinde getirir. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck bir \u00f6zellik de\u011fi\u015fikli\u011fi bile t\u00fcm uygulaman\u0131n yeniden derlenmesini ve da\u011f\u0131t\u0131lmas\u0131n\u0131 gerektirebilir, bu da test s\u00fcre\u00e7lerini uzat\u0131r ve hatalar\u0131n yay\u0131lma riskini art\u0131r\u0131r. Ayr\u0131ca, farkl\u0131 ekiplerin ayn\u0131 kod taban\u0131 \u00fczerinde e\u015f zamanl\u0131 \u00e7al\u0131\u015fmas\u0131 \u00e7ak\u0131\u015fmalara yol a\u00e7abilir, ba\u011f\u0131ml\u0131l\u0131klar\u0131 i\u00e7inden \u00e7\u0131k\u0131lmaz hale getirebilir ve geli\u015ftiricilerin otonomisini s\u0131n\u0131rlar. Tek bir teknoloji y\u0131\u011f\u0131n\u0131na s\u0131k\u0131 s\u0131k\u0131ya ba\u011fl\u0131 kalmak, yeni ve daha verimli teknolojileri denemeyi veya belirli alt sistemler i\u00e7in en uygun arac\u0131 se\u00e7meyi imkans\u0131z hale getirir. \u00d6l\u00e7eklendirme de ayr\u0131 bir derttir; uygulaman\u0131n tamam\u0131n\u0131 \u00f6l\u00e7eklendirmek zorunda kal\u0131rken, asl\u0131nda sadece belirli bir b\u00f6l\u00fcm\u00fcn\u00fcn yo\u011funlu\u011funu kar\u015f\u0131laman\u0131z gerekebilir.<\/p>\n

\u0130\u015fte tam bu noktada Mikro Frontendler devreye girer. Mikro Frontend mimarisi, monolitik \u00f6n u\u00e7 uygulamas\u0131n\u0131 dikey olarak, i\u015flevsel alanlara g\u00f6re ayr\u0131lm\u0131\u015f daha k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z birimlere b\u00f6lme yakla\u015f\u0131m\u0131n\u0131 benimser. Her bir “mikro frontend”, kendi teknolojisine, geli\u015ftirme s\u00fcrecine ve da\u011f\u0131t\u0131m pipeline’\u0131na sahip olabilir. Bu, ekiplerin daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alar \u00fczerinde odaklanmas\u0131n\u0131 sa\u011flar, ba\u011f\u0131ms\u0131z olarak geli\u015ftirme yapmalar\u0131na olanak tan\u0131r ve b\u00f6ylece daha h\u0131zl\u0131 yineleme ve da\u011f\u0131t\u0131m yapabilirler. Her bir mikro frontend kendi ba\u015f\u0131na bir \u00fcr\u00fcn gibi davran\u0131r, bu da tak\u0131m otonomisini ve m\u00fclkiyetini art\u0131r\u0131r. Monolitik yap\u0131n\u0131n aksine, bir mikro frontenddeki hata veya g\u00fcncelleme di\u011ferlerini etkilemez. Ayr\u0131ca, farkl\u0131 par\u00e7alar\u0131n farkl\u0131 teknolojilerle (\u00f6rne\u011fin, bir b\u00f6l\u00fcm Angular, di\u011feri React veya Vue ile) geli\u015ftirilmesine olanak tan\u0131yarak teknoloji esnekli\u011fini de art\u0131r\u0131r. Bu esneklik, \u00f6zellikle b\u00fcy\u00fck ve uzun \u00f6m\u00fcrl\u00fc projelerde, zamanla de\u011fi\u015fen teknoloji trendlerine uyum sa\u011flamak a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. B\u00f6ylece, uygulaman\u0131z\u0131n belirli b\u00f6l\u00fcmlerini, genel yap\u0131y\u0131 bozmadan kademeli olarak modernize edebilirsiniz. Monolitik yap\u0131n\u0131n getirdi\u011fi t\u00fcm bu operasyonel ve geli\u015ftirme zorluklar\u0131, modern ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 i\u00e7in Mikro Frontendleri cazip bir alternatif haline getirir.<\/p>\n

Mikro Frontend Mimarisi ve Angular Ekosistemi: Neden Bu Kadar Uyumlu?<\/h2>\n

Mikro Frontend mimarisi, b\u00fcy\u00fck \u00f6n u\u00e7 uygulamalar\u0131n\u0131 y\u00f6netilebilir, ba\u011f\u0131ms\u0131z par\u00e7alara ay\u0131rarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmay\u0131, tak\u0131mlar aras\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131 azaltmay\u0131 ve teknolojik esnekli\u011fi art\u0131rmay\u0131 hedefler. Temel olarak, bir web uygulamas\u0131n\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc, mikro servislerin arka u\u00e7ta yapt\u0131\u011f\u0131 gibi, dikey olarak b\u00f6ler. Her bir mikro frontend, kendi i\u015f alan\u0131na odaklanan, ba\u011f\u0131ms\u0131z olarak geli\u015ftirilebilen, test edilebilen ve da\u011f\u0131t\u0131labilen bir mini uygulamad\u0131r. Bu yakla\u015f\u0131m\u0131n en b\u00fcy\u00fck faydalar\u0131ndan biri, farkl\u0131 ekiplerin ayn\u0131 anda farkl\u0131 \u00f6zellikler \u00fczerinde \u00e7al\u0131\u015f\u0131rken birbirlerini engellemelerini \u00f6nlemesidir. \u00d6rne\u011fin, bir e-ticaret platformunda “\u00fcr\u00fcn listeleme”, “sepet” ve “\u00f6deme” gibi farkl\u0131 i\u015flevler, ayr\u0131 mikro frontendler olarak ele al\u0131nabilir. Her bir mikro frontend, kendi ekibi taraf\u0131ndan, kendi zaman \u00e7izelgesine g\u00f6re geli\u015ftirilebilir ve canl\u0131ya al\u0131nabilir. Bu durum, “tak\u0131m otonomisi” kavram\u0131n\u0131 \u00f6n plana \u00e7\u0131kar\u0131r ve ekiplerin daha h\u0131zl\u0131 ve \u00e7evik hareket etmesine olanak tan\u0131r.<\/p>\n

Angular, g\u00fc\u00e7l\u00fc mod\u00fcler yap\u0131s\u0131, bile\u015fen tabanl\u0131 mimarisi ve zengin ara\u00e7 ekosistemi sayesinde Mikro Frontendler i\u00e7in son derece uygun bir platformdur. Angular’\u0131n kendi mod\u00fcl sistemi (NgModule’ler), ba\u011f\u0131ms\u0131z i\u015flevsellikleri grupland\u0131rmak i\u00e7in do\u011fal bir yol sunar. Her bir mikro frontend, kendi Angular mod\u00fcl\u00fc veya hatta kendi Angular projesi olarak d\u00fc\u015f\u00fcn\u00fclebilir. Angular CLI, yeni projeler olu\u015fturmay\u0131, bile\u015fenler ve mod\u00fcller eklemeyi kolayla\u015ft\u0131rarak bu par\u00e7al\u0131 yap\u0131n\u0131n y\u00f6netimini basitle\u015ftirir. Ayr\u0131ca, Angular’\u0131n g\u00fc\u00e7l\u00fc tip sistemi (TypeScript) ve kapsaml\u0131 test ara\u00e7lar\u0131, ba\u011f\u0131ms\u0131z mikro frontendlerin kalitesini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131rmaya yard\u0131mc\u0131 olur. Router mekanizmas\u0131 ise farkl\u0131 mikro frontendler aras\u0131nda sorunsuz ge\u00e7i\u015fler sa\u011flamak i\u00e7in ideal bir temel sunar.<\/p>\n

Bu uyum, Webpack 5 ile gelen Module Federation \u00f6zelli\u011fi sayesinde daha da g\u00fc\u00e7lenmi\u015ftir. \u00d6nceleri, Angular uygulamalar\u0131n\u0131 mikro frontend mimarisine ta\u015f\u0131mak, karma\u015f\u0131k iframe \u00e7\u00f6z\u00fcmleri, k\u00fct\u00fcphane payla\u015f\u0131m zorluklar\u0131 veya sunucu taraf\u0131nda birle\u015ftirme gibi y\u00f6ntemlerle biraz sanc\u0131l\u0131 olabiliyordu. Ancak Module Federation, bu zorluklar\u0131n \u00e7o\u011funu ortadan kald\u0131r\u0131yor. Webpack 5’in bu \u00f6zelli\u011fi, farkl\u0131 Webpack build’lerinin \u00e7al\u0131\u015fma zaman\u0131nda (runtime) kodlar\u0131n\u0131 payla\u015fmas\u0131n\u0131 ve dinamik olarak y\u00fcklemesini m\u00fcmk\u00fcn k\u0131lar. Bu, host (ana) uygulaman\u0131n, uzak (remote) bir mikro frontend taraf\u0131ndan a\u00e7\u0131\u011fa \u00e7\u0131kar\u0131lan (exposed) bir bile\u015feni veya mod\u00fcl\u00fc sanki kendi projesinin bir par\u00e7as\u0131ym\u0131\u015f gibi kolayca kullanabilmesi anlam\u0131na gelir. Angular’\u0131n bile\u015fen ve mod\u00fcl odakl\u0131 yap\u0131s\u0131yla birle\u015fti\u011finde, Module Federation, ger\u00e7ek bir ba\u011f\u0131ms\u0131zl\u0131k ve dinamik y\u00fckleme kabiliyeti sunarak, Angular projelerini Mikro Frontend mimarisine entegre etmek i\u00e7in en modern ve verimli yollardan birini te\u015fkil eder. Bu sinerji, b\u00fcy\u00fck \u00f6l\u00e7ekli Angular uygulamalar\u0131nda geli\u015ftirme verimlili\u011fini, esnekli\u011fi ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi radikal bir \u015fekilde art\u0131rma potansiyeline sahiptir.<\/p>\n

Module Federation Derinlemesine: Webpack 5 ve Dinamik Mod\u00fcl Y\u00fckleme Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

Webpack 5 ile birlikte hayat\u0131m\u0131za giren Module Federation, JavaScript uygulamalar\u0131nda mod\u00fclerli\u011fi ve kod payla\u015f\u0131m\u0131n\u0131 tamamen yeni bir seviyeye ta\u015f\u0131yan devrim niteli\u011finde bir \u00f6zelliktir. Bu \u00f6zellik, farkl\u0131 Webpack derlemelerinin (yani farkl\u0131 projelerin) \u00e7al\u0131\u015fma zaman\u0131nda birbirleriyle kod payla\u015fmas\u0131n\u0131 ve dinamik olarak mod\u00fcl y\u00fcklemesini sa\u011flar. Geleneksel olarak, birden fazla uygulamay\u0131 tek bir sayfada \u00e7al\u0131\u015ft\u0131rmak istedi\u011finizde, ya her uygulaman\u0131n kendi ba\u011f\u0131ms\u0131z betiklerini y\u00fcklemesi ve global de\u011fi\u015fkenler \u00fczerinden ileti\u015fim kurmas\u0131 (ki bu karma\u015faya yol a\u00e7ar), ya da uygulamalar\u0131 iframe’ler i\u00e7inde izole etmek (ki bu da performans ve ileti\u015fim k\u0131s\u0131tlamalar\u0131 getirir) gibi y\u00f6ntemler kullan\u0131l\u0131rd\u0131. Module Federation, bu zorluklar\u0131 a\u015farak, uygulamalar aras\u0131 kod payla\u015f\u0131m\u0131n\u0131 ve entegrasyonu \u00e7ok daha do\u011fal ve verimli hale getirir.<\/p>\n

Module Federation’\u0131n temelinde \u00fc\u00e7 anahtar kavram yatar: remotes<\/code>, exposes<\/code> ve shared<\/code>.<\/p>\n