Bu karmaşayla başa çıkabilmek için en etkili strateji modüler geliştirme yaklaşımlarıdır. Modüler bir yapı, proje içerisinde tekrar kullanılabilen küçük komponentlerin yönetilmesidir. Genel yaklaşım kodun fiziksel ve semantik olarak olarak ayrıştırılmasıdır.
Modüler bir yapıda geliştirmenin en önemli iki noktası
- Projeye başlamadan önce yeterli planlama yapabilme,
- Kullandığımız araçları ve geliştirme ortamını iyi tanımaktır.
Arayüz geliştirme sürecindeki modüler yaklaşımın temelinde tasarımın küçük komponentlerden oluşturulmasıdır. Bu komponentler her yerde kullanılabilir ve tekrar düzenlenebilir olmalıdır. Komponentlerin bir araya gelmesiyle arayüzdeki farklı bölümleri meydana getirirler. Komponentler tüm arayüzde kullanılabilecek şekilde uyumlu olmalıdır. Buradan da anlaşılabileceği gibi, modüler geliştirme süreci, sadece geliştiricilerin değil tasarımcılarla birlikte dikkate alması gereken bir yaklaşımdır. Ortak olarak çalışılmaları da gerektiren bu geliştirme sürecinde her tarafta kendi işlerinde bu uyumu dikkate alarak çalışmaları gerekecektir. Bu şekilde ortak çalışmalarla ekip içerisinde daha uyumlu ve verimli çalışmanızı da sağlayacaktır.
Araçlarınızı tanıyın
Projenin en başında gereksinim duyacağınız alt yapıyı belirleyin, klasör yapısı, dosyalar, varsa kullanacağınız framework. Bunların tümünü ihtiyacınıza göre tanımlayıp, projeye ekleyin.
Tasarım üzerinden geliştirme sürecinde yapılacak işlerin ve bölümlendirmeleri planlayın. İhtiyacınız olacak ortamı hazırlayın. Kullanılacak eklentilerin belirlenmesi gibi temelde çok fazla bir iş gibi görünmeyen işleri en başta yapmanız, geliştirme süreci içerisinde dikkatinizin dağılmasını yada bunun projenizdeki etkilerini düşünmeye harcayacağınız vakti azaltır.
Adlandırma kurallarınızı belirleyin
Tuhaf ama gerçek: Bir arayüz geliştirme sürecinde en sinir bozucu nokta bir elemente ne isim vereceğinizi düşünmek. Bu hem anlaşılabilir bir kod düzeni oluşturmanın, hem de okunabilirliği arttırmanın en önemli noktası.
Adlandırma kurallarıyla ilgili yaklaşımlardan, BEM, OOCSS, SMACSS gibi yaklaşımlar en çok bilinen ve sık kullanılanları. Bu yaklaşımların birbirinden farklı adlandırma kuralları olsa da temelde hepsinin amacı aynı şeyi sağlamak. Daha kolay yönetilebilen, anlaşılabilen ve yeniden kullanılabilen bir kod yapısı oluşturabilmek.
Semantik yapıyı kullanın
HTML yapısını doğru bir şekilde kullanmak çok önemli. Her şeyi divlerle yönetmek yerine yerine HTML etiketlerini kullanmak hem tarayıcılar için anlamlı bir yapı oluşturmanızı hem de kodun okunabilirliğini arttırır. Tarayıcı uyumluluk problemlerini aşacak önlemleri aldığınızda bunları kullanmanızı engellediğinizde de herhangi bir sorunla karşılaşmazsınız.
Kendi kurallarınız kendiniz oluşturun
Size yol gösterecek yaklaşımlardan ilham almak, kuşkusuz en başta daha hızlı yol almanızı sağlayacaktır. Ancak kuralları daha iyi benimsemek için size veya ekip halinde çalışıyorsanız ekibinizle birlikte alacağınız kararlara bağlı olan kuralların benimsenmesi, her zaman daha kolay olur.
İncelediğiniz bütün yaklaşımların temelinde aslında aynı kurallar vardır.
- Kolay anlaşılabilir bir adlandırma yapısına sahip olmak
- Okunması ve düzenlenmesi ve güncellenmesi kolay yapılar oluşturmak
- Tekrar kullanılabilen yapılarla çalışmak
- Ortak dil
Sizde bu kurallar temelinde, sık kullanılan yaklaşımlardan da ilham alarak kendi iş akışı standartlarınızı oluşturabilirsiniz. Peki iş akışını standartlaştırmak size ne sağlar?
Beynin rutinleşen davranışlara harcadığı efor, ilk defa yapılan davranışlara göre çok daha azdır. Bu ise, çalışırken harcadığınız enerjiyi daha verimli kullanmanızı ve projenin asıl önemli noktalarına daha iyi bir şekilde odaklanmanızı sağlar. Böylelikle en baştaki heyecanınızla kafanızda canlandırdığınız birçok şeyi hayata geçirmenizi ve projeyi daha az stresle teslim etmenizi sağlar.
Hatalarınızı kendiniz görmeye çalışın
Kabul etmek gerekir ki, her başladığımız projede heyecan duyarız. Sonunda nasıl bir şey çıkacağını gözümüzde canlandırır. Neler yapacağımızı kafamızla ilgili kafamızda bazı düşünceler belirleriz. İşte tam bu noktada hemen bunları bir yere yazmaya başlayın. Çünkü planlamanın ilk aşamasını zaten yapıyorsunuz. Yapmanız gereken tek şey bunu bir şekilde düzene oturmak.
Sorunların başladığı yerse, bundan sonra başlıyor. Belli bir düzene göre ilerlemediğimiz için “o an” aklımıza geldiği şekilde yazmaya başlıyoruz. Tabi ki “o anlar” hep değişiyor. Anlar değişince de, yapılar değişiyor ve sorunlar gizlice büyüyor. İşin sonunda geriye dönüp baktığımızda hiçte beklemediğimiz bir noktada olabiliyoruz.
Her seferinde farklı bir projede yer alıyorsanız, hataların hep aynı olamayacağı düşüncesine varabilirsiniz ama aslında hep aynı süreçleri tekrarlıyoruz ve hataların yapıldığı noktalar değişmiyor. Öncelikle sorun yaşadığımız yerleri not ederek işe başlayabiliriz. Daha sonra, bunların sizi neden durdurduğunu ve ne yapsaydınız bu sorunu yaşamayacağınızı kontrol edin ve bir sonraki çalışmanızda bunları test ederek ilerleyin. İlk başlarda bulduğunuz çözümler işe yaramayabilir. Bu durumda başka bir çözüm yolu arayıp, onu test etmeye başlayın ve bu döngüyü tekrarlayarak devam edin. Bir süre sonra, iş akışınızdaki sorunlu noktalara, tek tek çözüm bulduğunuz göreceksiniz.
Rutinlerinizi belirleyip, şablona dönüştürün
Her projede ek bazı yapılara ihtiyacınız olacaktır:
- Formlar için kullanmanız gereken validasyon fonksiyonları
- Sayfa geçişlerindeki animasyonlarda kullanacağınız eklentiler
- Görsellerin, js ve css dosyaların optimize edilmesini sağlayan sistemler
Bunlar için kullanacağınız eklenti ve kodları birer şablon içerisinde toplayın.
Muhtemelen her projede kullanmanız gereken şeyler vardır. Her zaman elinizin altında olması önemli bir avantaj sağlar. Hem de bu araçlarda zamanla uzmanlaşabilir ve oluşabilecek sorunlara daha hızlı çözüm üretebilirsiniz.
Oluşturduğunuz bu şablon içerisine HMTL iskeletini de ekleyebilirsiniz. Kendi kullandığım projelerde sıkça kullandığım yapıları belirledim. Bunların HTML’in semantik etiketlerindeki karşılıklarına bakarak ve bu yapıları HTML standartlarına uygun kullanımlarına göre dizerek bir şablon oluşturdum. Birkaç proje sonrasında ufak tefek değişikliklerle, neredeyse he çalışmamda kullanabileceğim, içerisinde ihtiyacım olan her şeyi barındıran bir şablon elde ettim. Kullandığım JS ve CSS dosyalarını da dahil ederek bunu kendi içerisinde bir başlangıç projesine dönüştürdüm.
Böyle bir şablon kullanmak bir projenin tasarımını incelerken neyi nereye koymam gerektiği, adlandırma kurallarına uygun bir yapı oluşturulması, tekrar kullanılabilir yapıların belirlenebilmesine harcadığım zamanı optimize etmemi sağladı.
Bu düzenlemeleri yaptıktan sonra en önemli noktası denetlemek. Tek başınıza veya takımla çalışırken oluşturduğunuz bu kuralları mutlaka denetleyin. Her ne kadar kuralları siz belirleseniz de, bazen işinize engel olabilecek noktalar karşınıza çıkabilir. Bunlarla ilgili alternatif yöntemleri denemekten çekinmeyin. Sürekli olarak gelişen bir teknolojiyle iş yapıyorken, sürecin kemikleşmesini ve sorunsuz işlemesini beklemeyin. Her zaman esnek olmak ve yeni yöntemleri de bu süreç içerisine dahil etmek sizin yararınıza olacaktır. Hangi yöntemle olursa olsun, iş akışınızı optimize ettiğinizde siz de aslında ne kadar önemsiz noktalarda vakit kaybettiğinizi göreceksiniz. Geri kazandığınız bu vakti, yeni şeyler deneyerek harcadığınızda, hem sürecin hem de işlerinizin kalitesinin arttığını göreceksiniz.
Güzel yazı teşekkürler. Başlık Frontend Development olarak değiştirilebilir belki