Başarılı Bir Front-End Developer Olmanın Sırları

2019’un sonlarına yaklaştığımız bu günler; hem bu yılın, hem de on yıllık bir dönemin sonunu temsil ediyor. Geride bıraktığımız bu yıllarda -özellikle son birkaç yıl içerisinde- çok büyük teknolojik gelişmelere şahit olduk. Bu teknolojik gelişmelerin en önemli kısımlarından biri de şüphesiz yazılım dünyasında yaşandı. Bu makalede ise tamamlamak üzere olduğumuz bu on yıllık dönemin ardından 2020 ile birlikte bizleri Front-end Development konusunda nelerin beklediği, önümüzdeki dönemde daha başarılı bir geliştirici olabilmek için neler yapmamız gerektiğiyle ilgili naçizane düşüncelerimi aktarmaya çalışacağım.

İlk olarak hayatımın belki de en önemli mottosu olan bir konuyu sizlerle de paylaşmak istiyorum; “Geliştirici olmak için kod ve proje geliştirmek yeterli değildir, kendimizi de bir o kadar geliştirmemiz gerekir.”

Aslında bu konu, her zaman aklımızda olması gereken bir konu iken bazı arayüz geliştiricileri tarafından unutulduğundan, hızla gelişen front-end development dünyasının gerisinde kalınması gibi sorunlar karşımıza çıkabiliyor. Bu sebeple, front-end development dünyasında bizleri nelerin beklediği konusuna geçmeden önce her gün ve hızla gelişen teknolojilerin gerisinde kalmamanın, gelecekte en büyük artı olacağını rahatlıkla belirtebilirim. Genel konulardan kısaca bahsettiğimize göre “neler yapmalıyız?” kısmına soft bir geçiş yapabiliriz.

1. Javascript’in Yeteneklerini Sonuna Kadar Kullanın

Biz arayüz geliştiriciler için en büyük avantajımız şüphesiz Javascript gibi çok güçlü bir dile sahip olmamızdır. Javascript; çok kapsamlı uygulamalar geliştirebileceğimiz, uygulamaların işlevselliğini mükemmel derecede artıran, çok çeşitli framework, library ve çok daha fazlasını içeren mükemmel bir dildir.

Bu sebeple Javascript’in tüm yeteneklerini en ince ayrıntısına kadar anlamak, öğrenmek ve bunları projelerinizde kullanmak, size çok büyük avantajlar sağlayacaktır.

Üst üste 7.yılda da Javascript, en yaygın kullanılan dil oldu.

2. Mobil Görünümlere Hak Ettiği Değeri Verin

Geliştirdiğiniz tüm web projelerinin mobil uyumlu olmalarına, hatta belki de desktop görünümlerinden bile daha şık ve kullanışlı olmalarına özen gösterin. Sebebi ise günümüzde insanların hemen hemen hepsi bir akıllı telefona sahip ve bu telefonlar ile tüm web gezintileri çok daha pratik yapılabiliyor. Yapılan birçok inceleme sonucu; özellikle online satış yapan e-ticaret sitelerinin aldığı trafik, büyük oranda mobil cihazlardan geliyor.

İnsanlar, internetten alışveriş yapmayı, web sitelerini ziyaret ederek aradıkları bilgiye ulaşmayı mobil cihazlar üzerinden çok daha pratik şekilde yapabildiğinden geliştirdiğiniz tüm web projelerinin duyarlı/ölçeklenebilir olmasına dikkat etmeniz, mobil cihazlardan gelecek trafiğinizin sürekli olarak artan bir eğri çizmesine yardımcı olacaktır.

3. Site Hızını Artırmaya Yönelik Çalışmalar Yapın

Saymakta olduğumuz maddeler arasında şüphesiz en önemli konulardan biri olarak gözümüze çarpıyor bu madde; hız.

Javascript dilinin büyük yetenekleri ve her gün hızla gelişen teknolojiler bir arada kullanılmaya başlandıkça, doğru kod mimarisi ile planlanmış ve temiz kod yazılmış olan websiteleri de doğru orantılı olarak hızına hız katmaya devam ediyor. Website hızı ile yapılabilecek şeyler tabii ki front-end katmanıyla sınırlı değildir, sunucu ve back-end mimarisinin de büyük önemi vardır. Ancak burada arayüz geliştiriciler tarafından yapılması beklenen şey, websitesinin front-end katmanında yapılabilecek her şeyi eksiksiz yerine getirmektir. Dilerseniz gelin, websitelerinizin hızını artırmak için front-end katmanında neler yapabileceğimize bir bakalım.

Gereksiz kodlardan kurtulun

Kodunuzun temiz ve düzenli olmasına dikkat edin. Kullanılmayan/çalışmayan hiçbir kodu, kesinlikle sayfanızda tutmayın.

Dış kaynaklardan alınan her şeyi projenize dahil etmeye çalışın

Projenizde dış kaynaklardan alınan tüm CSS/JS/IMAGE gibi dosyaları projenize dahil ederek sayfalarınıza ekleyin. Dış kaynaklara atılan tüm istekler için site hızı yavaşlayacak, dış kaynağın yavaş cevap vermesi sonucunda ise sayfanız tam anlamıyla yüklenebilmek için uzun bir süre beklemek zorunda kalacaktır.

CSS Sprite özelliğini kullanın

Aslında çok yeni bir teknoloji olmayan, ancak hâla geçerliliğini koruyan ve mutlaka uygulanması gereken bir konu da CSS Sprite özelliğidir. CSS Sprite özelliği sayesinde sayfada kullanılan birçok görsel ayrı ayrı istekler atılmadan tek bir görsel içerisinde alınır ve CSS’in background-position yeteneği ile ilgili görseller ilgili alanda gösterilir. Bu şekilde, sitede kullanılan logo, resim şeklinde çekilen ikonlar vb. her şey CSS Sprite ile çekilmelidir.

Görsellerinizi optimize edin

Birçok websitesinde kullanılan görseller optimize edilmeden, bazen boyutları 2–3 MB’yi bulabilecek şekilde websitelerine yükleniyorlar. Bu durum sitenizin çok yavaş açılmasına sebep olacak ve yüksek ihtimalle de siteyi ziyaret eden kullanıcılar tarafından hoş karşılanmayacaktır. Görsel boyutlarının maksimum 150–200 KB boyutunu geçmemesine özen gösterin.

CSS ve JS dosyalarınızı doğru noktalarda çağırın

Bir websitesinde sayfaya import edilen CSS ve JS kodlarının doğru noktalarda çağrılması büyük önem taşımaktadır. Sayfalarınızda kullanacağınız CSS’lerin, üst bilgi alanı olan head etiketleri arasında, head etiketi kapatılmadan hemen önce çağrılması gerekir. Kullanacağınız JS’lerin ise body etiketleri arasında body etiketi kapatılmadan hemen önce çağrılması gerekir.

CSS ve JS dosyalarını sıkıştırarak kullanın

Sayfalarınızda kullanılan CSS ve JS dosyalarını sıkıştırarak, kullanmanız hem dosya boyutunuzun çok küçülmesine hem de tarayıcılar tarafından çok daha hızlı yorumlanarak sayfanın yüklenme hızına katkı yapacağı kanıtlanmış bir gerçektir. Buna göre bu sıkıştırmaları online olarak yapmanızı sağlayan araçlar olduğu gibi Grunt ve Gulp gibi görev çalıştırıcıları kullanarak da çok hızlı bir şekilde sayfada kullanılan tüm CSS ve JS dosyalarını birer dosyada ve sıkıştırılmış olarak birleştirerek kullanabilirsiniz.

4. Güncel Javascript Kütüphanelerinde Tecrübe Kazanın

Günümüzde birçok Javascript kütüphanesi bulunmaktadır. Bu kütüphanelerin hepsinde profesyonel olmak çok güç olsa da hepsi hakkında bilgi sahibi olmak hiç de zor değildir. Bu sebeple AngularJS, React, Vue, Ember vs. ayırt etmeksizin her birini ayrı ayrı okuyup/anlamak size çok şey katacaktır. Bunları öğrenirken birbirlerine göre artılarını ve eksilerini görün ve sonunda seçiminize göre birkaçı üzerine yoğunlaşıp, mini projeler geliştirerek hayatınıza dahil etmeye çalışın.

2019'un sonlarına yaklaşırken React ve Vue’nun, rakiplerine göre en hızlı yükseliş eğrisini çizmekte olduğu görülüyor. Ben de bu konu ile ilgili detaylı bir karşılaştırma yazıp, yayınlamayı planlıyorum. Tabii ki bu seçim, yapılacak işin içeriğine göre de değişiklik gösterebilir.

5. SEO Konusuna Önem Verin

Günümüzde arama motoru optimizasyonu büyük önem taşımaktadır. Doğru kurgulanmayan sitelerde arama motorlarının sahip olduğu robotların websitenizi gezdiğinde kolay anlaşılır bir yapı olmaması sebebiyle içeriklerinizi doğru indeksleyememesi sorunuyla karşılaşabilirsiniz. Bu sebeple rakiplerinizin gerisinde kalmanız ve üst sıralara çıkamamanız kaçınılmaz bir gerçek olacaktır.

Bunun önüne geçmek için yapılması gereken birçok konu vardır. Tıpkı site hızını etkileyen unsurlarda olduğu gibi SEO konusunda da yapılcak her şey front-end tarafı ile ilgili değildir. Ancak arayüz geliştiricilerinin yapması gereken sayfaları kodlarken Google, Yandex vb. arama motorlarının kolay anlayabileceği/yorumlayabileceği mimariler kurmak gerekir.

6. Kod Testi Yazma Becerilerinizi Tazeleyin

Kod geliştirme yapmadan önce mimariyi doğru şekilde planlayarak ilk olarak kodunuzun testinin yazılması, daha sonra da bu testlere göre asıl kodlarınızın yazılması gerekmektedir. Kod testi konusunda açıklayıcı bir örnek verelim. Kodunuzu yazmadan önce testinizi yazdığınızda kod testi karşınıza hataları çıkarak ekranlar kırmızı (hatalı) olacaktır. Ardından asıl kodunuzu doğru bir şekilde, teste uygun şeklinde yazdığınızda yavaş yavaş kod testinde bulunan hatalar yok olmaya ve ekranlar yeşile dönmeye başlayacaktır. Ayrıca kullanacağınız araçların yeteneğine göre asıl kodunuz içerisinde geçen ve kullanılmayan satırları tespit ederek kodunuzu temiz bir hâle getirebilirsiniz.

Kod testleri yazarken faydalanabileceğiniz birçok araç bulunmaktadır. Bunlardan bazıları; Selenium, Jasmine, Browsera’dır. Bu üç araca ek olarak kullanabileceğiniz birçok araç daha mevcuttur.

7. Tüm UI Framework’lerine Hakim Olun

Günümüzde arayüz geliştiricilerin işine çok yarayacak, çok güzel UI framework’leri bulunmaktadır. Bootstrap, Semantic UI, Skeleton, 960 Grid System, Materialize, Material UI ise en çok tercih edilen ve geliştirilen framework’lerdir. Bu framework’leri kullanarak mobil ekranlar için uyumlu grid yapıları kurabilir, şık tasarıma sahip, butonlar, formlar, tablar ve çok daha fazlasını oluşturabilirsiniz.

8. Kullanıcı Deneyimlerine Uygun Arayüzler Hazırlayın

Kullanıcı Deneyimleri (UX) konusu çok önemli bir konu olarak karşımıza çıkmaktadır. Bu konu daha çok arayüz tasarımı yapan kişilerin dikkat etmesi gereken bir konu olsa da arayüz geliştiricileri için de büyük önem taşımaktadır. Buna göre web sitelerinde kullanıcıya verilmek istenen ana içeriğin sayfaya ilk girişte verilmesi, logo ve menülerin konumu gibi konulara dikkat etmek çok önemlidir. Sayfaların kullanımında soldan sağa ve yukarıdan aşağıya şeklinde bir çizgi izlendiği ortadadır. Hatta websitenize giren ziyaretçilerin sayfanızın hangi noktasına odaklandığı, tıklamalar yaptığı gibi grafiklere ulaşabileceğiniz birçok araç bulunmaktadır.

Şu günlerde büyük firmalar tarafından UX Designer olarak ayrı pozisyonlar yavaş yavaş kullanılmaya başlandı. Tıpkı yıllar öncesinde Türkiye’de front-end developer ile back-end developer’ların yapacakları tüm işlerin tek bir insandan bekleniyor olması ve sonradan ayrı bir pozisyon olarak ayrılması gibi, UX konusu da zamanla front-end developer iş tanımından, ayrı bir pozisyon olarak karşımıza çıkmaya başlayacaktır.

Ayrıca tüm bu maddelerde yazanları birer standart haline getirerek ve yeni çıkan, işe yarayacak her teknolojiyi öğrenmek için çabalamanın tüm arayüz geliştiricileri için 2020'de ve gelecek yıllarda artı bir durum olacağı kesindir. Tabi öğrendiğimiz her şeyin, her an değiştiği/güncellendiği konusunu unutmadan, kendimizi güncel tutabilmek büyük önem taşımaktadır.