Merhaba,
Yaklaşık 2 yıldır JavaScript'le haşır neşirim ve bu süreçte gerek isteyerek gerek istemsizce bir sürü JavaScript kütüphanesi/framework'ü keşfettim. "Acaba yeterince fazla keşfettim mi?" diye sorguladım bir, sonra "Evet, bence Techolay'da da bunları tanıtmanın sırası geldi." dedim. Umarım sizin de işinize yarayacaklar çıkar içlerinden.
İyi okumalar.
Okuduğunuz için teşekkürler.
Yaklaşık 2 yıldır JavaScript'le haşır neşirim ve bu süreçte gerek isteyerek gerek istemsizce bir sürü JavaScript kütüphanesi/framework'ü keşfettim. "Acaba yeterince fazla keşfettim mi?" diye sorguladım bir, sonra "Evet, bence Techolay'da da bunları tanıtmanın sırası geldi." dedim. Umarım sizin de işinize yarayacaklar çıkar içlerinden.
İyi okumalar.
- TypeScript — Evet, tahtın sahibi TypeScript. Kendisi istisnai olarak JavaScript'in üzerine kurulmuş bir dil, yani kütüphane falan değil. Yaklaşık 1 yıl boyunca düz JavaScript kullandıktan sonra TypeScript'e geçtim, bir daha da JavaScript'e dönüp bakmadım (tamam, sadece birkaç kere...). TypeScript'i keşfedişim sanırım VS Code'da JavaScript kodlarken editörün hiç hata göstermemesi üzerine biraz araştırmayla gerçekleşti. Gıcık oluyordum, atıyorum bir nesnenin aslında var olmayan özelliğini yazınca editör "Sıkıntı yok, kodlamaya devam et sen." edasıyla sanki her şey düzgünmüş gibi devam etmeme izin veriyordu. Burada VS Code'un editörünü fazla gömmüş olabilirim belki ama benim deneyimlerim bu şekildeydi.
TypeScript'in sağladığı şey (yani JavaScript'in üzerine koyduğu) tip (type) sistemi, sizi tip kullanımına zorlaması. Böylelikle örneğin tanımladığınız fonksiyonların parametrelerine tip atamak zorundasınız. Mesela bir parametre string veya sayı olabiliyorsastring | numbertipini atamalısınız. Bu, sizin kendi hatalarınızdan kaçınmanızı sağlıyor. Sizi kendinizden koruyor yani TypeScript. Bir güzelliği daha var, o da tip çıkarımı. Kısaca şöyle diyebilirim: Tanımladığınız bir objenin tipini eğer siz elle yazmazsanız TypeScript sizin için tipi belirliyor, daha doğrusu biliyor.
TypeScript'in neden JavaScript'ten katbekat daha iyi bir tercih olduğunu, dili kullanmaya başlayınca anlıyorsunuz. JavaScript'e göre tip kullanımı dolayısıyla geliştirme süreci başlarda daha yavaş olmasına rağmen uzun vadede hayat kurtarıyor TypeScript.
Harikasın TypeScript, favorilerimdensin, bayılıyorum sana. - React — "İlk göz ağrım." React sayesinde frontend geliştirmeye bayılıyorum. Bir web sayfasında gördüğünüz her "dikdörtgeni/bloku" (elementi) fonksiyonel ve kendi state'lerine (durum; örneğin bir butonun "açık/kapalı" durumu) sahip birer component (bileşen) olarak tasarlamanızı teşvik eden, bunun için tasarlanmış bir frontend kütüphanesi kendisi. Kütüphane mi framework mü ("kendi kendine yeten" bir sistem) olduğu çokça tartışılıyor. Başka bir deyişle bir web sitesini/uygulamayı parçalara ayırıp parçaları tek tek geliştirmenize olanak tanıyor. Ayrıca isminden de anlaşılabileceği üzere "reaktivite" yönetimini oldukça kolaylaştırıyor (kullanıcı bir butona tıkladığında ne olacağı vb.). React'in bir üst seviyesi de kendisinin üzerine inşa edilen NextJS framework'ü. Çok detayına girmek istemiyorum ama React'in yetersiz kaldığı durumlarda imdadınıza yetişen framework'lerden biri.
React ekosistemi fazlasıyla geniş. Farklı amaçlara yönelik çok sayıda araç mevcut. Mesela tek framework NextJS değil, statik web siteleri için başka alternatifler de mevcut ama ben kullanmadığım için yazmadım. React'le aynı amaca hizmet eden ama problemlere farklı çözümler sunan Vue, Angular, Svelte vb. kütüphanelere de göz atabilirsiniz. - Tailwind CSS — Gelelim CSS'i sevdiren kütüphaneye. Sunduğu çeşit çeşit hazır class'larla (sınıf) CSS bilginiz yeterli seviyedeyse uygulamanızı Tailwind'le stillendirme oldukça eğlenceli ve kolay hale geliyor. Tüm stil sistemi class'lara bağlı olduğu için class uzunlukları rahatsız edici seviyelere gelebiliyor ancak bunu aşmak için çeşitli yöntemler de mevcut. Örneğin React ile genel stillere sahip component'lar yaratıp uygulamanızın birçok yerinde tekrar tekrar kullanabilirsiniz.
- tRPC — API geliştirmeyi başka bir seviyeye çıkarıyor. Şuna bakıp etkilenmediğinizi söyleyin. Çok zor, değil mi?
Harika bi' şey ya. Hem frontend hem de backend'in TypeScript'le geliştirilip "aynı yerde" olmasını gerektiriyor (monorepo). Karşılığında sunduğu şey de backend'de yazdığınız fonksiyon biçimindeki API endpoint'lerini TypeScript destekli şekilde frontend tarafından çağırabilmeniz. Bakın, istek yolluyorsunuz demedim, direkt fonksiyon olarak çağırıyorsunuz ve böylelikle TypeScript desteği had safhada oluyor. Tabii kütüphane aslında arkada sizin için HTTP isteği yolluyor, yani dolaylı yoldan istek yolluyorsunuz aslında. Kütüphane, URL'leri kendisi otomatik oluşturuyor. Sizin hiç ilgilenmenize gerek kalmıyor.
Bir kere tRPC kullandım, bir daha geleneksel REST yapısına geri dönesim gelmedi. Harika bir deneyim tRPC.
Şuradaki tanıtım amaçlı videoları izleyip tRPC hakkında detaylı bilgi edinebilirsiniz: Getting Started | tRPC - Prisma — Veri tabanıyla backend arasındaki bağlantıyı soyutlayan, TypeScript'i iyi derecede destekleyen güzel bir ORM kütüphanesi. Örneğin; ham SQL sorguları yerine zincir fonksiyon çağrıları yolluyorsunuz, TypeScript'teki
interface'ler veri tabanındaki tabloları temsil ediyor vs. Ha, bu arada sizin için söz konusuinterface'leri Prisma kendisi üretiyor. Kodu sizin yerinize "yazıyor" yani ("codegen" deniyor sanırım).
Kullanışlı bir kütüphane, severim. Aynı amaca hizmet eden başka birçok kütüphane var ama Prisma yeterli bir tercih oldu şimdiye kadar. - React Router — React'in hazır olarak desteklemediği routing hizmetini sunuyor bu kütüphane. Basit tanımıyla, farklı sayfalara farklı bağlantılar atayabiliyorsunuz. NextJS gibi framework'ler bu hizmeti kendileri sunuyor. Framework kullanmazsanız React Router güzel bir tercih.
- React Query (TanStack Query) — tRPC kullanmıyor musunuz veya harici bir API'a mı istek yollayacaksınız? Buyurun. Ha, tRPC de arka planda bu kütüphaneyi kullanıyor bu arada. Dokümantasyonu harika olan bu kütüphane için ben fazla bi' şey söylemeyeyim. Önermemem için bir sebep yok.
- clsx — Kendisi küçücük, işlevi büyük bir kütüphane. Tek yaptığı şey, React'te
classNameyazımını sistematikleştirme. Tavsiye ederim. - Framer Motion — Hoş bir animasyon kütüphanesi. Ben görece basit işlevler için kullandım şimdiye kadar ama istense ortaya çok iyi işler çıkabilir.
- Zod — Bir validation kütüphanesi. En yaygın kullanım alanlarından biri form girdilerini kontrol etme (yeni hesap açma, hesaba giriş vb.). API'lardan gelen cevapları da kontrolden geçirebiliyorsunuz. Tekniken uygulamadaki tüm objeleri kontrolden geçirebiliyorsunuz aslında. Bu kütüphane, TypeScript'in uygulama çalışırken de çalışan versiyonu gibi. TypeScript'in kaslısı. Severim.
- Zustand — React için state yönetim kütüphanelerinden biri. En popülerlerden biri olan Redux'a göre çok daha hafif ve yormamasıyla övülüyor. Ayrıca component'lardan bağımsız çalışıyor, yani mesela React'in Context'i gibi state değişikliğinde ContextProvider'ın altındaki tüm component'lar güncellenmiyor.
Benim oldukça sevdiğim bir kütüphane. Öğrenim eğrisi yok gibi bir şey, kullanımı kolay.- Şunu da öneresim geldi, Immer: Zustand Documentation
- Lodash — Çok fazla işe yarar metot sunan, JavaScript'i sizin için kolay hale getiren bir kütüphane. Bu yönüyle jQuery'ye benzetiyorum biraz. Oldukça hoşlanırım bu kütüphaneyi kullanmaktan.
- React Icons — Konu ikonlar olunca hep bu kütüphaneyi tercih ederim. Birçok farklı ikon sağlayıcısını tek çatı altında topluyor.
- React Hook Form — Bunu da önereyim bari.
Form state'ini bir hook olarak sunan bir kütüphane.
Okuduğunuz için teşekkürler.