🧩
Micro Frontend Notları
  • 🇸🇲Micro Frontend'e Giriş
    • 🎩Micro Frontend Nedir ?
    • 👀Micro Frontend Mimarisi
    • 🦳Micro Frontend Uygulama Tasarımı
    • 🎋Micro Frontend Geliştirme Süreci
    • 🐻Micro Frontend Uygulama Senaryoları
    • 🧎Micro Frontend Güvenliği
    • 🐈Micro Frontend Örnekleri
    • 😖Micro Frontend Karşılaşılan Zorluklar ve Çözümleri
    • 😉Micro frontend Geleceği
  • 🥳Tool ve Framework
    • 🐣Jrontend - Terminal Uygulaması
    • 🧩Puzzle JS
    • ⚡Voltran JS
    • 🏋️Webpack Module Federation
    • 🤩@module-federation/nextjs-mf
  • 🗺️Proje Örneği
    • 1️⃣Projemizi Tanıyalım
    • 2️⃣React Composer Projesini Oluşturalım
    • 3️⃣React Fragment Projesini Oluşturalım
    • 4️⃣Vue Fragment Projesini Oluşturalım
    • 🎊Projemizin Son Adımları
  • 🎁Kaynakça
    • 🙆Kaynakça
Powered by GitBook
On this page
  1. Tool ve Framework

Puzzle JS

Ölçeklenebilir ve son derece hızlı web siteleri için mikro frontend framework.

PreviousJrontend - Terminal UygulamasıNextVoltran JS

Last updated 2 years ago

PuzzleJs, micro frontend frameworkü olarak çalışan bir yapıdır. İşleyiş süreci şu şekildedir:

Derleme Zamanı(Compile Time):

  1. Ağ geçitleri, kendi parçalarını, API'lerini ve ağ geçidi bilgilerini sunmaya başlar.

  2. Storefront, kayıtlı ağ geçitlerinin bilgilerini alır.

  3. Storefront, gerekli parçaları, bağımlılıkları ve varlıkları indirir ve önbelleğe alır.

  4. Storefront, HTML'i en hızlı şablon oluşturma için bellekteki JavaScript işlevine derler.

On Request:

  1. Storefront, derlenmiş işlemin parçalı bir yanıtını gönderir, ancak bağlantıyı kapatmaz. Kullanıcılar şimdi statik içerikler ve yer tutucular ile sitenizi görebilir. Aynı zamanda, ağ geçitlerinden alınan parçaları almak için arka uç istekleri gönderir.

  2. Herhangi bir parça ağ geçidinden alındığında, bunu tarayıcıya bir parça olarak gönderir ve daha önce gönderilen yer tutucuyu içerikle değiştirir.

  3. Tüm parçalar gönderildiğinde, PuzzleJs bağlantıyı kapatır.

Bu süreç, PuzzleJs'in mikro ön uç çerçevesi olarak nasıl çalıştığını açıklamaktadır.

Dökümantasyonundaki Önemli Noktalar

Neden? Geleneksel model, modern web siteleri için oldukça verimsizdir.

  • Aynı kod üzerinde çalışan birden fazla ekip, her şeyi yönetmeyi zorlaştırır.

  • İlk baytın süresi, en yavaş API kadar hızlıdır.

  • Arka uç veri toplarken, kullanıcı tarayıcısı ilk baytı beklerken zaman kaybeder.

  • Diğer ekiplerin özellikleri henüz hazır olmadığı için, özellikler tamamen geliştirildiğinde ve test edildiğinde çevrimiçi olamaz.

  • Mevcut olanın dışında farklı teknolojiler kullanamazsınız.

  • Belirli bir süreci ölçeklendiremezsiniz, çünkü tüm sisteme bağımlısınız.

Özellikler:

  • İlk Bayta Kadar Süre: PuzzleJs, derleme sürecinde HTML şablonunu javascript işlevine derler. Bu işlem, istekten tamamen bağımsız olduğu için PuzzleJs, bu işlevi kullanarak ilk parçayı gönderebilir.

  • SEO Dostu: PuzzleJs, her şeyin sunucu tarafında hazırlandığı ve işlendiği için tamamen SEO dostudur.

  • Genişletilebilirlik: PuzzleJs'i özel işlevlerinizle kolayca genişletebilirsiniz.

  • Kolay: Bir ağ geçidi veya mağaza önü oluşturabilir ve bunları bir yapılandırma dosyası sağlayarak bağlayabilirsiniz.

  • Bağımsız: Ağ geçitlerinizde herhangi bir teknoloji kullanabilirsiniz, PuzzleJs teknolojilerinizden tamamen bağımsızdır. ReactJs, Vue veya başka herhangi bir JavaScript Framework.

  • Ölçeklenebilir: PuzzleJs, mağaza önlerini ve ağ geçitlerini birbirinden bağımsız olarak oluşturabilir. Böylece Dockerize ortamlarda tek bir projeyi kolayca ölçeklendirebilirsiniz.

  • Korumalı: Bir parçanın gerektirdiği API'niz devre dışı olduğunda, PuzzleJs diğer sayfa parçalarının çalışmaya devam edeceğini garanti eder.

Dökümantasyon:

GitHub:

🥳
🧩
https://puzzle-js.github.io/puzzle-js/
https://github.com/puzzle-js/puzzle-js
Puzzle JS Logo