{"id":34229,"date":"2025-11-13T08:31:15","date_gmt":"2025-11-13T05:31:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/remote-app\/"},"modified":"2025-11-13T08:31:15","modified_gmt":"2025-11-13T05:31:15","slug":"remote-app","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/remote-app\/","title":{"rendered":"Remote App"},"content":{"rendered":"


\nWebpack Module Federation ile Mikrofrontend Mimarileri<\/span><\/p>\n

Modern web uygulamalar\u0131, kullan\u0131c\u0131 beklentilerinin artmas\u0131yla birlikte giderek daha karma\u015f\u0131k hale geliyor. Peki, bu b\u00fcy\u00fckl\u00fckteki projeleri y\u00f6netmek, geli\u015ftirmek ve \u00f6l\u00e7eklendirmek neden bir kabusa d\u00f6n\u00fc\u015febiliyor? Genellikle, bunun temel nedeni, tek bir b\u00fcy\u00fck, i\u00e7 i\u00e7e ge\u00e7mi\u015f kod taban\u0131na sahip olan monolitik mimarilerdir. Bu yap\u0131, ba\u015flang\u0131\u00e7ta h\u0131zl\u0131 geli\u015fim vaat etse de, zamanla yeni \u00f6zellikler eklemeyi, farkl\u0131 teknolojileri denemeyi veya ba\u011f\u0131ms\u0131z ekiplerin ayn\u0131 kod \u00fczerinde \u00e7al\u0131\u015fmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r. De\u011fi\u015fiklikler genellikle domino etkisi yarat\u0131r, k\u00fc\u00e7\u00fck bir hata t\u00fcm uygulaman\u0131n \u00e7\u00f6kmesine neden olabilir ve her yeni da\u011f\u0131t\u0131m, t\u00fcm uygulaman\u0131n yeniden build edilmesini ve deploy edilmesini gerektirir. Bu durum, geli\u015ftirme s\u00fcre\u00e7lerini yava\u015flat\u0131r, ekiplerin otonomisini k\u0131s\u0131tlar ve inovasyonun \u00f6n\u00fcnde ciddi bir engel te\u015fkil eder.<\/p>\n

\u0130\u015fte tam da bu noktada, yaz\u0131l\u0131m mimarisinde “b\u00f6l, par\u00e7ala, y\u00f6net” ilkesini benimseyen mikrofrontendler sahneye \u00e7\u0131kar. Mikrofrontend mimarisi, b\u00fcy\u00fck ve karma\u015f\u0131k bir frontend uygulamas\u0131n\u0131, ba\u011f\u0131ms\u0131z olarak geli\u015ftirilebilen, test edilebilen ve da\u011f\u0131t\u0131labilen daha k\u00fc\u00e7\u00fck, \u00f6zerk par\u00e7alara ay\u0131rma yakla\u015f\u0131m\u0131n\u0131 ifade eder. T\u0131pk\u0131 mikroservislerin backend d\u00fcnyas\u0131nda getirdi\u011fi devrim gibi, mikrofrontendler de frontend d\u00fcnyas\u0131nda benzer bir d\u00f6n\u00fc\u015f\u00fcm\u00fc hedefler. Bu sayede, farkl\u0131 ekipler, kendi alanlar\u0131na odaklanarak, diledikleri teknolojileri kullanarak ve birbirlerinden ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fabilirler. Ancak bu par\u00e7alar\u0131 bir araya getirmek, yani farkl\u0131 kaynaklardan gelen kodlar\u0131 tek bir kullan\u0131c\u0131 aray\u00fcz\u00fcnde sorunsuz bir \u015fekilde birle\u015ftirmek teknik bir zorluktur. Geleneksel y\u00f6ntemler genellikle iframe’ler, Web Bile\u015fenleri veya istemci taraf\u0131 JavaScript \u00e7\u00f6z\u00fcmleri gibi karma\u015f\u0131k entegrasyon stratejileri gerektirirken, Webpack 5 ile gelen Module Federation \u00f6zelli\u011fi, bu zorlu\u011fa yepyeni ve \u00e7ok daha verimli bir \u00e7\u00f6z\u00fcm sunar. Module Federation, da\u011f\u0131t\u0131k uygulamalar\u0131n \u00e7al\u0131\u015fma zaman\u0131nda birbirleriyle mod\u00fcl payla\u015f\u0131m\u0131n\u0131 m\u00fcmk\u00fcn k\u0131larak, mikrofrontend mimarilerinin hayata ge\u00e7irilmesini olduk\u00e7a kolayla\u015ft\u0131r\u0131r. Bu makale, Module Federation’\u0131n temel prensiplerinden ba\u015flayarak, pratik uygulamalar\u0131na, ger\u00e7ek d\u00fcnya senaryolar\u0131na ve ileri d\u00fczey optimizasyon tekniklerine kadar kapsaml\u0131 bir rehber sunacakt\u0131r. B\u00f6ylece, monolitik yap\u0131lardan kurtulup daha esnek, \u00f6l\u00e7eklenebilir ve y\u00f6netilebilir frontend mimarileri in\u015fa etmek isteyen herkes i\u00e7in de\u011ferli bilgiler i\u00e7erecektir.<\/p>\n

Mikrofrontendler Nedir ve Neden \u00d6nemli? Temel Kavramlara Derin Bir Bak\u0131\u015f<\/h2>\n

Mikrofrontendler, bir web uygulamas\u0131n\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc, ba\u011f\u0131ms\u0131z olarak geli\u015ftirilebilen ve da\u011f\u0131t\u0131labilen k\u00fc\u00e7\u00fck, \u00f6zerk mod\u00fcllere b\u00f6lme yakla\u015f\u0131m\u0131d\u0131r. Bu kavram, backend d\u00fcnyas\u0131ndaki mikroservis mimarisinden ilham alm\u0131\u015ft\u0131r ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n y\u00f6netimini kolayla\u015ft\u0131rmay\u0131 ama\u00e7lar. Geleneksel monolitik frontend uygulamalar\u0131nda, t\u00fcm kod tek bir projede yer al\u0131r ve herhangi bir k\u00fc\u00e7\u00fck de\u011fi\u015fiklik bile t\u00fcm uygulaman\u0131n yeniden derlenip da\u011f\u0131t\u0131lmas\u0131n\u0131 gerektirir. Bu durum, \u00f6zellikle b\u00fcy\u00fck ekiplerde ve s\u0131k g\u00fcncellemelerin oldu\u011fu projelerde ciddi darbo\u011fazlara yol a\u00e7ar. Mikrofrontendler ise bu sorunu ortadan kald\u0131r\u0131r. Her bir mikrofrontend (\u00f6rne\u011fin, bir e-ticaret sitesindeki \u00fcr\u00fcn listesi, sepet veya \u00f6deme mod\u00fcl\u00fc gibi), kendi ba\u011f\u0131ms\u0131z geli\u015ftirme ya\u015fam d\u00f6ng\u00fcs\u00fcne sahip olabilir. Bu, ekiplerin kendi teknolojilerini se\u00e7ebilmelerini, ba\u011f\u0131ms\u0131z olarak geli\u015ftirme yapabilmelerini ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini h\u0131zland\u0131rabilmelerini sa\u011flar.<\/p>\n

Peki, mikrofrontendlerin sundu\u011fu avantajlar nelerdir? \u00d6ncelikle, ba\u011f\u0131ms\u0131z da\u011f\u0131t\u0131m<\/strong> imkan\u0131 sayesinde, bir mikrofrontendi de\u011fi\u015ftirmek veya g\u00fcncellemek, di\u011fer mikrofrontendleri etkilemez. Bu da riskleri azalt\u0131r ve daha h\u0131zl\u0131 iterasyon sa\u011flar. \u0130kincil olarak, teknoloji agnostisizmi<\/strong> \u00f6nemli bir faydad\u0131r. Farkl\u0131 mikrofrontendler farkl\u0131 frontend framework’lerini (React, Vue, Angular vb.) kullanabilir. \u00d6rne\u011fin, yeni bir b\u00f6l\u00fcm\u00fc React ile geli\u015ftirirken, mevcut bir b\u00f6l\u00fcm\u00fc Vue ile \u00e7al\u0131\u015fmaya devam ettirebilirsiniz. Bu, teknoloji borcunu y\u00f6netme ve yeni teknolojilere adapte olma esnekli\u011fi sunar. \u00dc\u00e7\u00fcnc\u00fcl olarak, \u00f6l\u00e7eklenebilirlik ve ekip otonomisi<\/strong> artar. B\u00fcy\u00fck bir frontend ekibi, k\u00fc\u00e7\u00fck, \u00e7apraz fonksiyonel ekiplere b\u00f6l\u00fcnebilir ve her ekip kendi mikrofrontendinden sorumlu olur. Bu, koordinasyon maliyetlerini d\u00fc\u015f\u00fcr\u00fcr ve ekiplerin daha h\u0131zl\u0131 karar al\u0131p hareket etmelerine olanak tan\u0131r. Son olarak, daha k\u00fc\u00e7\u00fck ve y\u00f6netilebilir kod tabanlar\u0131<\/strong> sayesinde, yeni geli\u015ftiricilerin projeye adaptasyonu kolayla\u015f\u0131r ve kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131 artar. Hata ay\u0131klama s\u00fcre\u00e7leri de daha hedeflidir.<\/p>\n

Elbette, mikrofrontendlerin kendi zorluklar\u0131 da vard\u0131r. Bunlar aras\u0131nda mikrofrontendler aras\u0131 ileti\u015fim<\/strong>, stil \u00e7ak\u0131\u015fmalar\u0131<\/strong>, ortak ba\u011f\u0131ml\u0131l\u0131klar\u0131n y\u00f6netimi<\/strong> ve global durum y\u00f6netimi<\/strong> gibi konular yer al\u0131r. Geleneksel olarak bu sorunlar, karma\u015f\u0131k olay yay\u0131nlama\/abonelik sistemleri, izolasyon teknikleri (Shadow DOM gibi) veya manuel ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi ile \u00e7\u00f6z\u00fclmeye \u00e7al\u0131\u015f\u0131lm\u0131\u015ft\u0131r. Ancak Webpack Module Federation, \u00f6zellikle bu entegrasyon zorluklar\u0131n\u0131 ele almak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Module Federation, farkl\u0131 Webpack build’lerinin \u00e7al\u0131\u015fma zaman\u0131nda birbirleriyle kod payla\u015fmas\u0131na olanak tan\u0131yarak, bu zorluklar\u0131n \u00e7o\u011funu basitle\u015ftirir ve mikrofrontend mimarilerinin uygulanabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu teknoloji sayesinde, her mikrofrontend, kendi ba\u015f\u0131na ba\u011f\u0131ms\u0131z bir uygulama gibi davranabilirken, gerekti\u011finde di\u011fer mikrofrontendlerin bile\u015fenlerini veya yard\u0131mc\u0131 mod\u00fcllerini do\u011frudan t\u00fcketebilir. Bu durum, \u00f6zellikle ortak bir tasar\u0131m sistemi veya payla\u015f\u0131lan yard\u0131mc\u0131 fonksiyonlar gibi senaryolarda b\u00fcy\u00fck kolayl\u0131k sa\u011flar ve geli\u015ftirme deneyimini \u00fcst d\u00fczeye ta\u015f\u0131r.<\/p>\n

Webpack Module Federation’\u0131n G\u00fcc\u00fc: Nas\u0131l \u00c7al\u0131\u015f\u0131r? Temel Mekanizmalar<\/h2>\n

Webpack Module Federation, Webpack 5 ile tan\u0131t\u0131lan devrim niteli\u011finde bir \u00f6zelliktir ve da\u011f\u0131t\u0131k JavaScript uygulamalar\u0131n\u0131n \u00e7al\u0131\u015fma zaman\u0131nda birbirleriyle kod payla\u015fmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu \u00f6zellik, mikrofrontend mimarilerinin uygulanmas\u0131n\u0131 radikal bir \u015fekilde basitle\u015ftirir, \u00e7\u00fcnk\u00fc uygulamalar\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin (remotelar) birbirlerine kendi mod\u00fcllerini (bile\u015fenler, servisler, yard\u0131mc\u0131 fonksiyonlar) a\u00e7mas\u0131n\u0131 (expose etmesini) sa\u011flar. B\u00f6ylece, ana uygulama (host) bu mod\u00fclleri sanki kendi kod taban\u0131n\u0131n bir par\u00e7as\u0131ym\u0131\u015f gibi dinamik olarak y\u00fckleyebilir. Module Federation, build zaman\u0131nda de\u011fil, \u00e7al\u0131\u015fma zaman\u0131nda mod\u00fcl payla\u015f\u0131m\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lmas\u0131yla geleneksel k\u00fct\u00fcphane veya bundle payla\u015f\u0131m y\u00f6ntemlerinden ayr\u0131l\u0131r. Bu, her bir mikrofrontend’in ayr\u0131 ayr\u0131 deploy edilebilmesi ve g\u00fcncellenebilmesi anlam\u0131na gelir.<\/p>\n

Module Federation’\u0131n kalbinde \u00fc\u00e7 temel kavram bulunur: remotes<\/code>, exposes<\/code> ve shared<\/code>.
\n* exposes<\/code><\/strong>: Bu, bir Webpack uygulamas\u0131n\u0131n (bir remote uygulaman\u0131n), di\u011fer Webpack uygulamalar\u0131 taraf\u0131ndan t\u00fcketilebilecek mod\u00fclleri nas\u0131l d\u0131\u015fa aktard\u0131\u011f\u0131n\u0131 tan\u0131mlar. \u00d6rne\u011fin, bir “Sepet” mikrofrontendi, “AddToCartButton” bile\u015fenini di\u011fer mikrofrontendlerin kullanabilmesi i\u00e7in d\u0131\u015fa aktarabilir. D\u0131\u015fa aktar\u0131lan her mod\u00fcl i\u00e7in benzersiz bir isim ve dosya yolu belirtilir.
\n* remotes<\/code><\/strong>: Bu, bir Webpack uygulamas\u0131n\u0131n (bir host uygulamas\u0131n\u0131n), hangi di\u011fer Webpack uygulamalar\u0131ndan (remotelar\u0131ndan) mod\u00fcller t\u00fcketece\u011fini tan\u0131mlar. Host uygulamas\u0131, remote’un d\u0131\u015fa aktard\u0131\u011f\u0131 mod\u00fcllere uzaktan referans verir. Her remote i\u00e7in bir isim ve remote entry noktas\u0131n\u0131n (genellikle remoteEntry.js<\/code> ad\u0131nda bir dosya) URL’si belirtilir.
\n* shared<\/code><\/strong>: Bu, birden fazla uygulama aras\u0131nda payla\u015f\u0131lan ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, React, React DOM, Material-UI gibi k\u00fct\u00fcphaneler genellikle birden fazla mikrofrontend taraf\u0131ndan kullan\u0131l\u0131r. shared<\/code> yap\u0131land\u0131rmas\u0131, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131n yaln\u0131zca bir kez y\u00fcklenmesini ve t\u00fcm mikrofrontendler taraf\u0131ndan payla\u015f\u0131lmas\u0131n\u0131 sa\u011flar. Bu, bundle boyutlar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde k\u00fc\u00e7\u00fclt\u00fcr ve performans art\u0131\u015f\u0131 sa\u011flar. Ayn\u0131 zamanda, ba\u011f\u0131ml\u0131l\u0131klar\u0131n farkl\u0131 s\u00fcr\u00fcmlerinin y\u00f6netimi i\u00e7in stratejiler (\u00f6rne\u011fin, belirli bir s\u00fcr\u00fcm\u00fc zorlama veya en az\u0131ndan bu s\u00fcr\u00fcm\u00fc kullanma) sunar.<\/p>\n

Module Federation’\u0131n \u00e7al\u0131\u015fma prensibi olduk\u00e7a basittir ancak g\u00fc\u00e7l\u00fcd\u00fcr. Her bir mikrofrontend uygulamas\u0131, kendi webpack.config.js<\/code> dosyas\u0131nda ModuleFederationPlugin<\/code>‘i yap\u0131land\u0131r\u0131r. Bu eklenti, her uygulaman\u0131n bir remoteEntry.js<\/code> dosyas\u0131 olu\u015fturmas\u0131n\u0131 sa\u011flar. Bu dosya, uygulaman\u0131n d\u0131\u015fa aktard\u0131\u011f\u0131 t\u00fcm mod\u00fcllerin bir manifestini ve bu mod\u00fcllerin nas\u0131l y\u00fcklenece\u011fine dair gerekli kodu i\u00e7erir. Bir host uygulamas\u0131, bir remote’tan bir mod\u00fcl talep etti\u011finde, Webpack bu remoteEntry.js<\/code> dosyas\u0131n\u0131 uzaktan y\u00fckler ve i\u00e7indeki manifest bilgileri sayesinde istenen mod\u00fcl\u00fc dinamik olarak getirir. Bu s\u00fcre\u00e7 tamamen \u015feffaf bir \u015fekilde ger\u00e7ekle\u015fir; geli\u015ftirici i\u00e7in remote mod\u00fcl, yerel bir mod\u00fcl gibi import edilebilir.<\/p>\n

\u00d6rne\u011fin, a\u015fa\u011f\u0131daki webpack.config.js<\/code> yap\u0131land\u0131rmas\u0131, bir “AppA” uygulamas\u0131n\u0131n “Button” bile\u015fenini d\u0131\u015fa aktarmas\u0131n\u0131 ve “react” ile “react-dom” k\u00fct\u00fcphanelerini payla\u015fmas\u0131n\u0131 g\u00f6sterir:<\/p>\n

\n\/\/ AppA\/webpack.config.js\nconst { ModuleFederationPlugin } = require('webpack').container;\n\nmodule.exports = {\n  \/\/ ... di\u011fer Webpack yap\u0131land\u0131rmalar\u0131\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'appA',\n      filename: 'remoteEntry.js',\n      exposes: {\n        '.\/Button': '.\/src\/Button.jsx', \/\/ Button bile\u015fenini d\u0131\u015fa aktar\n      },\n      shared: {\n        react: { singleton: true, requiredVersion: '^18.0.0' },\n        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },\n      },\n    }),\n  ],\n};\n<\/pre>\n
<\/code><\/p>\n
Ve bir \"AppB\" uygulamas\u0131n\u0131n \"AppA\"dan \"Button\" bile\u015fenini nas\u0131l t\u00fcketti\u011fini g\u00f6steren yap\u0131land\u0131rma:<\/p>\n
\n\/\/ AppB\/webpack.config.js\nconst { ModuleFederationPlugin } = require('webpack').container;\n\nmodule.exports = {\n  \/\/ ... di\u011fer Webpack yap\u0131land\u0131rmalar\u0131\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'appB',\n      remotes: {\n        appA: 'appA@http:\/\/localhost:3001\/remoteEntry.js', \/\/ AppA'dan mod\u00fcl t\u00fcketecek\n      },\n      shared: {\n        react: { singleton: true, requiredVersion: '^18.0.0' },\n        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },\n      },\n    }),\n  ],\n};\n<\/pre>\n
<\/code><\/p>\n
Bu yap\u0131land\u0131rmalar sayesinde, appB<\/code> uygulamas\u0131ndaki herhangi bir bile\u015fen, import Button from 'appA\/Button';<\/code> \u015feklinde appA<\/code>'n\u0131n Button<\/code> bile\u015fenini kullanabilir. Bu entegrasyonun basitli\u011fi, geli\u015ftiricilerin karma\u015f\u0131k manuel entegrasyon y\u00f6ntemleriyle u\u011fra\u015fmak yerine, i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131r.<\/p>\n
Ad\u0131m Ad\u0131m Uygulama: Basit Bir Mikrofrontend Projesi Nas\u0131l Olu\u015fturulur? Pratik Bir Rehber<\/h2>\n
Module Federation ile basit bir mikrofrontend projesi olu\u015fturmak, san\u0131ld\u0131\u011f\u0131ndan daha kolayd\u0131r. Bu b\u00f6l\u00fcmde, iki ayr\u0131 React uygulamas\u0131n\u0131 (bir host uygulamas\u0131 ve bir remote uygulamas\u0131) Module Federation kullanarak nas\u0131l entegre edece\u011fimizi ad\u0131m ad\u0131m g\u00f6sterece\u011fiz. Bu sayede, temel prensipleri uygulamal\u0131 olarak kavram\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n
Ad\u0131m 1: Proje Yap\u0131s\u0131n\u0131 Olu\u015fturma<\/strong>
\n\u00d6ncelikle, projemiz i\u00e7in iki ayr\u0131 klas\u00f6r olu\u015ftural\u0131m: host-app<\/code> ve remote-app<\/code>. Her ikisi de ba\u011f\u0131ms\u0131z birer React projesi olacak.<\/p>\n
mkdir microfrontend-demo\ncd microfrontend-demo\nmkdir host-app remote-app<\/pre>\n
<\/code><\/p>\n
\u015eimdi her bir klas\u00f6r i\u00e7inde basit bir React projesi ba\u015flatal\u0131m. create-react-app<\/code> kullanmak yerine, Webpack ve React'i manuel olarak kurarak Module Federation yap\u0131land\u0131rmas\u0131n\u0131 daha net g\u00f6relim.<\/p>\n
# host-app\ncd host-app\nnpm init -y\nnpm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel\/core @babel\/preset-react style-loader css-loader\n\n# remote-app\ncd ..\/remote-app\nnpm init -y\nnpm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel\/core @babel\/preset-react style-loader css-loader<\/pre>\n
<\/code><\/p>\n
Ad\u0131m 2: Webpack Yap\u0131land\u0131rmalar\u0131n\u0131 Olu\u015fturma<\/strong><\/p>\n
Her iki uygulama i\u00e7in webpack.config.js<\/code> dosyalar\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n
remote-app\/webpack.config.js<\/code>:<\/strong>
\nBu uygulama, bir bile\u015feni d\u0131\u015fa aktaracak (expose edecek).<\/p>\n
\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack').container;\nconst path = require('path');\n\nmodule.exports = {\n  entry: '.\/src\/index.js',\n  mode: 'development',\n  devServer: {\n    port: 3001, \/\/ Remote app 3001 portunda \u00e7al\u0131\u015facak\n  },\n  output: {\n    publicPath: 'auto', \/\/ \u00c7al\u0131\u015fma zaman\u0131nda remote entry URL'sini otomatik belirle\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.jsx?$\/,\n        loader: 'babel-loader',\n        exclude: \/node_modules\/,\n        options: {\n          presets: ['@babel\/preset-react'],\n        },\n      },\n      {\n        test: \/\\.css$\/,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'remoteApp', \/\/ Remote uygulaman\u0131n benzersiz ad\u0131\n      filename: 'remoteEntry.js', \/\/ D\u0131\u015fa aktar\u0131lan mod\u00fcllerin giri\u015f noktas\u0131\n      exposes: {\n        '.\/RemoteButton': '.\/src\/components\/RemoteButton.jsx', \/\/ RemoteButton bile\u015fenini d\u0131\u015fa aktar\n      },\n      shared: {\n        react: { singleton: true, requiredVersion: '^18.0.0' },\n        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },\n      },\n    }),\n    new HtmlWebpackPlugin({\n      template: '.\/public\/index.html',\n    }),\n  ],\n};\n<\/pre>\n
<\/code><\/p>\n
host-app\/webpack.config.js<\/code>:<\/strong>
\nBu uygulama, remote-app<\/code>'ten d\u0131\u015fa aktar\u0131lan bile\u015feni t\u00fcketecek.<\/p>\n
\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { ModuleFederationPlugin } = require('webpack').container;\nconst path = require('path');\n\nmodule.exports = {\n  entry: '.\/src\/index.js',\n  mode: 'development',\n  devServer: {\n    port: 3000, \/\/ Host app 3000 portunda \u00e7al\u0131\u015facak\n  },\n  output: {\n    publicPath: 'auto',\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.jsx?$\/,\n        loader: 'babel-loader',\n        exclude: \/node_modules\/,\n        options: {\n          presets: ['@babel\/preset-react'],\n        },\n      },\n      {\n        test: \/\\.css$\/,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: 'hostApp',\n      remotes: {\n        remoteApp: 'remoteApp@http:\/\/localhost:3001\/remoteEntry.js', \/\/ remoteApp'i tan\u0131mla\n      },\n      shared: {\n        react: { singleton: true, requiredVersion: '^18.0.0' },\n        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },\n      },\n    }),\n    new HtmlWebpackPlugin({\n      template: '.\/public\/index.html',\n    }),\n  ],\n};\n<\/pre>\n
<\/code><\/p>\n
Ad\u0131m 3: Temel React Dosyalar\u0131n\u0131 Olu\u015fturma<\/strong><\/p>\n
Her iki uygulama i\u00e7in de src<\/code> ve public<\/code> klas\u00f6rlerini ve gerekli dosyalar\u0131 olu\u015ftural\u0131m.<\/p>\n
remote-app<\/code> i\u00e7in:<\/strong>
\n*   remote-app\/public\/index.html<\/code>:<\/p>\n
\n    \n        
<\/div>\n    <\/body>\n    <\/html>\n    <\/pre>\n
<\/code>
\n*   host-app\/src\/App.js<\/code>:<\/p>\n
\n    import React, { Suspense } from 'react';\n    \/\/ remoteApp'ten RemoteButton'\u0131 dinamik olarak y\u00fckle\n    \/\/ import edilmesi host uygulamas\u0131n\u0131n remote uygulaman\u0131n remoteEntry.js dosyas\u0131n\u0131 indirmesine neden olur.\n    const RemoteButton = React.lazy(() => import('remoteApp\/RemoteButton'));\n\n    const App = () => {\n      return (\n        
\n          
Host Uygulama<\/h1>\n          
A\u015fa\u011f\u0131daki buton remote uygulamadan y\u00fckleniyor:<\/p>\n          Remote Buton Y\u00fckleniyor...<\/div>}>\n            \n          <\/Suspense>\n        <\/div>\n      );\n    };\n\n    export default App;\n    <\/pre>\n
<\/code>
\n*   host-app\/src\/index.js<\/code>:<\/p>\n
\n    import React from 'react';\n    import ReactDOM from 'react-dom\/client';\n    import App from '.\/App';\n\n    const root = ReactDOM.createRoot(document.getElementById('root'));\n    root.render(\n      \n        \n      <\/React.StrictMode>\n    );\n    <\/pre>\n
<\/code><\/p>\n
Ad\u0131m 4: Uygulamalar\u0131 \u00c7al\u0131\u015ft\u0131rma<\/strong>
\nHer iki uygulaman\u0131n package.json<\/code> dosyalar\u0131na start<\/code> script'ini ekleyin:<\/p>\n
host-app\/package.json<\/code>:<\/strong><\/p>\n
\n  \"scripts\": {\n    \"start\": \"webpack serve --open\"\n  },\n<\/pre>\n
<\/code><\/p>\n
remote-app\/package.json<\/code>:<\/strong><\/p>\n
\n  \"scripts\": {\n    \"start\": \"webpack serve --open\"\n  },\n<\/pre>\n
<\/code><\/p>\n
\u015eimdi iki terminal penceresi a\u00e7\u0131n ve her birinde ilgili klas\u00f6re giderek uygulamalar\u0131 ba\u015flat\u0131n:<\/pre>\n
<\/code># Terminal 1:
\ncd host-app
\nnpm start<\/p>\n
# Terminal 2:
\ncd remote-app
\nnpm start<\/code><\/p>\n
Uygulamalar\u0131n\u0131z\u0131n \u00e7al\u0131\u015f\u0131r hale geldi\u011fini g\u00f6receksiniz. host-app<\/code> (http:\/\/localhost:3000) sayfas\u0131nda, remote-app<\/code> (http:\/\/localhost:3001) adresinden y\u00fcklenen \"Remote Butonuna T\u0131kla!\" yazan butonu g\u00f6receksiniz. Bu, Module Federation'\u0131n ba\u015far\u0131l\u0131 bir \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6sterir. Host uygulamas\u0131, remote uygulaman\u0131n kodunu kendi bundle'\u0131na dahil etmeden, \u00e7al\u0131\u015fma zaman\u0131nda dinamik olarak getirir ve kullan\u0131r. Bu pratik \u00f6rnek, Module Federation'\u0131n mikrofrontendler i\u00e7in ne kadar g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu a\u00e7\u0131k\u00e7a ortaya koymaktad\u0131r.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri: B\u00fcy\u00fck \u00d6l\u00e7ekli Uygulamalarda Kullan\u0131m<\/h2>\n
Mikrofrontend mimarisi ve Webpack Module Federation, teoride kula\u011fa ne kadar ho\u015f gelse de, ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l bir de\u011fer yarat\u0131r? B\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k uygulamalar\u0131n kar\u015f\u0131la\u015ft\u0131\u011f\u0131 zorluklara nas\u0131l \u00e7\u00f6z\u00fcmler sunar? Bu b\u00f6l\u00fcmde, farkl\u0131 sekt\u00f6rlerden \u00f6rnek vaka analizleri ve kullan\u0131m senaryolar\u0131 ile Module Federation'\u0131n pratik faydalar\u0131n\u0131 inceleyece\u011fiz. Bu \u00f6rnekler, monolitik yap\u0131lar\u0131n getirdi\u011fi k\u0131s\u0131tlamalar\u0131 a\u015farak daha esnek, \u00f6l\u00e7eklenebilir ve y\u00f6netilebilir sistemler kurman\u0131n yollar\u0131n\u0131 g\u00f6sterecektir.<\/p>\n
1. E-ticaret Platformlar\u0131: H\u0131z ve Ba\u011f\u0131ms\u0131zl\u0131k \u0130\u00e7in B\u00f6l\u00fcnme<\/strong>
\nBir e-ticaret sitesi, \u00fcr\u00fcn listeleme, \u00fcr\u00fcn detay\u0131, sepet, \u00f6deme, kullan\u0131c\u0131 profili ve sipari\u015f takibi gibi bir\u00e7ok farkl\u0131 mod\u00fclden olu\u015fur. Geleneksel monolitik bir yap\u0131da, bu mod\u00fcllerin hepsi tek bir b\u00fcy\u00fck frontend projesinde birle\u015ftirilir. Bu durum, \u00f6rne\u011fin, \u00f6deme ak\u0131\u015f\u0131nda k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik yap\u0131ld\u0131\u011f\u0131nda t\u00fcm uygulaman\u0131n yeniden test edilmesini ve da\u011f\u0131t\u0131lmas\u0131n\u0131 gerektirebilir. Ayr\u0131ca, farkl\u0131 ekipler (\u00fcr\u00fcn ekibi, \u00f6deme ekibi, pazarlama ekibi) ayn\u0131 kod taban\u0131 \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131nda \u00e7ak\u0131\u015fmalar ya\u015fanmas\u0131 ka\u00e7\u0131n\u0131lmazd\u0131r.<\/p>\n
Module Federation \u00c7\u00f6z\u00fcm\u00fc:<\/strong>
\nE-ticaret devi bir firma, bu sorunlar\u0131 a\u015fmak i\u00e7in Module Federation'\u0131 benimseyebilir. \u00d6rne\u011fin:
\n*   \u00dcr\u00fcn Listeleme Mikrofrontendi:<\/strong> React ile geli\u015ftirilmi\u015f, kendi \u00fcr\u00fcn filtreleme, s\u0131ralama ve g\u00f6r\u00fcnt\u00fcleme mant\u0131\u011f\u0131na sahip.
\n*   Sepet Mikrofrontendi:<\/strong> Vue ile geli\u015ftirilmi\u015f, sepet i\u00e7eri\u011fi, indirim uygulama ve toplam hesaplama yeteneklerini bar\u0131nd\u0131r\u0131yor.
\n*   \u00d6deme Mikrofrontendi:<\/strong> Angular ile geli\u015ftirilmi\u015f, farkl\u0131 \u00f6deme y\u00f6ntemlerini entegre ediyor.
\n*   Kullan\u0131c\u0131 Profili Mikrofrontendi:<\/strong> Kendi teknolojisi ve mant\u0131\u011f\u0131na sahip.<\/p>\n
Ana \"shell\" uygulamas\u0131, bu mikrofrontendleri \u00e7al\u0131\u015fma zaman\u0131nda dinamik olarak y\u00fckler. Kullan\u0131c\u0131 bir \u00fcr\u00fcn\u00fc sepete ekledi\u011finde, \u00dcr\u00fcn Listeleme mikrofrontendi, Sepet mikrofrontendi ile bir olay arac\u0131l\u0131\u011f\u0131yla ileti\u015fim kurarak \u00fcr\u00fcn\u00fc eklemesini bildirir. Her ekip kendi mod\u00fcl\u00fcn\u00fc ba\u011f\u0131ms\u0131z olarak geli\u015ftirebilir, test edebilir ve devreye alabilir. Bu, \"Time-to-Market\" s\u00fcresini k\u0131salt\u0131r, ekiplerin daha h\u0131zl\u0131 yenilik yapmas\u0131n\u0131 sa\u011flar ve olas\u0131 hatalar\u0131n etkisini s\u0131n\u0131rl\u0131 bir mod\u00fclle s\u0131n\u0131rlar. \u00d6rne\u011fin, \u00f6deme mikrofrontendindeki bir hata, \u00fcr\u00fcn listeleme veya sepet i\u015flevselli\u011fini etkilemez. Bu sayede, m\u00fc\u015fteri deneyimi kesintisiz devam ederken, hata h\u0131zla izole edilip d\u00fczeltilebilir.<\/p>\n
2. Kurumsal Uygulamalar ve Dashboardlar: Esneklik ve \u00d6zelle\u015ftirme<\/strong>
\nB\u00fcy\u00fck kurumlar, genellikle \u0130nsan Kaynaklar\u0131 (\u0130K), Finans, M\u00fc\u015fteri \u0130li\u015fkileri Y\u00f6netimi (CRM) ve proje y\u00f6netimi gibi farkl\u0131 i\u015flevleri bar\u0131nd\u0131ran kompleks i\u00e7 sistemlere sahiptir. Her departman\u0131n kendi ihtiya\u00e7lar\u0131 ve veri g\u00f6rselle\u015ftirme tercihleri olabilir. Monolitik bir kurumsal portal, farkl\u0131 departmanlar\u0131n taleplerine ayn\u0131 anda cevap vermekte zorlan\u0131r.<\/p>\n
Module Federation \u00c7\u00f6z\u00fcm\u00fc:<\/strong>
\nBir banka veya b\u00fcy\u00fck bir holding, \u00e7al\u0131\u015fanlar\u0131 i\u00e7in tek bir giri\u015f noktas\u0131 sunan, ancak arka planda farkl\u0131 departmanlar taraf\u0131ndan y\u00f6netilen mod\u00fcllerden olu\u015fan bir kurumsal portala sahip olabilir.
\n*   \u0130K Paneli Mikrofrontendi:<\/strong> \u00c7al\u0131\u015fan izinleri, bordro bilgileri, performans de\u011ferlendirmeleri.
\n*   Finans Raporlama Mikrofrontendi:<\/strong> B\u00fct\u00e7e takibi, gelir-gider analizi, finansal g\u00f6stergeler.
\n*   Proje Y\u00f6netimi Mikrofrontendi:<\/strong> G\u00f6rev atamalar\u0131, zaman \u00e7izelgeleri, ilerleme takibi.<\/p>\n
Her mikrofrontend, ilgili departman\u0131n BT ekibi taraf\u0131ndan geli\u015ftirilir ve g\u00fcncellenir. Module Federation sayesinde, ana portal, bu farkl\u0131 panelleri kullan\u0131c\u0131n\u0131n yetkilerine ve tercihlerine g\u00f6re dinamik olarak d\u00fczenleyebilir. Hatta, ileri d\u00fczeyde bir \u00f6zelle\u015ftirme ile kullan\u0131c\u0131lar kendi dashboardlar\u0131n\u0131 s\u00fcr\u00fckle-b\u0131rak y\u00f6ntemiyle olu\u015fturabilir, farkl\u0131 mikrofrontendlerden gelen widget'lar\u0131 bir araya getirebilirler. Bu, son kullan\u0131c\u0131lara benzersiz bir deneyim sunarken, geli\u015ftirme ekiplerine de esneklik ve otonomi kazand\u0131r\u0131r. \u00d6rne\u011fin, \u0130K departman\u0131 yeni bir bordro mod\u00fcl\u00fc geli\u015ftirdi\u011finde, finans raporlama ekibinin projelerini durdurmas\u0131na gerek kalmaz.<\/p>\n
3. \u0130\u00e7erik Y\u00f6netim Sistemleri (CMS) ve Blog Platformlar\u0131: Mod\u00fcler Bile\u015fenler<\/strong>
\nBir haber portal\u0131 veya blog platformu, ana sayfa ak\u0131\u015f\u0131, makale detay\u0131, yorum b\u00f6l\u00fcm\u00fc, reklam alanlar\u0131 ve yazar profilleri gibi \u00e7e\u015fitli dinamik bile\u015fenlerden olu\u015fur. Bu bile\u015fenlerin her biri kendi i\u00e7inde karma\u015f\u0131k olabilir ve ba\u011f\u0131ms\u0131z olarak geli\u015ftirilmesi platformun genel esnekli\u011fini art\u0131r\u0131r.<\/p>\n
Module Federation \u00c7\u00f6z\u00fcm\u00fc:<\/strong>
\nB\u00fcy\u00fck bir medya kurulu\u015fu, i\u00e7erik y\u00f6netim sistemini Module Federation kullanarak yeniden yap\u0131land\u0131rabilir.
\n*   Haber Ak\u0131\u015f\u0131 Mikrofrontendi:<\/strong> En son haberleri g\u00f6sterir, ki\u015fiselle\u015ftirme algoritmalar\u0131 i\u00e7erir.
\n*   Yorumlar Mikrofrontendi:<\/strong> Disqus veya kendi yorum sistemini entegre eder.
\n*   Reklam Mikrofrontendi:<\/strong> Farkl\u0131 reklam a\u011flar\u0131ndan reklamlar\u0131 dinamik olarak y\u00fckler.
\n*   Yazar Profili Mikrofrontendi:<\/strong> Yazar\u0131n biyografisini ve di\u011fer makalelerini g\u00f6sterir.<\/p>\n
Bu yakla\u015f\u0131m, platformun genel performans\u0131n\u0131 ve bak\u0131m\u0131n\u0131 iyile\u015ftirir. \u00d6rne\u011fin, yorumlar b\u00f6l\u00fcm\u00fcnde yeni bir \u00f6zellik eklendi\u011finde veya bir g\u00fcvenlik yamas\u0131 uyguland\u0131\u011f\u0131nda, t\u00fcm portal\u0131n yeniden da\u011f\u0131t\u0131lmas\u0131na gerek kalmaz. Sadece yorumlar mikrofrontendi g\u00fcncellenir. Ayr\u0131ca, farkl\u0131 ekipler (edit\u00f6r ekibi, reklam ekibi, geli\u015ftirme ekibi) kendi alanlar\u0131ndaki mod\u00fcller \u00fczerinde e\u015f zamanl\u0131 \u00e7al\u0131\u015fabilir, bu da yeni \u00f6zelliklerin daha h\u0131zl\u0131 yay\u0131nlanmas\u0131na olanak tan\u0131r.<\/p>\n
Bu vaka analizleri, Module Federation'\u0131n sadece teknik bir yenilik olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda organizasyonel \u00e7evikli\u011fi art\u0131ran ve i\u015f hedeflerine ula\u015fmada kritik bir rol oynayan stratejik bir ara\u00e7 oldu\u011funu g\u00f6stermektedir. Ba\u011f\u0131ms\u0131z ekipler, farkl\u0131 teknolojiler, ba\u011f\u0131ms\u0131z da\u011f\u0131t\u0131mlar; Module Federation t\u00fcm bunlar\u0131 tek bir tutarl\u0131 kullan\u0131c\u0131 deneyiminde birle\u015ftirmeyi m\u00fcmk\u00fcn k\u0131lar.<\/p>\n
Styling, State Y\u00f6netimi ve Routing: Mikrofrontendlerde Ortak Zorluklar Nas\u0131l A\u015f\u0131l\u0131r?<\/h2>\n
Mikrofrontend mimarileri, b\u00fcy\u00fck avantajlar sunsa da, stil \u00e7ak\u0131\u015fmalar\u0131, global durum y\u00f6netimi ve y\u00f6nlendirme (routing) gibi ortak zorluklar\u0131 da beraberinde getirir. Bu zorluklar\u0131n \u00fcstesinden gelmek, ba\u015far\u0131l\u0131 bir mikrofrontend uygulamas\u0131n\u0131n anahtar\u0131d\u0131r. Webpack Module Federation, mod\u00fcl entegrasyonunu kolayla\u015ft\u0131r\u0131rken, bu mimari zorluklar i\u00e7in ek stratejiler gerektirir.<\/p>\n
Styling (Stil Y\u00f6netimi): G\u00f6rsel Tutarl\u0131l\u0131k Nas\u0131l Sa\u011flan\u0131r?<\/h3>\n
Farkl\u0131 ekiplerin ba\u011f\u0131ms\u0131z mikrofrontendler geli\u015ftirmesi, stil \u00e7ak\u0131\u015fmalar\u0131na yol a\u00e7abilir. \u00d6rne\u011fin, bir ekip bir butona belirli bir padding<\/code> verirken, di\u011fer bir ekip ayn\u0131 s\u0131n\u0131fa farkl\u0131 bir stil uygulayabilir. Bu durum, tutars\u0131z bir kullan\u0131c\u0131 deneyimi yarat\u0131r.<\/p>\n
\u00c7\u00f6z\u00fcm Yakla\u015f\u0131mlar\u0131:<\/strong>
\n1.  CSS Mod\u00fclleri veya Stil Bile\u015fenleri (CSS Modules \/ Styled Components):<\/strong> Bu teknikler, her bile\u015fenin stilini yerel olarak kapsayarak (scope ederek) global stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nler. CSS Mod\u00fclleri, CSS s\u0131n\u0131f adlar\u0131n\u0131 otomatik olarak benzersiz hale getirirken, Styled Components gibi k\u00fct\u00fcphaneler bile\u015fenlere ba\u011fl\u0131 stil olu\u015fturulmas\u0131n\u0131 sa\u011flar.<\/p>\n
\n    \/* my-component.module.css *\/\n    .button {\n      background-color: #007bff;\n      color: white;\n      padding: 10px 15px;\n      border-radius: 4px;\n    }\n    <\/pre>\n
<\/code><\/p>\n
\n    \/\/ MyComponent.jsx\n    import React from 'react';\n    import styles from '.\/my-component.module.css';\n\n    const MyComponent = () => {\n      return