Kurumsal frontend uygulama mimarisi

• Kod tabanının büyümesi = hem anlamanın hem de değiştirmenin zorlaşması

• Çözüm ne? Kod tabanını küçük tutmak.

• Alan bazında kod tabanı ayrımı & mikro frontend imdada yetişiyor!

• Monorepo içinde kütüphanelerin bağımlılık ilişkilerini tanımlama & bağımlılıkları doğrulama gibi ihtiyaçlar Nx kullanılarak çözüldü

• Kod, uygulamalar ve kütüphaneler olarak ayrıldı

• Uygulamalar bağımlılık ve yapılandırma enjeksiyonu rolünü üstleniyor

• İşlevlerin büyük bölümü kütüphanelerde uygulanıyor

  • Kütüphanelerde yeniden kullanılabilir tasarım sistemi, uluslararasılaştırma, üçüncü taraf modüllerinin yanı sıra ana sayfanın hero banner'ı, ürün detay sayfası, sipariş geçmişi gibi yeniden kullanılmayan kodlar da yazılıyor.

Feature kütüphanesi

• Temel olarak bir sayfada kullanılan tüm bileşenler aynı adlı Feature kütüphanesinde yazılır

  • ör.) account alanındaki SignInPage sayfasının tüm bileşenleri account/feature-sign-in kütüphanesinde yazılır

• Aynı alanın iki veya daha fazla sayfasında paylaşılan bileşenler, ilgili alan içinde ayrı bir feature olarak ayrılır

  • ör.) account alanındaki SignInPage ve SignUpPage içinde KakaoLoginButton bileşeni ortak kullanılıyorsa bu bileşen account/feature-social-login kütüphanesinde yazılır

• Farklı alanlardaki sayfalarda paylaşılan bileşenler, ortak alan içinde ayrı bir feature olarak ayrılır

  • ör.) landing alanındaki HomePage ile classroom alanındaki LecturePage arasında paylaşılan GlobalNavigation bileşeni shared/feature-navigation kütüphanesinde yazılır

Shell kütüphanesi

• Feature ve UI kütüphanelerindeki bileşenler birleştirilerek sayfalar oluşturulur

  • ör.) SignInPage bileşeni account/shell-kr-web kütüphanesinin bir bileşenidir. Burada SignUpPage, PhoneVerificationPage vb. bulunur.

• Shell kütüphanesi, uygulamaya sunulan belirli bir alanın giriş noktasıdır

• Her uygulama için farklı giriş noktaları sağlanabilir

  • Örneğin..

  • HomePage bileşeninde kullanılan bileşenler landing/feature-home kütüphanesinde yazılmıştır.

  • Ancak aynı HomePage bileşeni bile ABD sitesinin HomePage'i mi, Japonya sitesinin HomePage'i mi, Kore sitesinin HomePage'i mi olduğuna göre farklı bir yapıya sahip olacaktır.

  • Bu nedenle landing alanına erişen her uygulama için bir shell kütüphanesi oluşturulabilir. (shell-us-web, shell-jp-web, shell-kr-web)

Provider kütüphanesi

• İki veya daha fazla Feature kütüphanesi arasında paylaşılan durumu yöneten kütüphane

  • ör.) oturum açma durumunu yöneten shared/provider-auth-state

UI kütüphanesi

• İki veya daha fazla kütüphane arasında paylaşılan sunumsal bileşenler koleksiyonu.

Utility kütüphanesi

• Yukarıdaki 4 sınıfa girmeyen tüm modüller

• Class101'in alan modeliyle ilgisiz, test ve dağıtımdan bağımsız şekilde çalışabilecek kadar bağımsız işlevler sunmalıdır.

  • ör.) shared/utils-apollo-client, shared/utils-i18n

Uygulama

• Yalnızca yapılandırma ve bağımlılık yönetimi rolünü üstlenir = uygulama kodu neredeyse yoktur