Frontend Kapsam

2021'de Anlamakta Zorlandığım Kavramlar.

Onur Dayıbaşı
Frontend Development With JS
2 min readNov 14, 2021

--

Daha önceden yazmış olduğum Teknolojinin Geliştiriciler Üzerindeki Baskısı olduğu gibi her geçen gün yeni teknolojiler ve kavramlar hayatımıza giriyor. Siz mevcut geliştirmelerinizi yaparken bir bakmışsınız konseptler değişmiş ve yeni yeni kavramlar hayatımıza girmeye başlamış.

dApps: Merkezi olmayan bir uygulama (dapp), bir akıllı sözleşmeyi ve bir ön uç kullanıcı arayüzünü birleştiren merkezi olmayan bir ağ üzerine kurulmuş bir uygulamadır. Tabi bu yaklaşımla birlikte Smart Contract ve Web3 gibi kavramlar da günlük yaşamda sıkça bahsedilen konular arasında.

React Server Components : Rendering React özelinde tutarsak. 2 tip Rendering söz konusudur. Birisi Client Side yani tarayıcı üzerinde geliştirdiğimiz, bir diğeri de Server Side yani sunucu üzerinde, React 15 ve 16 sonrasında gelen renderToString ve hydrate metodları ile HTML sunucu tarafında oluşturulur.

import { renderToString } from "react-dom/server" //React 15
import { hydrate } from "react-dom" //React 16

React Server Components ise bu işlemin bir kısmını sunucu tarafında oluşturduğumuzu düşünün. React bildiğiniz gibi istemci kısmında sonucu HTML render etmeden önce Virtual DOM üzerinde kendi düğüm yapısı üzerinde çalışıyor. İşte Virtual DOM bazı düğümlerinin sunucu tarafında hazır olarak oluşturulup, JSON olarak istemciye aktarılması böylece düğümlerin Rendering işlemi HTML oluşturma her ne kadar Client Side olsa bile düğüm oluşturma zamanın ServerSide yıkılması sağlanır. Bu yöntem bize ClientSide rendering performans problemlerinden kurtulmamızı sağlarken, ServerSide rendering gelen statik HTML kurtulmamızı sağlan ara bir çözüm oluşturur.

Hotwire: Ruby on Rails ekosisteminde, Basecamp ve HEY ekibi Hey mail altyapısında geliştirdikleri JavaScript yazmadan HTML chunklarını (ufak parçalarını) istemci tarafına parça parça aktararak rendering yapma altyapısını yani HTML over the wire ile uygulama geliştirme gerçekleştiriyorlar. Bu yapıda geliştirme yapmak için Turbo, Stimulus, Strada biliyor olmanız gerekiyor.

Edge Computing: Son dönemde JamStack teknolojilerinin ihtiyaçları ile birlikte iyice CDN üzerinde Serverless Function çalıştırma veya belli işlemler gerçekleştirme çok önem kazanmış durumda. Cloudflare Workers, Netlify Edge Handlers, Vercel Edge Functions, Deno Deploy, AWS Cloudfront Functions, Kullanıcıya daha yakın, daha ucuza fonksiyonlar çalıştırarak uygulamaların hem daha hızlı , hem daha ucuz olmasına imkan sağlayacak.

Vite: Next Generation Frontend Tooling olarak kendisini konumlandırıyor. Aslında Webpack, Rollup, Parcel gibi bundler ve tooling araçları popüler iken zaman içerisinde ESBuild çıkması ve build işlemini hızlandırması yeni Module Loading yapısı, sonrasında ilerleyen süreçte SnowpackVite olarak yeni teknolojiye göre konumlandırılması gerçekleştirilmiştir. Yani tüm package dependency göre bundling baştan yapmak yerine ES Modules yeri geldiğinde tarayıcı tarafında ilgili değişen module load etmesi üzerine yapı biraz tarayıcı üzerine kaymış buda Webpack gibi baştan tüm sistemi bundle etme süresini oldukça azaltmaktadır.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--