Ritim İstanbul A5 Blok No:46, D:112, 34846 Maltepe/İstanbul

Front-end developer ne iş yapar?

Yazılım sektöründe en çok talep gören ve en çok aranan meslek kollarının başında front-end developer unvanına sahip geliştiriciler yer alıyor. Peki bir front-end developer ne iş yapar? Yazılım projelerine nasıl katkıda bulunur?

İster kendi başınıza yapmaya koyulun isterseniz de bir yazılım firması aracılığıyla fikirlerinizi hayata geçirmeye çalışın, front-end hakkında muhakkak temel seviyede bir bilgi sahibi olmalısınız. Çünkü internet sitelerinde ve mobil uygulamalarda gördüğünüz tüm arayüzler bir front-end developer tarafından uygulanır. Bu meslek kolunu tanımlamak için kısa bir örnek vermek gerekirse:

- ADT Çözümleri -
Yönetilen Hizmetler Görseli
Advanced Dynamics Teknoloji'de işletmeler için dış kaynaktan hizmet modeliyle Yönetilen Hizmetler çözümleri sunuyoruz.

Front-end developer ne iş yapar?

Bir iç mimarın bir mekan tasarımı yaptığını ve bu tasarımın ustalar aracılığıyla uygulandığını düşünün. Burada mimarı UX-UI designer olarak, tasarımın uygulanmasını ise bir usta olarak düşünebiliriz. Front-end developer, bir tasarımcının öngördüğü çalışmayı uygulayan, yani hayata geçiren kişidir.

Felsefi açıdan UX/UI designer, kullanıcıların sayfayla nasıl bağ kurabileceği, hangi HTML ögelerini nerede görmek isteyebileceği konusunda bir çalışma yürütür. Front-end developer ise tüm bu çalışmaları teslim alarak ve bir back-end developer ile koordineli bir şekilde çalışarak uygulamaya koyulur. Eğer bir front-end developer çalışmayı herhangi bir tasarım olmadan kendi başına uygulamaya çalışırsa bu, kısa ve uzun vadede ürünün kendisiyle ilgili bazı sorunlara yol açabilir. Çünkü temel anlamda bir görsel zevke sahip olsalar da, bir front-end developer kullanıcı deneyimi ve kullanıcı tecrübesi açısından bazı hatalar yapabilir.

Front-end developera gerçekten ihtiyacımız var mı?

Eğer masrafları daha düşük tutmak niyetindeyseniz o halde daha önce belirli bir içerik yönetim sistemine uygun bir şekilde tasarlanan bir tema satın alıp kendiniz için düzenlemeler yaparak ilerleyebilirsiniz. Örneğin pek çok websitesi, içerik yönetim sistemi olarak WordPress‘i tercih ediyor ve ThemeForest gibi üçüncül tema kütüphanelerini kullanarak hem masrafları hem de hedeflediği oluşumu hayata geçirmek için gereken süreyi daha da aza indirmeyi hedefliyor.

Bir web veya mobil uygulamanın temel amacı insanlara, özellikle de belirli bir kitleye ulaşmaktır. Dijital dünyada ‘bulunabilir’ olmanın yolu ise elbette internetten geçer. Ancak günümüzde web alt yapısının büyümesini ve genişlemesini hesaba katarak pek çok websitesinin neden bu kadar birbirine benzediğini de öngörebiliriz. Hızla büyüyen projelerin temelde iyi bir fikri, ve o fikri hayata geçiren sağlam ve iyi bir ekibi bulunur.

Front-end developer olmak için ne bilmek gerekir?

Eğer gelecekte bir front-end developer olmayı istiyorsanız başlangıç aşamasında temel düzeyde bir bilgi sahibi olmanız sizin için büyük avantaj sağlayacaktır. Front-end denildiğinde akla gelen ilk programlama dilleri HTML, CSS ve JavaScript’tir. Peki bir front-end developer bu teknolojilerle nasıl çalışır?

  • Teknolojiyi kullanırken ve geliştirirken belirli bir seviyede İngilizce bilgisi mutlaka gereklidir: Yukarıda söze edilen programlama dillerini öğrenmek için en az orta düzeyde bir İngilizce bilgisi gereklidir. Bu teknolojilerin geliştiricileri birbirleriyle İngilizce iletişim kurar. Siz de bu mesleği seçtiğinizde doğal olarak bu topluluk içerisinde hareket etmeye başlkayacaksınız. Dolayısıyla öğrenme aşamasında bu eksikliğin giderilmesi büyük avantaj sağlayacaktır.

Programlama dilleri, yapısal olarak her görevi yerine getirebilecek düzeyde tasarlanmamıştır. Bunlardan bazıları nesne yaklaşımlı oldukları için daha hızlı gelişir ve daha büyük bir topluluk tarafından geliştirilerek kullanımı zaman içerisinde yaygınlaşır. Ancak yukarıda değindiğimiz programlama dillerine yaklaşım biraz daha farklıdır.

HTML kullanarak bir front-end developer aslında dijital bir belge oluşturur. Bu belgede ilgili kısımları ilgili etiketler kullanarak biçimlendirir. Böylece botlar sayfayı daha iyi algılar ve daha hızlı bir şekilde dizine ekler. HTML, anlatmak istediğimiz şeye web standartlarının yapısını ve anlamını veren dildir. HTML kullanırken oluşturulan sayfalarlardaki ögelerin tanımlanması son derece önemlidir. Bu, aynı zamanda SEO alt yapısı için gerekli bir çalışmadır.

CSS kullanarak bir front-end developer HTML belge üzerindeki ögeleri stilize eder. Nesnelere <span></span> ile birer ID veya diğer yapılara birer class (sınıf) tanımladığınızda bu tanımladığınız ögeleri CSS ile stilize edebilirsiniz. Bundan sonra oluşturacağınız diğer HTML sayfalarında da aynı ID veya classları kullanırsanız her birini yeniden biçimlendirmenize gerek kalmaz. Dolayısıyla CSS’i belirli bir yapıyı stilize ederken bunu aynı zamanda bir otomasyona dönüştürme aracı olarak da düşünebiliriz. Bir tabloyu örnek olarak gösterebiliriz. CSS kullanarak bir tablonun bir sütununu veya bir satırını belirli bir renkte gösterebilir ve daha iyi kullanıcı deneyimi sağlayabiliriz. Ya da bir görsel veya videonun ön yüzde daha güzel bir şekilde gösterebiliriz. CSS, genel olarak HTML’den bağımsız düşünülemez.

JavaScript ise dinamik işlevsellik oluşturmak için kullanılan bir dildir. Dinamikten kasıt, değişebilen veri yapısıdır. Yani bazı bilgiler statik, değişmez bir özellik taşırken bazı bilgiler ise kısa ve uzun vadede değişebilen bir yapıdadır. Örneğin insanların yaşları, paranın değeri, bir ürünün fiyatı zaman içerisinde değişim gösterir. HTML ve CSS bu işlemleri yapmak için gerekli alt yapıyı sağlamaz. JavaScript ile bu tür değişken verileri kodla hesaplatabilirsiniz. JavaScript’in nasıl kullanıldığında bir örnek olarak Wikipedia’yı gösterebiliriz. Bir insan biyografisi okumak için sayfayı ziyaret ettiğinizde Wikipedia’nın söz konusu kişinin doğum tarihini kullanarak JavaScript’e yaş hesaplattığını görebiliriz. Milyonlarca insanın biyografisinin yer aldığı bir hizmette, tüm biyografileri her yıl elle güncellemek büyük bir zaman kaybına yol açardı. Ancak JavaScript kullanarak bu zaman kaybını telafi edebiliyorsunuz.

JavaScript’in kullanımına bir tablo üzerinden örnek verebiliriz. Yukarıda HTML ile tablonun oluşturulabildiğini, CSS ile stilize edilebildiğini söylemiştik. Peki oldukça uzun bir tabloda bir kullanıcı aradığı şeyi nasıl bulabilir? Bunun için kullanıcıların bir filtreye ihtiyacı vardır. Filtreyi oluştururken kullanılacak dil, tablodaki verileri sayısal olarak anlayabilecek kapasitede olmalıdır. İşte JavaScript bu verileri anlayabilecek bir teknolojidir. Gerekli JavaScript kodlarını yazdığınızda bir tabloya filtre özelliği ekleyebilirsiniz.

Front-end developerlar için güzel haberlerden biri de şudur: 2022 yılında JavaScript, en çok kullanılan programlama dili olmayı başarmıştır.

Front-end developer hangi takım araçlarını kullanır?

Takım araçları (tool) hakkında bilgi vermeden önce kısa bir tanımlama yapmak gerekir. Takım araçları genellikle belirli bir konuda otomasyon işlevi görür. Süreçleri optimize etmek ve daha da kısaltmak için yazılım sektöründe bu türden takım araçları gelişmiştir. Bir programlama dili için geliştirilen kütüphaneler de bu takım araçlarına dahildir. Peki front-end developerlar en çok hangi takım araçlarını kullanır?

  • jQuery: Geniş bir jQuery ekibi tarafından gelişimi sürdürülen bir açık kaynak JavaScript kütüphanesidir.
  • Git: Yazılım geliştirme süreçlerinde kullanılan, hız odaklı, dağıtık çalışan bir sürüm kontrol ve kaynak kod yönetim sistemidir.
  • Chrome DevTools: Google Chrome tarayıcısında yerleşik olarak bulunan ortak bir web geliştirici araçları grubudur. Kodunuzu incelemenizi, düzenlemenizi ve hata ayıklamanızı ve sayfalarınızın performansını ölçmenizi sağlayan güçlü bir araç setidir.
  • Angular: TypeScript tabanlı özgür ve açık kaynaklı bir web uygulaması çerçevesidir.
  • Google Fonts: CSS ve Android aracılığıyla rahat kullanım için 1482 açık kaynaklı yazı tipi ailesinden ve API’den oluşan bir kitaplıktır.
  • HTML5 Boilerplate: HTML5 Boilerplate, tarayıcılar arası uyumluluğa sahip HTML5 web siteleri oluşturmak için bir HTML, CSS ve JavaScript şablonudur.
  • Bootstrap: Web sayfaları veya uygulamaları geliştirmek için kullanılabilecek araçlar bütünü ve önyüz çatısı.
  • Daha fazla bilgi için şuradaki İngilizce makaleden istifade edebilirsiniz: Top 15 Best Front End Web Development Tools to Consider In 2023

    Moment.js nedir ve nasıl kullanılır?

    JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js'tir. Peki Moment.js nedir ve programlama dünyasında...

    JavaScript’te değişkenler ve aralarındaki farklar: var, let & const

    JavaScript, web geliştirmenin temel taşlarından biri olarak, dinamik ve etkileşimli web siteleri oluşturmanın anahtarıdır. Bu güçlü programlama dilinin en temel yönlerinden biri, veri saklama...

    Fiyat takip yazılımları nasıl çalışır?

    E-ticaret dünyası her geçen gün daha rekabetçi bir hal alıyor. Bu ortamda, işletmelerin rakiplerini ve pazar trendlerini yakından takip etmeleri hayati önem taşıyor. İşte...

    HTML div elementi ve kullanım senaryoları

    Her gün milyonlarca web sayfasını ziyaret ediyor, okuyor veya üzerlerinde işlem yapıyoruz. Peki, son kullanıcılar için görsel olarak renderlanan bu sayfaların arkasındaki kodlarda kullanılan...

    React ‘hook’ nedir ve ne için kullanılır?

    React hook, React JavaScript kitaplığındaki bir özelliktir. Hook'lar, sınıf bileşenlerine ihtiyaç duymadan, fonksiyon bileşenlerinde durum (state) ve diğer React özelliklerini kullanmaya olanak tanır. İlk...

    IPv4 ve IPv6 nedir? Aralarındaki farklar nelerdir?

    Her gün internete bağlanıyoruz, ancak teknik olarak internete nasıl bağlandığımızla ilgili bir fikriniz var mı? İnternet, modern yaşamın ayrılmaz bir parçası haline geldi ve...

    Daha fazla blog içerik

    Moment.js nedir ve nasıl kullanılır?

    JavaScript kütüphaneleri programlama sektöründe sıklıkla karşılaşılan sorunları çözmek ve otomatikleştirmek için geliştirilir. Popüler JavaScript kütüphanelerinden biri de Moment.js'tir. Peki Moment.js nedir ve programlama dünyasında...

    JavaScript’te değişkenler ve aralarındaki farklar: var, let & const

    JavaScript, web geliştirmenin temel taşlarından biri olarak, dinamik ve etkileşimli web siteleri oluşturmanın anahtarıdır. Bu güçlü programlama dilinin en temel yönlerinden biri, veri saklama...

    Fiyat takip yazılımları nasıl çalışır?

    E-ticaret dünyası her geçen gün daha rekabetçi bir hal alıyor. Bu ortamda, işletmelerin rakiplerini ve pazar trendlerini yakından takip etmeleri hayati önem taşıyor. İşte...

    HTML div elementi ve kullanım senaryoları

    Her gün milyonlarca web sayfasını ziyaret ediyor, okuyor veya üzerlerinde işlem yapıyoruz. Peki, son kullanıcılar için görsel olarak renderlanan bu sayfaların arkasındaki kodlarda kullanılan...