Micro-Frontends
Micro-Frontend Yaklaşımları için (Framework ve Pluginler) — 1
Bu yazıda Micro Frontend ne olduğuna ve Enterprise dünyadan bunun için kullanılan alternatif yöntemlerin neler olduğuna bu yazıda anlamaya çalışacağız.
Bir şirketin boyutunun belli bir büyüklükte olması, aynı ürün üzerinde birden fazla ekibin çalışması durumları için micro-servis mimarisinin gelişmiş olduğunu görmüştük. Bu kısımların backend dünyası için nasıl geliştiğini Kubernates, Docker altyapılarının dünyada artık bir standart olarak kullanıldığını görebilirsiniz. Peki Frontend dünyasında ki bu durumun karşılığı nedir ?
Microfrontend Nedir ?
Benim anladığım ise Micro Frontends ,
- Etkileşim: uygulamanızı oluşturan modülleri/parçaları dikey ve yatay alanlarda bölmek istiyorsanız ve bunlar arasındaki etkileşim az ise.
- Gereksinim: uygulamanızı oluşturan bileşen/bileşen gruplarının gereksinimleri (performans, hız, güvenlik vb… bileşenler arasında farklılık gösteriyorsa)
- Organizasyonel Yapı: bu bileşenlerin microservis olarak ekipleri birbirinden ayrı ve kendi geliştirme takvimleri bulunuyor ise
- Canlıya Çıkma Süreci: Bileşen geliştirim, bakım ve canlıya çıkma süreçleri birbirinden ayrılmasını bağımsız haline gelmesine ihtiyacımız varsa.
- Teknoloji: Farklı diller, farklı kütüphaneler , farklı framework kullanılmak isteniyor isek
bu durumda UI ekranında farklı farkı geliştirilen bu bileşenlerin iFrame, Federation, Fragment yapıların bir Container(Shell) içerisinde birleştirilmesi sağlanırsa bu mimariye Micro Frontends deniyor.
Bu yapılardaki ihtiyaçlardan kaynaklı kullanılması gereken, oluşan sorunları çözmeyi sağlayacak bir sürü teknik konu var. Bu konuların daha sonra değerlendirmek üzere , Kısaca başlıklardan bahsedelim.
- Styling: Ortak CSS.
- Shared Component Library: Ortak Bileşen Kütüphanesi (Module Federation vb..)
- Cross Application Communication: Bileşenlerin iFrame gibi yapılarda EventBus üzerinden haberleşmesi
- Backend Communication: BFF pattern (Backend for Frontends)
Thougtworks Tech Radar (Microfrontends)
Öncelikle 2016 yılında Thougtworks Teknoloji Radarına giren bu yaklaşım. 2019–2020 yıllarında oldukça parlayan(hype) olan bir konuydu.
Bu süreç içerisinde çıkan teknolojiler sektörde hale Enterprise (Büyük ölçekli olan uygulamalarda sıkça kullanılmaktadır. 2020 yılında Webpack 5 içerisine Module Federation yapısı eklenerek Microfrontend yapısının sadece iFrame değil’de direk React’ın doğal proje ortamında da yapılabilmesine olanak sağlayacak hale getirildi.
Puzzle.js
16 May 2019 yılında Trendyol ekibi Puzzle.js adında bir Micro Frontend yapısı ortaya çıkardılar. Bu linkten videoyu izleyebilirsiniz. (Ahmet Can Güven)
Daha sonrasında 26 Mayıs 2019'da Dan Abramov Micro Frontend kavramını anlamıyorum, yani böyle bir kavram neden var bu teknik bir konu değil daha çok organizasyonel bir konu dediği tweet serisi
Bunun üzerine 27 Mayıs 2019 Luce Mezarilla’ nın bu yoruma verdiği cevap oldukça önemli (bu yazıya bu linkten erişebilirsiniz)
Micro-frontends are not trying to replace components, it’s a possibility we have that doesn’t fit in all the projects like components are not the answer for everything.
Bu yazıda özetle büyük ölçekli şirketlerde 200 ve daha fazla Frontend, Backend mühendisinin çalıştığı firmalarda Micro Frontend yaklaşımlarının çok başarılı bir şekilde çalıştığından bahsediyor. Küçük ölçekli projelerde bu işler normal bir şekilde olurken büyük ölçeklerde işlerin karıştığı, mücadele edilecek bir çok konun çıktığından bahsediyor.
Open Components, Interface Framework
Burada Micro Frontend için farklı yöntemler olduğunu, kendilerinin son ekranı oluşturmak için iframe yapılarını kullandıklarını bu yapıların pre-rendering yöntemi ile CDN, vb Cache üzerinde birleştirmek yöntemi bu işlemleri gerçekleştirebilirsiniz.
Single SPA , System JS
2nci bir yöntemde orchestrator kullanarak bu yapıların SPA(Single Page App) üzerinden sunmasına dayanan frameworklerdir. Burada orchestrator ServerSide/Edge ve ClientSide olacak farklılık gösterebilir.
10 Haziran 2019 Martin Fowler sitesinde yayınlanan Jam Jackson tarafından yayınlanana Microfrontend blog yazısında bu konuyu farklı alanlar konusunda analiz eden ve örnekleyen bir yazı çıkardılar.
Özetle aşağıdaki başlıklar açısından tüm konseptleri inceleyen bir blog yazısı olmuş.
- Benefits
- Integration Approaches
- Styling
- Shared Component Libraries
- Cross-App Communication
- Backend Communication
- Testing
- Downsides
2020 Ocak ayında Oğuzhan Aslan’ın Hepsiburada Micro Frontends Dönüşümü blog yazısını okuyabilirsiniz.
Webpack Module Federation
2 Mart 2020 yılında Zack Jackson Webpack 5 Module Federation: A game-changer in JavaScript architecture isimli bir blog ve webpack plugini ile Frontend Microservis federated modüller şeklinde geliştirip birbirleri içerisinden kullanılabilecek bir plugin yapısı oluşturuldu Bunun diğer yöntemlerden farkı ;
- Framework değil: Module Federation bir plugin web Webpack içerisine ekleniyor. Bu sizin kendi projelerinizi istediğiniz esneklikte geliştirmenize izin veriyor.
- Bileşenleri Run-Time entegre ediyor. Bu yüzden deployment veya bağımlılıklar açısından diğer microfrentend bağımlı değilsiniz.
Bu yapınında getirdiği belli zorluklar olsada diğer Webpack içerisinden Module Federation örüntüsü ile yapıyor olması bunun daha lightweight bir çözüm yöntemi olduğunu düşünebiliriz.
Tabi diğer yaklaşımlara göre bazı dezavantajları bulunuyor. Diğer yöntemlerde farklı farklı frameworkleri Angular, Vue, React, Ember bir arada kullanabilirken burada ortam bir framework önceden seçmek gerekiyor.
Bu arada sadece Webpack ait değil Parcel, Rollup ve Vite gibi Bundler içinde Module Federation pluginleri bulunmaktadır.
Bit
25 Agustos 2020'de baktığımızda Jonathan Saring Bit.dev sitesinin micro-frontend yapısını nasıl kurduklarını How We Build Micro Frontends blog yazısında anlatıyor. Genelde microfrontend’ler bu composition olayını run-time’da (server, client-side) gerçekleştirirken Bit bunu build-time gerçekleştiriyor.
Diğer Framework’ler
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
