# Micro Frontend Nedir ? Micro Frontends, günümüzde modern web uygulamalarının daha verimli ve esnek bir şekilde geliştirilmesine yardımcı olan bir mimari yaklaşımdır. Micro Frontends, günümüzde modern web uygulamalarının daha verimli ve esnek bir şekilde geliştirilmesine yardımcı olan bir mimari yaklaşımdır. Bu yaklaşım, farklı ekiplerin bağımsız olarak çalışabileceği ve uygulamanın farklı bileşenlerini ayrı ayrı yönetebileceği bir yapı sunar. İşte Micro Frontends mimarisini daha iyi anlayabilmeniz için bazı anahtar noktalar: 1. Etkileşim: Micro Frontends mimarisi, uygulamanın modüllerini veya parçalarını dikey ve yatay alanlarda bölmeyi hedefler. Bu sayede, farklı modüller arasındaki etkileşim azaltılır ve ekipler daha bağımsız bir şekilde çalışabilir. 2. Gereksinimler: Uygulamanın bileşenleri veya bileşen grupları arasında performans, hız, güvenlik gibi gereksinimlerde farklılık olması durumunda Micro Frontends mimarisi oldukça avantajlıdır. Bu sayede her bir bileşen, kendi gereksinimlerine göre optimize edilebilir. 3. Organizasyonel Yapı: Micro Frontends, uygulamanın bileşenlerinin microservis olarak ayrı ekipler tarafından yönetilmesine olanak tanır. Bu da ekiplerin kendi geliştirme takvimlerine sahip olmasını ve daha bağımsız bir şekilde çalışmasını sağlar. 4. Canlıya Çıkma Süreci: Micro Frontends mimarisi, bileşen geliştirme, bakım ve canlıya çıkma süreçlerini birbirinden ayırarak bağımsız hale getirir. Bu sayede, her bir bileşenin güncelleme ve bakımı daha kolay ve hızlı bir şekilde gerçekleştirilebilir. 5. Teknoloji: Micro Frontends, farklı diller, kütüphaneler ve framework'lerin kullanılmasına olanak tanır. Bu sayede ekipler, kendilerine en uygun teknolojileri kullanarak çalışabilirler. Micro Frontends mimarisinde, farklı ekipler tarafından geliştirilen bileşenler, iFrame, Federation, Fragment gibi yapılar kullanılarak bir Container (Shell) içerisinde birleştirilir. Bu sayede, uygulama daha modüler, esnek ve kolay yönetilebilir bir hale gelir. Sonuç olarak, Micro Frontends mimarisi, modern web uygulamalarının geliştirilmesinde büyük avantajlar sunan bir yaklaşımdır. Bu sayede ekipler, daha bağımsız ve esnek bir şekilde çalışarak, uygulamanın farklı bileşenlerini daha verimli bir şekilde yönetebilir ve optimize edebilir.

Micro Frontend

## Referanslar # Micro Frontend Mimarisi Micro frontend mimarisi, web uygulamalarının ana uygulama ve bağımsız parçalar olarak adlandırılan küçük frontend uygulamalarından oluşan bir yapıya sahiptir. Micro frontend mimarisi, web uygulamalarının ana uygulama ve bağımsız parçalar olarak adlandırılan küçük frontend uygulamalarından oluşan bir yapıya sahiptir. Ana uygulama, tüm parçaların yönetildiği ve entegre edildiği bir arayüz sunar. Her bir bağımsız parça, kendi frontend uygulamasına sahiptir ve sadece kendi sorumluluk alanı ile ilgili işlemleri gerçekleştirir. Micro frontend mimarisi, uygulamaları daha modüler hale getirir ve farklı ekiplerin farklı parçalar üzerinde çalışmasına olanak tanır. Her bir parça, kendi teknolojik yığınına sahip olabilir ve geliştirme süreci kendi içinde yürütülür. Bu, ekiplerin daha hızlı ve daha bağımsız bir şekilde çalışmasını sağlar ve uygulamanın ölçeklenmesini kolaylaştırır. Micro frontend mimarisi, ana uygulama ve parçalar arasındaki iletişim için farklı teknolojiler kullanabilir. Örneğin, HTTP, WebSockets veya Event Bus kullanılabilir. Ancak, ana amaç, parçaların bağımsız çalışabilmesini ve bir bütün olarak uygulamanın sorunsuz çalışmasını sağlamaktır. Micro frontend mimarisinin avantajları arasında daha hızlı geliştirme süreci, daha iyi bir ölçeklenebilirlik, daha az hata ve daha iyi bir performans yer alır. Dezavantajları ise, daha fazla karmaşıklık, artan ekip sayısı ve iletişim sorunları olabilir. Micro frontend mimarisi, özellikle büyük ölçekli web uygulamaları için önemli bir gelişmedir ve birçok büyük şirket tarafından kullanılmaktadır. Ancak, bu yeni bir teknoloji olduğu için, birçok zorlukla da karşılaşılabilir ve bu zorlukların üstesinden gelmek için özel bir dikkat gerektirir. # Micro Frontend Uygulama Tasarımı Micro frontend mimarisi, ana uygulama ve bağımsız parçalar olarak adlandırılan frontend uygulamalarından oluşur. Ana uygulama, tüm parçaların yönetildiği ve entegre edildiği bir arayüz sunar. Micro frontend mimarisi, ana uygulama ve bağımsız parçalar olarak adlandırılan frontend uygulamalarından oluşur. Ana uygulama, tüm parçaların yönetildiği ve entegre edildiği bir arayüz sunar. Her bir bağımsız parça, kendi frontend uygulamasına sahiptir ve sadece kendi sorumluluk alanı ile ilgili işlemleri gerçekleştirir. Bağımsız parçalar, ana uygulamaya bağımsız bir şekilde entegre edilebilir ve bir bütün olarak çalışabilir. Bu entegrasyon, ana uygulamanın dinamik olarak oluşturulmasına ve farklı parçaların dinamik olarak değiştirilmesine olanak tanır. Her bir bağımsız parça, kendi teknolojik yığınına sahiptir ve geliştirme süreci kendi içinde yürütülür. Her bir parça, kendi içindeki işlemleri gerçekleştirir ve gerektiğinde ana uygulamaya bildirim gönderir. Bu bildirimler, ana uygulamanın farklı parçaları dinamik olarak değiştirmesini sağlar. Micro frontend mimarisinde, parçalar arasındaki iletişim için farklı teknolojiler kullanılabilir. Örneğin, HTTP, WebSockets veya Event Bus kullanılabilir. Ancak, parçalar arasındaki iletişim, ana amaç olan parçaların bağımsız çalışabilmesini ve bir bütün olarak uygulamanın sorunsuz çalışmasını sağlayacak şekilde tasarlanır. Micro frontend mimarisi, uygulamanın daha modüler hale gelmesini sağlar ve farklı ekiplerin farklı parçalar üzerinde çalışmasına olanak tanır. Bu, uygulamanın ölçeklenmesini kolaylaştırır ve daha hızlı bir geliştirme sürecine sahip olunmasını sağlar. Micro frontend mimarisi, özellikle büyük ölçekli web uygulamaları için önemli bir gelişmedir ve birçok büyük şirket tarafından kullanılmaktadır. Ancak, bu yeni bir teknoloji olduğu için, birçok zorlukla da karşılaşılabilir ve bu zorlukların üstesinden gelmek için özel bir dikkat gerektirir. ### Avantajları 1. Modülerlik: Micro frontend mimarisi, bir web uygulamasını daha küçük, bağımsız parçalara böler. Her bir parça, kendi teknolojik yığınına sahip olduğu için, geliştirme süreci daha hızlı ve daha verimli hale gelir. Ayrıca, farklı ekipler farklı parçalar üzerinde çalışabilir, bu da uygulamanın ölçeklenmesini kolaylaştırır. 2. Yeniden Kullanılabilirlik: Bağımsız parçalar, birçok farklı uygulamada yeniden kullanılabilir. Bu da, daha hızlı bir geliştirme sürecine yol açar ve maliyetleri azaltır. 3. Kolay Bakım: Micro frontend mimarisi, bakım işlemlerini kolaylaştırır. Her bir parça, kendi sorumluluk alanı ile ilgili işlemleri gerçekleştirdiği için, hataların tespiti ve düzeltilmesi daha kolaydır. 4. Performans: Micro frontend mimarisi, bir web uygulamasının performansını artırabilir. Her bir bağımsız parça, yalnızca kendi sorumluluk alanı ile ilgili işlemleri gerçekleştirdiği için, uygulama daha hızlı ve daha düzenli çalışabilir. 5. Esneklik: Micro frontend mimarisi, uygulamanın farklı parçalarının dinamik olarak değiştirilebilmesine olanak tanır. Bu, uygulamanın daha esnek olmasını sağlar ve farklı gereksinimlere daha kolay adapte olunmasına yardımcı olur. 6. Güvenlik: Micro frontend mimarisi, uygulamanın güvenliğini artırabilir. Her bir bağımsız parça, kendi teknolojik yığınına sahip olduğu için, güvenlik açıklarının diğer parçaları etkilemesi daha az olasıdır. Ayrıca, her bir parça, gerektiğinde güvenlik güncellemeleri alabilir. Bu avantajlar, Micro frontend mimarisinin popüler hale gelmesinde önemli bir rol oynamaktadır. Ancak, her yeni teknolojide olduğu gibi, Micro frontend mimarisi de bazı zorluklarla karşı karşıya kalabilir. Bu zorlukların üstesinden gelmek için, doğru planlama, tasarım ve uygulama teknikleri kullanılmalıdır. ### Dezavantajları 1. Karmaşıklık: Micro frontend mimarisi, bir web uygulamasını daha küçük, bağımsız parçalara böler. Bu, uygulamanın genel tasarımını daha karmaşık hale getirebilir. Ayrıca, farklı parçalar arasında veri ve işlem paylaşımı gibi konularda ekstra karmaşıklıklar da ortaya çıkabilir. 2. Yönetim Zorlukları: Micro frontend mimarisi, birden fazla bağımsız parçanın yönetimini gerektirir. Bu da, daha fazla koordinasyon, test, ve sürüm yönetimi gerektirir. Ayrıca, farklı parçaların ayrı ayrı dağıtılması ve yönetilmesi de zor olabilir. 3. Teknik Zorluklar: Micro frontend mimarisi, her bir parçanın kendi teknolojik yığınına sahip olması nedeniyle, bazı teknik zorluklarla karşılaşabilir. Özellikle, farklı parçaların uyumlu çalışması için belirli teknolojilerin kullanılması gerekebilir. 4. Performans Sorunları: Micro frontend mimarisi, birden fazla HTTP isteğinin oluşmasına neden olabilir. Bu da, performans sorunlarına yol açabilir. Ayrıca, farklı parçaların uyumlu çalışması için gereken ekstra işlemler de performansı etkileyebilir. 5. Uzun Süreli Bakım Sorunları: Micro frontend mimarisi, her bir parçanın ayrı ayrı yönetilmesini gerektirdiği için, uzun süreli bakım sorunları ortaya çıkabilir. Özellikle, farklı teknolojiler kullanıldığından, bir parçanın teknolojik yığını değişirse, diğer parçalarla uyumlu hale getirilmesi gerekebilir. Bu dezavantajlar, Micro frontend mimarisinin uygulanmasında dikkatli olunması gerektiğini göstermektedir. Özellikle, uygulamanın tasarımı, parçalar arası veri ve işlem paylaşımı, koordinasyon ve sürüm yönetimi konularında doğru planlama ve tasarım yapılması önemlidir. # Micro Frontend Geliştirme Süreci Micro frontend geliştirme süreci, web uygulamalarının daha küçük, bağımsız parçalara bölünmesi ve her bir parçanın farklı bir ekibin sorumluluğunda olması anlamına gelir. Micro frontend geliştirme süreci, web uygulamalarının daha küçük, bağımsız parçalara bölünmesi ve her bir parçanın farklı bir ekibin sorumluluğunda olması anlamına gelir. Bu yaklaşım, büyük ölçekli web uygulamalarını daha kolay yönetilebilir ve ölçeklenebilir hale getirir. Mikrofrontend geliştirme süreci, aşağıdaki adımlardan oluşur: 1. İhtiyaç Analizi: Micro frontend mimarisi, web uygulamasını daha küçük, bağımsız parçalara bölerek her bir parçanın farklı bir ekibin sorumluluğunda olmasını gerektirir. Bu nedenle, her parçanın ne yapacağı, veri ve işlem paylaşımı, ve parçalar arası koordinasyon konuları gibi ihtiyaçlar analiz edilmelidir. 2. Modüler Tasarım: Micro frontend mimarisi, web uygulamasının daha küçük, bağımsız parçalara bölünmesi anlamına gelir. Bu nedenle, modüler tasarım yaklaşımı kullanılmalıdır. Her bir parçanın kendine özgü tasarımı ve teknolojik yığını olmalıdır. 3. Prototip Geliştirme: Micro frontend mimarisi, birden fazla bağımsız parçanın geliştirilmesini gerektirir. Bu nedenle, her bir parça için prototip geliştirilmelidir. Bu prototipler, parçalar arası uyumluluk ve veri paylaşımı gibi konuların test edilmesini sağlar. 4. Entegrasyon Testleri: Micro frontend mimarisi, farklı parçaların birleştirilmesi ile oluşan bir web uygulamasını gerektirir. Bu nedenle, entegrasyon testleri yapılmalıdır. Bu testler, farklı parçaların birbiriyle uyumlu çalışıp çalışmadığını kontrol eder. 5. Sürüm Yönetimi: Micro frontend mimarisi, birden fazla bağımsız parçanın geliştirilmesini gerektirir. Bu nedenle, sürüm yönetimi de önemlidir. Her bir parça için ayrı sürüm numaraları ve sürüm geçmişi oluşturulmalıdır. 6. Dağıtım ve Yönetim: Micro frontend mimarisi, farklı parçaların ayrı ayrı yönetilmesini gerektirir. Bu nedenle, dağıtım ve yönetim süreci de ayrı ayrı gerçekleştirilmelidir. Farklı parçaların güncellenmesi, yönetimi ve izlenmesi için farklı araçlar kullanılabilir. # Micro Frontend Uygulama Senaryoları Micro frontend mimarisi kullanılarak geliştirilebilecek birçok farklı senaryo vardır Micro frontend uygulama senaryoları, web uygulamalarının daha küçük, bağımsız parçalara bölünerek her bir parçanın farklı bir ekibin sorumluluğunda olması anlamına gelen Micro frontend mimarisi kullanılarak geliştirilebilecek birçok farklı senaryo vardır. İşte bazı örnekler: 1. E-ticaret Platformu: Bir e-ticaret platformu, farklı ekipler tarafından geliştirilen ve farklı ürün kategorileri veya hizmetler için farklı Micro frontend kullanılarak oluşturulabilir. Her bir mikrofrontend, farklı bir ürün kategorisini veya hizmeti yönetir. Bu, daha hızlı ve ölçeklenebilir bir uygulama geliştirilmesini sağlar. 2. Medya Yönetim Platformu: Medya yönetim platformları, farklı türde medya dosyalarının yönetilmesini gerektirir. Micro frontendler, farklı medya türleri için farklı birimler oluşturarak bu işlevi gerçekleştirebilir. Örneğin, bir Micro frontend, resimleri yönetirken diğer bir Micro frontend, videoları yönetebilir. 3. Sosyal Medya Uygulaması: Sosyal medya uygulamaları, farklı özelliklerin ve işlevlerin yönetilmesini gerektirir. Micro frontendler, farklı özellikler ve işlevler için ayrı birimler oluşturarak bu işlevleri gerçekleştirebilir. Örneğin, bir Micro frontend, kullanıcı profillerini yönetirken diğer bir Micro frontend, mesajlaşma işlevini yönetebilir. 4. Bankacılık Uygulaması: Bankacılık uygulamaları, farklı finansal işlemlerin yönetilmesini gerektirir. Micro frontendler, farklı finansal işlemler için ayrı birimler oluşturarak bu işlevleri gerçekleştirebilir. Örneğin, bir Micro frontend, hesap işlemlerini yönetirken diğer bir Micro frontend, kredi kartı işlemlerini yönetebilir. 5. Eğitim Yönetim Sistemi: Eğitim yönetim sistemleri, farklı öğrenme materyallerinin ve öğrencilerin yönetilmesini gerektirir. Micro frontendler, farklı öğrenme materyalleri ve öğrenciler için ayrı birimler oluşturarak bu işlevleri gerçekleştirebilir. Örneğin, bir Micro frontend, öğrenci profillerini yönetirken diğer bir Micro frontend, öğrenme materyallerini yönetebilir. # Micro Frontend Güvenliği Micro frontend mimarisi, modern web uygulamalarının geliştirilmesinde giderek daha yaygın bir şekilde kullanılmaktadır. Ancak, Micro frontend mimarisi, güvenlik açıklarının oluşması mümkündür. Micro frontend mimarisi, modern web uygulamalarının geliştirilmesinde giderek daha yaygın bir şekilde kullanılmaktadır. Ancak, micro frontend mimarisi, güvenlik açıklarının ortaya çıkması açısından da riskli olabilir. Bu nedenle, micro frontend uygulamalarının güvenliği önemli bir konudur. İşte bazı micro frontend güvenliği hakkında bilmeniz gerekenler: 1. Veri Güvenliği: Micro frontend mimarisi, farklı ekipler tarafından geliştirilen bağımsız bileşenlerin birleştirilmesiyle oluşur. Bu nedenle, verilerin güvenliği, her bileşenin geliştiricisi tarafından ayrı ayrı ele alınmalıdır. Verilerin güvenliğini sağlamak için HTTPS kullanımı, doğrulama ve yetkilendirme yöntemleri, veri gizliliği ve kimlik doğrulama gibi standart güvenlik önlemleri kullanılmalıdır. 2. Kod Güvenliği: Micro frontend mimarisi, farklı bileşenlerin bir araya getirilmesiyle oluştuğu için, kod güvenliği de önemli bir konudur. Her bir bileşenin güvenli bir şekilde geliştirildiğinden emin olmak için güvenlik testleri yapılmalı, kodların düzgün bir şekilde kodlanması ve güvenlik açıklarının oluşturulmaması için standartlar ve en iyi uygulamalar takip edilmelidir. 3. API Güvenliği: Micro frontend mimarisi, farklı bileşenler arasında iletişim sağlamak için API'lerin kullanımına dayanır. API'lerin güvenliği, doğru yetkilendirme ve kimlik doğrulama yöntemleri kullanılarak sağlanmalıdır. API'lere erişimi sınırlamak için yetkilendirme mekanizmaları kullanılabilir ve API'lerin açıklanmaması için gerekli önlemler alınmalıdır. 4. Güvenlik Testleri: Micro frontend uygulamaları, farklı bileşenlerin birleştirilmesiyle oluştuğu için, güvenlik testleri yapmak daha zor olabilir. Her bileşenin ayrı ayrı test edilmesi ve sonrasında birleştirilerek sistematik bir şekilde test edilmesi gerekmektedir. Bu testler, açıklayıcı hata mesajları, güvenliği artırmak için öneriler ve raporlama araçları ile birlikte gerçekleştirilmelidir. 5. Güncelleme Yönetimi: Micro frontend mimarisi, farklı bileşenlerin bir araya gelmesiyle oluştuğu için, güncellemelerin yönetimi daha karmaşık hale gelebilir. Güncellemelerin planlanması ve koordinasyonu için bir yönetim süreci oluşturulmalıdır. # Micro Frontend Örnekleri Facebook, Netflix ve Shopify gibi ünlü şirketlerin bu mimariyi kullanmaktadır. Facebook, Netflix ve Shopify gibi ünlü şirketlerin micro frontend örnekleri: 1. Facebook: Facebook, micro frontend mimarisini, web uygulamalarında parçaları kullanarak verimliliği artırmak için kullanmaktadır. Facebook, kendi web sitesini micro frontend mimarisi ile oluşturmuştur ve bu mimari, kullanıcıların siteye daha hızlı ve daha iyi bir şekilde erişmelerini sağlamıştır. Facebook, ayrıca GraphQL gibi diğer teknolojileri de kullanarak, web uygulamalarını daha verimli hale getirmektedir. 2. Netflix: Netflix, micro frontend mimarisini, web sitesinin hızını artırmak ve kullanıcı deneyimini iyileştirmek için kullanmaktadır. Netflix, ana uygulamayı birden fazla micro frontend uygulamasına bölerek, her bir micro frontend uygulamasının kendi işlevselliğine sahip olmasını sağlamıştır. Bu, her bir uygulamanın daha hızlı yüklenmesini ve daha düşük bir gecikme süresi ile daha iyi bir kullanıcı deneyimi sunmasını sağlamıştır. 3. Shopify: Shopify, micro frontend mimarisini, e-ticaret sitelerinin daha hızlı ve daha ölçeklenebilir hale gelmesi için kullanmaktadır. Shopify, özellikle satıcıların ürünlerini yönetmesi için birkaç farklı micro frontend uygulaması oluşturmuştur. Bu uygulamalar, sitenin yüklenme süresini azaltarak, daha hızlı bir alışveriş deneyimi sunmaktadır. Ayrıca, Shopify, ana uygulamayı birden fazla micro frontend uygulamasına bölmek için React ve Redux gibi popüler teknolojileri de kullanmaktadır. Bu örnekler, micro frontend mimarisinin ne kadar yaygın ve çeşitli şekillerde kullanılabileceğini göstermektedir. Facebook, Netflix ve Shopify gibi büyük şirketler, micro frontend mimarisini kullanarak web uygulamalarının performansını artırmak ve daha iyi bir kullanıcı deneyimi sağlamak için çeşitli yollar bulmuştur. Micro frontend mimarisi, birçok şirket tarafından kullanılmaktadır ve bir dizi farklı pattern ve yaklaşım benimsenmektedir. İşte bazı micro frontend kullanıcıları tarafından benimsenen patternler ve bu patternlerin örnekleri: 1. Module Federation: Module Federation, farklı micro frontend uygulamaları arasında paylaşılan modüllerin kullanımına dayanan bir yaklaşımdır. Bu yaklaşım, webpack tarafından desteklenir ve bir ana uygulama tarafından barındırılan bağımsız uygulamaların birleştirilmesini sağlar. Örnek olarak, Airbnb, Module Federation'ı kullanarak web uygulamasını modüler hale getirdi. 2. BFF (Backend For Frontend): BFF, micro frontend mimarisi için bir backend servisidir. Bu yaklaşım, frontend geliştiricilerinin, backend servislerine daha kolay erişim sağlamasına olanak tanır. BFF, her bir micro frontend uygulaması için ayrı bir servis olarak oluşturulabilir. Örnek olarak, Spotify, BFF kullanarak micro frontend uygulamalarını geliştiriyor. 3. Static Site Generation: Static Site Generation, micro frontend uygulamaları için popüler bir yaklaşımdır. Bu yaklaşım, sayfaları önceden oluşturarak sunucu tarafında işlemeyi azaltır ve performansı artırır. Örnek olarak, GitLab, statik site oluşturma kullanarak web sitesini hızlandırdı. 4. Async Components: Async Components, farklı micro frontend uygulamaları arasında geçiş yaparken yüklenen bileşenlerin kullanımına dayanan bir yaklaşımdır. Bu yaklaşım, kullanıcının deneyimini iyileştirir ve yükleme sürelerini azaltır. Örnek olarak, eBay, Async Components kullanarak performansı artırdı. 5. Single Page Applications: Single Page Applications (SPA), micro frontend uygulamaları için popüler bir yaklaşımdır. SPA, tek bir sayfada uygulamanın tamamını yükleyerek, sayfalar arasında geçiş yaparken yeniden yükleme yapmayı önler ve performansı artırır. Örnek olarak, Netflix, SPA kullanarak web sitesini hızlandırdı. 6. Micro Apps: Micro Apps, farklı micro frontend uygulamalarının birleştirilmesi yerine, birçok küçük uygulamanın oluşturulmasına dayanan bir yaklaşımdır. Bu yaklaşım, karmaşık uygulamaların daha yönetilebilir hale gelmesini sağlar. Örnek olarak, Zillow, Micro Apps kullanarak uygulamalarını parçalara ayırdı. # Micro Frontend Karşılaşılan Zorluklar ve Çözümleri Micro frontend uygulamalarının geliştirilmesi sırasında bazı zorluklarla karşılaşılabilir. Bu zorluklar, uygulamaların karmaşıklığından kaynaklanır ve uygulamaların modüler doğası nedeniyle yönetilmesi daha zor hale gelir. Ancak, bu zorlukların üstesinden gelmek için bazı çözümler vardır. İşte micro frontend'de karşılaşılan zorluklar ve çözümleri: 1. Veri Paylaşımı Micro frontend uygulamaları arasında veri paylaşımı zor olabilir. Bunun nedeni, micro frontend uygulamalarının her birinin kendi başına çalışabilmesidir. Bu nedenle, bir uygulamanın verilerini diğer uygulamalarla paylaşmak zor olabilir. Çözüm: Veri paylaşımı için bir olay sistemi kullanılabilir. Bu sistem, uygulamalar arasındaki iletişimi kolaylaştırır ve uygulamaların verilerini birbirleriyle paylaşmasına olanak tanır. 1. Micro frontend Uygulamalarının Yönetimi Micro frontend uygulamaları, modüler doğası nedeniyle yönetilmesi daha zor hale gelir. Bu nedenle, uygulamaların yönetimi ve dağıtımı zor olabilir. Çözüm: Micro frontend uygulamalarının yönetimi ve dağıtımı için otomatikleştirme araçları kullanılabilir. Bu araçlar, uygulamaların otomatik olarak dağıtılmasını ve yönetilmesini sağlar. Ayrıca, uygulamaların otomatik olarak ölçeklenmesini sağlayabilirler. 1. Performans Micro frontend uygulamaları, her bir uygulamanın ayrı ayrı yüklenmesi nedeniyle performans sorunlarına neden olabilir. Çözüm: Bu sorunu çözmek için, uygulamaların yüklenme sürelerini azaltmak için önbellekleme kullanılabilir. Ayrıca, uygulamaların performansını artırmak için çeşitli optimizasyon teknikleri kullanılabilir. 1. Güvenlik Micro frontend uygulamaları, birden çok uygulamanın birleştirilmesi nedeniyle güvenlik sorunlarına neden olabilir. Çözüm: Güvenlik sorunlarını çözmek için, uygulamalar arasındaki iletişimi güvence altına alan güvenli bir API kullanılabilir. Ayrıca, uygulamaların her birinin güvenliği için ayrı ayrı önlemler alınabilir. 1. **Test Etme:** Micro frontend uygulamalarının test edilmesi zor olabilir. Çünkü her bir bileşenin kendi kendine test edilebilmesi gerekiyor. Bunun yanı sıra, bileşenler arasındaki iletişim de test edilmelidir. Bu, test sürecini oldukça karmaşık hale getirebilir. #### Micro frontend **Zorluklarına Çözümler** 1. **Kod tekrarları:** Kod tekrarını önlemek için, bileşenler arasında ortak bir kütüphane kullanmak ve bu kütüphanenin tutarlı bir şekilde güncellenmesi gerekir. Bu sayede, aynı kodun tekrarlanması önlenir ve kodun yeniden kullanılabilirliği artar. 2. **Bileşenler arasındaki iletişim:** Bileşenler arasındaki iletişim için, API Gateway gibi bir ara katman kullanılabilir. Bu ara katman, bileşenler arasındaki iletişimi sağlar ve istekleri yönlendirir. Bu sayede, bileşenler arasındaki iletişim daha güvenli ve öngörülebilir hale gelir. 3. **Versiyonlama:** Bileşenlerin bağımsız olarak geliştirilmesi ve yayınlanması, farklı versiyonlardaki bileşenlerin bir arada kullanılmasına neden olabilir. Bu sorunu önlemek için, bileşenlerin versiyonlanması ve versiyonlar arasındaki uyumluluğun kontrol edilmesi gerekir. 4. **Test Etme:** Micro frontend uygulamalarının test edilebilmesi için, her bir bileşenin kendi kendine test edilebilir olması gerekir. Ayrıca, bileşenler arasındaki iletişim de test edilmelidir. Bu sorunu çözmek için, birim testleri ve entegrasyon testleri kullanılabilir. Bileşenlerin bağımsız olarak test edilmesi ve ardından bir arada test edilmesi, test sürecini daha kolay hale getirebilir. Sonuç olarak, Micro frontend uygulamaları giderek popüler hale geliyor ve birçok fayda sağlıyor. Ancak, bu yaklaşımın getirdiği zorluklar da vardır ve bu zorlukların üstesinden gelmek için bazı çözümler bulunmalıdır. # Micro frontend Geleceği Micro frontend, günümüzde giderek daha popüler hale gelen bir yaklaşım ve gelecekte daha da yaygınlaşması bekleniyor. Micro frontend, günümüzde giderek daha popüler hale gelen bir yaklaşım ve gelecekte daha da yaygınlaşması bekleniyor. Özellikle büyük ölçekli uygulamaların geliştirilmesinde ve yönetilmesinde çok sayıda fayda sunuyor. Gelecekte, Micro frontend'in daha da popüler hale gelmesi bekleniyor çünkü büyük ölçekli uygulamaların geliştirilmesi giderek daha zor hale geliyor. Mikroservislerin kullanımı, uygulama geliştirme sürecini daha da bölümlere ayırmak ve geliştirme sürecini daha hızlı ve verimli hale getirmek için birçok fayda sunuyor. Aynı zamanda, Micro frontend ile birlikte, uygulamanın farklı parçalarının bağımsız olarak dağıtılması ve çalıştırılması mümkün hale geliyor. Gelecekte, Micro frontend'in geliştirme sürecini daha da kolaylaştıran yeni araçlar ve teknolojilerin geliştirilmesi bekleniyor. Bu araçlar ve teknolojiler, Mikrofrontend uygulamalarının daha hızlı ve daha verimli bir şekilde geliştirilmesine ve yönetilmesine olanak tanıyacak. Ayrıca, bu yeni araçlar ve teknolojiler, Mikrofrontend uygulamalarının daha da güvenli hale getirilmesine yardımcı olabilir. Bununla birlikte, Micro frontend yaklaşımının bazı dezavantajları da bulunmaktadır. Örneğin, farklı Micro frontend uygulamalarının farklı dil ve teknolojilerle yazılması, uygulama geliştirme ekibi için zorluklar doğurabilir. Ayrıca, uygulamanın farklı parçaları arasında veri akışının yönetimi gibi zorluklar da bulunabilir. Sonuç olarak, Micro frontend'in geleceği oldukça parlak görünüyor. Bu yaklaşımın giderek daha popüler hale gelmesiyle birlikte, uygulama geliştirme sürecini daha hızlı, verimli ve güvenli hale getiren yeni araçlar ve teknolojilerin geliştirilmesi bekleniyor. Ancak, Micro frontend yaklaşımının dezavantajları da dikkate alınmalı ve bu zorlukların üstesinden gelmek için çözümler geliştirilmelidir. # Jrontend - Terminal Uygulaması Kolaylıkla micro frontend uygulamaları kurmanda yardımcı olan bir terminal uygulamasıdır.

Jrontend Tanıtım Sayfası

Son yıllarda, micro frontend mimarisi, büyük ve karmaşık projelerin yönetimini kolaylaştırmak için popüler bir yaklaşım haline geldi. Bu yazıda, [Jrontend](http://micro.jrontend.com/) adlı bir [npm](https://www.npmjs.com/package/@jrontends/core) paketini kullanarak terminal üzerinden kolaylıkla micro frontend uygulamaları nasıl oluşturulabileceğine değineceğiz. Jrontend, öğrenme sürecini hızlandırarak micro frontend mimarisi ile hızlı bir şekilde başlamanızı sağlar. Ancak, şu anda production için önerilmediğini unutmayın. Kurulum Aşamaları: 1. **Node.js Kurulumu:** Jrontend'i kullanmaya başlamadan önce, sisteminizde Node.js'in kurulu olduğundan emin olun. Eğer yoksa, [Node.js resmi sitesi](https://nodejs.org/en/) üzerinden indirip kurabilirsiniz. 2. **Jrontend Paketini Kullanarak Uygulama Oluşturma:** Terminalinizi açın ve aşağıdaki komutu kullanarak Jrontend'in en son sürümünü kullanarak uygulama oluşturma işlemine başlayın: ```bash npx @jrontends/core@latest ``` 3. **Terminal Uygulama Örnek Seçenekleri:** Jrontend, uygulamanızı oluştururken bazı ayarları sizden isteyecektir. İşte bu ayarlar ve örnek değerleri: * **App name:** jrontend-fun * **Project Type:** Client App * **Client Type:** composer * **Client name:** composer * **Port:** 8080 * **Framework/Library:** nextjs * **With Language:** JavaScript * **With CSS Preprocessor:** None Uygulama ayarlarını girdikten sonra, Jrontend uygulamanızı oluşturacaktır. **Sonuç:** Jrontend npm paketi, micro frontend mimarisi ile çalışmaya başlamak için oldukça kullanışlı bir araçtır. Kolay kurulum aşamaları ve hazır template ile hızlı bir şekilde projeye başlayabilirsiniz. Fakat, şu an için production kullanımı için önerilmemektedir. Eğer micro frontend mimarisi öğrenmeye yeni başlıyorsanız, Jrontend'i deneyerek öğrenme sürecinizi hızlandırabilirsiniz. Happy coding 🎉 Katkı sağlamak için GitHub: Jrontend Anasayfası: Npm sayfası: # Puzzle JS Ölçeklenebilir ve son derece hızlı web siteleri için mikro frontend framework.

Puzzle JS Logo

PuzzleJs, micro frontend frameworkü olarak çalışan bir yapıdır. İşleyiş süreci şu şekildedir: **Derleme Zamanı(Compile Time)**: 1. Ağ geçitleri, kendi parçalarını, API'lerini ve ağ geçidi bilgilerini sunmaya başlar. 2. Storefront, kayıtlı ağ geçitlerinin bilgilerini alır. 3. Storefront, gerekli parçaları, bağımlılıkları ve varlıkları indirir ve önbelleğe alır. 4. Storefront, HTML'i en hızlı şablon oluşturma için bellekteki JavaScript işlevine derler. **On Request:** 1. Storefront, derlenmiş işlemin parçalı bir yanıtını gönderir, ancak bağlantıyı kapatmaz. Kullanıcılar şimdi statik içerikler ve yer tutucular ile sitenizi görebilir. Aynı zamanda, ağ geçitlerinden alınan parçaları almak için arka uç istekleri gönderir. 2. Herhangi bir parça ağ geçidinden alındığında, bunu tarayıcıya bir parça olarak gönderir ve daha önce gönderilen yer tutucuyu içerikle değiştirir. 3. Tüm parçalar gönderildiğinde, PuzzleJs bağlantıyı kapatır. Bu süreç, PuzzleJs'in mikro ön uç çerçevesi olarak nasıl çalıştığını açıklamaktadır. **Dökümantasyonundaki Önemli Noktalar** Neden? Geleneksel model, modern web siteleri için oldukça verimsizdir. * Aynı kod üzerinde çalışan birden fazla ekip, her şeyi yönetmeyi zorlaştırır. * İlk baytın süresi, en yavaş API kadar hızlıdır. * Arka uç veri toplarken, kullanıcı tarayıcısı ilk baytı beklerken zaman kaybeder. * Diğer ekiplerin özellikleri henüz hazır olmadığı için, özellikler tamamen geliştirildiğinde ve test edildiğinde çevrimiçi olamaz. * Mevcut olanın dışında farklı teknolojiler kullanamazsınız. * Belirli bir süreci ölçeklendiremezsiniz, çünkü tüm sisteme bağımlısınız. Özellikler: * İlk Bayta Kadar Süre: PuzzleJs, derleme sürecinde HTML şablonunu javascript işlevine derler. Bu işlem, istekten tamamen bağımsız olduğu için PuzzleJs, bu işlevi kullanarak ilk parçayı gönderebilir. * SEO Dostu: PuzzleJs, her şeyin sunucu tarafında hazırlandığı ve işlendiği için tamamen SEO dostudur. * Genişletilebilirlik: PuzzleJs'i özel işlevlerinizle kolayca genişletebilirsiniz. * Kolay: Bir ağ geçidi veya mağaza önü oluşturabilir ve bunları bir yapılandırma dosyası sağlayarak bağlayabilirsiniz. * Bağımsız: Ağ geçitlerinizde herhangi bir teknoloji kullanabilirsiniz, PuzzleJs teknolojilerinizden tamamen bağımsızdır. ReactJs, Vue veya başka herhangi bir JavaScript Framework. * Ölçeklenebilir: PuzzleJs, mağaza önlerini ve ağ geçitlerini birbirinden bağımsız olarak oluşturabilir. Böylece Dockerize ortamlarda tek bir projeyi kolayca ölçeklendirebilirsiniz. * Korumalı: Bir parçanın gerektirdiği API'niz devre dışı olduğunda, PuzzleJs diğer sayfa parçalarının çalışmaya devam edeceğini garanti eder. Dökümantasyon: GitHub: # Voltran JS Voltran, Hepsiburada Teknoloji Ekibi tarafından geliştirilmiş bir mikro frontend frameworküdür.

Voltran JS Logo

**Voltran'ı kullanmanız için dökümanında bahsettiği özellikleri** Hafif ve hızlı API Tek ve çoklu bileşenleri sunar Önizleme (bileşenleri görselleştirmek için) SEO dostu (gerekirse) CSS ve SCSS desteği Şimdilik sadece React'i destekler GitHub: # Webpack Module Federation
Günümüzde, web uygulamalarının karmaşıklığı ve boyutu sürekli artıyor. Bu durum, projelerin ölçeklenebilirliğini ve yönetilebilirliğini sağlamak adına daha iyi mimari yaklaşımlar gerektiriyor. Micro-Frontend mimarisi, bu sorunlara çözüm sağlamak için ortaya çıkan güçlü ve modern bir yaklaşımdır. Bu yazıda, Webpack Module Federation kullanarak micro-frontend uygulamalarını nasıl geliştirebileceğinizi ve bu teknolojinin sunduğu özellikleri ele alacağız. #### Micro-Frontend Nedir? Micro-Frontend mimarisi, büyük web uygulamalarını daha küçük, bağımsız ve kolay yönetilebilir bileşenlere ayıran bir yaklaşımdır. Bu sayede, her bir micro-frontend bileşeni, farklı teknolojiler ve çerçeveler kullanarak geliştirilebilir ve bağımsız olarak test edilebilir. Micro-Frontend mimarisi, aynı zamanda kodun daha iyi yeniden kullanılabilirliğini ve takımların paralel olarak çalışabilmesini sağlar. #### Webpack Module Federation Nedir? Webpack Module Federation, Webpack 5 ile gelen ve micro-frontend mimarisi için geliştirilmiş bir özelliktir. Bu özellik, farklı JavaScript projelerini veya uygulamalarını tek bir ortak çatıda çalıştırmayı sağlar. Module Federation, bağımsız olarak geliştirilmiş ve dağıtılmış olan JavaScript modüllerini dinamik olarak yüklemeyi ve paylaşmayı kolaylaştırır. #### Webpack Module Federation Özellikleri 1. **Kod Paylaşımı:** Webpack Module Federation, farklı uygulamalar arasında ortak kod parçalarının paylaşılmasına olanak sağlar. Bu sayede, her uygulama ortak kodları tekrar tekrar yüklemek zorunda kalmaz, bu da uygulama boyutunu ve yüklenme süresini azaltır. 2. **Lazy Loading:** Module Federation, gerektiğinde modüllerin dinamik olarak yüklenmesini sağlayarak performansı artırır. Bu sayede, kullanıcılar sadece kullanacakları özellikleri yükler ve böylece uygulama daha hızlı açılır. 3. **Versiyon Kontrolü:** Webpack Module Federation, farklı uygulamaların farklı versiyonlarda çalıştırılabilmesine olanak tanır. Bu sayede, bağımsız olarak geliştirilen ve güncellenen micro-frontends bileşenleri, eski ve yeni versiyonlarla uyumlu bir şekilde çalışabilir. 4. **Teknoloji Bağımsızlığı:** Module Federation sayesinde, farklı micro-frontend bileşenleri farklı teknolojiler ve çerçeveler kullanarak geliştirileştirilebilir. Örneğin, bir uygulamanın bir bölümü React ile geliştirilirken, başka bir bölümü Vue.js veya Angular ile geliştirilebilir. Bu, takımların daha önce sahip oldukları tecrübeleri ve becerileri kullanarak daha hızlı ve verimli bir şekilde çalışmalarını sağlar. 5. **Ekip İşbirliği:** Micro-Frontend mimarisi ve Module Federation, farklı ekiplerin bağımsız olarak çalışmasına ve kendi bileşenlerini geliştirmesine olanak tanır. Bu sayede, ekipler arası bağımlılıklar azalır ve projelerin daha hızlı tamamlanmasını sağlar. 6. **Uygulama Yönetimi:** Webpack Module Federation ile oluşturulan micro-frontend uygulamaları, tek bir ana uygulama tarafından yönetilebilir. Ana uygulama, tüm micro-frontend bileşenlerini koordine eder ve güncellemelerin veya yeni özelliklerin entegrasyonunu kolaylaştırır. \ **Örnek Kullanım Senaryosu** İki farklı micro-frontend uygulaması düşünelim: `Uygulama A` ve `Uygulama B`. Bu uygulamalar, farklı ekipler tarafından geliştirilmekte ve yönetilmektedir. Webpack Module Federation sayesinde, `Uygulama A` tarafından geliştirilen `modul1` isimli bir modül, `Uygulama B` tarafından da kullanılabilir hale gelir. Bu durumda, `Uygulama A` ve `Uygulama B` arasında kod paylaşımı sağlanmış olur ve her iki uygulama da daha hızlı ve verimli bir şekilde geliştirilebilir. Sonuç olarak, Webpack Module Federation, micro-frontend mimarisi için geliştirilmiş güçlü ve esnek bir çözümdür. Bu teknoloji sayesinde, web uygulamalarını daha kolay yönetebilir, ölçeklenebilirlik sağlayabilir ve ekipler arası işbirliğini artırabilirsiniz. İşte, modern web uygulamalarının geliştirilmesi ve yönetilmesi için Webpack Module Federation'ın sunduğu avantajlar bunlardır. # @module-federation/nextjs-mf @module-federation/nextjs-mf paketi, Next.js uygulamaları için Webpack Module Federation özelliklerini kullanmayı kolaylaştıran bir eklentidir.
`@module-federation/nextjs-mf` paketi, Next.js uygulamaları için Webpack Module Federation özelliklerini kullanmayı kolaylaştıran bir eklentidir. Next.js, React tabanlı popüler bir web uygulama çatısıdır ve sunucu tarafında oluşturma, statik site üretme ve API desteği gibi özellikler sunar. Webpack Module Federation'ın doğrudan Next.js ile uyumlu olmaması nedeniyle, bu eklenti sayesinde Next.js projelerinde micro-frontend mimarisini rahatlıkla kullanabilirsiniz. `@module-federation/nextjs-mf` paketi, Next.js'in yapılandırma sistemine entegre olarak çalışır ve böylece Module Federation özelliklerinin Next.js uygulamalarında kullanılabilmesini sağlar. `@module-federation/nextjs-mf` paketinin sunduğu bazı avantajlar şunlardır: 1. **Kolay Entegrasyon:** Bu paket, Next.js projelerinde Webpack Module Federation özelliklerini hızlı ve kolay bir şekilde etkinleştirmenizi sağlar. Böylece, Next.js uygulamalarında micro-frontend mimarisini kullanarak daha ölçeklenebilir ve yönetilebilir projeler geliştirebilirsiniz. 2. **Yapılandırma Esnekliği:** `@module-federation/nextjs-mf` paketi, Next.js ve Module Federation arasındaki yapılandırma sürecini basitleştirir. Bu sayede, farklı micro-frontend bileşenlerini ve uygulamalarını daha rahat bir şekilde entegre edebilir ve yönetebilirsiniz. 3. **Teknoloji Uyumu:** Bu eklenti sayesinde, Next.js'in sunduğu özellikler ve avantajlar korunarak, Webpack Module Federation özelliklerinden de yararlanabilirsiniz. Böylece, React tabanlı uygulamalarınızda micro-frontend mimarisini kullanarak daha iyi performans ve ölçeklenebilirlik sağlayabilirsiniz. Kısacası, `@module-federation/nextjs-mf` paketi, Next.js tabanlı projelerde micro-frontend mimarisi ve Webpack Module Federation özelliklerini kullanmayı sağlayarak, modern ve ölçeklenebilir web uygulamaları geliştirmeniz için güçlü bir araçtır. Örneklerini görmek için GitHub Projesi: # Projemizi Tanıyalım Module Federation kullanarak yapcağımız proje yapısına göz atalım.
Micro frontend uygulaması oluşturma sürecini 4 aşamada gerçekleştireceğiz. Bu süreçte Module Federation, Jrontend, React ve Vue teknolojilerini kullanacağız. Başlangıç olarak React tabanlı bir composer uygulaması oluşturacağız ve ardından hem React hem de Vue ile fragment uygulamaları geliştireceğiz. Son olarak, bu fragment uygulamalarını composer uygulamasında çağırarak kullanacağız. 1. React Composer Uygulamasını Kuralım: a. Yeni bir React projesi oluşturun: 1. `npx @jrontends/core@latest` 2. `App name: jrontend-fun` 3. `Project Type: Client App` 4. `Client Type: composer` 5. `Client Name: react-composer` 6. `Port: 3000` 7. `Framework/Library: React` 8. `With Language: JavaScript` 9. `With CSS Preprocessor: None` 2. React Fragment Uygulamasını Kuralım: 1. `npx @jrontends/core@latest` 2. `App name: jrontend-fun` 3. `Project Type: Client App` 4. `Client Type: fragment` 5. `Client Name: react_fragment` 6. `Port: 3001` 7. `Framework/Library: React` 8. `With Language: JavaScript` 9. `With CSS Preprocessor: None` 3. Vue Fragment Uygulamasını Kuralım: 1. `npx @jrontends/core@latest` 2. `App name: jrontend-fun` 3. `Project Type: Client App` 4. `Client Type: fragment` 5. `Client Name: vue_fragment` 6. `Port: 3002` 7. `Framework/Library: Vue` 8. `With Language: JavaScript` 9. `With CSS Preprocessor: None` 4. Son Adım: 1. React ve Vue fragment uygulamalarını React Composer uygulamasında çağırarak kullanmak için yapılandırmaları güncelleyin. 2. Geliştirme sunucusunu başlatın: `npm start` 3. Tarayıcınızda uygulamayı görüntüleyin ve her iki fragment uygulamanın da başarıyla yüklendiğini doğrulayın.

Son Dosya Görünümü

Bu 4 aşamayı tamamladığınızda, Module Federation, Jrontend, React ve Vue kullanarak basit bir micro frontend uygulaması oluşturmuş olacaksınız. Bu yapı, daha karmaşık uygulamalar için de temel alınarak geliştirilebilir. # React Composer Projesini Oluşturalım Oluşturacak olduğumuz React Composer Projesi bütün parçalarının birleştiği uygulama olacak. İlk adım olarak Jrontend paketini kullanarak kurulumu yapıp son adımda tekrar bu projeye geri döneceğiz. Kurulum için proje adını **jrontend-fun** tercih ediyorum. * `npx @jrontends/core@latest` * `App name: jrontend-fun` * `Project Type: Client App` * `Client Type: composer` * `Client Name: react_composer` * `Port: 3000` * `Framework/Library: React` * `With Language: JavaScript` * `With CSS Preprocessor: None` Kurulumu tamamladık. Hadi gelin içeriği inceleyelim. ## Proje Root Dizini ![](https://1650590317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqlE5JgSZf8UcNyhUnkmX%2Fuploads%2FK9iRrkmzSaWF2mSAB5up%2FScreenshot%202023-05-07%20at%2020.15.29.png?alt=media\&token=10d5382c-a625-4431-8c5a-a72636465869) React Composer uygulaması config, public ve src klasörleri bize hazır olarak Jrontend paketi ile sunulmuştur. Config kısımları webpack module federation kullanarka Webpack configlerini içerir. Public kısımı index.html yer almaktadır. Src kısmında ise JavaScript dosyalarımızın ve geliştirmeleri bu kısımdan yaparak ilerleceğimiz kısımdır. ### Package.json İnceleyelim ```json { "name": "react-composer", "version": "1.0.0", "scripts": { "start": "webpack serve --config config/webpack.dev.js", "build": "webpack --config config/webpack.prod.js" }, "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.0" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.0.0", "html-webpack-plugin": "^4.5.0", "style-loader": "^2.0.0", "webpack": "^5.4.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0", "webpack-merge": "^5.2.0" } } ``` Gerekli bağıntılarımızı(dependency) hali hazırda görüyoruz. `npm install` ile gerekli bağıntılarımızı yükleyelim `npm start` komutu ile uygulamamızı ayağa kaldıralım. Sorunsuz bir şekilde projemiz ayağa kalktı ise karşılaşmamız gereken ekranı aşağıdaki gibi olmalıdır. ![](https://1650590317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqlE5JgSZf8UcNyhUnkmX%2Fuploads%2FB3XWFdbVvbjUdQoCiRHG%2FScreenshot%202023-05-07%20at%2020.22.30.png?alt=media\&token=592d8d00-c524-4377-901f-aff186ae7f18) # React Fragment Projesini Oluşturalım Oluşturacak olduğumuz React Fragment Projesi bütün parçalarının birleştiği uygulama olacak. Kurulum için proje adını **jrontend-fun** tercih etmiştik. Tekrar o projeye ekleme yapcağımız için aynı adı yazıyoruz. * `npx @jrontends/core@latest` * `App name: jrontend-fun` * `Project Type: Client App` * `Client Type: fragment` * `Client Name: react_fragment` * `Port: 3001` * `Framework/Library: React` * `With Language: JavaScript` * `With CSS Preprocessor: None` Kurulumu tamamladık. Hadi gelin içeriği inceleyelim. ## Proje Root Dizini React Fragment uygulaması config, public ve src klasörleri bize hazır olarak Jrontend paketi ile sunulmuştur. Config kısımları webpack module federation kullanarka Webpack configlerini içerir. Public kısımı index.html yer almaktadır. Src kısmında ise JavaScript dosyalarımızın ve geliştirmeleri bu kısımdan yaparak ilerleceğimiz kısımdır. ### Package.json İnceleyelim ```json { "name": "react_fragment", "version": "1.0.0", "scripts": { "start": "webpack serve --config config/webpack.dev.js", "build": "webpack --config config/webpack.prod.js" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.1.2" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.0.0", "html-webpack-plugin": "^4.5.0", "style-loader": "^2.0.0", "webpack": "^5.4.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0", "webpack-merge": "^5.2.0" } } ``` Gerekli bağıntılarımızı(dependency) hali hazırda görüyoruz. `npm install` ile gerekli bağıntılarımızı yükleyelim `npm start` komutu ile uygulamamızı ayağa kaldıralım. Sorunsuz bir şekilde projemiz ayağa kalktı ise karşılaşmamız gereken ekranı aşağıdaki gibi olmalıdır.
# Vue Fragment Projesini Oluşturalım Oluşturacak olduğumuz Vue Fragment Projesi bütün parçalarının birleştiği uygulama olacak. Kurulum için proje adını **jrontend-fun** tercih etmiştik. Tekrar o projeye ekleme yapcağımız için aynı adı yazıyoruz. * `npx @jrontends/core@latest` * `App name: jrontend-fun` * `Project Type: Client App` * `Client Type: fragment` * `Client Name: vue_fragment` * `Port: 3001` * `Framework/Library: Vue` * `With Language: JavaScript` * `With CSS Preprocessor: None` Kurulumu tamamladık. Hadi gelin içeriği inceleyelim. ## Proje Root Dizini ![](https://1650590317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqlE5JgSZf8UcNyhUnkmX%2Fuploads%2FnRvP25ED3nqhZvikp9Sp%2FScreenshot%202023-05-07%20at%2020.35.47.png?alt=media\&token=d2a57e43-70b6-4f6c-adf1-67647b48e227) Vue Fragment uygulaması config, public ve src klasörleri bize hazır olarak Jrontend paketi ile sunulmuştur. Config kısımları webpack module federation kullanarka Webpack configlerini içerir. Public kısımı index.html yer almaktadır. Src kısmında ise JavaScript dosyalarımızın ve geliştirmeleri bu kısımdan yaparak ilerleceğimiz kısımdır. ### Package.json İnceleyelim ```json { "name": "vue_fragment", "version": "1.0.0", "scripts": { "start": "webpack serve --config config/webpack.dev.js", "build": "webpack --config config/webpack.prod.js" }, "dependencies": { "vue": "^3.0.0" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", "@vue/compiler-sfc": "^3.0.2", "babel-loader": "^8.1.0", "css-loader": "^5.0.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^4.5.0", "style-loader": "^2.0.0", "vue-loader": "^16.0.0-beta.9", "vue-style-loader": "^4.1.2", "webpack": "^5.4.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0", "webpack-merge": "^5.2.0" } } ``` Gerekli bağıntılarımızı(dependency) hali hazırda görüyoruz. `npm install` ile gerekli bağıntılarımızı yükleyelim `npm start` komutu ile uygulamamızı ayağa kaldıralım. Sorunsuz bir şekilde projemiz ayağa kalktı ise karşılaşmamız gereken ekranı aşağıdaki gibi olmalıdır.
# Projemizin Son Adımları Projemizin son adımlarını tamamlayalım 🎉 ## React Composer Uygulaması Uygulama dizinine gidip config/webpack.dev.js dosyasını açalım. ```javascript const { merge } = require('webpack-merge') const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin') const commonConfig = require('./webpack.common') const packageJson = require('../package.json') const devConfig = { mode: 'development', devServer: { port: 3000, historyApiFallback: { index: 'index.html', }, }, plugins: [ new ModuleFederationPlugin({ name: 'react-composer', remotes: { react_fragment: 'react_fragment@http://localhost:3001/remoteEntry.js', vue_fragment: 'vue_fragment@http://localhost:3002/remoteEntry.js', }, shared: packageJson.dependencies, }), ], } module.exports = merge(commonConfig, devConfig) ``` Şeklinde düzenleyelim. Oluşturmuş olduğumuz react-fragment ve vue-fragment uygulamalarımızı ekliyor ediyor gibi düşünebilirsiniz. Src/App.js dosyamızı gidip eklemiş olduğumuz React fragment'ın Composer içinde çalışmasını sağlayalım.
```jsx import React, {lazy, Suspense} from 'react' const ReactFragment = lazy(() => import('react_fragment/App')); const App = () => { return (

Welcome react-composer

) } export default App ``` Ve son dokunuşu da yaptığımıza göre tekrardan bütün uygulamalarımızı npm start diyerek ayağa kaldıralım. Ayrı ayrı çalışan javascript projelerimizi tek bir kapsayıcı react-composer uygulamasında birleşmiş hali bizi aşağıdaki gibi karşılıcak.\
### İlk micro frontend uygulamamızı tamamlamış olduk.

:)

***NOT: Daha kapsamlı açıklamalar ve uygulamalar eklenecektir.*** ***Projenin GitHub linki:*** [***https://github.com/fport/jrontend-fun***](https://github.com/fport/jrontend-fun) # Kaynakça * * * * *