0Pricing
React Academy · Ders

Mikro Ön Uç Kavramları ve Ödünleşimler

Ekiplerin mikro ön uçları neden benimsediğini ve çalışma zamanı ile derleme zamanı bölme yaklaşımlarını öğrenin.

Mikro Ön Uç Kavramları ve Ödünleşimler, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Mikro Ön Uçlar Nedir?

Mikro ön uçlar, mikro hizmet yaklaşımını kullanıcı arayüzü katmanına taşır. Tek bir web uygulaması, ayrı ekiplerin sahip olduğu, bağımsız olarak geliştirilen ve dağıtılan ön uç parçalarına bölünür.

Tümleştirme Stratejileri

Üç ana tümleştirme stratejisi vardır: derleme zamanı (npm paketleri), sunucu tarafı (uçta birleştirme) ve çalışma zamanı (Modül Federasyonu, iframe'ler, web bileşenleri).

Derleme Zamanı Tümleştirmesi

Paylaşılan bileşenleri npm paketleri olarak yayımlayın. Bu yöntem basittir; ancak her değişiklik, tüm tüketicilerin yeniden yayımlanmasını ve yeniden dağıtılmasını gerektirir — bu nedenle gerçekten bağımsız bir dağıtım değildir.

// Team A publishes:
npm publish @company/design-system

// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independent

Module Federation ile Çalışma Zamanı Tümleştirmesi

Webpack 5 Module Federation, bir uygulamanın (ana uygulama) başka bir uygulamadaki (uzak uygulama) bileşenleri çalışma zamanında yüklemesini sağlar — gerçek bağımsız dağıtım.

iframe Tümleştirmesi

Mikro ön uçları en yüksek yalıtım için iframe'lere gömün. Artıları: sıfır CSS/JS çakışması. Eksileri: zayıf kullanıcı deneyimi (kaydırma, odaklanma, boyutlandırma), durum paylaşımının zor olması ve SEO açısından elverişsiz olması.

Web Bileşenleri

Her mikro ön ucu bir özel öğe içine sarın. Bu yaklaşım her çatıyla çalışır ve yerel yalıtım sağlar; ancak bağlam paylaşımı gibi React'e özgü özelliklerden yoksundur.

// Remote team builds:
customElements.define('product-detail', ProductDetailElement);

// Host team embeds:
<product-detail product-id="123" />

Dengelemeler: Faydalar

Bağımsız dağıtım (bir ekibin kullanıcı arayüzünü diğerlerine dokunmadan dağıtabilme), ekip özerkliği (kendi teknoloji yığınını ve bağımlılıklarını seçebilme) ve ölçeklenebilirlik (ekiplerin kod çakışmaları olmadan paralel çalışabilmesi).

Dengelemeler: Maliyetler

Operasyonel karmaşıklık (daha fazla depo, CI işlem hattı ve dağıtım), paket tekrarı (paylaşım olmadan React'in birden çok kez yüklenmesi), performans ek yükü ve sınırlar arasındaki hata ayıklamanın zorlaşması.

Mikro Ön Uçları Ne Zaman Seçmelisiniz

Mikro ön uçlar şu durumlarda en değerlidir: aynı ürün üzerinde çalışan birden çok büyük ekip olduğunda, farklı bölümler için farklı teknoloji yığınları gerektiğinde veya bölümleri tamamen bağımsız olarak dağıtma ihtiyacı bulunduğunda.

Mikro Ön Uçları Ne Zaman NOT Seçmelisiniz

Küçük ekiplerde (ek yükü faydaları aşar), basit uygulamalarda veya tüm ön ucun denetimi sizdeyken mikro ön uçlardan kaçının — Nx/Turborepo kullanan tek depolar genellikle yeterlidir.

Paylaşılan Tasarım Sistemi

Tümleştirme stratejisinden bağımsız olarak, paylaşılan bir tasarım sistemi (paket olarak yayımlanan veya Module Federation aracılığıyla sunulan), mikro ön uçlar arasında görsel tutarlılık sağlar.

Hızlı Kontrol

Mikro ön uçların çalışma zamanında gerçekten bağımsız olarak dağıtılmasını hangi tümleştirme yaklaşımı sağlar?

Özet

Mikro ön uçlar, ekip özerkliği ve bağımsız dağıtım için kullanıcı arayüzünü parçalara ayırır. Tümleştirme seçenekleri npm paketlerinden (basit, ancak bağımsız değil) Module Federation'a (çalışma zamanında, gerçekten bağımsız) kadar uzanır. Operasyonel maliyetleri değerlendirin — mikro ön uçlar büyük ve birden çok ekipli ürünler için uygundur, ancak küçük projelere karmaşıklık ekler.

Sıkça Sorulan Sorular

“Mikro Ön Uç Kavramları ve Ödünleşimler” dersi ücretsiz mi?

Evet — “Mikro Ön Uç Kavramları ve Ödünleşimler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Mikro Ön Uç Kavramları ve Ödünleşimler” dersinde ne öğreneceğim?

Ekiplerin mikro ön uçları neden benimsediğini ve çalışma zamanı ile derleme zamanı bölme yaklaşımlarını öğrenin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Mikro Ön Uç Kavramları ve Ödünleşimler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Mikro Ön Uç Kavramları ve Ödünleşimler
  2. Webpack 5 ile Module Federation
  3. MFE'ler Arasında Paylaşılan Durum ve Yönlendirme
  4. MFE'ler için Bağımsız Dağıtım ve CI Pipeline'ları
← React Academy Sayfasına Dön