Micro Frontend Yaklaşımı
Micro frontendler, modern web uygulamalarının geliştirilmesinde giderek daha önemli bir rol oynamaktadır. Bu mimari yaklaşım, uygulamaları modüler hale getirerek geliştirme süreçlerini kolaylaştırmakta ve ölçeklenebilirlik sağlamaktadır. Uygulamanın derlenmesi, micro frontendlerin farklı yaklaşımlarını içermektedir. Bu yaklaşımlar, client side, edge side, server side ve build time derleme şeklinde özetlenebilir. Her bir derleme yöntemi, farklı avantajlar ve dezavantajlar sunmaktadır. Ekranlar arası yönlendirme, micro frontendler arasında gezinme ve iletişim sağlayan önemli bir konudur. Bu stratejiler, kullanıcı deneyimini iyileştirmek ve uygulamanın akışını yönetmek için kullanılır. Veri yönetimi, micro frontendler arasında veri paylaşımını ve iletişimini sağlayan kritik bir unsurdur. Bu micro frontendlerin verimli bir şekilde bir araya getirilmesi ve koordinasyonun sağlanması için önemlidir. Karşılaşılabilecek problemler ve çözümler, micro frontendlerin uygulanması sırasında dikkate alınması gereken önemli konulardır. Teknolojik uyumluluk, performans optimizasyonu ve güvenlik gibi konular, başarılı bir micro frontend uygulaması için ele alınması gereken temel sorunlardır. Önemli noktaların özetlendiği sonuç ve öneriler bölümü, çalışmanın ana bulgularını ve gelecekteki araştırmalar için önerileri sunar.
SİMGELER VE KISALTMALAR
Kısaltmalar
API : Application Programing Interface (Uygulama Programlama Arayüzü)
CDN : Content Delivery Network (İçerik Dağıtım Ağı)
DOM : Document Object Model (Belge Nesne Modeli)
HTML : Hyper Text Markup Language (Hiper Metin İşaretleme Dili)
HTTP : Hyper Text Transfer Protocol (Hiper Metin Transfer Protokolü)
NPM : Node Package Manager (Nodejs Paket Yöneticisi)
SEO : Search Engine Optimization (Arama Motoru Optimizasyonu)
SPA : Single Page Application (Tek Sayfa Uygulama)
SSR : Server Side Rendering (Sunucu Tarafı İşleme)
XML : Extensible Markup Language (Genişletilebilir İşaretleme Dili)
1. GİRİŞ
Dünyanın giderek dijitalleştiği, her şeyin sanal ortama aktarıldığı bir dönemde yaşıyoruz. Eskiden sadece bilgisayarlara programlar yükleyerek yapılabilen birçok işlem, artık farklı platformlar üzerinden onlarca değişik cihaz yardımı ile kolayca yapılır hale geldi. Teknolojideki bu baş döndürücü ilerleyiş, şirketlerin farklı yeni fikirler ve yeni uygulamalar ortaya çıkarmasına olanak sağladı. Önceden sadece ürün satışına yönelik e-ticaret siteleri varken, günümüzde çoklu ürün ve hizmet yelpazesine sahip e-ticaret siteleri ortaya çıktı. Elbette bütün bunların gelişimi bir anda olmadı. Son kullanıcıların zaman içerisinde değişen arzuları farklı ihtiyaçları, farklı ihtiyaçlar yeni teknolojileri, yeni teknolojiler de bu ihtiyaçları karşılayan yazılım projelerinin hayata geçirilmesine zemin hazırladı. Üretken bir döngü içerisinde dijital dönüşümlerin daha kolay yapılabilmesi için yeni teknoloji ve mimariler sürekli gelişti ve gelişiyor. Günümüzde oldukça popüler hale gelen micro servis ve micro önyüz (micro frontend) mimarileri de bu döngü sonucunda ortaya çıkmışlardır. Uygulamalar, fiziki ortamdaki bir işin daha düşük maliyetler ile sanal ortamda gerçekleşmesini sağlarlar. Her üründe olduğu gibi uygulamalar da son kullanıcılarını memnun ettiği, yasal zorunluluklarını yerine getirdiği ve hatasız çalıştıkları sürece başarılıdırlar. Son kullanıcıların istekleri, uygulamanın sunduğu hizmetler ve uygulamanın yasal zorunlulukları zaman içerisinde değişime uğrarken, uygulamalarda hataların oluşması da olağan bir durumdur. Bu değişimlere ve hatalara gerekli güncellemeler ile hızlı bir şekilde cevap verilmesi oldukça önemlidir. Büyük ve karmaşık uygulamalarda güncellemelerin hızlı ve direkt bir şekilde yapılabilmesi için uygulamanın bağımsız küçük parçalardan oluşuyor olması ciddi öneme sahiptir. Micro servis ve micro frontend mimarileri büyük ve karmaşık yazılım projelerinin küçük parçalara bölünerek kolayca güncellenmesini sağlamaktadırlar. Bu durumu, Cloves CARNEIRO ve Tim SCHMELMER yazdıkları “Micro services from Day One” adlı kitapta şu şekilde açıklamaktadırlar: “Her başarılı uygulama değişim geçirmek zorundadır. Önemli olan, maliyeti düşük tutarak uygulamanın ihtiyaç duyduğu değişimleri güvenli bir biçimde sürekli yapabilmektir. Bunu yapmanın en kolay yolu uygulamayı micro servis ve micro önyüz mimarileri kullanarak geliştirmektir.”
1.1. Micro Önyüz Mimarisi
Micro önyüz mimarisi, micro servis mimarisini tamamlayan bir yaklaşımdır. Micro servis mimarisinde uygulama, farklı işlevlere sahip küçük ve bağımsız hizmetlere ayrılır. Bu ayrıştırma sayesinde hızlı, ölçeklenebilir ve esnek uygulamalar geliştirilebilir. Ancak micro servis mimarisinde yaşanan bazı sorunlar, özellikle önyüz geliştirme aşamasında darboğazlara ve gecikmelere neden olabilir. Micro önyüz mimarisi, bu sorunlara çözüm olarak ortaya çıkar. Şekil 1.1’de Micro servisler ve Monolit Önyüz örneği gösterilmiştir.
Micro önyüz mimarisi, önyüzün küçük ve bağımsız bileşenlere ayrılmasını sağlar. Her bir bileşen, farklı bir işlevi yerine getirir ve birbirinden bağımsızdır. Bu sayede hızlı geliştirme ölçeklendirme mümkün hale gelir. Ayrıca, micro önyüzler farklı teknolojiler kullanabilir ve diğer servislerle kolayca entegre olabilir.
Micro önyüz mimarisi ve micro servis mimarisi birlikte kullanıldığında, ideal bir uçtan uca geliştirme süreci sağlanır. Her bir micro önyüz veya micro servis, kendi alanında güncellendiğinde veya hata aldığında, sadece ilgili bileşen etkilenir. Bu, uygulamanı daha güvenilir ve esnek olmasını sağlar.
Şekil 1.2’de Micro servis ve Micro önyüz mimarisi ile uçtan uca geliştirme örneği gösterilmiştir.
Ancak micro önyüz mimarisi, her projede uygun olmayabilir. Özellikle birden fazla ekibin çalıştığı ve interaktif bir yaklaşımın benimsendiği projelerde daha mantıklıdır. Micro önyüz mimarisinin başarılı bir şekilde uygulanması da önemlidir ve projenin gereksinimlerine göre uyarlanmalıdır.
1.1.1. Uygulamanın Derlenmesi
Micro önyüz mimarisinde, uygulamanın kullanıcılara sunulma şekli büyük önem taşır. Uygulama, kod seviyesi ve kullanıcının cihazı dahil olmak üzere herhangi bir yerde bir bütün olarak sunulur. Micro önyüzlerin bir araya getirilmesi için farklı derleme yöntemleri ve entegrasyon seçenekleri bulunur. Ancak zamanla yeni teknolojilerin ortaya çıkması, daha farklı derleme ve entegrasyon yaklaşımlarını da beraberinde getirebilir.
1.1.2. Client Side Derleme
Client side derleme yöntemi, micro önyüzlerin kullanıcının cihazında bir araya getirildiği en basit ve anlaşılır yöntemdir. Bu yöntemde, kullanıcının uygulamaya erişimi sırasında Javascript ve Hyper Text Markup Language kullanılarak micro önyüzlerin ekran üzerinde nasıl ve nerede gösterileceği belirlenir. Ölçeklendirme sorunu olmamasına rağmen, Javascript dosyasının çalıştırılması ve micro önyüz paketlerinin dinamik olarak yüklenmesi nedeniyle uygulamanın yavaş açılma riski bulunabilir. Ayrıca, farklı çerçevelerin kullanılması durumunda boyut sorunu ve Search Engine Optimization problemleri ortaya çıkabilir. Bu nedenle, proje gereksinimleri ve öncelikleri doğrultusunda bu yöntemin tercih edilmesi önerilir. Şekilde 1.3’te Client side derleme örneği gösterilmiştir.
1.1.3. Hyperlink Entegrasyonu
Hyperlink entegrasyonu, client side derleme yönteminin bir örneğidir ve micro önyüzlerin tüm ekranı kapsayacak şekilde parçalara ayrıldığı bir yaklaşımdır. Bu yöntemde, bir ekranda tek bir micro önyüz bulunabileceği gibi birden fazla micro önyüz de yer alabilir. Micro önyüzlerin birbirlerinden bağımsız olması avantaj sağlarken, ortak bölümlerin yönetimi zorlaşabilir. Özellikle üst ve alt bilgi gibi ortak içeriklerin her micro önyüzde ayrı ayrı yer alması gerekliliği, paket boyutlarının artmasına neden olabilir. Ancak, bağımsız sürüm yönetimi, teknoloji özgürlüğü ve hızlı açılma gibi avantajlarıyla bu entegrasyon yöntemi tercih edilebilir. Aşağıdaki şekil 1.4’te Hyperlink entegrasyonuna ait örnek görsel gösterilmiştir.
1.1.4. App Shell Entegrasyonu
App Shell entegrasyonu, client side derleme yönteminin bir başka örneğidir ve hyperlink entegrasyonundaki bazı sorunları çözmeyi amaçlar. Bu entegrasyonda, uygulama sadece belirli bir bölüm micro önyüzlere ayrılır ve dinamiktir. Ortak bölümlerin yönetimi ana uygulamaya bırakıldığı için, özellikle üst ve alt bilgi gibi ortak olan bölümlerin yönetimi daha kolaydır. Bu yöntem, ortak kodların sadece ana uygulamada yer almasından dolayı ara yüz bütünlüğü ve paket boyutu konusunda avantaj sağlar. Ancak, bazı teknoloji kısıtlamaları nedeniyle bağımsız sürüm yönetimi ve hızlı açılma konusunda bazı kısıtlamalar ortaya çıkabilir. Şekil 1.5’te App Shell entegrasyonu örneği gösterilmiştir.
1.2. Edge Side Derleme
Edge side derleme, micro önyüzlerin Content Delivery Network (İçerik Dağıtım Ağı) üzerinde bir araya getirildiği bir yöntemdir ve genellikle XML tabanlı Edge Side Includes (ESI) işaretleme dili kullanılır. Bu yaklaşımda, micro önyüzlerin bir araya getirilmesi CDN tarafından gerçekleştirilir. Şekil 1.6’da Edge Side derleme yöntemi örneği gösterilmiştir.
Bu yöntemin en riskli noktası, farklı CDN sağlayıcılarının ESI’yi farklı şekillerde desteklemesi ve her birinin koyduğu işlem limitleridir. Bu durum, bir CDN’den başka birine geçildiğinde yeniden düzenleme gerekliliğini beraberinde getirebilir ve birden çok CDN’in aynı anda kullanılması durumunda yönetimi oldukça zorlaşabilir.
Özetle edge side derleme yöntemi, micro önyüzlerin CDN üzerinde birleştirilmesini sağlar. Ancak, farklı CDN sağlayıcıları arasındaki uyumsuzluklar ve yönetim zorlukları risklerle beraber gelir.
1.2.1. Server Side Derleme
Server side derleme yöntemi, micro önyüzlerin sunucuda bir araya getirildiği bir yöntemidir. Bu yaklaşımda, sunucu tarafında işleme (Server Side Rendering) gerçekleştirilir ve kullanıcıya hazır hale getirilmiş bir HTML içeriği sunulur.
Şekil 1.7’de Server Side derleme yöntemi örneği gösterilmiştir.
Bu yöntemin en önemli avantajı, sunucu tarafında işleme yapılarak kullanıcıya daha hızlı bir yanıt verilmesidir. Ancak, eğer uygulamanın kullanıcıya özgü içerik sunması gerekiyorsa, sunucu ciddi bir yük altında kalabilir ve ölçeklendirme açısında riskler ortaya çıkabilir. Çünkü her istekte sunucunun özel bir içerik oluşturulması gerekebilir, bu da sunucunun performansını etkileyebilir.
Özetle, server side derleme yöntemi sunucu tarafında işleme yaparak hızlı yanıt verme avantajına sahiptir, ancak özelleştirilmiş içeriklerle uğraşırken performans ve ölçeklendirme riskleri bulunmaktadır.
1.2.2. Build Time Derleme
Build time derleme yöntemi, paketlenmiş micro önyüzlerin uygulama bütünü oluşturmak için farklı bir proje üzerinde paketlenme sırasında bir araya getirildiği bir yaklaşımdır. Bu yöntemde, micro önyüzlerin çerçeveler kullanılarak oluşturulduğu durumlarda, teknoloji özgürlüğü gibi avantajlar bulunmasına rağmen farklı kısıtlamalar da ortaya çıkabilir.
Şekil 1.8’de Build Time derleme yöntemi örneği gösterilmiştir.
Örneğin, farklı. Çerçevelerin kullanılmasıyla birlikte her çerçevenin getirdiği boyut ve performans kısıtlamalarıyla başa çıkılması gerekebilir. Ayrıca, bağımsız sürüm yönetimi diğer derleme yöntemlerinde olduğu kadar esnek olmayabilir. Bununla birlikte, bu yöntem sonucunda tek bir uygulama paketi oluşacağı için toplam uygulama boyutu açısından artı yönde değerlendirilebilir.
Ancak, bağımsız sürüm yönetiminin kısıtlanması ve farklı çerçevelerin getirdiği kısıtlamalar göz önüne alındığında, bu yöntem genellikle diğer derleme yöntemleri kadar popüler değildir ve micro önyüz mimarisi için tercih edilen bir yöntem değildir.
1.2.3. Build Time Entegrasyonu
Build time derleme örneği olarak build time entegrasyonu, micro önyüzlerin yapısını oluştururken derleme zamanında bir araya getirilen bir entegrasyon yöntemidir. Bu yöntemde, micro önyüzler farklı teknolojiler kullanılarak oluşturulabilir. Ancak, bu farklı teknolojilerin kullanımı bazı kısıtlamaları da beraberinde getirebilir.
Şekil 1.9’da Build Time entegrasyonu örneği gösterilmiştir.
Örneğin, bir micro önyüz Reactjs ile yazılırken diğer bir micro önyüz Vuejs ile yazılmışsa, uygulamanın çalışma zamanı performansını olumsuz etkileyebilir. Farklı Teknolojilerin bir arada kullanılması, derleme sürecinde bazı zorluklarla karşılaşmasına ve hatta bazı durumlarda derlenememe sorunlarına neden olabilir.
Sonuç olarak build time entegrasyonu, micro önyüzlerin derleme zamanında bir araya getirilmesini sağlayan bir yöntemdir. Ancak, farklı teknolojilerin kullanımından kaynaklanan bazı kısıtlamaları ve zorlukları göz önünde bulundurmak önemlidir.
1.3. Ekranlar Arası Yönlendirme
Micro önyüz mimarisinde ekranlar arasında yönlendirme işlemi, projeden projeye farklılık gösterebilir ancak genel olarak karmaşık bir işlem olarak algılanmamalıdır. Micro önyüz mimarisi kullanan projelerde bazılarında hiç yönlendirme yapılması gerekmezken bazılarında ise hem ana uygulama hem de micro önyüzler seviyesinde yönlendirme gerekebilir.
Şekil 1.10’da Yönlendirme yöntemi örneği gösterilmiştir.
Micro önyüzlerin genellikle basit parçalardan oluştuğu durumlarda, yönlendirme işlemleri sunucu tarafında Server Side Includes (SSI) veya CDN üzerinde Edge Side Includes (ESI) gibi yöntemlerle gerçekleştirilebilir. Ayrıca, istemci tarafında İFrame kullanılabilir ancak ek yük getireceğinden tercih edilmemektedir.
Micro önyüzler arasında yönlendirme işlemleri genellikle micro önyüzlerin bir araya getirildiği yerde yapılır. Bu, sunucuda, CDN’de veya istemcide olabilir. Micro önyüzler genellikle kendi içlerinde yönlendirme işlemlerini gerçekleştirirler.
Özetle, micro önyüz mimarisinde yönlendirme işlemleri genellikle esnek bir yapıya sahiptir ve ana uygulama üzerinde en üst seviyede yönlendirme yaparak ilgili micro önyüzü ekrana yerleştirdikten sonra detaylı yönlendirmeler micro önyüzlerin kendileri tarafından gerçekleştirilir.
1.3.1. Micro Önyüzler Arasında Veri Yönetimi
Micro önyüzler arası iletişim, mimari açıdan oldukça önemlidir. İdeal bir yaklaşımda, micro önyüzler birbirlerinden tamamen bağımsızdır ve birbirleriyle iletişim kurmazlar veya çok az iletişimde bulunurlar. Her bir micro önyüz, farklı bir işten sorumlu olduğu için diğer micro önyüzlerle bilgi paylaşımına ihtiyaç duymaz.
Şekil 1.11’de Micro önyüzler arası veri paylaşımı örneği gösterilmiştir.
Ancak istisnai durumlarda, micro önyüzler arası veri paylaşımı gerekebilir. Bu durumda, paylaşılacak veriye göre farklı yaklaşımlar benimsenir. Örneğin, querystring kullanılarak micro önyüzler arasında veri paylaşılabilir. Ancak bu yöntem, büyük verileri veya güvenlik açısından önemli verileri paylaşmak için uygun değildir.
Büyük verilerin veya güvenlik açısından önemli verilerin paylaşılması gerektiğinde, üretici/tüketici (pub/sub) yaklaşımını benimseyen eventbus yöntemi kullanılabilir. Bu yöntemde, bir micro önyüz veri paylaştığında, bu veriyi kullanan diğer micro önyüzler tarafından kullanılır.
Üretici/tüketici yaklaşımında, tarayıcıların kendine has araçları kullanılabileceği gibi projenin gereksinimlerine göre ortak bir kütüphane de kullanılabilir. Ancak, kullanıcı oturum verileri gibi her bir micro önyüzün sürekli ihtiyaç duyacağı veriler, tarayıcıların kalıcı veri depolarında (session storage, local storage, cookie) tutulabilir.
Micro önyüzler arası veri paylaşımı için Redux gibi veri yönetim kütüphanelerinin kullanılması tavsiye edilmez. Çünkü bu tür kütüphaneler, micro önyüzlerin bağımsızlığını zedeler ve mimari açıdan yanlış kararlar alınmış olabilir. Bu durumda, mimari kararlar tekrar gözden geçirilmeli ve uygun yaklaşımlar benimsenmelidir.
2. KAYNAK ARAŞTIRMASI
Bu bölümde micro önyüz mimarisine yönelik literatür araştırması yapılmıştır. Micro önyüz mimarisi, modern web uygulamalarında giderek artan bir popülerlik kazanmıştır ve bu alanda yapılan araştırmalar önemli bir bilgi kaynağı sağlamaktadır.
Caifang Yang, Chuanchang Liu ve Zhiyuan Su ya ait olan Research and Application of Micro Frontends adlı çalışmada (2018) içerik yönetim sisteminin kurumsal bilgi yapılarının önemli bir parçası olduğunu ve gelişen teknoloji ile ön ve arka uç kavramının yükseldiğini belirtiyor. Karmaşık ve büyük ölçekli projeler için micro servis tabanlı bir mimari üzerine inşa edilmiş çok işlevli bir ön uç web uygulaması oluşturmanın daha iyi bir seçenek olduğunu vurguluyor. Ancak iş büyüdükçe, tek bir ön uç uygulamasının giderek büyüdüğünü ve bakımının zorlaştığını belirtiyor. Bu nedenle her bir micro ön yüzün kodları izole edebileceği ve tarayıcı olaylarını iletişim kullanabileceği şekilde bir ön yüz uygulamasının parçalara ayrılmasını öneriyor ve ardından, üç farklı teknik uygulama yöntemi olan Route distribution, iframe embedding ve Web component teknolojisi üzerine karşılaştırmalar yapıyor.
Y.R. Prajwal, Jainil Viren Parekh ve Dr. Rajashree Shettar yapmış oldukları A Brief Review of Micro-frontends (2021) çalışmada Micro frontendlerin Micro servlerin ön yüze genişletilmiş bir versiyonu olarak tanımlandıklarını belirtiyorlar ve mevcut monolitik ön yüzlerden kaynaklanan sorunları çözmeyi amaçlıyor. Çalışmada araştırmacılar, micro frontendlerin takım bağımsızlığı, kor organizasyonu, yayın bağımsızlığı, hata izolasyonu ve teknolojiye bağımsızlık gibi avantajları vurgulanıyor. Avantajlarının yanı sıra dezavantajlarından kod gereksizliği, sınırları aşan iş akışları, iletişim zorlukları ve performans sorunları gibi noktalarının da olduğu belirtiliyor.
Sylvester Timona Wanjala’nın yazmış olduğu A framework for implementing micro frontend architecture (2023) makalesinde Web uygulamalarının kurumsal bilgi sistemlernin vazgeçilmez bir parçası olduğunu ve yakın geçmişte ön yüz ve arka yüzün ayrılmasını sağlayan teknolojiklerdeki olgunluktan bahseder. Bu teknolojilerin backend teknolojilerinin micro servis mimarisini benimserken, ön yüz teknolojilerinin monolitik mimariyi koruduğunu fakat micro servislerin micro frontendlerle beraber uygulanmasına ait net bir yaklaşım sunarak düzen ve performans sorunları gibi aşamalarda yaşanan bazı zorlukları ele alır.
Michael Geers’in 2020 yılında yazmış olduğu Frontends in Actions kitabında, tarayıcı tabanlı yazılımların özellikle büyük tek sayfalık bir uygulama oalrak uygulandığında karmaşık ve bakımızı zor hale geldiğinden bahsediyor. Micro frontend yaklaşımını benimseyerek geliştirilen web uygulamalarının özelliklerinin sistemli olarak tasarlayarak, daha hızlı özellik geliştirme, daha kolay yükseltmeler ve teknoloji yığınında kullanılan teknolojilerin bağımsız ve seçme özgürlüğüne sahip olduğunu belirtir. Yine aynı şekilde karmaşık web uygulamalarını, küçük ve iyi tanımlanmış birbirinden bağımsız parçalar oluşturarak basitleştirilmesinin öneminden bahseder.
Andrey Pavlenko, Nursultan Askarbekuly, Swati Megha ve Manuel Mazzara yazmış olduğu Application of microservices to web front-ends (2020) çalışmasında Micro frontend mimarisinin web geliştirme üzerindeki uygulanışını incelemektedir. Yapmış oldukları çalışmada micro frontend mimarisinin, büyük ölçekli ve uzun süreli geliştirilen projeler için uygun olabilecek bir yaklaşım olduğunu tanımlamaktadır. Ancak küçük projeler veya ekipler için uygulanması zor ve ek bir karmaşıklık getirdiğinden bahseder. Ayrıca, micro frontend yaklaşımının avantaj ve dezavantajlarını ele alarak, eksiksiz araç ve kütüphane desteğinin de öneminden bahsetmiştir.
Tim De Smet ele almış olduğu Micro frontend architecture for cross framework reusability in practice (2020) adlı çalışmada, monolitik frontend sistemlerinin her güncellemede tüm sistemde değişiklik gerektirmesi, büyük ekiplerin tek bir kod tabanı üzerinde çalışmasının karar verme süreçlerini merkezileştirmesi ve tek bir noktada başarısızlık olasılığının yüksek olması gibi sorunları olduğunu belirtmektedir. Micro frontendler ise micro servislerin mimari tarzından türetilmiş bir yaklaşım olarak tanımlamaktadır. Bu yaklaşımda, dikey olarak örgütlenmiş ekipler, frontend tarafından da sorumlu ve iş kapasiteleri etrafında düzenlenirler. Ayrıca micro frontendlerin micro servislerin getirdiği avantajlara paralel olarak , artan ölçekte güncelleme yapabilme, kod tabanlarının bağımsız olması ve her ekibin kendi kob tabanın tam sahibi olması gibi avantajları vurgular.
Harish Kumar & Vinay Raj yapmış olduğu Micro Frontend Based Performance Improvement and Prediction for Microservices Using Machine Leraning (2024) adlı araştırmada ise endüstri içerisinde micro servislerin bir trend haline gelmesini ve birçok büyük IT devinin (Amazon, Twitter, Uber vb.) mevcut uygulamalarını bu yeni mimari tarza dönüştürmeye başlamasını ve bazılarının da yeni uygulamalarını bu mimaride inşa etmeye başladığını belirtiyor. Mevcut uygulamalara daha fazla işlevsellik eklenmesi gereksinimlerinin artması ve kullanıcı gereksinimlerinin artması nedeniyle, micro servisler tarzında tasarlanan web uygulamaları da bazı performans zorluklarıyla karşılaştığını bu tarzın büyük kurumsal uygulamaların tasarımında başarılı bir şekilde benimsenmesine rağmen, uygulamaların hala performansla ilgili sorunlarlala karşılaştığını belirtmektedir.
Solve Steinar Haugen, Teodor Alveberd ve Thomas Brekke Fyllingen yapmış oldukları Implementasjon av microfrontend-komponenter for web- ogmobileapplikasjoner (2021) adlı çalışmada, DNB şirketinin web ve mobil uygulamalardaki geliştirme süreçlerinde micro frontend kullanımının potansiyel faydaları ve uygulanabilirliği hakkında çıkarımlar yapmış ve bu çıkarımlar sonucunda web ve mobil uygulama geliştirme süreçlerinde daha fazla bağımsızlık elde etmişlerdir. Ayrıca Progressive Web App prensiplerinin uygulanmasıyla kullanıcıların web ve mobil platformlarda daha tutarlı ve gelişmiş bir deneyim yaşamasının sağlanabileceğini ele almışlardır. Çalışma kapsamında service worker gibi teknolojiler kullanarak uygulamaların çevrim dışı kullanılabilirliğini artırmışlardır. Çalışmanın sonuçlarının DNB şirketinin gelecekteki web ve mobil uygulama geliştirme projelerinde micro frontend ve ilgili teknolojileri kullanma yolunda stratejik karar almasına yardımcı olacak şekilde detaylandırmışlardır.
Emilija Stefanovska ve Vladimir Trajkovik’in vermiş oldukları Evaluating Micro Frontend Approaches for Code Reusability (2023) isimli çalışmada micro servis mimarisinin istemci tarafında devamı olan micro frontend terimi hakkında araştırmalarını paylaşarak, frontend kodunun yeniden kullanılabilirliği için micro frontend mimarisinin kullanılabilirliğini araştırıyor. Makalenin amacı, micro frontend yaklaşımını kullanarak iyi bir organizasyonel yapı sağlayarak kodun yeniden kullanılabilirliği için mimarinin faydaları anlatılıyor. Ayrıca uygulama sürecini iki aşama ayırarak mevcut bir frontend uygulamasının parçalanması ve parçalanmış bileşenlerin yeni mir micro frontend uygulamasına engte edilerek kodun yeniden kullanılmasından bahsediyor.
Wayan Krishna Dharma, Dina Anggraini a Development of Modern Web Application Frontend Structures Using Micro Frontends (2022) isimli çalışmada giderek artan kullanıcı ihtiyaçlarına cevap verebilen, bakımı kolaylaştıran ve gelecekteki onarımları ve güncellemeleri basitleştiren bir web uygulamasının micro frontend mimarisi ile beraber geliştirilmesinin mümkün olduğunu vurgulamaktadır. Özellikle dijital çağ ve Covid-19 pandemisi ile internet teknoloji hizmetlerine olan bağımlılığın arrtmasıyla web uygulamalarının hızla büyümesi desteklenmektedir. Bu nedenle monolitik yyapıların yerine daha modüler ve esnek bir yaklaşım olan micro servislerin ve micro frontendlerin kullanımının tercih edildiğinin önemini vurgular ve yapılan yük testi sonuçlarını tatmin edici seviyede olduklarını belirtmişlerdir. Uygulamayı yaparken Javascript ve onun doğasındaki temel bileşenler ile çeşitli senaryolar için örnekler hazırlayıp monolitik ve micro uygulamaların farklarının gözle görülür bir şekilde ölçülebildiğini özetlemişlerdir.
Yuma Nishizu ve Tetsuo Kamina yapmış oldukları Implementing Micro Frontends Using Signal-based Web Components (2022) çalışmasında bağımsız olarak geliştirilen ön uç uygulamalarının birleştirilerek daha büyük bir uygulama oluşturduğunu gelişmekte olan bir mimari tarz olan micro frontendlerin uygulanmasını React ve Javascript kullanarak ayrı ayrı ele almışlardır. Micro frontendler önemli bir modülerlik gerektiren Javascript’te Web Bileşen yöntemini kullanarak gerçekleştirilebileceğinden ancak bileşenler arasındaki veri iletimi ve kodun anlaşılmasını zorlaştıran olay mekanizmaları ve ilgili geri çağrı fonksiyonlarının getirilerindeki eksikliklerden bahsetmişlerdir. Bu sorunu çözmek ve deklaratif veri akışını sağlamak için reaktif programla içinde sinyalleri kullanarak ilgili problemin çözümüne ulaşmışlardır. Sinyallerin kullanılması yaklaşımında uygulamaya Javascript uzantısı geliştirip kullanarak basit bir tek sayfalı uygulamada uygulamışlardır. Bu uygulamayı ayrıca web bileşen yöntemiyle beraber farklı uygulamalarda, React, Vue gibi karşılaştırıp uygulamanın çalışmasını gözlemlemişlerdir. Ayrıca, React Javascript çevçevesi ile benzer bir uygulama gerçekleştirip sinyallerin kullanılarak yapılan uygulamaların daha yüksek modülerlik sağladıklarını doğrulamışlardır.
Almir Palamar Taking The Microservices Perspective To Frontend Development (2023) çalışmasında ise micro frontend mimarisine geçiş zorluklarından bahsetmiştir. Yine aynı şekilde micro frontend mimarisinin bilimsel literatürünün eksikliğinden bahsederek geçişin zorluğunun arttığında değiniyor.
John Gilbert , Ed Price yazmış oldukları Sofware Architecture Patterns for Serverless Systems: Architecting for innovation with events, autonomous services , and micro frontends (2021) adlı kitapta modern yazılım tasarımında karmaşık problemlerin micro frontendler ile beraber çözülebileceğine dair bir çalışma yapıyor , bunu yaparken kurumsal düzeyde yazılım sistemleri tasarlamanın ve micro frontend mimarisinin etkilerinden bahsedere, güvenlik ve yük testi gibi sonuçlarla micro frontend mimarisinin önemini ve ayrıca ekiplerin özerk çalışmasının getirdiği avantaj ve dezavantajların çözümü için custom event yöntemi ile beraber micro frontendler arasındaki veri paylaşımının öneminden bahsediyor.
P Yedhu Tilak, Vaibhav Yadav, Shah Dhruv Dharmendra ve Narasimha Bolloju A platform for enhancing application developer productivity using micro services and micro frontends (2020) adlı makalede geliştirici üretkinliklerinden bahsederek, etkin bir çözüm olan micro frontend mimarisinin olduğunu belirtiyor. Bu mimarinin benimsenmesindeki önemli zorluklardan biri olan iletişim ve şeffaflığın sağlanmasının önemini vurgulayarak, micro servislerin ve bunları tüketen micro frontendlerin şirketlerin birçok operasyonunda yardımcı olacağını belirtiyor.
Jouni Mannistç, Antti-Pekka Tuovinen ve Mikko Raatikainen ise Experiences on a Frameworkless Micro Frontend Architecture in a Small Organization (2023) adlı çalışmasında gözlemledikleri Visma isimli şirketteki küçük bir ekibin deneyimlerine dayanarak micro frontend sağlanan geri dönütleri uygulama süreci ve takım bağımsızlığından ziyade müşteriye özgü yapılandırmalardan bahsediyor. Micro frontend uygulamalarının takım bağımsızlığının yanı sıra müşteriye özgü yapılandırılmasının ve maliyetleri ciddi oranda düşürdüğü noktasındaki alana vurgu yapar. Micro frontend arasındaki uygulama haberleşmesi için ise backend teknolojilerinin ve bunlara dayalı web bileşen ara yüzlerinin birçok çerçeve kaynaklı sorunu önleyerek Javascript çerçevelerine rekabetçi bir alternatif sunduğundan bahseder.
Rodrigo Perlin , Denilson Ebling , Vinicius Maran, Glenio Descovi ve Alencar Machado yapmış oldukları An Approach to Follow Micro Services principles in Frontend çalışmasında heterojenlik prensiplerinin bir örneği olarak micro frontend uygulamalarını gösterek arayüz bölmenin sağladığı uç performans sorunlarını dile getirir ve iş akışının daha bağımsız bir yapıda ilerlemesini ele alır önerilen mimari yaklaşımın Rio Grande do Sul Hayvan Sağlığı Savunma Platformunda geliştirilen bir prototip olarak kodlanmış ve bu kodlama aşamasında React, Vue , Angular , Javascript gibi farklı çerçeve ve kitaplıkların entegresinin sonuçlarını monolit bir uygulamaya göre daha efektif ve verimli sonuçlar doğurduğunu ileri sürmüş ve yapılan testlerde uygulama tepki süresinin ve micro servis tüketen micro frontendlerin gelecekteki yerinin önemi üzerinde durmuştur.
Philip Klauzinski ve John More yazmış olduğu Mastering Javascript Sinfle Page Application Development (2016) Single Page Application avantajları ve çeşitli mimarilerin monolit frontend uygulamalarına uygulanışını ve bu kapsamdaki mimari tasarım yapılarının avantajlarını ve dezavantajlarını inceleyerek micro frontend uygulamalarınıa neden ihtiyaç duyulduğunun bir örneğini ele almışlardır.
Herve M. Kabamba, Matthew Khouzam ve Michel R.Dagenais yapmış oldukları Low-Overhead transparent tracing of nodejs based micro service architectures (2023) isimli çalışmada Javascript teknolojilerinin micro uygulamalar geliştirme kapsamındaki kabilyet ve uyumluluklarını inceleyerek, ilgili micro mimarilerindeki hata ayıklama işlemlerinin karmaşıklığı üzerinde yoğunlaşarak , micro uygulamalardaki problemlerin hata yüklerine odaklanmıştır.
Yamika Perera Enhancing The Front End Web Applications Performance Using Design Patterns And Microservices Based Architecture (2017) çalışmasında ağır yazılım uygulamlarında genel performans iyileştirmelerine değinerek kullanıcı metriklerinin iyileştiğini vurgulamıştır. Yapmış olduğu çalışmada React, Nodejs, Express GraphQl ve Kafka gibi en son endüstri düzeyindeki teknolojileri kullanarak, yeni orkestrasyon tekniği denemiş ve mikro frontend uygulamasının yüklemesinde %200 oranında artırıldığını tespit etmiştir, geleneksel yaklaşımda ise eşzamanlı kullanıcı sayısı arttığında 1200ms’ye ani bir yükselme gösterirken 900ms’nin altında stabilize ederek micro frontend uygulamalarının performansa olan etkilerinden faydalanmıştır.
Javier Verdü ve Alex Pajeuelo’ya ait olan Performance Scalability Analysis of Javascript Applicatios with Web Workers (2015) isimli çalışmasında son HTML5 standardı ve Javascript uygulamalarının birden fazla iş parçacığında veya işçide çalıştırılmasına olanak tanıyan Web Worker yöntemiyle beraber ele almıştır. Bu yöntem ile beraber micro frontend uygulamalarının paylaştığı ağır iş yükünün veya kendi modüllerine ait olan iş yükünün ana iş parçacığını bloklamadan devam edebileceği fakat bu işçilerin iş parçacıkları ve işlemcideki mantıksal çekirdeklerin kullanımı arasında doğrudan bir ilişki olmadığını belirtmiştir.
Palamar Amir ise Taking the micro services perspective to frontend development (2023) isimli makalede iki araştırma yöntemi kullanıp bir deney ve bir vaka çalışması gerçekleştirmiştir. Deneyde uygulamanın bir prototipi oluşturulmuş ve mevcut monolit uygulamanın micro frontend mimarisine taşınması içermiştir. Geliştiriciler arasında bir vaka çalışması yapılmış taşınan uygulamanın riskleri üzerinde geliştiricilerin yorumlarını almıştır.
3.2. Kullanılan Teknolojiler
Uygulama geliştirme sürecinde Javascript, Html, Nodejs ve Css kullanılmıştır. Javacsript uygulamanın temel programlama dili olarak kullanılmış ve dinamik web sayfalarının oluşturulmasını sağlamıştır. Nodejs uygulamanın derlenmesi ve cli araçlarının çalıştırılması için kullanılmıştır. Css ise, kullanıcı ara yüzünün tasarlanmasında ve stil verilerinin uygulanmasında kullanılmıştır.
3.2.1. Javascript
Javascript, uygulamanın temel programlama dili olarak kullanılmıştır. İstemci tarafında çalışan ve tarayıcıda yürütülen bir betik dili olan Javascript, web sayfalarına etkileşim ve dinamizm kazandırır.
Uygulama içinde kullanılan Javascript kütüphaneleri ve çerçeveleri aracılığıyla, kullanıcılarla etkileşimli ve zengin içeriğiyle beraber deneyimler sağlanmıştır.
Web teknolojilerinin hızla gelişmesiyle birlikte, internet üzerindeki kullanıcı deneyimi sürekli olarak yeniden şekillenmektedir. Bu gelişmelerin arkasında, web sayfalarının statik yapısından ziyade dinamik ve etkileşimli hale gelmesini sağlayan temel araçlardan biri JavaScript’tir. JavaScript, tarayıcı tabanlı bir programlama dili olarak, web sayfalarına etkileşim ve dinamizm kazandırarak kullanıcıların daha zengin bir deneyim yaşamasını sağlar.
Öncelikle, JavaScript’in etkileşim sağlama yeteneği incelenebilir. Kullanıcıların web sayfalarıyla etkileşim kurmasını sağlayan olay tabanlı programlama modeli, JavaScript’in temel yapı taşlarından biridir. Örneğin, bir kullanıcı bir butona tıkladığında veya bir formu doldurduğunda, JavaScript bu olayları algılar ve belirlenen işlevleri gerçekleştirerek sayfanın dinamik olarak güncellenmesini sağlar. Bu şekilde, kullanıcılar web sayfalarıyla etkileşime geçebilir, veri gönderebilir veya alabilir ve istedikleri içeriği kişiselleştirebilirler.
Ayrıca, JavaScript’in dinamizm sağlama yeteneği de göz önünde bulundurulmalıdır. JavaScript kullanılarak, web sayfaları dinamik olarak oluşturulabilir, içeriği dinamik olarak değiştirilebilir ve görsel efektlerle zenginleştirilebilir. Örneğin, Fetch teknolojisi kullanılarak, web sayfaları arka planda sunucuyla veri alışverişi yapabilir ve sayfaları yeniden yüklemeden dinamik olarak güncelleyebilir. Ayrıca, JavaScript ve CSS animasyonları kullanılarak, görsel efektler eklenerek kullanıcı deneyimi daha çekici hale getirilebilir.
3.2.2. Nodejs
Nodejs, Javascript tabanlı bir çalışma zamanı ortamıdır. Bu uygulama sürecinde, Nodejs uygulamanın derlenmesi ve diğer araçların kullanılması sürecinde kullanılmıştır. Nodejs’in en önemli avantajlarından biri, Javascript dilini kullanarak sunucu tarafı uygulamalarında geliştirilmesine olanak sağlamasıdır.
Ayrıca, paket yönetici olan npm (Node Package Manager) ile geniş bir modül ekosistemine erişim sağlar.
Node.js’in olay tabanlı ve asenkron çalışma modeli, sunucu tarafındaki uygulamaların daha hızlı ve verimli çalışmasını sağlar. Bu model sayesinde, sunucu işlemi gerektiren uzun süreli operasyonlar (örneğin, ağ çağrıları) arka planda gerçekleştirilebilir ve diğer işlemlerin engellenmesini önler. Micro frontend haberleşmesi kapsamında kullanılan tek sayfalı uygulamaların temelinde nodejs kullanılarak geliştirme süreçleri hızlandırılmıştır.
3.2.3. Html
HTML (Hypertext Markup Language), web sayfalarının yapısal olarak düzenlenmesini sağlayan standart bir işaretleme dilidir. Uygulamada HTML, kullanıcı ara yüzünün bileşenlerinin tanımlanmasında kullanılmıştır. Sayfaların yapısı, içeriği ve görsel düzenlemeleri HTML etiketleri aracılığıyla belirlenmiştir.
Microfrontend yaklaşımı, bir web uygulamasının ön uç kısmını (frontend) modüler parçalara bölerek geliştirme yaklaşımını ifade eder. Bu yaklaşım, büyük ve karmaşık web uygulamalarının geliştirilmesinde daha fazla esneklik ve ölçeklenebilirlik sağlar. Micro frontend’in temel amacı, bir web uygulamasını farklı bağımsız parçalara bölmek ve her bir parçayı ayrı bir uygulama olarak geliştirmek ve dağıtmaktır.
3.2.4. CSS
CSS (Cascading Style Sheets), web sayfalarının görünümünü ve stiline uygulanan bir stil dilidir. Uygulamada CSS, kullanıcı ara yüzünün tasarlanmasında ve stil verilerinin uygulamasında kullanılmıştır. Renkler, yazı tipleri, arka planlar ve düzenler CSS ile belirlenmiş ve kullanıcı deneyimini geliştirmek için görsel estetik saklanmıştır.
3.2.5. Tailwind CSS
Tailwind CSS (Cascading Style Sheets), modern webgeliştirme süreçlerinde popüler hale gelmiş bir utility first CSS yardımcısıdır. Tailwind CSS, bileşen tabalı stik yaklaşımı yerine, doğrutan elementlere uygulanan yardımcı sınıflar kullanarak stil tanımlamamıza olanak tanır. Bu Yaklaşım, stil tanımlama sürecini daha modüler ve yönetilebilir hale getirir.
3.2.6. Custom Event
Javascript’te özel olaylar (custom events), Document Object Model içinde özel olarak tanımlanmış olaylardır. Bu olaylar, tarayıcı tarafından sağlanan standart olayların yanı sıra, uygulamanızın ihtiyaçlarına göre tanımlanan özel olaylardır. Özel olay oluşturmak için CustomEvent API (Application Programming Interface)’si kullanılır.Bu API, CustomEvent constructor’ını kullanarak bir özel olay nesnesi oluşturmamızı sağlar.
Oluşturulan bu nesneyi belirbi bir elemente atayarak veya belirli bir elemente atanmadan dinleyicilere iletebilme yeteneği sağlar. Bu sayede özel olaylar uygulama içinde belirli bir noktada veya belirli bir koşulda tetiklenebilir ve dinlenebilir.
3.2.7. Jest
Jest, Javascript projeleri için bir test çerçevesidir. Özellikle React ve Nodejs gibi Javascript ve Typescript tabanlı uygulamaların test edilmesi için popüler bir seçenek sunan jest, Facebook tarafından geliştirilen açık kaynaklı bir proje olup geniş topluluk tarafından desteklenir.
Jest, micro frontend yaklaşımında kullanılan bileşenlerin (modüllerin) test edilmesini destekler. Her bir micro frontend bileşeninin kendi testine sahip olmasını sağlar. Micro frontendlerin bir araya getirilmesi sırasında entegrasyon testlerinin yazılmasını sağlar. Snapshot testleri özelliği sayesinde geliştirme sürecinde güvenilirlik ve bütünlük sağlayarak uygulama kalitesini artırmaktadır.
3.2.8. Cypress
Cypress, mordern web uygulamaları için geliştirilmiş, açık kaynaklı bir end-to-end çerçevesidir.Cypress, Javascript tabanlı bir test otomasyon aracıdır ve web uygulamalarının tüm katmanlarını test etmek için kullanılır. Özellikle tek sayfa uygulamaları için uygun olan Cypress, kolay kullanımı zengin özellik seti ve güçlü otomatik test yetenekleriyle donatılmıştır.
Micro frontend yaklaşımında, her bir bileşenin kendi test setine sahip olmasını sağlar, Cypress her bir micro frontend’in test edilmesini ve entegrasyonunun sağlanmasını kolaylaştırmaktır.
Ayrıca otomatik test yetenekleri sayesinde micro frontend işlevselliğinin sağlıklı bir şekilde çalıştığını doğrulamak için kullanılır. Uçtan uca test etme imkanı sağlayarak ekranlar arasındaki yönlendirmeler ve veri görünümü tutarlılığını görsel olarak görmemize imkan tanır.
3.2.9. Local Storage & Session Storage
Local Storage web tarayıcılarında istemci tarafında veri depolamak için kullanılan bir yöntemdir. Bu yöntem tarayıcıda çalışan web uygulamaları tarafından kullanıcı verilerini kalıcı olarak saklamak için kullanılır.
Local Storage, anahtar-deper çiftleri şeklinde veri depolar ve bu verilere tarayıcı pencere veya sekmesi kapandığında bile erişilebilir. Local Storage’a depolanan veriler, tarayıcı penceresi veya sekmesi kapatıldığında bile korunu ve sonraki ziyaretlerde erişilebilir.
Ancak, kullanıcılar tarafında elle temizlenmediği sürece bu veriler kalıcıdır. Bu nedenle kullanıcı tercihleri oturum bilgileri veya diğer kalıcı verilerin saklanması için kullanılır.
Session Storage ise web tarayıcılarında istemci tarafında geçici veri depolamak için kullanılan bir yöntemdir. Bu yöntem tarayıcıda çalışan web uygulamaları tarafından kullanıcı verilerini geçici olarak saklamak için kullanılır. Session Storage Local Storage’a benzer şekilde anahtar-değer çiftleri şeklinde veri depolar, ancak önemli bir farkla, tarayıcı penceresi veya sekmesi kapatıldığında bu verilere erişilemez.
3.2.10. Service Worker
Javascript Service Worker, modern web tarayıcılarında kullanılan bir Javascript dosyasıdır. Bir Service Worker, tarayıcının arka planında çalışan bir işlem olarak çalışır ve web uygulamasının çeşitli özelliklerini geliştirmek için kullanılır. Özellikle, çevrimdışı çalışma, bildirimler, arka plan senkronizasyonu gibi ileri web özelliklerini destekler.
Service Worker, web uygulamasının çevrimdışı olarak çalışmasını sağlar. Bu kullanıcıların internet bağlantısı olmadan da uygulamayı kullanabilmesine olanak tanır, böylece kullanıcı deneyimi artırılır.
Her bir micro frontend kendi Service Worker’ını kullanarak içeriğini ve kaynaklarını yerel olarak önbelleğe alabilir ve çevrim dışı olarak çalışmasına imkan sağlar, bu kullanıcıların daha önce ziyaret ettikleri micro frontend bileşenlerine hızlı erişim sağlamalarını ve aynı bileşenin farklı sayfalarda tekrar yüklenmesini önlemektedir.
3.2.11. Fetch
Javascript Fetch yöntemi, web tarayıcıları tarafından sunulan bir Javascript arayüzüdür ve ağ üzerinden sunucu ile iletişim kurmayı sağlar. Fetch http (Hyper Text Transfer Protocol) isteklerini oluşturmak ve yanıtlarını işlemek için kullanılmaktadır.
Fetch yöntemi XML Request nesnesinin yerini almıştır ve daha basit , daha güçlü bir alternatif olarak sunulmuştur. Temel olarak belirli bir uygulamaya istek gönderir ve uygulamadan gelen yanıtı işler. Bu yanıta göre frontend tarafında görselleştirme ve veri işleme yöntemleri uygulanabilir. Micro frontend uygulamalarında da servis üzerinden gelen cevaplar için kullanılmış ek bir maliyet getiren üçüncü taraf yazılımları kullanılmasının önüne geçilmiştir. Aşağıdaki şekil 3.6’da fetch örneği verilmiştir.
3.2.12. Typescript
Typescript, Microsoft tarafından geliştirilen ve Javascript dilinin bir üst kümesi olan bir programlama dili ve derleyicisidir. Javascript’e ek olarak statik tür sistemine sahiptir, yani değişkenlerin ve ifadelerinin türleri derleme zamanında belirlenir. Bu geliştiricilere daha güvenli ve yapılandırılmış bir kod yazma süreci sağlar.
JavaScript’in dinamik tür sistemine kıyasla, Typescript statik tür sistemine sahiptir. Bu, değişkenlerin ve ifadelerin türlerinin derleme zamanında belirlenmesini sağlar. Bu, hataların daha erken aşamalarda yakalanmasını ve daha güvenli bir kod geliştirme süreci sağlar.
Typescript, JavaScript’in temel yapılarını genişleterek geliştiricilere daha iyi bir yazılım geliştirme deneyimi sunar. Örneğin, sınıflar, arayüzler, jenerikler gibi ileri düzey yazım özelliklerini destekler.
Micro frontend mimarisi, birden fazla küçük ve bağımsız bileşenin bir araya getirilmesiyle oluşur. Typescript, her bir bileşenin daha güvenli ve yapılandırılmış bir şekilde geliştirilmesine olanak tanır. Bu da uygulamanın genel güvenliğini ve stabilitesini artırır.
3.3. Framework ve Kütüphaneler
Bu bölümde uygulama geliştirilirken kullanılan framework ve kütüphaneler ele alınmıştır.
3.3.1. React
React, uygulamanın kullanıcı arayüzünü oluşturmak için tercih edilen bir Javascript kütüphanesidir. Birçok bileşen tabanlı yaklaşımıyla bilinir ve bileşenlerin yeniden kullanılabilirliği ve kolay entegrasyonu sayesinde geliştirme sürecini hızlandırır. Uygulamada, React’ın bu esnek ve güçlü yapısı, kullanıcı ara yüzünün dinamik ve etkileşimli olmasını sağlamak için kullanılmıştır.
Ayrıca, React’ın sanal DOM (Document Object Model) yapısı, uygulamanın performansını artırırken, kodun daha kolay yönetilmesine olanak tanır.
3.3.2. Webpack
Webpack modern web uygulamalarının paketlenmesi ve yapılandırılması için kullanılan bir modüle bundler’dir. Uygulamada, Webpack, farklı Javascript dosyalarını ve bağımlılıklarını bir araya getirerek tek bir dosya haline getirme ve böylece uygulamanın yüklenme süresini azaltma amacıyla kullanılmıştır. Ayrıca, Webpack’in modüler yapısı, uygulama geliştirme sürecini daha düzenli hale getirir ve geliştiricilere esneklik sunar.
3.3.3. Module Fedaration
Module Federation, micro frontend mimarisi için geliştirilen ve farklı ekiplerin bağımsız olarak çalışmasını sağlayan bir Webpack özelliğidir. Uygulamada, Module Federation, farklı micro frontend modüllerinin bir araya getirilmesi ve ortak bir altyapı üzerinde çalışmasını sağlayarak, kodun daha modüler ve ölçeklenebilir olmasını sağlamak için kullanılmıştır. Bu sayede, uygulamanın geliştirme süreci daha verimli hale gelirken, karmaşıklık azaltılmış ve bakım maliyetleri düşürülmüştür.
3.4. Test Edilen Çerçeveler ve Mimari Yaklaşımlar
Bu bölümde, temel düzeyde micro frontend yaklaşımlarının ve çeşitli Javascript çerçevelerinin test edilmesi amaçlanmıştır. React, Angular ve Vuejs gibi popüler çerçeveler kullanılarak basit testler yapılmış ve micro frontend kod örnekleri geliştirilmiştir.
3.4.1. React
React, uygulamanın frontend kısmını oluşturmak için kullanılan bir Javascript kütüphanesi olarak micro frontend mimarisine en uygun çerçevelerden birisidir. Reactın temel amacı, web uygulamalarının kullanıcı ara yüzlerni oluşturmaktadır. React bileşen tabanlı bir mimariye sahiptir ve her bileşen, bağımsız ve tekrar kullanılabilir parçalar olarak işlev görür.
Bu bileşen tabanlı yaklaşım, büyük ve karmaşık kullanıcı ara yüzlerinin yönetimini kolaylaştırır ve kodun daha düzenli ve bakımı daha kolay olmasını sağlar.
3.4.2. Angular
Angular, Google tarafından geliştirilen ve özellikle büyük ölçekli uygulamalar için uygun olan bir Javascript çatısıdır. Fakat Angular öğrenme eğrisinin zor oluşu ve Angular versiyonlarının ortalama 6 ayda bir değişmesi ve entegrasyon noktasındaki zorlukları micro frontend mimarisine tam olarak uygun değildir.
Angular’ın temel özelliklerinden biri, bileşen tabanlı bir mimariye sahip olmasıdır. Bu, uygulamaların bağımsız ve yeniden kullanılabilir bileşenlere bölünmesini sağlar. Bileşenler, uygulamanın kullanıcı ara yüzünü oluşturur ve her biri kendi şablonu, stili ve iş mantığına sahiptir. Bu yapı, büyük uygulamaların yönetimini ve bakımını kolaylaştırır.
3.4.3. Vue
Vuejs hafif ve esnek bir Javascript framework’üdür ve moder web uygulamaları için kullanılabilir, performans karşılaştırmaları ve sektör dinamiklerine göre Micro frontend mimarisine React kadar uygun bir yapısı vardır. Vue.js, bileşen tabanlı bir mimariye sahiptir. Bu sayede uygulamalar, küçük ve bağımsız bileşenlere bölünerek geliştirilebilir ve yönetilebilir. Bu yapı, büyük ve karmaşık uygulamaların daha kolay yönetilmesini sağlar ve kodun yeniden kullanılabilirliğini artırır.
Vue.js’nin en büyük avantajlarından biri, öğrenme eğrisinin düşük olmasıdır. Basit ve anlaşılır bir yapıya sahip olan Vue.js, hem yeni başlayanlar hem de deneyimli geliştiriciler için kolayca öğrenilebilir ve uygulanabilir. Vue.js, temel HTML, CSS ve JavaScript bilgisi olan geliştiriciler için hızlı bir başlangıç yapma imkanı sunar.
3.4.4. Svelte
Svelte geliştiricilere dinamik ve etkileşimli web uygulamaları oluşturmak imkanı sunar. Ancak, Svelte’in benzersiz yanı, çalışma zamanında kodu dönüştürerek, web tarayıcısında çalıştırılabilir Javascript koduna dönüştürmesidir. Bu yaklaşım son kullanıcıya daha hızlı ve daha optimize edilmiş bir deneyim sunmayı amaçlar.
Svelte, kullanıcı arayüzlerini tanımlamak için bileşen tabanlı bir yapı kullanır. Bileşenler, HTML, CSS ve JavaScript’in birleşiminden oluşur ve her bileşen kendi stil ve işlevselliğiyle birlikte gelir. Bu yapı, uygulamaların daha modüler ve yönetilebilir olmasını sağlar. Ancak, Svelte’in asıl farkı, bileşenlerin tarayıcıda çalıştırılmadan önce optimize edilmiş JavaScript koduna dönüştürülmesidir. Aşağıdaki şekil 3.4’de Svelte ait bileşen örneği verilmiştir.
3.4.5. Web Components
Javascript Web Components, web geliştirme için standartlaştırılmış bir yaklaşımdır. Bu yaklaşım, web geliştiricilerinin yeniden kullanılabilir ve bağımsız öğeler oluşturmasını ve bunları web uygulamalarında kullanmasını sağlar. Javascript Web Components, tarayıcıların doğal olarak desteklediği bir dizi teknoloji bir araya getirerek oluşturur. Aşağıdaki şekil 3.5’de Web bileşen örneği verilmiştir.
4. ARAŞTIRMA SONUÇLARI VE TARTIŞMA
Bu bölümde, farklı teknolojilerle geliştirilmiş micro önyüz mimarisi kullanılarak geliştirilen basit bir e-ticaret uygulamasının performansı ve kullanıcı deneyimi üzerine elde edilen araştırma sonuçları sunulmaktadır.
4.1. Micro Frontend Projesinin Belirlenmesi
Uygulama basit bir e-ticaret uygulamasının temel yapısı ele alınarak demo olarak geliştirilmiştir. Uygulamaya ait ana ekran görüntüsü aşağıdaki şekil 4.1’de gösterilmiştir.
Uygulamanın oluşturulurken aşağıdaki şekil 4.2’de gösterildiği gibi bir bağımlılık mimarisi tasarlanmıştır.
Şekil 4.2. Uygulama Mimarisi.
Geliştirilen e-ticaret sitesi, farklı işlevleri temsil eden birkaç bağımsız micro frontend biriminden oluşmaktadır. Bu birimler arasında kullanıcı yönetimi, ürün listesi, alışveriş sepeti ve ödeme işlemleri bulunmaktadır. Her bir micro frontend, belirli bir işlevi yerine getiren bağımsız bir React uygulaması olarak geliştirilmiştir. Bu sayede, her bir micro frontendin bağımsız olarak geliştirilmesi, test edilmesi ve dağıtılması sağlanmıştır.
4.2. Micro Frontend Projesinin Oluşturulması ve Teknoloji Seçimler
Bu bölümde, micro frontend mimarisine dayalı olarak geliştirilen e-ticaret sitesinin oluşturulması süreci ve bu süreçte kullanılan teknolojiler detaylandırılacaktır. Proje, modern web geliştirme teknolojilerinden React, Webpack ve Node.js kullanılarak geliştirilmiş ve her bir micro frontend bağımsız birim olarak yapılandırılmıştır. Bu teknoloji seçimleri, uygulamanın esnekliğini, ölçeklenebilirliğini ve bakım kolaylığını artırmak amacıyla yapılmıştır.
4.2.1. Proje Oluşturulması
Micro frontend projesinin oluşturulması, öncelikle genel mimari tasarımın belirlenmesiyle başladı. Proje, kategori listesii, ürün listesi, alışveriş sepeti ve ödeme işlemleri gibi farklı işlevlere sahip bağımsız micro frontendlerden oluşmaktadır.
Her bir micro frontend, belirli bir işlevi yerine getiren bağımsız bir uygulama olarak geliştirilmiştir.
Uygulamanın genel yapısı ve her bir micro frontendin işlevi belirlendi.Aşağıdaki şekil 4.3’de
Ortak bileşenler ve yardımcı fonksiyonlar tanımlandı ve hangi micro frontendlerde kullanılacağı planlandı. Aşağıdaki şekil 4.4’de verileri almaya yardımcı olan helper bir fonksiyon örneği verilmiştir.
Gerekli geliştirme araçları ve bağımlılıklar kuruldu.Aşağıdaki şekil 4.5’de kurulum örneği verilmiştir.
Node.js ve npm kullanılarak projelerin temel yapılandırması yapıldı.Aşağıdaki şekil 4.6’da uygulamanın çalıştırılması için gerekli olan package.json dosyası ve ilgili komutlar belirtilmiştir.
Her bir micro frontend, bağımsız bir React uygulaması olarak geliştirildi.Aşağıdaki şekil 4.7’de Host uygulama içerisindeki diğer micro frontendlerin eklenmesinin örneği verilmiştir.
Webpack ile her bir micro frontendin bağımsız olarak derlenmesi ve optimize edilmesi sağlandı. Aşağıdaki şekil 4.8’ de webpack config örneği verilmiştir.
Şekil 4.9’da ise micro frontendlerin birbirine olan bağımlılığının webpack tarafındaki entegre edilmesine ait örnek verilmiştir.
4.3. Uygulamanın Geliştirilmesi
Bu bölümde, micro frontend mimarisine dayalı olarak geliştirilen e-ticaret sitesinin geliştirme süreci temel bir şekilde ele alınmıştır. Bu süreç, planlama aşamasından başlayarak, geliştirme ortamının kurulması, her bir micro frontendin bağımsız olarak geliştirilmesi, entegrasyonu ve nihai test aşamalarını kapsar.
4.3.1. Uygulamanın Figma Üzerinde Planlanması
Uygulama öncelikle Figma isimli tasarım programı üzerinde temel çerçeveleri çizilerek, tasarlanmıştır. Daha sonra çizilen şablon ayrı ayrı micro frontendlere bölünerek her biri React projesi olacak şekilde tasarım kodlamaya aktarılmıştır. Aşağıdaki şekil 4.10’da Figma üzerinde çizilen şablon örneği gösterilmiştir.
4.3.3. Mimarinin Bileşenlerinin Birleştirilmesi
Micro frontend uygulamaları HostApp üzerinde birleştirilerek tüm parçalar ile beraber bir bütün oluşturulmuştur.
Aşağıdaki şekil 4.17’de Ana host uygulamanın birleştirilmesine ait config verilmiştir.
Tüm uygulamalar ana host uygulaması üzerinde remotes config altında birleştirilmiş olup ilgili adreslerdeki her bir uygulama micro frontend uygulaması olarak çalışmaktadır. Aşağıdaki şekil 4.18’de remote Productapp uygulamasının host uygulaması için dışarıya nasıl aktarıldığına dair örnek gösterilmiştir.
Tüm uygulamalar tek bir komut ile beraber ayağa kalkması gerektiği için tüm uygulamaları kaplayan bir config üzerinde birbirine bağlı olanların öncelikle çalışması gerektiğinden , örneğin ProductApp uygulaması ile CategoriesApp uygulaması birbirine bağlı olduğu için öncelikle bağlı olan CategoriesApp uygulamasının çalışması gerekmektedir ki ProductsApp uygulaması açıldığında beklenmedik bir durum ile karşılaşmasın bu sebepten ötürü aşağıdaki şekil 4.19’da bu uygulamaların her birisini sırasıyla sunucu tarafında ayağa kaldıracak script komutu yazılmış ve ilgili bağımlılık eklenmiştir.
4.4. Micro Frontendlerin Yüklenme Süreleri İlişkin Sonuçlar
Micro frontend mimarisinin sayfa yükleme süresine etkisini belirlemek için öncelikli olarak temel bir deneme yapılmıştır. Uygulama üç farklı micro frontendlere bölünerek, Header, Sidebar ve Main Content oluşturulup, her bir micro frontend küçük bir React uygulaması olarak tasarlanmıştır.
Header micro frontend 100kb, Sidebar micro frontend 150kb ve Main Content micro frontend 200kb olarak boyutlanmış ve başlangıç yükü 450kb olarak ölçülmüştür. Ortalama yükleneme süreleri ise 30ms olarak belirlenmiş ve ortalama yüklenme süresi 90ms olarak ölçülmüştür.
Ardından uygulamanın tamamını oluşturan micro frontendler ProductApp, CareerApp,PrivacyPolicyApp,CategoriesApp,FaqApp,CustomerServicesApp,HelpApp,BasketApp için Google Chrome Tarayıcısı üzerinde yeni ölçümler yapılmış yüklenme süreleri ve boyutları aşağıdaki Şekil 4.20’de verilmiştir.
Shell uygulamasına dahil edilen bu micro frontendlerle beraber Shell uygulamasına ait olan ölçümler ise aşağıdaki şekil 4.21’de verilmiştir.
Aynı ölçümler bu sefer farklı bir tarayıcı olan Safari Tarayıcısı üzerinde denenmiş ve aralarında birbirlerine yakın sonuçlar elde edilmiştir. Aşağıdaki şekilde 4.22’de micro frontendlerin ölçümleri belirtilmiştir.
Shell uygulamasına dahil edilen bu micro frontendlerle beraber Shell uygulamasına ait olan ölçümler ise aşağıdaki şekil 4.23’te verilmiştir.
Şekil 4.23. Ana Shell Boyut ve Yüklenme Ölçümleri Safari.
Yukarıdaki sonuçlar ele alındığında micro frontendlerin yüklenme süreleri tarayıcı ve kullanıcının internetinden kaynaklı olarak değişiklikler gösterebileceği sonucuna varılmıştır.
4.4.1. Micro Frontendlerin Açılış Hızlarına İlişkin Bulgular
Micro frontend mimarisinin uygulamaları hazırlama süresine etkisini belirlemek için uygulamalar Linux tabanında çalıştırılmıştır. Çalışmalara ait sonuçlar ise sırasıyla her micro ve Shell uygulama için ölçülmüştür.
HelpApp için Linux tabanında çıkan sonuçlar 2364 ms olarak ölçülmüş ve aşağıdaki şekil 4.24’te gösterilmiştir.
.
FaqApp için Linux tabanında çıkan sonuçlar 2596 ms olarak ölçülmüş ve aşağıdaki şekilde 4.25’da gösterilmiştir.
CategoryApp için Linux tabanında çıkan sonuçlar 2405 ms olarak ölçülmüş ve aşağıdaki şekilde 4.26’de gösterilmiştir.
BasketApp için Linux tabanında çıkan sonuçlar 2639 ms olarak ölçülmüş ve aşağıdaki şekilde 4.27’de gösterilmiştir.
CustomerServiceApp için Linux tabanında çıkan sonuçlar 2612 ms olarak ölçülmüş ve aşağıdaki şekilde 4.28’de gösterilmiştir.
PrivacyPoliciyApp için Linux tabanında çıkan sonuçlar 2512 ms olarak ölçülmüş ve aşağıdaki şekilde 4.29’da gösterilmiştir
ProductApp için Linux tabanında çıkan sonuçlar 2555 ms olarak ölçülmüş ve aşağıdaki şekilde 4.30’da gösterilmiştir.
CareerApp için Linux tabanında çıkan sonuçlar 3657 ms olarak ölçülmüş ve aşağıdaki şekilde 4.31’de gösterilmiştir.
HostApp için Linux tabanında çıkan sonuçlar 2752 ms olarak ölçülmüş ve aşağıdaki şekilde 4.32’de gösterilmiştir.
Bu bulgular tüm uygulamanın hazır olmasa süresinin 20,16 saniye olduğunu doğrular. Her micro frontendin başlangıç hızının, kullanıcı deneyimini etkileyebilecek farklılıklar gösterebileceğini göstermektedir. Bazı micro frontendler daha hızlı başlatılırken, diğerleri daha uzun sürebilir, bu da micro frontend uygulamalarının getirmiş olduğu avantajları belirtir.
5. SONUÇLAR VE ÖNERİLER
Bu araştırma, Micro Frontend mimarisinin modern web uygulamalarında performans ve kullanıcı deneyimi üzerindeki etkilerini detaylı bir şekilde incelemiştir. Araştırma kapsamında, bir e-ticaret platformu için Micro Frontend mimarisine dayalı bir demo uygulama geliştirilmiştir. Bu uygulama, kullanıcıların ürünleri keşfetmelerini, sepetlerini yönetmelerini ve sipariş vermelerini sağlayarak gerçekçi bir senaryo sunmuştur.
Aşağıdaki tablo 5.1’de micro frontend olarak yapılandırılan demo uygulamanın çıktıları verilmiştir.
Tablodaki verilere bakarak ana HostApp uygulamasının yüklenme süreleri ve başlatma süresinde önemli bir yükseliş meydan gelmiştir bunun sebebi bütün micro parçaların tek bir çatı altında toplanarak bütün bağımlılıkları üçüncü taraf yazılım, stillendirme, resim vb. bütün parçaları ihtiyacı olsa da olmasa da barındırmasından kaynaklandığı gözlenmiştir.
Ayrıca frontend yaklaşımları ve bunların birbirleriyle karşılaştırılması aşağıdaki tablo 5.4’te gösterilmiştir.
Uygulama geliştirme sürecinde, farklı Javascript çevçeveleri ve kütüphaneleri kullanılarak her biri Micro Frontend modülü olarak tasarlanmıştır. Örneğin, ürün listeme ve detayları için React kullanılarak ayrı bir modül oluşturulmuş, sepet yönetimi için Vuejs tercih edilmiş ve ödeme işlemleri için Angular kullanılarak performans testleri yapılmış ve bulgular incelenmiştir. Bu yaklaşım, farklı teknolojilerin bir araya getirilmesini sağlayarak geliştirme sürecini daha esnek hale getirmiştir. Bulgular doğrultusunda çıkan sonuçlar tek bir çerçeve kullanmanın daha performanslı ve etkin olduğunu sunmuş ve uygulama tek bir çerçeve üzerinde ayrı micro uygulamalara bölünmüştür.
Elde edilen bulgular, Micro Frontend mimarisinin uygulama geliştirme sürecini kolaylaştırdığını ve modüler bir yapı sunarak farklı teknolojilerin entegrasyonunu mümkün kıldığını göstermektedir. Özellikle, karmaşık ve çok katmanlı uygulamaların geliştirilmesinde bu yaklaşımın değerli olduğu belirlenmiştir, çünkü farklı ekiplerin farklı teknolojilerle çalışabilmesine olanak tanır.
Performas testleri, Micro Frontend mimarisinin genellikle minimal ek yükleme süreleriyle birlikte çalıştığını göstermektedir. Ancak, büyük veri setleri veya yoğun kullanıcı etkileşimleri söz konusu olduğunda, Micro Frontend modüllerinin ağır olabileceği ve performans sorunlarına neden olabileceği belirlenmiştir. Bu durum, özellikle ödeme işlemleri gibi kritik noktalarda dikkate alınmalıdır.
Mikro frontend mimarisi, micro servis yaklaşımının ön uç geliştirme için uyarlanmış halidir ve modüler micro frontend uygulamalarının geliştirilmesi için yeni bir alternatif sunar. Bu mimari, micro frontend tarafında çok fazla iş mantığı bulunan ve büyük geliştirici ekipleri tarafından uzun vadede geliştirilecek sistemler için uygundur. Micro frontendler ekiplerin bağımsız olarak geliştirme yapmasına hızlıca dağıtım ve test gerçekleştirmesine olanak tanır ve sürekli entegrasyon, sürekli dağıtım ve sürekli teslimatı destekler. Bu yaklaşım, belirli bir ölçüde frontend monolit problemini çözmüştür ve bağımsız geliştirme ve teknoloji bağımsızlığı sağlar.
Ancak micro frontendler bazı eksiklikler ve karmaşıklıklar da getirir. Küçük projeler veya az sayıda geliştirici olan projelerde bu mimari uygun değildir, çünkü geliştiricilerin çabalarının çoğu mimarinin desteklenmesine harcanır ve bu durum genel geliştirme süresini artırır. Farklı teknoloji yığınlarıylageliştirme yapmayı mümkün kılmayan bazı sistemler ve alt projelerin entegrasyonun karmaşıklığı gibi sorunlar bulunmaktadır. Ayrıca, bağımlılıkların fazlalığı yönteim karmaşıklığını artırır. Micro frontendler hala keşif aşamasındadır ve daha olgun ve pratik uygulamalar için keşiflere devam edilmesi gerekmektedir.
Literatür araştırmalar ve yapılan araştırmalar micro frontend mimarisinin belirli avantajlarını ve dezavantajlarını ortaya koymuştur. Bu mimarinin uygulanması, büyük projelerde ek karmaşıklı ve bakım zorluklarına yol açabilir. Çalışmalarda kullanınlan çeşitli kütüphane ve uygulama çatları geliştirme modelini basitleştirip kod azaltımı ve optimizasyon sağlar.
Ancak micro frontendleri arama motoru optimizasyonu desteği ve Javascript işlevselliği olmayan tarayıcılarla uyumu gibi konularda ek altyapı çözümlerine ihtiyaç vardır.
Sonuç olarak micro frontend mimarisi büyük ve karmaşık frontend projelerinde teorik olarak çözüm sunabilir. Ancak bu yaklaşımın pratikte istenen etkiyi sağlayığ sağlamadığını belirlemek için daha fazla araştırma ve yeni yolların keşfedilmesi gerekmektedir. Gelecekteki araştırmalar, micro frontendlerin çeşitli projelerde kullanılması durumunda performans ve maliyet üzerindeki etkilerini daha keskin bir şekilde ortaya koyabilir. Bu çalışma, Micro Frontend mimarisinin potansiyelini vurgulayarak, gelecekteki uygulamalarda bu yaklaşımın nasıl kullanılabileceğine dair bir yol haritası sunmayı amaçlamaktadır.
KAYNAKLAR
Abdullah, H.M. ve Zeki, A.M., 2014 “Frontend and backend webtechnologies in social networking sites: Facebook as an example”, Proc.of the 2014 3rd International Conference on Advanced Computer Science Applications and Technologies (ACSAT’14). Amman,Jordan, sayfa 85–89. IEEE, Aralık 2014.
Andrew R. & LePage P. 2020 “Responsive web design basics.”, [online], https://web.dev/responsive-web-design-basics/ [Ziyaret Tarihi: 18 Mayıs 2024].
Alex,L. ve J. T. Rayfield. Web-application development using the model/view/controller design pattern. In Proc. of the 5th IEEE International Conference on Enterprise Distributed Object Computing (EDOC’01), Seattle, Washington, USA, sayfa 118–127. IEEE, February 2001.
Aneta, P., N. Askarbekuly, S. Megha, ve M. Mazzara, “Micro-frontends: Application of microservices to web front-ends,” Journal of Internet Services and Information Security, vol. 10, no. 2, sayfa. 49–66, 2020.
Blinowski, G., A. Ojdowska, ve A. Przyby lek, “Monolithic vs. microservice architecture: A performance and scalability evaluation,” IEEE Access, vol. 10, pp. 20 357–20 374, 2022.
Chen, L. Microservices: Architecting for continuous delivery and devops, 2018
Colburn, T. ve Shute, G. Abstraction in computer science. Minds and Machines 17.2 (2007), sayfa 169–184.
Cooper, G.H. Integrating Dataflow Evaluation into a Practical Higher-Order Call-by-Value Language, PhD thesis, Department of Computer Science, Brown University (2008).
Darwin,P.B., Culveyhouse,J., Minar, I., 2022, “Cloudflare Workers and micro-frontends: made for one another”, [online], Cloudflare Blog,https://blog.cloudflare.com/better-micro-frontends/ [Ziyaret Tarihi : 18 Mayıs 2024].
Denuziere, L. and Granicz, A. Enabling modular persistence for reac- ` tive data models in F# client-server Web applications, MODULARITY Companion’16, sayfa.55–64 (2016).
Dragoni N, Giallorenzo S, Lafuente A L, et al. Microservices: yesterday, today, and tomorrow.Present and Ulterior Software Engineering. Springer, Cham, 2017: 195–216.
Elliott, C. and Hudak, P. Functional reactive animation, Proc. 2nd ACM SIGPLAN International Conference on Functional Programming (ICFP’97), sayfa.263–273 (1997).
Escobar D., Cárdenas D., Amarillo R., Castro E., Garcés K., Parra C. & Casallas R. (2016) Towards the understanding and evolution of monolithic applications as microservices. In: 2016 XLII Latin American Computing Conference (CLEI), IEEE, sayfa. 1–11.
Evans, E. Domain-driven design tackling complexity in the heart of software. Addison-Wesley Professional, 2004.
Fritzsch J., Bogner J., Zimmermann A. & Wagner S. (2018) From monolith to microservices: a classification of refactoring approaches. In: International Workshop on Software Engineering Aspects of Continuous Development and New Paradigms of Software Production and Deployment, Springer, sayfa. 128–141.
Gaunt, M. 2021, “ServiceWorkers”, [online], https://developers.google.com/web/fundamentals/primers/service-workers [Ziyaret Tarihi : 16 Mayıs 2024].
Geers, M.,2020, “Micro Frontends in Action”, [online], Manning Publications, https://livebook.manning.com/book/micro-frontends-in-action/chapter-1/ [Ziyaret Tarihi: 13 Mayıs 2024].
Geers, M. 2021 “What are Micro Frontends?”, [online], Makale. Erişim: https://micro-frontends.org/ [Ziyaret Tarihi: 13 Mayıs 2024].
Geers, M., 2024, “Micro Frontends- extending the microservice idea to frontend development”, [online], https://micro-frontends.org/ [Ziyaret Tarihi : 13 Mayıs 2024].
Gönen, S., 2023, “Micro Önyüz Mimarisi”, [online], TÜBİTAK Bilgem, https://bilgem.tubitak.gov.tr/yazilim-teknolojileri-arastirma-bulteni/2023/index.html#p=66 [Ziyaret Tarihi : 12 Mayıs 2024].
Gillis, A. 2020, “Nativeapp”, [online], https://searchsoftwarequality.techtarget.com/definition/native-application-native-app [Ziyaret Tarihi : 12 Mayıs 2024].
I. Jugo, D. Kermek, and A. Meštrović, “Analysis and evaluation of web application performance enhancement techniques,” Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics), vol. 8541, sayfa. 40–56, 2014.
Jackson, C., 2019, “MicroFrontends”, [online], MartinFowler, https://martinfowler.com/articles/micro-frontends.html
Keizer, G. 2020, “Microsoft sets new support deadlines for IE11 and Edge”, [online], https://www.computerworld.com/article/3571442/microsoft-sets-new-support-deadlines-forie11-and-edge.html [Ziyaret Tarihi : 8 Mayıs 2024].
Laughlin, C., 2020, “A Begginer’s Guide to the Micro Frontend Architecture”, [online], https://www.sitepoint.com/a-beginners-guide-to-the-micro-front-end-architecture/ [Ziyaret Tarihi : 8 Mayıs 2024].
LePage, P. & Richard, S 2020, “What are Progressive web apps?”, [online], https://web.dev/what-are-pwas [Ziyaret Tarihi: 8 Mayıs 2024].
Mikowski, M., J. Powell, Single Page Web Applications: JavaScript end-to-end. Manning,2013.[online]. https://books.google.se/books?id=eDszEAAAQBAJ [Ziyaret Tarihi: 8 Mayıs 2024].
Mohammed, S., J. Fiaidhi, D. Sawyer ve M. Lamouchie, “Developing a GraphQL SOAP conversational micro frontends for the problem oriented medical record (QL4POMR),” 2022 6th International Conference on Medical and Health Informatics, 2022.
Myers, B. 2020, “The Strengths and Benefits of Micro Frontends”, [online], https://www.toptal.com/front-end/micro-frontends-strengths-benefits
[Ziyaret Tarihi: 8 Mayıs 2024].
Newman, S. “Building microservices: designing fine-grained systems”, O’Reilly Media, Inc.”, 2015.
Oeyen, B., Avila, H.R., Van den Vonder, S. and De Meuter, W.: Composable higher-order reactors as the basis for a live reactive programming environment, Proc. 5th ACM SIGPLAN International Workshop on Reactive and Event-Based Languages and Systems (REBLS 2018), sayfa.51–60 (2018).
Oeyen, B., Van den Vonder, S. and De Meuter, W.: Reactive sorting networks, Proc. 7th ACM SIGPLAN International Workshop on Reactive and Event-Based Languages and Systems (REBLS 2020), sayfa.38– 50 (2020).
Pavlenko, A. et al., Micro-frontends Application of microservices to web front-ends, J. Internet Serv. Inf. Secur., Vol.10, №2, sayfa.49–66 (2020).
Patel, H., 2024, “Build a micro-frontend application with React”, [online], LogRocjet Blog, https://blog.logrocket.com/build-micro-frontend-application-react/ [Ziyaret Tarihi: 10 Mayıs 2024].
Peltonen, S., L. Mezzalira and D. Taibi, “Motivations, benefits, and issues for adopting Micro-Frontends: A Multivocal Literature review,” Information and Software Technology, p. 106571, 2021.
Posnick, J., 2021, alternative architectures for your PWA [online], https://www.c-sharpcorner.com/article/what-and-why-reactjs [Ziyaret Tarihi: 12 Mayıs 2024].
Ponce, F., G. M´arquez, and H. Astudillo, “Migrating from monolithic architecture to microservices: A rapid review,” in 2019 38th International Conference of the Chilean Computer Science Society (SCCC), 2019, sayfa. 1–7.
Ricardo A. Pinto da Silva, “A Micro Frontends Solution Analyzing quality attributes,” M.S. thesis, Department of Informatics Engineering, Instituto Superior de Engenharia do Porto, Porto, Brazil, 2021.
Schäffer, E., A. Mayr, J. Fuchs, M. Sjarov, J. Vorndran ve J. Franke, “Microservice-based architecture for engineering tools enabling a collaborative multi-user configuration of robotbased automation solutions,” Procedia CIRP, vol. 86, sayfa. 86–91, 2019.
Shukla, V., 2023, “A Comprehensive Guide to Micro Frontend Architecture”, [online], https://medium.com/appfoster/a-comprehensive-guide-to-micro-frontend-architecture-cc0e31e0c053 [Ziyaret Tarihi: 26 Mayıs 2024].
Shakil, M., A. Zoitl, “Towards a Modular Architecture for Industrial HMIs,” in 2020 25th IEEE International Conference on Emerging Technologies and Factory Automation (ETFA), 2020.
Shukla, V., 2022, “A Comprehensive Guide to Micro Frontend Architecture”, [online], Dev.to,https://dev.to/devsmitra/the-complete-guide-to-micro-frontend-with-reactjs-for-2022-36b2 [Ziyaret Tarihi: 25 Mayıs 2024].
SMET, T., 2020, “Micro frontend architecture| for cross framework reusability in practice”[online],https://libstore.ugent.be/fulltxt/RUG01/002/946/106/RUG01-002946106_2021_0001_AC.pdf [Ziyaret Tarihi : 25 Mayıs 2024].
Soldani, J., D.A. Tamburri, W.-J. Van Den Heuvel, The pains and gains of microservices: A systematic grey literature review, J. Syst. Softw. 146 (2018) sayfa 215–232.
Suthendra, J. A. ve Pakereng, M. A. I. “Implementation of Microservices Architecture on E-Commerce Web Service,” ComTech: Computer, Mathematics and Engineering Applications, vol. 11 issue 2, sayfa. 89– 95, 2020.
Stefanovska, E., ve V. Trajkovik, “Evaluating micro frontend approaches for code reusability,” Communications in Computer and Information Science, sayfa. 93–106, 2022.
Taibi,D., V. Lenarduzzi, C. Pahl, Architectural patterns for microservices: A systematic mapping study, in: Proceedings of the 8th International Conference on Cloud Computing and Services Science — Volume 1: CLOSER, SciTePress, INSTICC, 2018, sayfa. 221–232
Tilak, P. Y., V. Yadav, S. D. Dharmendra, and N. Bolloju, “A platform for enhancing application developer productivity using microservices and micro-frontends,” in 2020 IEEEHYDCON, 2020, sayfa 1–4.
UIJRT | United International Journal for Research & Technology | Volume 02, Issue 08, 2021, [online], UIJRT, https://uijrt.com/articles/v2/i8/UIJRTV2I80017.pdf [Ziyaret Tarihi: 23 Mayıs 2024].
Wang, D., D. Yang, H. Zhou, Y. Wang, D. Hong, Q. Dong and S. Song, “A Novel Application of Educational Management Information System based on Micro Frontends,” Procedia Computer Science, vol. 176, sayfa. 1567–1576, 2020
Yang,C., C. Liu and Z. Su, “Research and Application of Micro Frontends,” IOP Conference Series: Materials Science and Engineering, vol. 490, p. 062082, 2019.
☕ Buy me Coffee : https://buymeacoffee.com/yasindlklcc
Thank you for reading.
