Artistanbul’un Kullandığı Frontend Teknolojileri

Bu yazımızda TypeScript, Tailwind CSS ve React-Query gibi havalı teknolojilerden ve onları Artistanbul’da nasıl kullandığımızdan bahsedeceğim sizlere.

Artistanbul’da geliştirdiğimiz farklı farklı projeler için üzerinde çalışan geliştiricilere göre farklı bağımlılıklar kullanıyor, bambaşka çalışma ortamları yaratıyoruz. Bu durum zaman zaman karmaşa yaratabiliyor. Özellikle projeye yeni bir geliştirici dahil olduysa ve kullandığımız bağımlılıklarla ilgili bir tecrübesi yoksa. Bu karmaşanın önüne geçip bütünlüklü ve daha kararlı bir geliştirici deneyimi sunmak için gelecekte dönüp bakacağımız bir rehber oluşturmanın iyi bir fikir olduğunu düşündük. Bu yazıda kullandığımız bağımlılıklardan ve neden bu bağımlılıkları ortamlarımıza dahil etmeyi uygun gördüğümüzden bahsedeceğim.

 

TypeScript ve Tailwind CSS

Kullanmakta karar kıldığımız ilk iki araç, TypeScript ve Tailwind CSS oldu. Bu araçların ortak noktası tutarlı şekilde kod yazmama yardım ediyor olmaları. TypeScript, normalde kullandığımız JavaScript’in bir superset’i olarak dile typed değişkenler başta olmak üzere birçok yenilik sağlıyor. Runtime’da alacağımız birçok hatayı compile time’da yakalamamızı sağlaması da bir diğer özelliği. 

Tailwind CSS’in görevi ise düzenli bir tasarım sistemi oluşturmamıza yardımcı olması. Özellikle hızlı çıkması gereken bir proje üzerinde çalışılırken yazılan stillerin birbirine karışmaması olanak hale gelebiliyor. Bunun önüne Tailwind CSS’in sağladığı tasarım sistemini extend edip kendi kullanmak istediğimiz değişkenleri de ekleyerek geçebiliyoruz. Günün sonunda CSS değişkenleri veya renk kodları ile uğraşmak yerine daha düzenli ve (Tailwind CSS’in üçüncü sürümü ile) sadece kullandığımız stilleri tuttuğumuz, utility first bir framework elimizde oluyor.

 

React-Query ve Zustand

React-Query ve Zustand, uygulama içerisindeki veri akışını kontrol etmemize yardımcı olan iki bağımlılık. React-Query sunucudan aldığımız verinin cache’lenmesini sağlarken, Zustand epey basit bir API ile veri depolayabileceğimiz depolar oluşturmamıza olanak tanıyor.

 

Diğerleri

Yukarıda bahsettiğim daha büyük topların dışında bahsedeceğim üç adet daha bağımlılığımız var:

• Axios, özellikle query parametreleri için parser’ı, interceptor’ları ve daha nice özellikleriyle hayatımızı kolaylaştıran bir HTTP istemcisi.
• React-Hook-Form, form validasyonunu kolaylaştıran ve özellikle birden fazla sayfaya sahip formları implemente etmeyi kolaylaştıran biricik paket.
• React-Router-DOM, routing işlemlerini dünden bugüne kolaylaştıran projelerin olmazsa olmazı.

 

Sonuç

Her yiğidin yoğurt yiyişi farklıdır ve her ekip farklı bir alet edevat kutusu ile çalışır. Bugün Artistanbul Frontend ekibinin yazılım geliştirirken kullandığı aletleri gördük. Kullandığımız stack hakkında herhangi bir sorunuz olursa, bana şirket e-posta adresimden ulaşabilirsiniz. Başka bir yazıda görüşmek üzere.