Vue.js Kullanarak Micro Frontend Uygulaması Nasıl Oluşturulur?
Yazılım endüstrisinde microservices ve mikro frontends konusuna eğilim gittikçe artmaktadır. Bunun arkasındaki itici güç, birçok mühendislik ekibinin büyük karmaşık sistemler üzerinde birlikte çalışmak zorunda kaldıklarında hissettikleri acı ve hayal kırıklığından geliyor.
Hepimiz karşılaşılan yazılımsal sorunları küçük parçalara bölerek çözmenin en iyi yöntem olduğunu biliyoruz. Bundan dolayı uygulamalarımızı daha küçük, daha belirgin parçalara ayırmamız doğaldır.
Micro frontend hakkında daha fazla bilgi almak için lütfen bir önceki yazıma göz atın:
Hadi uygulamamıza geçelim:
Micro frontend mimarisinden faydalanarak çok basit bir merhaba dünya uygulaması yapacağız. Farklı JS framework’leri ile yazılmış birkaç alt uygulamadan oluşacak ve sadece `Hello ${FRAMEWORK}!” yazacak. /react veya /vue vb. dosyalarıyla bilgi alış verişi için hepsini bir araya getirecek bir container yapısına ihtiyacımız var.
Basit olması için tüm paketlerimi aynı repoda tutacağım, ancak bunu birden fazla repoda yapmamanız için hiçbir neden yok.
helloVue Uygulaması
Temel bir şeye ihtiyacımız olduğu için vue create kullanmayacağım. Bu paket için package.json dosyamı ekleyerek başlayacağım ve node modüllerimi kuracağım.
Bunu işlemi yaptıktan sonra bir npm install yapın. Ardından public/index.html dosyasını kopyalayacağız ve mount edeceğimiz id’yi değiştireceğiz.
Şimdi src dosyalarımızı ekleyelim. Yeni bir src klasörü oluşturun ve index.js, bootstrap.js ve App.vue olmak üzere üç yeni dosya oluşturun.
Uygulamamızı bootstrap.js dosyasına yerleştiriyor ve bu dosyayı index.js’ye aktarıyoruz, böylece webpack herhangi bir paylaşılan bağımlılığı eşzamansız olarak yönetebilir. Vue dosyası, hızlı bir şekilde çalıştırdığım basit bir merhaba dünya örneğidir.
Şimdi webpack’e girelim ki bunun gerçekten çalıştığını görebilelim. Bu dosyaların her ikisi de bir `config` klasörüne olacak
Geliştirme ve üretim için kullanacağımız ortak ayarlara sahip bir webpack.common.js dosyasını buraya ekledim. dev dosyasında dikkat edilmesi gereken birkaç nokta var:
publicPath ve port — bunlar aynı port numarasına sahip olmalıdır. Ana konteyner uygulamamı 8080'e koymayı planladığım için 8082'i seçtim.
historyApiFallback — index.html dosyası, herhangi bir 404 yanıtının yerine sunulacaktır.
ModuleFederationPlugin — tüm micro frontend’i birbirine bağlayan şey budur. Container’ı uygulamaya geçtiğimizde buraya koyduğunuz değerler önem kazanacaktır.
name — bu pakete kapsayıcıdan referans vermek için kullanılacaktır.
filename— paketlenmiş JavaScript’e verilen ad.
exposes — ‘./HelloVueApp’ dosyasını içe aktarmaya çalıştığında, aslında ‘./src/bootstrap’ dosyasını içe aktarır.
shared — burada listelenen tüm bağımlılıklar bir kez yüklenecek ve parent ile children arasında paylaşılacaktır. Her birini ayrı ayrı listelemek yerine, bağımlılıklarımızı package.json’dan içeri aktardık.
HtmlWebpackPlugin — paket JavaScript’imiz ‘./public/index.html’ dosyası kullanılarak sunulacaktır.
Şimdi tek yapmamız gereken, webpack’in uygulamamızı sunabilmesi için package.json’a bir komut dosyası eklemek:
Bir terminali açın ve “npm run start” yazın. Hadi uygulamamızı test edelim:
Şimdi basit bir Vue uygulamamız var, hadi kapsayıcımıza(container) başlayalım.
Container Uygulaması
Konteyner için Vue’ye bağlı kalacağım, çünkü en rahat olduğum şey bu, ancak isterseniz başka bir framework de kullanabilirsiniz.
Benim gibi monorepo yaklaşımına gidiyorsanız yeni bir repo veya klasör oluşturun. Bu dosyalar arasında minimum değişiklikle kopyalayabilmeniz gerekir:
package.json — ad değerini “container” olarak değiştirin
public/index.html — id değerini “root” olarak değiştirin
src/index.js — değişiklik gerekmez
ModuleFederationPlugin üzerinde bazı değişiklikler yapmamız gerekecek ve bu geliştirme production environments aynı olacağı için HtmlWebpackPlugin kodumuzu ortak dosyaya taşıyacağız.
Yeni dosyalar:
Port noktasını 8080 olarak değiştirdiğimize dikkat edin. Diğer değişiklik, filename ve exposes seçeneklerini kaldırmak ve bunun yerine remotes nesnesini eklemektir.
Şimdi alt components’lerimizi kapsayıcı içinde kullanalım.
Uygulamamızı DOM da göstermek için src/bootstrap.js dosyamızı oluşturacağız:
Document.querySelector’ın div’e “root” id’si ile eriştiğine dikkat edin.
Sıradaki aşama App dosyasını oluşturmak:
Ana sayfa ve /vue arasında gezizinebilmek için buraya basit bir routing işlemi ekledim.
Aslında uygulamamızda olan şey şudur ki, tarayıcı uygulamamızın root’undan bir istek aldığında, vue ile yazılan diğer alt uygulamayı bağlayacaktır.
Artık kapsayıcı uygulamanızı çalıştırabilmeniz gerekir (ayrıca alt uygulamanızın ayrı bir sekmede çalıştırılması gerekir) ve şunun gibi bir çıktı görmelisiniz:
Harika, parent dan gelen bir header ve ve ‘Use Home’ yazan bir uygulamamız var.
Peki ya vue uygulamasını görmek için ‘‘Use Vue’’ seçeneğine tıklarsak ne olur?
Parent ve child uygulamalarımızın, uygulamayı yönlendirici dosyalarıyla birleştirmek zorunda kalmadan bağımsız olarak gezinebilmesini oldukça heyecan verici buluyorum.
Ve işte karşınızda! Çalışan bir micro frontend uygulaması. Umarım takip etmeyi başarmışsınızdır ve bu yolda bir şeyler öğrenmişsinizdir. Bir React uygulamasının nasıl ekleneceğini açıklayan bir takip yazısı daha yazdım linkine aşağıdan ulaşabilirsiniz.
Bu eğitimin kaynak kodunu GitHub’da bulabilirsiniz.
