turuncukafalikiz
New member
Tek sayfa uygulamaları ile nereye gidiyoruz?
React’in arkasındaki geliştirme ekibi, tek sayfalık uygulamaların artık tamamen istemci monolitleri olmamasını sağlayan ilginç bir yaklaşım benimsiyor. Fikir, istemci ve sunucuyu birbirine yaklaştırmak ve bu kombinasyondan en iyi şekilde yararlanmaktır.
Yine, Facebook arka ucu yeniden keşfediyor. React: Server Components’a yapılan son baskından bahsediyoruz. İlk bakışta başka bir JavaScript tabanlı şablon oluşturma motoru gibi görünen şey, geliştirme ekibinin yıllar önce React ile oluşturulmuş uygulamaları yakınlardaki kullanıcılar için daha da performanslı hale getirmek için izlediği yolda yalnızca bir başka adımdır.
Bununla birlikte, React ekibinin peşinde olduğu fikir React’e özgü değildir, diğer büyük JavaScript çerçevelerinde farklı varyasyonlarda da bulunabilir. Ama aslında ne hakkında? Son yıllarda web geliştirme, esas olarak tek sayfa uygulamaları (SPA) ile karakterize edildi ve bu nedenle Angular, Vue veya React gibi “büyük” JavaScript çerçevelerinin ve kitaplıklarının zaferi eşlik etti. Bununla birlikte, böyle bir SPA’nın mimari bir zayıflığı vardır: adından da anlaşılacağı gibi, tek bir HTML sayfasından oluşur. Bu, uygulama başladığında genellikle gerekli tüm kaynakların yüklenmesi gerektiği anlamına gelir.
Performans: SPA’larla ilgili bir sorun
Web kullanıcıları beklemeyi sevmezler. Burada burnunuza bakmanız yeterli – Belirli bir web sitesini arıyorum veya bir web uygulamasını yüklüyorum. Çoğu durumda belirli bir hedefim var. Bu, bir makale okumak, bir satın alma işlemi yapmak veya işyerinde bir görevi tamamlamak olabilir. Ancak önümde boş bir sayfa veya yavaş yavaş oluşan bir web varlığı ile karşılaşırsam, iyi ilk izlenim kaybolur ve karşı taraf bu noktadan sonra beni çok iyi argümanlarla ikna etmek zorundadır, aksi takdirde çok hızlı başlardım. alternatif bir uçağa biniş arayışı Bu yüzden slogan “Hızlı yükle, hızlı kal”dır. Bu ifade, diğerleri arasında Google tarafından icat edildi. Ve haklı olarak: Bir arama motorunun sunduğu sonuçlar kullanıcıyı tatmin etmelidir ve içeriğin hızlı teslimi memnuniyete katkıda bulunur. Bu, hızlı bir şekilde teslim edilen bir uygulamanın sonuçlar listesinde daha iyi sıralanma şansına sahip olduğu anlamına gelir.
Ama SPA’lara geri dönelim. Bir uygulamanın yüklenmesiyle ilgili önemli olan iki ölçüm vardır: gerekli tüm kaynakların yüklenmesi için geçen süre ve kullanıcıların uygulamayla etkileşim kurması için geçen süre.
optimizasyon potansiyeli
Bir SPA geliştirirken en önemli ölçütlerden biri demet boyutudur. Bu boyut belirtimi, başlangıçta dağıtılan uygulamanın derlenmiş kodunu ifade eder. Genellikle SPA’lar saf JavaScript veya TypeScript’te geliştirilir ve Webpack veya Rollup gibi bir paketleyici ile oluşturulur. Bu oluşturma işlemi, çok sayıda bireysel adımı içerir. En önemlileri, TypeScript kullanılıyorsa aktarma işlemi, kaynak kodu birleştirme ve optimizasyondur. Create React App, React için bu derleme sürecini hazırlayan ve üretken işlemler için kodu optimize eden bir komut satırı aracıdır.
Daktilo yazısı
React ortamında bile giderek daha fazla SPA, TypeScript ile uygulanmaktadır. Bununla birlikte, dil yalnızca JavaScript’e bir tür sistemi enjekte etmekle kalmaz, aynı zamanda çeşitli JavaScript özelliklerini öykünme yeteneğine de sahiptir. Uygulama geliştiricileri, oluşturulan kaynak kodun oluşturulması gereken JavaScript sürümünü belirtmek için bir yapılandırma yönergesi kullanabilir. Sürüm ne kadar eskiyse, öykünmesi gereken daha modern JavaScript özellikleri. Ancak bu aynı zamanda paket boyutunun da olumsuz etkilenmesi anlamına gelmektedir. Dolayısıyla amaç, kullanıcıların tarayıcıları izin veriyorsa mümkün olan en son sürümü kullanmaktır. TypeScript yapılandırması, oluşturulan JavaScript kaynak kodunun sürümünü belirtir.
modüler sistem
Bir uygulama, her biri uygulamanın belirli yönleriyle ilgilenen birçok bağımsız dosyadan oluşur: uygulamanın yapısını ve görünümünü belirleyen bileşenler, uygulamanın iş mantığını içeren hizmetler ve belirli dış kaynaklara yardımcı olan destekleyici sınıflar ve işlevler. rutinler. JavaScript modül sistemi, bireysel uygulama bileşenlerini birbirine bağlar ve bağımlılıkların çözülmesine yardımcı olur. Modern tarayıcıların çoğu artık modül sistemini desteklemektedir, bu nedenle teorik olarak kaynak kodu istemciye ayrı bölümler halinde de aktarılabilir. Ancak, uygulamayı birkaç büyük dosya halinde teslim etmek daha pratiktir, çünkü bu, bağlantı yükünü ortadan kaldırır ve tarayıcıdan sunucuya mevcut paralel bağlantılar en iyi şekilde kullanılabilir. Paketleyici, dosyaları birleştirme görevini üstlenir. Örneğin Webpack, yalnızca JavaScript bağımlılıklarını çözmekle kalmaz, aynı zamanda CSS dosyaları gibi diğer kaynakları da pakete entegre edebilir.
küçültücü
Bir uygulamayı yükleme sürecini daha da kolaylaştırmak için kaynak kodu bir küçültücü kullanılarak yeniden yazılır. Süreçteki bu adım, değişken adlarının kısaltılmasını, gereksiz boşlukların kaldırılmasını ve yorumların çıkarılmasını sağlar.
Sallanan ağaç
Webpack gibi paketleyiciler, ağaç sallama adı verilen başka bir optimizasyon seçeneği sunar. Oluşturma işlemi sırasında projede kullanılmayan kodu temizler, böylece yalnızca gerçekten kullanılan kod gönderilir. Ağaç sallama, işlevselliğin yalnızca bir kısmının gerçekten gerekli olduğu kitaplıkları kullanırken özellikle ilgi çekicidir.
Yavaş yüklenme
Ağaç sallamaya ek olarak, bir uygulamanın içinde gereksiz olmayan ancak başlangıçta gösterilmemesi gereken bileşenler de vardır. İlk paketin boyutunu daha da azaltmak için uygulamanın bazı bölümleri dinamik olarak yeniden yüklenebilir. Genellikle geç yükleme olarak adlandırılan bu yaklaşım, sağlanan kaynak kodunun boyutunun daha da küçültülmesini ve eklentilerin yalnızca kullanıcılar talep ettiğinde yüklenmesini sağlar.
Yavaş yükleme, özellikle yola dayalı yavaş yüklemede, yani uygulama içindeki yollara dayalı bileşenlerin dinamik yüklenmesinde, kullanıcıların kendilerine yeni görünüm sunulmadan önce yükleme işleminin tamamlanmasını beklemesi gerektiği gibi bir dezavantaja sahiptir. Bu noktada varlıkları önceden yükleme olanağı vardır, böylece yolları değiştirdiğinizde tüm varlıklar zaten kullanılabilir durumdadır ve yalnızca işlenmeleri gerekir. Bu iyileştirmeler, SPA’nın kullanıcılara daha hızlı sunulmasına yardımcı olur ve uygulamayı görüntülemek için gereken süreyi önemli ölçüde azaltır.
Sunucu tarafı oluşturma
Ancak bu noktada SPA’larla ilgili başka bir sorun devreye giriyor: uygulama tamamen JavaScript kullanılarak oluşturuldu. Bu, tarayıcının başlangıçta boş bir dosya gösterdiği anlamına gelir. divöğesi, yani boş bir sayfa ve kullanıcılar yalnızca React işini yaptıktan ve tüm uygulama bileşenlerini oluşturup bunları DOM’a bağladıktan sonra uygulamanın bir kısmını görebilir. Bu aşama aynı zamanda büyük iyileştirme potansiyeline sahiptir: boş bir sayfa sunmak ve ardından onu JavaScript kullanarak doldurmak yerine, SPA geliştiricileri web geliştirme tarihinde bir adım geriye gider ve web sunucusunun uygulamanın HTML yapısını hazırlama işini üstlenmesine izin verir ve teslimata hazır. Bu adımın geleneksel şablon motorlarıyla çok az ilgisi vardır.
Buna karşılık, örneğin React, sunucu tarafı HTML yapıları oluşturmak için çeşitli yöntemler içeren bir ReactDOMServer nesnesi sunar. Bunlar daha sonra geleneksel HTML sayfaları gibi kullanıcının tarayıcısına gönderilir. Çerçeve daha sonra oradaki HTML yapısının kontrolünü alır. Bu işleme React’te hidrasyon denir. Yalnızca bu işlem tamamlandığında, kullanıcılar uygulamayla tam olarak etkileşim kurabilir. Sunucu taraflı işleme olarak bilinen bu işlemin avantajı, bilgilerin çok kısa sürede kullanıcılara sunulması ve hidrasyon işleminin nispeten hızlı bir şekilde gerçekleştirilmesidir.
Gelecek, istemcileri ve sunucuları yeniden birbirine yaklaştıracak
Bu nedenle, bir uygulamayı tamamen istemcide uygulama fikrinin ideal olmadığı ortaya çıktı ve bu nedenle React geliştiricileri şu anda istemci ile sunucuyu şimdiye kadar olduğundan daha sıkı bir şekilde birbirine bağlamaya çalışarak çok ilginç bir yaklaşım izliyorlar. şimdiye kadarki durum Sunucu tarafı oluşturma durumudur.
Sonuç, sunucu bileşenleridir. Bunlar, React’in normal bileşenleridir, ancak istemciye gönderilmezler, doğrudan sunucuda yürütülürler. Sunucu kaynaklarına erişebilir ve böylece size veri sağlayabilirsiniz. Ayrıca, istemci tarafında işleme için hangi bileşenlerin oluşturulacağını da belirleyebilirler. Sunucu bileşenleri ile geliştiriciler, sunucu tarafında bir uygulamanın yapısının çok daha derinlerine inebilir, böylece istemciye yalnızca gerekli yapılar gönderilir. Ek olarak, uygulama teslimini daha da hızlandırmak için burada sunucu tarafı önbelleğe alma mekanizmaları kullanılabilir.
Bu özellik henüz çok erken bir aşamada, ancak bu ve benzeri özellikler, ön yüz geliştiricileri için yolculuğun nereye varabileceğini gösteriyor.
()
Haberin Sonu