Kaan
Uzun zamandır düşündüğüm ve sonunda yazma kararı aldığım, forumda sıkça konuları da açılan konulardan seri bir yazı dizisi hazırlamak istedim. “Bilgisayar / yazılım mühendisliği bölümü okuyorum, sizce hangi alana yönelmeliyim?”, “İnternet sitesi tasarımı üzerine yoğunlaşmak istiyorum, sizce nereden başlamalıyım?”, “Mobil uygulama geliştirmek istiyorum hangi platformda hangi dille kodlama yapmalıyım?” gibi sorulara, her ay güzel bir yazı dizisi hazırlamak eminim çok kişiye yardımcı olacaktır.
Bugünkü yazım, “nasıl iyi bir front end developer olabilirim” üzerine. Bu işe nasıl başlarım, hangi yeteneklere sahip olmalıyım ve ne kadar çalışmalıyım gibi temel kavramlar üzerinde duracağım.
Öncelikle Front end developer ünvanı ile anılan kişi, kullanıcıların etkileşime girdiği ön yüzün HTML&CSS, JavaScript, jQuery teknolojilerini kullanarak yapan kişidir. Kısaca gördüğünüz, tıkladığınız, görsel ve dokunsal olarak tecrübe ettiğiniz her şeydir. Ülkemizde henüz ayrımı çok net bilinmese de, Front end developer ve back end developer kavramları kurumsal alanlarda birbirinden tamamen ayrılmıştır. Bir sonraki yazı dizimde de back end developer kavramından detaylıca bahsedeceğim. Fakat şu an için kısa bir ayrım örneği vermek gerekirse; back end developer bir şehrin altyapısını oluşturan kişi (elektrik, su ve kanalizasyon sistemleri, bina yapıları gibi), front end developer ise bu şehrin görünen kısmını (yollarını, bina dış cephelerini, parklarını ve peyzajını) yapan kişi olarak düşünebilirsiniz.
Gelelim tekrar konumuz olan front end developer kavramına. Piyasada genellikle bu isimle anıldığı için sürekli ingilizce telafuzunu yapıyorum. Güzel dilimizde de “ön uç / ön yüz geliştirici” veya forum dillerinde “arayüz tasarımı” olarak da denk gelebilirsiniz. Front end developer kavramının bir çok alt kırılımı mevcut. Bunların detayına girmeyeceğim ama kısa kısa değineceğim. Zira hepsinin kullanacağı teknolojiler hakkında bilgilenmek, bizim daha çok işimize yarayacaktır. Sonrasında siz keyif aldığınız dala atlayabilir ya da daldan dala gezebilirsiniz.
Front End Developer Alt Dalları
- Front End Web Developer
- CSS Developer
- JavaScript Developer
- jQuery Developer
- UI / UX Developer
- Mobile Front End Developer
- Front End Test ve Problem Çözümü
Front End Developer Olmak İçin Mutlaka Sahip Olmanız Gereken Teknolojiler
1- HTML & CSS
HTML (Hyper Text Markup Language) ve CSS (Cascading Style Sheets) kavramları web kodlamanın en temel yapı taşlıdır. Bu iki şey olmadan bir internet sitesi oluşturamazsınız. Herhangi bir internet sitesi geliştirmek için HTML ve CSS’ de ustalaşmak gerekiyor. Güzel haber, sağlam bir çalışma ile sadece birkaç haftada bunun üstesinden gelebilirsiniz.
Not: Yalnızca HTML ve CSS bilgisi edinmek, temel internet sitelerini oluşturmanıza izin verir. Karmaşık yapılar oluşturmak için sonraki adımlarda da ustalaşmanızı gerektirir.
2- JavaScript
JavaScript, internet sitelerine biraz daha işlevsellik eklemenize izin verir. HTML, CSS ve JavaScript (kısaca JS) dışında bir şey kullanmadan çok sayıda temel web uygulaması oluşturabilirsiniz. En temel düzeyde JS, internet sitelerinize bir çok interaktif öğe eklemenizi sağlar. JS’yi, gerçek zamanlı olarak güncellenen haritalar, etkileşimli filmler ve çevrimiçi oyunlar oluşturmak için kullanabilirsiniz. Pinterest gibi siteler, kullanıcı arayüzünü kullanımı kolaylaştırmak için JavaScript'i yoğun bir şekilde kullanmaktadır. Güzel haber, JavaScript’te master olursanız, dünyadaki en popüler programlama dilinde dev bir kariyer elde edebilirsiniz.
3- jQuery
jQuery bir JavaScript kütüphanesidir. jQuery ile her şeyi sıfırdan kodlamak zorunda kalmazsınız, projelerinize hazır öğeler eklemenizi, böylece gerektiği gibi kişiselleştirebilmenizi sağlar. (JavaScript'in bilinmesinin bir nedende budur). Geri sayım sayaçları, arama formu, otomatik tamamlama ve hatta kılavuz düzenlerini otomatik olarak yeniden düzenleyip yeniden boyutlandırmak gibi işlerde, jQuery’yi kullanabilirsiniz.
4- JavaScript Frameworks
JavaScript için alternatif bir çok framework bulunmaktadır. En popülerleri; Angular JS, Backbone, Ember, React JS, Node JS ve Vue JS’tir. Bu frameworkler JavaScript kodunuz için hazır bir yapı sağlar. Farklı ihtiyaçlar için farklı framworkleri tercih edebilirsiniz. Amaç sıfırdan kodlamayı en aza indirgemektir.
5- Frond-End Frameworks
CSS ve ön yüz geliştirmek için yine kodlama işini azaltmak amaçlı kullanılan popüler frameworkler mevcuttur. Bunlardan en bilinenlerinden birisi Bootstrap’tir. İçerisinde hazır CSS ve JavaScript kütüphaneleri bulunmaktadır. Böylece projelerinizi hızlı bir şekilde geliştirmeye başlayabilir, esnek yapılarıyla istediğiniz gibi şekillendirebilirsiniz. YouTube ve Udemy üzerinde oldukça fazla kaynak mevcuttur. Kurulumu ve kullanımı hakkında bu siteleri kullanabilirsiniz.
6- CSS Preprocessors (Ön İşlemciler)
Ön işlemciler, CSS kodlamanızı hızlandırabilecek başka bir unsurdur. Bir CSS ön işlemcisi, CSS'mizin ölçeklenebilir olmasını ve birlikte çalışılmasını kolaylaştırmak için CSS'ye ekstra işlevsellik katar. İnternet sitenize yayınlamadan önce kodunuzu işler ve onu iyi biçimlendirilmiş ve çapraz tarayıcı dostu CSS haline getirir. SASS ve LESS is talebi öncesi islemcilerin en büyük iki tanesidir.
7- Responsive ve Mobil Tasarım
Reponsive (duyarlı) tasarım, internet sitesinin düzeninin ekran boyutuna göre ve kullanılan cihaza göre değiştiği anlamına gelir. Örneğin bir internet sitesi büyük monitörlü ve yüksek çözünürlüklü masaüstü bilgisayardan ziyaret edildiğinde farklı tasarım görülecek, aynı siteyi herhangi bir mobil cihazda ziyaret ettiğinde ise o çözünürlüğe göre optimize edilmiş ancak aynı temel dosyaları kullanan farklı bir tasarım ile karşılaşılacaktır.
Mobil tasarım, responsive tasarımı içerebilir. Ancak bazen bir kullanıcının bir masaüstü bilgisayarda sitenizi ziyaret ederken yaşamak istediği deneyim, kullanıcıların akıllı telefonlarından ziyarette görmek istediklerinden tamamen farklıdır. Bu gibi durumlarda, mobil sitenin tamamen farklı olması mantıklıdır. Örneğin, çevrimiçi bankacılığa sahip bir banka internet sitesi, kullanıcıların en yakın banka yeri ve basitleştirilmiş hesap görünümü gibi şeyleri (mobil ekranlar daha küçük olduğu için) görüntülemelerini sağlayan ayrı bir mobil tasarım yapabilir. Kısacası mobil uygulamalar .
8- Çapraz Tarayıcı Geliştirme
Modern tarayıcılar, internet sitelerini tutarlı bir şekilde görüntülemede oldukça başarılıdır. Fakat sahnenin arkasında kodu nasıl yorumladıkları konusunda hala farklılıklar vardır. Firefox, Chrome, Safari, Opera ve İnternet Exploerer gibi farklı tarayıcılarda internet site tasarımlarınız farklı görülebilir. Bu konu farklı bir yazımızda detaylı olarak bahsedilecek kadar detaylıdır. Bu nedenle eğer şu an için ilgili olduğunuz bir konu ise iyi bir araştırma ile kendinizi bilgilendirebilirsiniz.
9- Test ve Hata Ayıklama
Her kodlama işleminde olduğu gibi internet sitesi geliştirmede de hatalar olur. Bu nedenle test etme ve hataları düzenleme gibi stresli, yoğun çalışma gerektiren bu aşama oldukça sancılıdır. Bu nedenle temiz kodlama, test ve hata ayıklama işleminde oldukça önemlidir. Tasarımızda yolunda gitmeyen bir durumda projenizi test etmek sizi oldukça yoracaktır. Bu gibi durumlar için üçüncü şahıslardan yararlanmak iş yükünüzü oldukça hafifletecektir. Bu nedenle çok gizli olmayan projelerinizi Beta sürümü ile sürmek, size bu aşamada oldukça avantaj sağlayacaktır.
10- Problem Çözme Yetenekleri
Her şey tamam ve diyelim ki mükemmel işleyen bir ön yüz oluşturdunuz ve bu tasarımınızı bir back end developer içerik yönetim sistemi ile entegre ederken aniden müthiş özelliklerin yarısı çalışmaktan vazgeçti. İşte burada biraz da uzun yıllar çalışmanın getirdiği tecrübe ile projenin felakete dönüşmesini engelleyecek proje çözme yetenekleri gerekiyor. Bu kısım biraz fazla mesai harcamanıza neden olabilir. Çünkü problem çözmek tecrübe ile doğru orantılıdır.
Umarım aklınızdaki sorulara kısa ve yalın anlatımlarla çözümler sunabilmişimdir. Sürçü lisan ettiysek affola. Bir sonraki yazı dizilerimizde görüşmek dileği ile iyi çalışmalar.
