Kraken Guideline

Herkese selam! Bu yazımda, “Proje geliştirirken nelere dikkat ediyoruz?” konu başlığını birkaç maddeye ayırarak bahsedeceğim. Bu konuyu seri haline getirmek istiyorum. Serinin ilk yazısında kullandığımız lint kuralları ve dikkat ettiklerimiz konu başlığına değineceğim.

Kod yazarken nelere dikkat ediyoruz?

Bildiğiniz üzere biz mobil ekip olarak, projelerimizde Flutter kullanıyoruz. Bu yüzden bu seride anlatılan kod kuralları Flutter/Dart ile ilgili olacaktır.

• Kullanılmayan import satırlarını dosyalardan kaldırıyoruz.

Kullanılmayan import satırlarını kaldırmamızın başlıca sebeplerinden birisi temiz kod yani clean code prensiplerine uymaya çalışıyoruz. Diğer bir sebep olarak, her ne kadar derleme sırasında “tree-shaking” ile kaldırılacak olsa da, derleme süresini arttırması olası.

• Print fonksiyonu kullanmıyoruz.

Print fonksiyonu yerine, Team Kraken olarak geliştirdiğimiz “Logger” sınıfımızda bulunan fonksiyonları kullanıyoruz. Debug mod ve production mod için farklı sınıflarımız bulunmaktadır. Log için easy_logger paketini kullanıyoruz.

easy_logger | Flutter Package

Ek olarak, avoid_print lint kuralını kullanıyoruz.

Log sistemimiz ile ilgili detaylı bilgi almak isterseniz, takım arkadaşım Buğra Göksu’nun yazdığı “Flutter’da FirebaseCrashlytics ve EasyLogger ile Gelişmiş Log Sistemi” makalesini okuyabilirsiniz.

Flutter’da FirebaseCrashlytics ve EasyLogger ile Gelişmiş Log Sistemi

• Kod içerisinde TODO kullanmıyoruz.

TODO yorum satırları yerine proje yönetiminde kullandığımız araç üzerinde, yapacağımız işlemi detaylı ve gerekirse görsel ile anlatım şeklinde issue oluşturuyoruz. Böylece yapacağımız task, planlanarak sprint içerisine ekleniyor.

• Parametresiz Container widget ile sarmaktan kaçınıyoruz.

Bir widget’ı başka parametresi olmadan Container ile sarmanın hiçbir etkisi yoktur ve kodu gereksiz yere daha karmaşık hale getirir. Bu durumu gözden kaçırmamak için linter paketimize avoid_unnecessary_containers kuralını ekledik.

avoid_unnecessary_containers

• Boşluk eklerken SizedBox kullanıyoruz.

Layout içerisinde boşluk eklemek için Container ve Padding yerine SizedBox kullanıyoruz. Container, SizedBox’a nazaran maliyetli bir widget’tır ve bonus olarak, SizedBox’ın bir const kurucusu vardır.

Daha detaylı olarak Container ve SizedBox arasındaki farkı incelemek isterseniz aşağıdaki linke tıklayarak ulaşabilirsiniz 🙏

Flutter: SizedBox Vs Container, why use one instead of the other?

Bu durum için linter paketimizde ekli olan sized_box_for_whitespace kuralından faydalanıyoruz.

sized_box_for_whitespace

• Yalnızca BoxDecoration eklerken Container yerine DecoratedBox tercih ediyoruz.

Container, DecoratedBox’tan daha maliyetli bir widget’tır ve bonus olarak, DecoratedBox’ın bir const kurucusu vardır.

Linter paketimizde bu durum içinde bir kural mevcut : use_decorated_box

use_decorated_box

• Yalnızca Color eklerken Container yerine ColoredBox tercih ediyoruz.

Daha önce de belirttiğim gibi Container maliyetli bir widget. Yalnızca renk parametresi olan color tanımlarken Container yerine ColoredBox kullanıyoruz. Ek olarak ColoredBox ’ın bir const kurucusu var.

Tabii ki bunun içinde bir lint kuralımız mevcut. use_colored_box kuralını kullanıyoruz 🎉

use_colored_box

• Birden fazla parametre olduğunda sona virgül ekliyoruz.

Fonksiyon isminin başlangıcından kapanış parantezine kadar olan fonksiyon çağrısı veya tanımı tek bir satıra sığmıyorsa ve okunurluğu azaltıyorsa, tüm bunlar için sona virgül ekliyoruz.

Sonunda virgül bulunan kodun, okunurluğu nasıl değiştirdiğini Flutter sitesindeki Code formatting sayfasında bulunan aşağıdaki örnekte inceleyelim:

Virgül eklenmemiş kod örneği

Virgül eklenmiş kod örneği

Bu durum için virgül lint kuralı olan require_trailing_commas kuralını, linter paketimizde kullanıyoruz.

require_trailing_commas

• Widget içerisinde fonksiyonların sıralanması

Uygulama geliştirirken dikkat ettiğimiz diğer hususlardan biri de fonksiyonların sıralamalarıdır. Aşağıdaki örnek görselde sıralamayı ekledim. Sıralamayı aşağıdaki kurallara göre dikkat ediyoruz:

• Olmazsa olmaz olan fonksiyonlar olan initState(), didChangeDependencies() ve dispose() gibi override olan methodları en üst kısımda alfabetik olarak sıralıyoruz.
• Hemen ardından diğer olmazsa olmaz fonksiyon olan build() ekliyoruz.
• Yukarıdaki fonksiyonlardan sonra sınıf içerisinde kullandığımız diğer fonksiyonları alfabetik olarak örnekteki gibi sıralıyoruz.

• Kod satır uzunluğu değeri 120 olarak kullanıyoruz.

Yazdığımız kodları formatlarken satır uzunluğu yani Dart: Line Length değerini 120 olarak düzenledik. Aşağıda formatlanmamış uzun satırlı bir kod görmekteyiz.

Yukarıdaki kodun aynısını formatlanmış bir şekilde aşağıda görebiliriz.

Eğer VS Code kullanıyorsanız bu şekilde düzenleyebilirsiniz:

• VS Code uygulamasında ayarlar butonuna ardından Settings seçeneğine tıklıyoruz.

• Ardından açılan sekmede arama alanına Dart line length yazarak filtreliyoruz ve çıkan sonuçlarda bulunan değeri değiştiriyoruz. (Default olarak değer 80'dir).

Şimdilik anlatacaklarım bu kadar fakat yazının başında da belirttiğim gibi bu başlığı bir seri haline getirmek istiyoruz. En kısa zamanda yeni yazı çalışmalarına başlayacağız 🎉

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım