FRONTEND KAPSAM
Frontend Ürün ve Kütüphane Evreninden Haberler — 4(Blitz.JS ve Next.JS)
Kayıtlı olduğum bazı sitelerden haftalık, aylık Haber Bülteni olarak bir çok mail atılıyor. Bu yazıda bu bültenlerden önemli gördüğüm ürün haberlerini paylaşıyor olacağım. Her yazıda 2 ürünü inceliyor olacağım.
Blitz JS
Blitz.JS Fullstack React Framework’udur. Next.JS üzerine inşaa edilmiş Ruby on Rails’den esinlenerek geliştirilmiş Web uygulaması oluştururken backend konularında REST ve GraphQL konularını hakim değil iseniz, blitz.js bu aşamada Zero-API data katmanı bu kısmı geliştiricilerden soyutlayarak UI bileşenlerinin veriyi bir API endpoint üzerinden çekme ve client-side cache (Redux vb..) olaylarından kurtarıyor.
Not: Rest ve GraphQL yapılarına hakim değilseniz daha önceden yazmış olduğum aşağıda ki yazıları okuyabilirsiniz.
Gördüğüm en önemli özelliği Ruby On Rails basit ve hızlı WebApp geliştirme özelliğini React syntax yapısına taşıması, bunu yaparken Next.JS üzerine inşaa etmesi. Bu sayede FullStack React App Geliştirme ortamını hızlı bir şekilde oluşturarak ürün özellikle özelliklerine odaklı kalmayı hedefliyor. Bunun için ürünün 2 özelliği olması gerektiğini savunuyor.
- Monolithic
- No API
Bunu sağlamanın yöntemide Server-Side Rendering tekniklerini kullanmak, yani ürünün sayfa ve bileşen içeriklerini backend kısmında veri ile oluşturmak ve Server-Side render etmek.
Not: SSR(Server-Side Rendering) ve CSR(Client-Side Rendering) konularında bilginiz yoksa, konuyu daha detaylı öğrenmek için önceden yazmış olduğum aşağıdaki yazıları okuyabilirsiniz;
Blitz Zero-API ve hazır bir fullstack yapısı sağlamak için kendisini bazı kütüphaneler üzerine inşaa etmiş durumda. Bunlardan bir tanesi aşağıda bahsettiğim Next.JS
bir diğeride, Prisma.io bu kütüphanede kısaca (Next-generation Node.js and TypeScript ORM) Java’da Backend veritabanı programlama ile uğraşanlar Hibernate hatırlar, Java Pojo nesnelerini SQL syntax kullanmadan objeler üzerinden veritabanına yazan ve sorgulayan data katmanı. Prisma.io bu yeteneği NodeJS ve TypeScript üzerinde kullanmanızı sağlıyor
Peki Blitz.JS bu kütüphanelerin üzerine hangi altyapıları hazır olarak sunuyor;
- Folder Structure (Klasör Yapısı)
- ESLint
- Prettier
- Husky
- Jest
- Database
- Forms
- Signup, Login, Logout, Reset Password Flow
Next JS
Next.JS production(canlı) web uygulaması oluştururken, React kütüphanesinin tek başına yeterli olmadığı, yanında bir çok konuya hakim olmanız gerekiyor .
- State Management, (Durum Yönetimi yapısının kurulumu)
- Routing, (Sayfalar arası Geçiş)
- Folder Structure, (Nasıl Bir Proje Yapısı Kurmalı)
- Rendering Technique (Server Side & Static, Client Side, Hybrid)
- No Config (Konfigürasyon kısımları ile uğraşmama)
Yukarıda ki işlemleri kendiniz yapmak istiyorsanız aşağıdaki yazıları ve örnekleri incelemenizi öneririm. (Yazılara Link)
İşte Next.JS bu aşamada geliştiricilere aşağıdaki resimdeki başlıklarda alt yapınının hazır olarak gelmesini sağlıyor. Bir güzel özelliğide Netlify, Vercel vb.. hosting ortamlarının bu Next.JS hemen deploy edebilecek hızlı CI/CD altyapılarının otamatik olarak oluşturması.
En son Next.JS v10.2 versiyonu yayınlandı. Bu Release’de.
- Build sürelerinde cache kullanımı ile ~60% yakın hızlandırma
- Hızlı Refresh (by 100ms-200ms) & Hızlı Başlatma(by up to 24%)
- Redirects ve rewrites → header, cookie, or query string üzerinde daha esnek kontrol
- Route Changes ekran okuyucuları analizleri tarafından daha anlaşılabilir olması için anons mekanizması
- Otomatik Web Font Optimizasyonu
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
