Komponent Tabanlı Yazılım Mühendisliğine Frontend Yaklaşımı: Komponent geliştirirken sık yapılan hatalar

Projedeki yapıları küçük parçalara bölmek ve bu parçaları tekrar tekrar kullanarak büyük ve entegre parçalar oluşturmak sadece yazılım sektöründe değil, hemen her mühendislik ve mimarlık alanında tercih edilen popüler bir ekol. Frontend Developer’lar için çok önemli bir yere sahip olan bu ekolü gelin birlikte inceleyelim.

Görsel kaynak: freepik.com

Komponent Tabanlı Yazılım Mühendisliği (CBSE) hakkında, Wikipedia’da yer alan şu ifade çok hoşuma gitti. “CBSE, Yazılım sisteminin farklı bölümleri arasındaki endişelerinin ayrılmasını vurgular” Evet komponent tabanlı yazılım yaparken en çok dikkat etmemiz gereken şey budur.

Yazılım geliştirmenin gün geçtikçe karmaşıklaştığı bir çağda, geliştiricilerin daha modüler ve sürdürülebilir kod yazmaları giderek önem kazandı. Komponent tabanlı yazılım mühendisliği, bu ihtiyaca cevap veren bir yaklaşımdır. Özellikle frontend alanında, kullanıcı arayüzünün bileşenlere ayrılması ve yönetilmesi, kodun daha okunabilir, yönetilebilir ve genişletilebilir olmasını sağlar.

Komponent nedir?

Bir komponent, bağımsız çalışabilen ve yeniden kullanılabilen birimlerden oluşan bir yapıdır. Bu yapı, genellikle bir kullanıcı arayüzü öğesini temsil eder. Örneğin, bir buton, bir form, bir menü veya bir kart birer komponent olabilir. Bu komponentler, bağımsız bir şekilde tasarlanabilir, geliştirilebilir ve test edilebilir olmalıdır.

Neden komponent tabanlı yaklaşım?

1. Modülerlik ve yeniden kullanılabilirlik: Her komponent, kendi içinde bağımsız çalışabildiği için, bu komponentleri başka projelerde veya sayfalarda tekrar kullanmak oldukça kolaydır.
2. Bakım kolaylığı: Kodunuzdaki bir hata genellikle belirli bir komponentle sınırlıdır. Bu nedenle, bir hata bulunduğunda sadece ilgili komponenti düzeltmek, genel bakım sürecini hızlandırır.
3. Ekip çalışması: Farklı geliştiriciler, farklı komponentleri aynı anda geliştirebilirler. Bu, ekip içinde paralel geliştirme yapılmasını kolaylaştırır.

JavaScript ile Komponent Tabanlı Geliştirme

JavaScript, bu yaklaşımı destekleyen bir dildir. Modern JavaScript library ve framework’leri, komponent tabanlı geliştirmeyi kolaylaştırmak için tasarlanmıştır.

Komponent geliştirirken sık yapılan hatalar

• Sorumlulukları doğru dağıtmamak: Komponent’in ihtiyaç duyduğu state’ler komponent’in içerisinde olmalıdır ve ancak komponent ekrana yüklenirse çalışmaya başlamalıdır. Başka bir katmanda veya seviyedeki state’lerin komponent ile doğrudan ilişkisi olmamalı. Böylece komponent başka bir yerde de kullanılmak istendiğinde sadece oraya import edilip kullanılmaya başlanabilmeli, ekstra bir configurasyon gerektiriyorsa, sorumlulukları doğru dağıtamadığımızı düşünmeliyiz.
• Büyük ve tek parçadan oluşan komponent’ler: Komponent geliştirirken çoğu zaman komponent’in ne kadar büyük bir sorunu çözeceği iyi ön görülmeli ve gerekirse alt komponent’ler de inşa edilmeli. Users.js adında bir komponent oluşturup karmaşık ve uzun satırlar yazmak yerine UserList.js, UserUpdate.js, UserReadOnly.js gibi parçalara bölmek daha makbuldür. Böylece aylar sonra bu satırlara dönüldüğünde sorunların çok hızlı fark edilmesini ve bakımların kolayca uygulanmasını sağlar.
• Eksik hata izleme ve kullanıcıyı bilgilendirme: Komponent geliştirirken, developer’lar; kullanıcı eylemleri sonucu ortaya çıkan hataları parent’a fırlatma eğilimindedirler. Oysa bu error yalnızca bu komponent’le ilişkiliyse bundan parent’ın haberdar olması gerekmez. Kullanıcıyı bilgilendirme işlemi doğrudan komponent’in içinde yapılmalıdır. Toast Message verilecekse bile bu komponent’in içerisinde verilebilmeli.
• Emit ve Prop’ları yeterince açıklamamak: Her developer zaman zaman önceki developer’ın bazı geliştirmeleri nasıl bir motivasyonla yaptığını anlamakta güçlük çeker. Bunun komponent tarafında en çok yaşandığı durum emit ve prop’lardır. Emit ve Prop’larınızın ne tip veriler taşıdığını ve bunun neden gerekli olduğunu yorum satırlarıyla komponent içerisinde açıklamak hayat kurtarıcıdır. Bu yorum satırları aylar sonra size bile yol gösterecekler.
• Parent’ı yönetmek: Komponent içerisinden parent’a mesajlar göndermek ne kadar doğal ise parent’ın doğasına doğrudan etki edecek fonksiyonları (işlevleri) komponent’in içerisinde barındırmak o kadar anormaldir. Bir komponent asla ve asla parent’ın nasıl davranacağına karar veremez. Sadece parent’ı bilgilendirebilir.
• Yalnızca bir yerde kullanılacakmış gibi geliştirmek: Komponentler genellikle birçok kez birçok yerde kullanılmak üzere geliştirilir. Dolayısıyla komponent’ler yalnızca o an üzerinde çalıştığımız sayfanın (page) ihtiyaçlarını karşılamamalı. Daha jenerik, nereye eklense yaşamına devam edecek bir yapıda olmalıdır.
• Karmaşayı parent’a taşımak: Komponent geliştirirken temel motivasyonlardan biri, page’ları açık ve temiz tutmaktır. Böylece komponent’lerin import edildikleri page’lara kıyasla daha karmaşık olmaları beklenen bir durumdur. Komponent’lerinizin biraz karmaşık olmasından kaçınırken parent’ı karmaşık hale getirmeyin. Komponent bazen odadaki kirleri altına süpüreceğiniz bir halıdır :)