FRONTEND KAPSAM

Frontend Ürün ve Kütüphane Evreninden Haberler — 1 (Bootstrap, CloudFront Functions)

Onur Dayıbaşı
Frontend Development With JS
3 min readMay 11, 2021

--

Bootstrap

Bootstrap 5.0 çıktı. Mark Otto, Jacob Thornton Bootstrap ilk versiyonunu 2011'de açık kaynaklı CSS Framework olarak çıkarılmıştı. Daha sonra “Twitter Blueprint” tasarım aracı olarak da anılmaya başladı. Bootstrap geliştirilmeye ve yeni özellikler eklenerek günümüze kadar gelmeyi başardı. 5.0 içerisinde

  • Bootstrap ne kadar CSS ağırlıklı bir kütüphane olsada bir takım kullanıcı etkileşimi ve bunları gerçekleştirebilmek için jQuery kütüphanesi kullanıyordu. Bu bağımlılık tam olarak kendisini kurtararak saf JavaScript bu fonksiyonları sağlamış. Bu jQuery açısından kötü haber, çünkü giderek JavaScript daha tutarlı, standart ve özelliğe sahip oldukça jQuery ihtiyacı projelerden kalkacaktır. (Not: JavaScript gelişimi konusunda JavaScript Tarihçesi yazımı ve bu yazı serisini okuyabilirsiniz)
  • Bootstrap standartları kullanmada zorluk çıkaran IE11 desteğini kaldırdı. Bu sayede Sass ve CSS yapıları ile JS ihtiyacı olmadan birçok bileşeni daha modern yaklaşımlar ile geliştirme imkanı sunacaktır.
  • Bootstrap Utility API sunarak geliştiricilerin daha dinamik olarak Styling yapılarını oluşturmalarını hedefliyor. Bu yaklaşımla Tailwind CSS kendisini yaklaştırmaya çalışıyor.

CloudFront Functions

Serverless dünyasında Lambda AWS Servisleri arasında bir bağlayıcı görev görerek Event-Driven tetiklenme sayesinde birçok uygulama geliştirmesinde kullanılan ve geliştirme paradigma mızı Function As A Service seviyesine taşıyan bir yapıya dönüştürdü. Bu sürede asıl gelişim Wordpress, Ghost vb.. Web uygulamalarının SSG, SSR (Server Side Generation ve Server Side Rendering) dediğiniz Web uygulamasının build zamanında oluşturulması ve hosting daha ucuz ve hızlı erişimi olan Edge Location yapılması ile Netlify, Vercel vb. tarafından kullanılmaya başlandı. Bunun ile birlikte tabi bazı edge-computing ihtiyaçları oldu.

Not: Serverless konusu ile ilgili daha detaylı bilgi için aşağıdaki yazıları okuyabilirsiniz.

Bu konuda Edge Lokasyonlarda gecikmeyi(latency) azaltmak için App servis verdiği noktalarda CloudFront(CDN) çalışabilen Lambda@Edge teknolojisini çıkarmıştı.

Tabi bu aşamada CloudFlare Worker dan bahsetmek lazım. CloudFlare CDN üzerinde çok hızlı çalışabilen herhangi bir Region sınırlandırması getirmeden fonksiyonlarınızı çalıştırabileceğiniz bir yapı geliştirdi.

https://workers.cloudflare.com/

ve sloganlarıda yukarıdaki koddan görebileceğiniz gibi Region düşünmeden Worker oluştur ve bu Worker dünyanın herhangi bir noktasında düşünmeden çalıştırılmasını sağlıyor.

“Cloudflare Workers has changed the way we build our apps. We don’t have to think about regions, we just deploy code and it runs seamlessly around the world.”

AWS CloudFront Function ise çok hızlı ve kısa çalışabilecek spesifik işleminizi gerçekleştirmek için AWS Edge Location çalıştırabileceğiniz Lambda@Edge farklı olarak çok hafif (lightweight) bir fonksiyon türü çıkarmış durumda. Bu hafif olmasının getirdiği limitler bulunuyor;

  • Sadece JavaScript ile geliştirme yapabiliyorsunuz.
  • Fonksiyonunuz işlemini tamamlaması için maksimum 1 milisaniye süreniz ve 2MB Belleğiniz var.
  • Network, Dosya Sistemi, Request Body erişimleriniz yok.
https://aws.amazon.com/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/?ck_subscriber_id=571816821

Peki bu kadar sınırlandırılmış olarak hazırlanmış bu fonksiyonları nerede kullanmak avantajlı. Bu fonksiyonları Web Request(İsteklerini) karşılamada hafif , hızlı ve çokça ölçeklenebilecek yapıda geliştirilmiştir.

  • Cache-key manipulations and normalization: Cache-key anahtarı (tekil belirteç) HTTP Request attribute değerleri kullanılarak oluşturulur. Bazı durumlardan aynı uygulamaya hem Desktop, hem Mobil, hem TV vb bağlantı yapıldığında hepsini senkron tutabilmek için bir Cache Normalization yapmak gerekir. Bu aşamada kullanılabilir.
  • URL rewrites and redirects: Gelen istekteki bir takım özelliklere göre farklı URL yönlendirme Örneğin kimlik doğrulaması olmamış bir kullanıcıyı sınırlandırılmış bir sayfaya veya kullanıcı gruplarını A/B testing için farklı URL yönlendirme işlemini gerçekleştirir.
  • HTTP header manipulation: HTTP Header görüntüleyebilir, buradaki bilgiler üzerinde ekleme, güncelleme ve silme işlemleri gerçekleştirebilirsiniz.
  • Access authorization: Yetki ve erişim kontrollerini CDN üzerinde gerçekleştirebilir HMAC tokens veya JSON web tokens (JWT), CloudFront üzerinde üretebilir, doğrulayabilir , buna göre işlemleri sürdürebilirsiniz.

Okumaya Devam Et 😃

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

--

--