Günümüzde yazılım geliştirmedeki en dinamik alanlardan biri ön uç mimarisidir. Birkaç yenilikçi, dinamik kullanıcı arayüzleri oluşturmak için daha güçlü yollar tasarlamak için son teknolojiyi zorluyor. Bu çalışmanın çoğu, öfkeli bir hızla ve açıkta gerçekleşiyor.
SvelteKit, Solid, React, Qwik ve Astro gibi bir dizi açık kaynaklı JavaScript projesi sayesinde, web’in geleceğinin evriminde ön sıradayız. İşte eylemi anlamak için bir rehber.
hidrasyon nedir?
Modern ön uç mimarisini geliştirmeye yönelik faaliyetlerin çoğu, hidrasyon. Hidrasyonun ne olduğunu ve modern ön uç mimarisinin neden merkezi olduğunu anlamak için, oyundaki üst düzey kavramlara bir göz atalım. Tepkime mucizesini sağlamak için her çerçeve aşağıdaki şemada gösterilen üç yönü ele almalıdır.
IDGReaktivitenin üst düzey yönleri.
Diyagramdaki temel mesaj, çerçevenin görüşü çerçevelemekten, durumu tutmaktan ve aralarındaki etkileşimi yönetmekten sorumlu olduğudur. (Eğer aşina iseniz MVC deseniburada yankılandığını duyacaksınız.)
Bu üç parça yerine oturduğunda, gitmeye hazırsınız. Kullanıcı sayfayı görebilir ve onunla etkileşim kurabilir.
Saf veya varsayılan yaklaşım, müşterinin ihtiyaç duyduğu her şeyi (çerçeve, reaktif kod ve durum) alıp göndermektir. İstemci (tarayıcı) daha sonra çerçeveyi görüntüleme (diğer adıyla kullanıcı arayüzünü boyama), JavaScript’i yorumlama ve duruma bağlama işini yapar.
Bu yaklaşım, hem iş yerindeki kod için hem de onu anlamaya çalışan insan zihinleri için harika bir basitlik avantajına sahiptir. Aynı zamanda büyük bir dezavantajı var: İlk sayfa oluşturma her şeyi beklemek zorunda ve kullanıcının tüm bu ağ ve tarayıcı karmaşasından geçmesi gerekiyor. Ayrıca, özen gösterilmezse, sayfa görüntülenmeye ve ardından utanç verici bir şekilde kendisini son düzende yeniden düzenlemeye meyilli olacaktır. İyi bir görünüm değil.
Bu, geliştiricilere önce ilk sayfayı sunucuda oluşturmayı denemeleri için ilham verdi (sunucu tarafı oluşturma veya SSR) ve gönderin. Ardından, kodun ve durumun geri kalanı gönderilip önyüklenirken kullanıcının bakması gereken uygun bir sayfa olur. Bu harika bir basitleştirme ama temel fikir bu.
Temel düzeni yerine getirmek için geçen süreye denir. ilk içerikli boya (FCP). Sayfanın ulaşması gereken bir sonraki dönüm noktası, şu şekilde ölçülür: etkileşim zamanı (TTI), yani kullanıcının sayfayı gerçekten kullanabilmesi için geçen süre.
İlk sayfayı alma ve etkileşimli hale getirme süreci—yani hidrasyon.
Sunucu tarafı oluşturmanın sınırları
Sonuç olarak, SSR’nin FCP’yi iyileştirme eğiliminde olduğu, ancak TTI’yi kötüleştirdiğidir. Böylece amaç, her ikisini de en üst düzeye çıkarırken ikisi arasında bir denge sağlamak ve umarım hoş bir geliştirici deneyimi (DX) sağlar.
Hidrasyonun iyileştirilmesi için bu çabada çeşitli yaklaşımlar önerilmiş, benimsenmiş, terk edilmiş, değiştirilmiş ve birleştirilmiştir. Uygulama detaylarına bakmaya başladığınızda, bunun ne kadar karmaşık hale geldiğine şaşıracaksınız. İyi bir DX ile dengeli bir FCP ve TTI geliştirmesi mi? Kulağa kolay geliyor ama değil.
Karmaşıklığın bir nedeni, tüm takasları sıralamanın ortasında olmamızdır; gelişen bir sahnedir. Yine de ileriye giden yol kristalleştiğinde, ortaya çıkan istemci mimarisinden iki sonuç beklemeliyiz. İlk olarak, bugün iyi oluşturulmuş uygulamaların birkaç yıl öncesine göre ustaca ama açıkça daha iyi bir deneyim sağladığı gibi, “gelecek nesil” hissi veren web uygulamaları oluşturmalıdır.
İkincisi ve belki de daha da önemlisi, geliştirilmiş istemci mimarimiz, daha iyi performansın ötesinde çok geniş kapsamlı sonuçlara sahip olmalıdır. Ön uç mühendisleri, karmaşıklığı inceleyerek ve çözerek, hem sistem hem de zihin için daha iyi bir modele ulaşacaklar. Daha iyi bir mimari aslında daha güçlü bir buluşsal yöntemi temsil eder. Bu, genellikle öngörülemeyen takip eden faydalarla sonuçlanır.
Bunu, tepkiselliğin kendisi ile çalışırken görebilirsiniz. Reaktivite sahneye çıktı çünkü geliştiricinin beyninden çerçeveye durum bağlamasını boşaltmak için bir yol sundu. Ancak faydaları bununla da bitmedi. Mimari sadece daha basit değil, aynı zamanda daha tutarlı hale geldi. Bu netleştirilmiş performans ve işlevsellik, yönetim kurulu genelinde kazanır.
Modern JavaScript çerçeveleri hem sunucu hem de istemciyi içerdiğinden, bu gelişmelerin sonuçlarının genel olarak uygulama mimarisi için geniş sonuçları olabilir.
Hidrasyonun iyileştirilmesine yönelik yaklaşımlar
Hidrasyon durumunu iyileştirmenin temel hilesi, olaylara daha ayrıntılı olarak bakmaktır. Görünümü, etkileşimi ve durumu daha küçük parçalara bölerek, bunları FCP ve TTI için optimize edilmiş olarak adım adım yükleyebilir ve etkinleştirebiliriz. İşte bazı yaklaşımların bir turu.
JavaScript’ten tamamen kaçınmak
En iyi uygulamalarda özümsenen bir yaklaşım, siteleri hiç JavaScript gerektirmeyen sayfalar için analiz etmektir. Bu, daha yeni kavramla ilgilidir. çok sayfalı uygulamalar (MPA). Tek sayfa uygulamaları (SPA) ile sayfa başına düz gezinme (varsayılan web davranışı) arasında bir tür orta yoldur. Buradaki fikir, uygulamanın HTML artı varlıklar olarak hemen gönderilebilecek ve mümkün olan en iyi SEO ve yükleme süreleriyle sonuçlanabilecek kısımlarını bulmaktır.
Örneğin, JS’siz yaklaşım SvelteKit’te görülmektedir. Bu, elbette, reaktif etkileşim gerektiren sayfalar için hiçbir şey yapmaz. Çerçeveler, SPA işlevi gören sayfalarda yine de hidrasyonu ele almalıdır.
ada mimarisi
Astro fikrini savundu ada mimarisi. Buradaki fikir, sayfanın hangi bölümlerinin statik olduğunu ve hangi bölümlerin reaktivite gerektirdiğini belirlemektir. Bu bilgiyle, asla değişmeyen çerçeveleme içeriğini tamamen yok sayarak ve ardından diğer bölümleri (adaları) yalnızca gerektiği gibi yükleyerek sayfanın yüklenmesinde ince ayar yapabilirsiniz.
SPA’yı iyileştirmeyi hedeflediğini belirtmek için bu fikri gözden geçirmekte fayda var. Diğer bir deyişle, tanımladığınız tüm statik içerik, herhangi bir performans düşüşü olmadan orada oturup işini yapabilir. Tüm müşteri tarafı durumunuz ve navigasyonunuz korunur.
Artı tarafta, bu yaklaşım, her adanın yüklenmesini gerekli kılacak bir şey olana kadar (örn. görünüme kaydırma, fare tıklaması) kadar ertelemenize izin verir. Olumsuz tarafı, pratikte genellikle özellikle uygun olmayan bir anda (tıpkı kullanıcı bir şey yapıyorken) oluşan yüklere neden olur.
Tembel yüklü sınırlar
React’in Suspense bileşeni gibi özellikler, temel hidrasyon modelini yerinde tutan, ancak daha sonra tembel yüklenen sınırlar boyunca ayrıştıran bir yaklaşım sunar. Bu, tanıdık sürecin çoğunu yerinde tutma avantajına sahiptir, ancak iyi sonuçlar elde etmek için geliştiricinin çok fazla düşünmesini ve ayarlamasını gerektirmesinin dezavantajı vardır. Zihinsel olarak geliştirici, bileşen düzeni ve yapım zamanı kod bölme dünyası arasında köprü kurma konumundadır.
Ayrıca, çerçevenin çoğu hala önden sevk edilmesi gerektiğinden, tembel yükleme ancak bu kadar yardımcı olabilir.
yeniden başlatılabilirlik
Sürdürülebilirlik, Qwik çerçevesi tarafından tanıtılan bir fikirdir. Qwik, uygulamanın öğelerinin derinliklerine iner ve bunlar arasında tembel sınırlar oluşturur. (Bir bakıma, bunu oldukça karmaşık bir tembel yükleme sınırları biçimi olarak görebilirsiniz.) Yeniden başlatılabilirlik, istemcinin sunucunun kaldığı yerden devam edebilmesi ve her şeyi hassas bir şekilde senkronize tutabilmesi anlamına gelir.
Sunucu bileşenleri
React, sunucu bileşenleri fikrini ve akış adı verilen ilgili bir performans iyileştirmesini hayata geçiriyor. Burada sunucu bileşenlerinin nasıl çalıştığına dair bir açıklama yer almaktadır. Özünde, sunucu bileşenleri, uygulamanın hangi bölümlerinin tamamen sunucuda çalıştırılabileceğini belirlemenize olanak tanır ve böylece herhangi bir istemci tarafı oluşturma cezasından kaçınır.
Yayın Akışı
Yayın Akışı Gerilim ile ilgili gelişen bir başka React tekniğidir. Buradaki fikir, HTML gibi çerçeveleme içeriğinin, gerekli tüm veriler sunucuda hazır olmadan önce istemciye gönderilmeye başlamasına izin vermektir. Bu daha sonra bileşen etkileşimi meydana geldiğinde uygulanabilir.
Kısmi hidrasyon veya aşamalı hidrasyon
Bu şartlarla işler biraz karışıyor. Astro ada mimarisini şöyle tanımlar: kısmi hidrasyon. Basitçe söylemek gerekirse, bir seferde sayfanın yalnızca belirli öğeleri sulanır. Buna bazen denir progresif hidrasyon Bu terimlerin her ikisi de bazen diğer tekniklere uygulanır.
Burada gerçekten birbirimizin ayağına basan üç terimimiz var: adalar, kısmi, ilerici. Ne olursa olsun, ana fikir aynı: Uygulamanın daha akıllı bir şekilde yüklenmesi için yapısını daha küçük parçalara ayırmamız gerekiyor.
Bölünmüş hidrasyon?
Terimleri biraz çözmeye çalışalım. Ada mimarisinin statik bir çerçeve içinde Astro tarzı bağımsız etkileşim parçalarını ifade ettiğini varsayalım.
Yukarı çıkarken, kullanıcı arayüzünü ayrıştırma fikrinin tamamının kısmi hidrasyon olduğunu söyleyebilirsiniz ve Astro’nun adaları bunun bir örneğidir. Yine de bunu tehlikesiz yapamayız, çünkü Astro == ada == kısmi zaten orada yüzüyor. Ayrıca, kısmi yanıltıcı olan eksik bir hidrasyon durumu öneriyor gibi görünüyor.
Sonra tekrardan, ilerici progresif web uygulamaları (PWA) ile kafa karışıklığına neden olur. Belki bölünmüş hidrasyon kapsayıcı fikir için iyi bir terimdir.
Ön uç mimari evrimi
JavaScript’in ön uç mimarisi etrafındaki aktivite, şimdiye kadar tanık olduğum en ilginç kod çalışmalarından bazılarını yarattı. Yeni kavramsal alanı keşfeden ve onunla birlikte çığır açan programlamayı yapan tutkulu bireylerle dolu bir alan. Açık ve işbirliğine dayalı bir şekilde etkileşim kuruyor ve fikirlerini paylaşıyorlar. İzlemek bir zevk.
Bu kişiler arasında Ryan Carniato (Solid) ve Misko Hevery (Qwik) bulunmaktadır. Her ikisi de son teknolojiyi zorluyor, ilerledikçe dünyanın geri kalanına kod ve bilgi salıyor. Carnatio’nun çalışmasına başlamak için iki iyi yer burada ve buradave Hevery’s için iki tane burada ve burada.
Telif Hakkı © 2022 IDG Communications, Inc.
Kaynak : https://www.infoworld.com/article/3661810/reactive-javascript-the-evolution-of-front-end-architecture.html#tk.rss_all