Mobil Micro Front-End
-
Merhabalar,
Çalıştığım firmada mimari değişikliklere gittik. Web tarafında micro front-end yaklaşımını uyguladım ve güzel bir yapı ortaya çıktı. Web de Webpack Module Federation kullandım projeyi neredeyse 30-35 parçaya böldük. Burada her şey yolunda gidiyor hiçbir sıkıntı yok.
Mobil tarafta Flutter kullanıyoruz burayı da Micro front-end yaklaşımına çevirmek istiyorum. Fakat araştırmalarım sonucunda pek de sağlıklı sonuçlara varamadım. Amacım projeyi küçük projelere bölmek ve Git kısmındaki conflict problemi, proje geliştirirkenki bundle süresi, dependency problemleri, kod karmaşıklığı gibi problemleri ortadan kaldırmak istiyorum.
Bu konuda daha önce çalışan arkadaşlar var mı?
Native olur React Native olur Flutter olur fark etmez uyguladıkları yöntemi anlatabilirlerse Flutter tarafına uyarlamaya çalışabilirim. Bir kaç mobil projelerinde ekranları dependency olarak eklemişler ama bu benim istediğimi karşılamıyor. Ekranları dependency olarak eklediğimde projeyi bölüyorum problemsiz bir şekilde ama bu sefer 2 dependency aynı dependency'i farklı versiyonlarda kullandığında problemler ortaya çıkıyor.Bu konuyla ilgili bilgi sahibi bile değilsek beyin fırtınası yapabileceğimizi düşünüyorum. Şu an elde tutulur tek seçenek dependency yöntemi.
-
Ondan anlamam da flutter özel ders verirsen saatlik, ücreti mukabilinde alırım. :)
-
Hocam yakında bir youtube kanalı açma düşüncem var zaten ama vakit ayırabilir miyim açıkcası bilmiyorum :( Onun dışında zor :P Soru-Cevap olur da ders bir tık zor :D
-
Flutter tarafını hiç düşünmedim ancak şöyle baksan olaya.
Zamanında c# tarafında (wpf) Plugin based uygulama yapmıştım (maf ve mef anahtar kelime). Bu pluginleri uygulamaya ekliyorsun (bir paket halinde) ve uygulamaya bunları eklendiğinde o UI kısmını oluşturabiliyor. Plugin yerine add-on diye de arama yapabilirsin.
İki çeşidi var. Biri sadece fonksiyonel olarak diğeri de UI olarak.
Bugün seminerde buranın en Büyük firmalarından birinin domain architecti geldi, onlar da micro front-end kullanıyormuş.
-
@unbalanced abi dependency olarak ekleyip aslında Route ile halledebiliyorum işi. Her modülü dependency olarak ekleyip Route Path vererek uygulamayı parçalara ayırınca dependency problemi baş ağrıtıyor. Mesela X bir proje Flutter 2 ile geliştirilirken Y projesi ya da modülü Flutter 3 hatta flutter 4 ile geliştirilebilir. Dependency olarak eklediğimizde bu sefer herkesi Flutter X versiyonuna zorlamamız gerekecek. X projesi Flutter 2 ile geliştirilirken Flutter 3 e geçemeyebilir kullandığı dependency den dolayı. Ya da daha farklı sebepler. Bu durumda çözüm bulamıyoruz yoksa navigation ile ekranları yönetip ekibi bölebiliriz.
Bu bahsettiğin mimar Micro Front-end'i mobil de mi kullanmış web de mi ?
-
MhmdAlmz bunu yazdı
@unbalanced abi dependency olarak ekleyip aslında Route ile halledebiliyorum işi. Her modülü dependency olarak ekleyip Route Path vererek uygulamayı parçalara ayırınca dependency problemi baş ağrıtıyor. Mesela X bir proje Flutter 2 ile geliştirilirken Y projesi ya da modülü Flutter 3 hatta flutter 4 ile geliştirilebilir. Dependency olarak eklediğimizde bu sefer herkesi Flutter X versiyonuna zorlamamız gerekecek. X projesi Flutter 2 ile geliştirilirken Flutter 3 e geçemeyebilir kullandığı dependency den dolayı. Ya da daha farklı sebepler. Bu durumda çözüm bulamıyoruz yoksa navigation ile ekranları yönetip ekibi bölebiliriz.
Bu bahsettiğin mimar Micro Front-end'i mobil de mi kullanmış web de mi ?
major versiyon degisikligini nasil tolere edeceksin ki hocam?
-
MhmdAlmz bunu yazdı
@unbalanced abi dependency olarak ekleyip aslında Route ile halledebiliyorum işi. Her modülü dependency olarak ekleyip Route Path vererek uygulamayı parçalara ayırınca dependency problemi baş ağrıtıyor. Mesela X bir proje Flutter 2 ile geliştirilirken Y projesi ya da modülü Flutter 3 hatta flutter 4 ile geliştirilebilir. Dependency olarak eklediğimizde bu sefer herkesi Flutter X versiyonuna zorlamamız gerekecek. X projesi Flutter 2 ile geliştirilirken Flutter 3 e geçemeyebilir kullandığı dependency den dolayı. Ya da daha farklı sebepler. Bu durumda çözüm bulamıyoruz yoksa navigation ile ekranları yönetip ekibi bölebiliriz.
Bu bahsettiğin mimar Micro Front-end'i mobil de mi kullanmış web de mi ?
Flutter tarafında nasıl çözülür bilmiyorum, dart çok gelişmiş bir dil değil c# gibi ya da .net platformu gibi.
Dediğin olayın..net tarafında karşılığına dll Hell deniyor. Mesela üstte anlattığım olayda farklı pluginler aynı bir kütüphanenin farklı versiyonlarını referans ediyor. İşte bunları bir şekilde ayırmak lazımdı aksi halde dll Hell denilen çakışma oluyor çünkü uygulama hangisini yükleyeceğini bilmiyorum. O sebeple biz dll'leri imzalıyoruz. Bu imzalama sonucu publictoken diye unique bir İdye sahip oluyor dll
Onu görmek için sn.exe -T dlldosyası ni çağırdığı da şöyle bir şey göreceksin
MySql.Data, Version=6.6.5.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d
İşte buradaki Publicleytoken bu dll'in imzalanmış olduğunu ve dll Hell gibi bir problem yaşanmasını engelliyor. Çünkü MySQL.data DLL 6.6.5 versiyonun imzası bu token o yüzden sen ikinci bir versiyon çıkardığında mesela 6.7.0, bunu imzaladığında token farklı değer olacak. Bu sayede iki assembly'i (DLL i) tek bir uygulamada kullanabiliyorsun.
Flutter da bunun çözümü var mı bilmem, yani paketlerde bir imzalama işi varsa olabilir belki?
Adam söylemedi nerelerde micro front-end kullandıklarını
siteleri digitec.ch ve galaxus.ch
Mobil uygulamaları da var ama istersen mail atıp sorabilirsin. Adam mail adresini vermişti, istersen bulayım mail atıp sorabilirsin. Yardımcı olur sanırım
-
@end Web kısmında Webpack Module Federation(WMF) ile çözüyorsun hocam. Hatta projenin %10 u vue, %20 si next.js %30 u zırt framework %5'i bilmem ne yapıp birleştirebiliyorsun. Burada tek sıkıntı son kullanıcı bundle dosyalarını atıyorum redux için 19.0.1, 18.0.8 bilmem kaç ayrı ayrı indiriyor. Onun dışında stabil her şey.
@unbalanced mail atabilirim abi olabilir. Sitelerini inceledim bazı kısımları farklı bir yerden geliyor onlar da Webpack Module Federation kullanmış. Ama projenin %90 ı düz next.js anladığım kadarıyla. Web kısmı ile ilgili bir konudan bahsetmiş olabilir. Dart da dependency yönetimi de javascript gibi abi senin de bildiğin gibi :P . Bahsettiğin gibi DLL vs yemez sanırım dart tarafında. Yese bile sadece önüne geçmiş olurum sonuçta mobil de tek bir apk/ipa çıktısı olacağı için yine dependency problemi olacaktır diye düşünüyorum. Biraz daha araştırayım bakalım neler çıkacak. Bir şeyler bulursam yine de konu altında çözümü anlatırım. Farklı fikirlere de açığım tabi :P
-
MhmdAlmz bunu yazdı
@end Web kısmında Webpack Module Federation(WMF) ile çözüyorsun hocam. Hatta projenin %10 u vue, %20 si next.js %30 u zırt framework %5'i bilmem ne yapıp birleştirebiliyorsun. Burada tek sıkıntı son kullanıcı bundle dosyalarını atıyorum redux için 19.0.1, 18.0.8 bilmem kaç ayrı ayrı indiriyor. Onun dışında stabil her şey.
@unbalanced mail atabilirim abi olabilir. Sitelerini inceledim bazı kısımları farklı bir yerden geliyor onlar da Webpack Module Federation kullanmış. Ama projenin %90 ı düz next.js anladığım kadarıyla. Web kısmı ile ilgili bir konudan bahsetmiş olabilir. Dart da dependency yönetimi de javascript gibi abi senin de bildiğin gibi :P . Bahsettiğin gibi DLL vs yemez sanırım dart tarafında. Yese bile sadece önüne geçmiş olurum sonuçta mobil de tek bir apk/ipa çıktısı olacağı için yine dependency problemi olacaktır diye düşünüyorum. Biraz daha araştırayım bakalım neler çıkacak. Bir şeyler bulursam yine de konu altında çözümü anlatırım. Farklı fikirlere de açığım tabi :P
tamam hocam, slidelari henüz paylasmadilar, orada adam email adresini vermisti. O zaman paylasirim.
Dart icin bu dependency olayini kolay kolay cözebilecegini sanmiyorum.
Burda benzer bir problem icin mümkün degil demisler
ama dökümantasyona baktim, iki sey gözüme carpti
bu linkten transmogrify 'e bakar misin, orda kendi host ettigin paketi veriyorsun, belki dependency ile ilgili farkli calisiyordur
bir de dependency override diye bir kisim var. Burda iki farkli pakette kullanilan ayni bagimliligin farkli versiyonlari icin zorlama yaptiriyor benim anladigim kadariyla. Yani a ve b paketi, http paketinin farkli versiyonunu kullaniyor diyelim, sen a paketindeki versiyonu kullanmak istiyorsun diyelim bu dependency override ile a paketindeki http versiyonuna zorluyorsun
bu belki sana cözüm olabilir ve yine dikkat edersen orda da transmogrify kullanilmis dependency_overrides yaninda.
-
-
@unbalanced, dependency ovveride işime yaramıyor. Herkese X versiyonunu kullanmak zorundasınız diyemem (derim de best practise bu olur mu bilemedim). Bunu flutter 3.4 çıktığında yapmıştık dart SDK dependency_overrides ekliyorduk. Şu an native büyük proje geliştiren firmaların mimar ya da senior çalışanlarına ulaşmaya çalışıyorum. Bir kaç kişiyle bu konuyu görüştüm monolith ilerlediklerini söylediler.
@makets bu da işimi görür mü sanmıyorum hocam. Sonuçta tek uygulama çıkacağından oraya flavor eklesem bile tüm micro appler aynı dependency kullanmak zorunda kalıyor.
Bana sanki mobil tarafta Code Push tarzı bir şeye ihtiyaç duyuyorum gibi. Ama bu da Flutter yapısına ters. React Native gibi arada bir Javascript Engine yok. Enteresan ya böyle bir şeyin olmaması :D :D Koca koca uygulamaların hepsi monolith mi gerçekten :SS