M

MLOG

Türkçe

Webpack 5'teki JavaScript Module Federation ile mikro-ön yüzlerin gücünü ortaya çıkarın. Ölçeklenebilir, bakımı kolay ve bağımsız web uygulamaları oluşturmayı öğrenin.

Webpack 5 ile JavaScript Module Federation: Mikro-ön yüzler için Kapsamlı Bir Rehber

Sürekli gelişen web geliştirme dünyasında, büyük ve karmaşık uygulamalar oluşturmak göz korkutucu bir görev olabilir. Geleneksel monolitik mimariler genellikle artan geliştirme süresine, dağıtım darboğazlarına ve kod kalitesini sürdürmedeki zorluklara yol açar. Mikro-ön yüzler, bu zorlukların üstesinden gelmek için güçlü bir mimari model olarak ortaya çıkmıştır ve ekiplerin daha büyük bir web uygulamasının bağımsız parçalarını oluşturmasına ve dağıtmasına olanak tanır. Mikro-ön yüzleri uygulamak için en umut verici teknolojilerden biri, Webpack 5'te tanıtılan JavaScript Module Federation'dır.

Mikro-ön yüzler (Micro-frontends) Nedir?

Mikro-ön yüzler, bir ön yüz uygulamasının, farklı ekipler tarafından otonom olarak geliştirilebilen, test edilebilen ve dağıtılabilen daha küçük, bağımsız birimlere ayrıldığı bir mimari tarzdır. Her bir mikro-ön yüz, belirli bir iş alanından veya özellikten sorumludur ve tam kullanıcı arayüzünü oluşturmak için çalışma zamanında bir araya getirilirler.

Bunu bir şirket gibi düşünün: dev bir geliştirme ekibine sahip olmak yerine, belirli alanlara odaklanan birden fazla küçük ekibiniz vardır. Her ekip bağımsız olarak çalışabilir, bu da daha hızlı geliştirme döngüleri ve daha kolay bakım sağlar. Amazon gibi büyük bir e-ticaret platformunu düşünün; farklı ekipler ürün kataloğunu, alışveriş sepetini, ödeme sürecini ve kullanıcı hesabı yönetimini yönetebilir. Bu özelliklerin hepsi bağımsız mikro-ön yüzler olabilir.

Mikro-ön yüzlerin Faydaları:

Mikro-ön yüzlerin Zorlukları:

JavaScript Module Federation Nedir?

JavaScript Module Federation, ayrı ayrı derlenmiş JavaScript uygulamaları arasında çalışma zamanında kod paylaşmanıza olanak tanıyan bir Webpack 5 özelliğidir. Uygulamanızın parçalarını, npm gibi merkezi bir depoya yayınlamaya gerek kalmadan diğer uygulamalar tarafından tüketilebilecek "modüller" olarak sunmanıza olanak tanır.

Module Federation'ı, her uygulamanın kendi işlevselliğini katabildiği ve diğer uygulamalardan işlevsellik tüketebildiği, federe bir uygulama ekosistemi oluşturmanın bir yolu olarak düşünün. Bu, derleme zamanı bağımlılıklarına olan ihtiyacı ortadan kaldırır ve gerçekten bağımsız dağıtımlara olanak tanır.

Örneğin, bir tasarım sistemi ekibi, kullanıcı arayüzü bileşenlerini modül olarak sunabilir ve farklı uygulama ekipleri bu bileşenleri npm paketleri olarak yüklemeye gerek kalmadan doğrudan tasarım sistemi uygulamasından tüketebilir. Tasarım sistemi ekibi bileşenleri güncellediğinde, değişiklikler tüm tüketen uygulamalara otomatik olarak yansıtılır.

Module Federation'daki Temel Kavramlar:

Webpack 5 ile Module Federation Kurulumu: Pratik Bir Rehber

Şimdi Webpack 5 ile Module Federation kurmanın pratik bir örneğini inceleyelim. İki basit uygulama oluşturacağız: bir Host (Ana) uygulama ve bir Remote (Uzak) uygulama. Remote uygulama bir bileşen sunacak ve Host uygulama bunu tüketecektir.

1. Proje Kurulumu

Uygulamalarınız için iki ayrı dizin oluşturun: `host` ve `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. Remote (Uzak) Uygulama Yapılandırması

`remote` dizininde aşağıdaki dosyaları oluşturun:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Temel HTML yapısıyla `public/index.html` dosyasını oluşturun. Önemli olan kısım `

`

3. Host (Ana) Uygulama Yapılandırması

`host` dizininde aşağıdaki dosyaları oluşturun:

  • `src/index.js`: Uygulamanın giriş noktası.
  • `webpack.config.js`: Webpack yapılandırma dosyası.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Temel HTML yapısıyla `public/index.html` dosyasını oluşturun (remote uygulamasına benzer şekilde). Önemli olan kısım `

`

4. Babel Kurulumu

Hem `host` hem de `remote` dizinlerinde Babel bağımlılıklarını yükleyin:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. Uygulamaları Çalıştırma

Hem `host` hem de `remote` dizinlerinde, `package.json` dosyasına aşağıdaki script'i ekleyin:

```json "scripts": { "start": "webpack serve" } ```

Şimdi her iki uygulamayı da başlatın:

```bash cd remote npm start cd ../host npm start ```

Tarayıcınızı açın ve `http://localhost:3000` adresine gidin. İçinde Remote Component'in render edildiği Host uygulamasını görmelisiniz.

Temel Yapılandırma Seçeneklerinin Açıklaması:

İleri Seviye Module Federation Teknikleri

Module Federation, daha da karmaşık mikro-ön yüz mimarileri oluşturmanıza yardımcı olabilecek birçok gelişmiş özellik sunar.

Dinamik Remotes

Webpack yapılandırmasında remote uygulamaların URL'lerini sabit olarak kodlamak yerine, bunları çalışma zamanında dinamik olarak yükleyebilirsiniz. Bu, host uygulamasını yeniden derlemeye gerek kalmadan remote uygulamaların konumunu kolayca güncellemenize olanak tanır.

Örneğin, remote uygulamaların URL'lerini bir yapılandırma dosyasında veya bir veritabanında saklayabilir ve bunları JavaScript kullanarak dinamik olarak yükleyebilirsiniz.

```javascript // webpack.config.js içinde remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // remoteUrl'in 'http://localhost:3001/remoteEntry.js' gibi bir şey olduğunu varsayalım const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // module federation'ın anahtarı, remote uygulamanın // remote'daki ismi kullanarak kullanılabilir olmasıdır resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Artık host uygulamasını `?remote=http://localhost:3001/remoteEntry.js` gibi bir sorgu parametresiyle yükleyebilirsiniz.

Sürümlendirilmiş Paylaşılan Modüller

Module Federation, her modülün yalnızca bir uyumlu sürümünün yüklenmesini sağlamak için paylaşılan modüllerin sürüm yönetimini ve tekilleştirilmesini otomatik olarak halledebilir. Bu, özellikle çok sayıda bağımlılığı olan büyük ve karmaşık uygulamalarla uğraşırken önemlidir.

Webpack yapılandırmasında her paylaşılan modülün sürüm aralığını belirtebilirsiniz.

```javascript // webpack.config.js içinde shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

Özel Modül Yükleyiciler

Module Federation, farklı kaynaklardan veya farklı formatlarda modül yüklemek için kullanılabilecek özel modül yükleyicileri tanımlamanıza olanak tanır. Bu, bir CDN'den veya özel bir modül kayıt defterinden modül yüklemek için yararlı olabilir.

Mikro-ön yüzler Arasında Durum (State) Paylaşımı

Mikro-ön yüz mimarilerinin zorluklarından biri, farklı mikro-ön yüzler arasında durum paylaşımıdır. Bu zorluğun üstesinden gelmek için kullanabileceğiniz birkaç yaklaşım vardır:

Module Federation ile Mikro-ön yüzleri Uygulamak için En İyi Pratikler

Module Federation ile mikro-ön yüzleri uygularken akılda tutulması gereken bazı en iyi pratikler şunlardır:

Module Federation'ın Gerçek Dünya Uygulama Örnekleri

Özel vaka çalışmaları genellikle gizli olsa da, Module Federation'ın inanılmaz derecede yararlı olabileceği bazı genelleştirilmiş senaryolar şunlardır:

Sonuç

Webpack 5'teki JavaScript Module Federation, mikro-ön yüz mimarileri oluşturmak için güçlü ve esnek bir yol sağlar. Ayrı ayrı derlenmiş JavaScript uygulamaları arasında çalışma zamanında kod paylaşmanıza olanak tanır, bu da bağımsız dağıtımları, teknoloji çeşitliliğini ve gelişmiş ekip özerkliğini mümkün kılar. Bu kılavuzda belirtilen en iyi pratikleri izleyerek, ölçeklenebilir, sürdürülebilir ve yenilikçi web uygulamaları oluşturmak için Module Federation'dan yararlanabilirsiniz.

Ön yüz geliştirmenin geleceği şüphesiz modüler ve dağıtık mimarilere doğru eğilmektedir. Module Federation, bu modern sistemleri oluşturmak için çok önemli bir araç sağlar ve ekiplerin daha yüksek hız, esneklik ve dayanıklılıkla karmaşık uygulamalar oluşturmasını sağlar. Teknoloji olgunlaştıkça, daha da yenilikçi kullanım durumlarının ve en iyi pratiklerin ortaya çıkmasını bekleyebiliriz.