Front-End (Ön Uç) Geliştirme Nedir?

7 min readJun 3, 2021

Konu web tasarımı olduğunda, “Front-End” ve “Back-End” en sık sözü geçen terimler arasında yer alır. Aslında Front-End “Web Tasarımı” ve Back-End “Web Geliştirme” olarak da adlandırılabilir. Bu iki terim genelde sektörün dışında olanlar için kafa karışıklığı yaratıyor gibi görünse de aralarındaki farkı açıklamak çok da zor değil. En basit tabirle açıklayacak olursam; Front-End, bir web sitesine girdiğinizde etkileşime girdiğiniz kullanıcı ara yüzünün (UI-User Interface) tasarım ve geliştirmesine; Back-End, bu web sitesinin perde arkasında yer alan, işin server yani sunucu kısmı ve taban yazılımını geliştirilmesi işine verilen adlardır. Bu yazıda Front-End Geliştiricilerin hangi dilleri öğrenmesi gerektiğinden ve bu dillerin içeriğinden bahsedeceğim.

Front-End Programcılar Ne Yapar?

Front-End’in Türkçe karşılığı “Önyüz”dür. Yapılma aşamasındaki bir web sitesinin ön yüzünü (client-side) oluşturan HTML, CSS ve JavaScript gibi teknolojileri kullanarak web sitesinin görsel tarafını oluşturan kişilere Front-End Developer yani Ön yüz geliştirici denir. Web sitesinde kullanılacak renkler, içeriklerin yerleşimi, yazı tipinin seçilmesi ve uygulanması gibi birçok görevi bünyesinde barındırır.

HTML, CSS, JavaScript ne demek diye soracak olursanız kabaca HTML bir insanın iskeleti, CSS iskeletin üzerine eklenen kas sistemi, JavaScript ise bu bedenin üzerine eklenen fonksiyonlardır. Detaylıca incelemeye başlayalım.

HTML

Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, HTML) web sayfalarını oluşturmak için kullanılan dildir.

Bir insanın iskeleti gibidir. Web sitesinin iskeleti olan bu yapı içerisinde herhangi bir güzelleştirme bulunmaz. Kullanılacak olan elementler en sade ve basit haliyle site üzerinde yer alır. İşaretleme dili olan Html, web sayfalarının hazırlanmasında kullanılan sistemdir. Bir programlama dili olmayan Html, bilgisayarlarımızda kullandığımız web sitelerinin oluşturulmasında kullanılır. Chrome, Firefox ve İnternet Explorer gibi tarayıcılar html kodlarını işleyerek bu kodları web sayfasına dönüştürür.

HTML Neler Sunuyor?

Görsel, yazı ve video gibi içeriklerin web sayfasına konumlandırılmasını sağlamaktadır.
Oluşturulan bu içeriklerin doğru şekilde internet sitelerinde görüntülenmesini sağlar.
Arama motorlarına web siteleri hakkında bilgi verir.

Html kodu yazmak için bilgisayarlara bir program yüklemek gerekmez. Wordpad, not defteri ya da word gibi ortalarda bir metin editörü html sayfaları oluşturabilir. Kod yazmayı daha kolay hale getirmek için dreamwear, sublime Text ve notepad++ gibi araçlar kullanılabilir. Yazılan html kodları kaydedilirken htm, xhtml ve html gibi tarayıcıların anlayacağı şekilde kaydedilmesi gerekir.

CSS

İngilizcesi “Cascading Style Sheets” olan CSS açılımı, “Basamaklanmış Stil Katmanları” anlamına gelmektedir. İskeletin üzerine kasların eklenmesi gibidir. Web sitesinde HTML üzerinde yapılan görsel değişimler ve güzelleştirmeler bu teknoloji ile sağlanır. “CSS nedir?” sorusunun cevabı ise web sitelerinin görsel olarak şekillendirilmesine olanak tanıyan ve kendine has kuralları olan bir tanım dilidir şeklinde ifade edebiliriz. HTML ve JavaScript ile birlikte en temel web teknolojileri arasında bulunan CSS, web sayfaları üzerinde oldukça fazla görsel denetim sunar.

CSS sayesinde web sayfalarının mizanpajı, renkleri, kullanılan fontlar, ara başlıklar, görsel efektler ve diğer görsel unsurlar üzerinde etkili ve fonksiyonel bir kontrol sağlayabilirsiniz. Kullanıcı dostu olan ve görsel açıdan etkileyici web siteleri için HTML ve JavaScript’in yanı sıra yazılan CSS kodları son derece önem taşır. Etkili bir CSS kodlaması, web sitelerine yüksek bir kullanılabilirlik sunar.

Bootstrap

Ücretsiz bir CSS framework’u olan Bootstrap, açık kaynak kodlu bir tasarım aracıdır. Telefon, tablet ve masaüstü bilgisayarlar için farklı ve cihazınızın büyüklüğüyle orantılı şekilde sitenizin görünmesini sağlayan tema ve tasarımları kolaylıkla yapabilirsiniz.

Bir site için gerekli olan bütün unsurları içerisinde barındıran Bootstrap ile tasarım yaparken bu hazır unsurları kullanarak tüm cihazlara uygun tasarımlar yapmanızı sağlar. Bu da demek oluyor ki, her şeyi hazır olan kodlarla yeni bir tasarım yaratmak oldukça kolay ve pratiktir.

Stiller, imajlar ve JavaScript’ler daha öncesinden Bootstrap’in içine monte edilmiştir. Yapmanız gereken tek şey bunları çağırmanızdır. Bootstrap’in son sürümü olan Bootstrap 3, Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse her internet tarayıcısının son sürümlerinden sorunsuz şekilde çalışıyor.

JavaScript

JavaScript, 20 yılı aşkın bir geçmişe sahip dünyanın en popular yazılım dillerinden birisidir. Ayrıca web geliştiriciler için temel 3 yazılım dilinden birisidir. Web sayfalarının davranışlarını yönetir.

JavaScript oldukça hızlı ve kolay bir şekilde öğrenilebilir ve web sitelerinin işlevini arttırmaktan oyunlar çalıştırmaya kadar çoğu amaç için kullanılabilir. Dahası, Github gibi siteler sayesinde ücretsiz olarak bir çok JavaScript taslağı ve uygulaması bulabiliriz.

JavaScript neden önemlidir?

JavaScript’in rakipleriyle karşılaştırıldığında çeşitli avantajları bulunuyor, özellikle de belirli alanlarda. JavaScript avantajlarından bazıları şu şekildedir:

Bir compiler (derleyici) kullanmanız gerekmez çünkü web tarayıcıları HTML ile yorumlar;
Diğer yazılım dillerine nazaran öğrenmesi daha kolaydır;
Hataları bulmak dolayısıyla çözmek daha kolaydır;
Belirli web sayfası öğelerine veya özel durumlara ayarlanabilir, örneğin fare tıklaması veya imleci üzerine getirme gibi;
JS birden fazla platformda, tarayıcıda çalışabilir;
JavaScript kullanarak input değerlendirebilir ve manuel very kontrollerini azaltabilirsiniz;
Web siteleri daha interaktif yapar ve ziyaretçilerin dikkatini çeker;
Diğer yazılım dillerinden daha hızlı ve hafiftir.

JQuery

Dünyada en çok kullanılan JavaScript kütüphanesi olan JQuery’in amacı JavaScript dilini internet üzerinden kolayca kullanılabilmeyi sağlayan ücretsiz ve açık kaynaklı bir teknoloji sunmaktır.

JQuery’nin sağladığı en büyük avantajlardan biri tutarlı bir şekilde bütün tarayıcılarda çalışmasıdır, bu sebeple tüm ortamlarda rahatlıkla kullanılabilme imkanı sunmaktadır.

Bir JavaScript kütüphanesi olduğundan, kütüphaneyi kullanarak geliştiriciler JavaScript ile oluşturdukları birçok işlevi web yazılımlarına sağlayabilirler.

jQuery, hızlı, küçük, çapraz platformlu ve zengin özelliklere sahip bir JavaScript kitaplığıdır.

Kütüphaneyi ne olarak değerlendirebileceğiniz tamamen size kalmış. İster web sitenizdeki slider animasyon efektleri için olsun, ister web uygulamalarınızın kendisi için yada görselleştirme alanları için kullanabilirsiniz.

Angular

Web, mobil ve masaüstü uygulamalar oluşturmak için kullanılan Javascript tabanlı bir framework’dür. Angular uygulamaları Javascript’in üzerine inşa edilmiş bir dil olan Typescript’in Html, Css ile birlikte kullanılmasını içerir. Typescript’te yazılan kod önce Javascript’e derlenir ardından browserda işlenir. Typescript kullanımı, Angular uygulama geliştirmek için zorunlu değildir fakat kullanım kolaylığı ve avantajları sayesinde kullanılması daha yararlı olacaktır.

Angular Avantajları

1 – Angular’ın SPA (Single Page Application) desteği

Single Page Application (SPA), her yeni sayfanın içeriğinin yeni HTML sayfaları yüklemek yerine JavaScript’in mevcut sayfadaki sadece değişen sayfaya ait DOM öğelerini değiştirerek dinamik olarak oluşturduğu web sitesi tasarım yaklaşımıdır.

2 – Two-way data binding (Çift yönlü Data İletişimi)

Angular 2 ve üzeri sürümlerinde ngModel Directive’lerini kullanarak otomatik olarak View ve Controller katmanları arasında veri bağlantısını sağlarız. Bu sayede aynı değişken üzerindeki herhangi bir değişiklik Angular two-way data binding sayesinde bütün sayfa üzerindeki ilgili alanların değişmesini tetikler.

3 – Modular Architecture

Angular’ın moduler yapısı sayesinde uygulamamızı parçalara bölebilir ve tekrar kullanımını sağlayabiliriz. Bu module’leri component’ler, directive’ler, pipe’lar ve service’ler ile birlikte gruplayabiliyoruz.

Ayrıca module’lerin bir başka avantajıda layz-loading yapısıdır. Bu sayede bir veya birden çok özelliği gruplayıp gerektiğinde yükleyebileceğimiz için düzgün kullanıldığı durumda uygulama performansını ciddi oranda arttıracaktır.

React

React, kullanıcı arayüzü (UI) oluşturmak için kullanılan en popüler JavaScript kütüphanesidir. Web siteleri işlemek için kullanıcı çıktısına harika yanıt sunan bir yöntemi kullanır.

Bu aracın bileşenleri Facebook tarafından geliştirilmiştir. 2013’de açık kaynaklı bir JavaScript olarak piyasaya sürülmüştür. Şu anda, çok satan listesinin en üstünde yer alan Angular ve Bootstrap gibi ana rakiplerinin önündedir.

React Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, ve Instagram dahil olmak üzere yüzlerce büyük şirket tarafından kullanılmıştır. Bu, bu aracın rakip sağladığı avantajların rakipsiz olduğunun kanıtıdır.

React Avantajları

1 – Kullanımı Kolay

Açık kaynaklı bir JavaScript GUI kütüphanesi olan React’in en büyük odak noktası vardır; UI görevlerini verimli bir şekilde tamamlamaktır. MVC kalıbındaki (Model-View-Controller – Model Görünüm Kontrolcüsü) “V” olarak sınıflandırılabilir.

2 – Java’da Yeniden Kullanılabilir Bileşenleri Destekler

React aynı fonksiyonu kullanan başka uygulamalara geliştirilen bileşenleri yeniden kullanmanıza izin verir. Bileşen yeniden kullanabilme özelliği geliştiriciler için sıradışı bir özelliktir.

3 – Daha Kolay Bileşen Yazma

React bileşeni, HTML ile JavaScript’i birleştirmenizi sağlayan tercihe bağlı bir sözdizimi uzantısı olan JSX kullandığından yazması daha kolaydır.

JSX JavaScript ile HTML‘in mükemmel bir karışımıdır. Bütün web site yapı yazma sürecini açıklar. Ek olarak, kullanılan uzantı birden çok fonksiyonu işlemeyi daha kolay hale getirir.

4 – Sanal DOM ile Daha İyi Performans

React DOM (Document Object Model – Belge Nesne Modeli) işlemini verimli biçimde güncelleyecektir. Tahmin edebileceğiniz gibi bu işlem web bazlı uygulamalarda birçok sorun çıkartabilir. Şanslısınız ki React sanal DOM’lar kullanır, böylece bu sorunu yaşamanıza gerek kalmaz.

Bu araç sanal DOM’lar oluşturmanıza ve onları bir hafıza barındırmanıza izin verir. Sonuç olarak, gerçek DOM’da her değişiklik olduğunda sanal olanı da anında değişir.

Sistem gerçek DOM’un devamlı güncellemeleri zorlamasını önleyecektir. Böylece uygulamanızın hızı aksamayacaktır.

Vue

VueJS kullanıcı arayüzleri geliştirmek için kullanılan interaktif bir front-end kütüphanesi yada çerçevesidir. Son zamanların en popüler front-end teknolojilerinden biridir. Hatta 2018 temmuz sonu itibariyle Github’da 108 bin yıldız ile en büyük rakiplerinden React ve Angular’ı geride bırakmayı başardı.

VueJS Avantajları

1 – Düşük boyut ve hız

Bir kütüphane ne kadar düşük boyutta ise o kadar iyidir. VueJS’in en büyük avantajlarından birisi boyutudur. Kurulan plugin(eklenti)’e bağlı VueJS boyutu 18 – 21KB arasındadır. Boyuta bağlı hızı da rakiplerine oranla çok daha iyidir.

2 – Öğrenim kolaylığı

Anlaşılması kolay dökümantasyon ve basit syntax (sözdizimi) ile öğrenim kolaylığı sağlar.

3- Esnek yapı

Projenizin durumuna bağlı farklı eklentiler veya farklı çözümler üretebilmenize olanak sağlar. Kullanmayacağınız bir uygulamayı projenize dahil etmek zorunda bırakmaz.

4 – Basit Entegrasyon

Yukarıdaki örnekte olduğu gibi sadece js dosyasını dahil ederek projenizde kullanabilirsiniz.

5 – Topluluk

Hızla büyüyen bir topluluğa sahip olan VueJS geliştirme aşamasında yaşayacağınız sorunlara cevap bulmakta çok önemli bir avantaj olacaktır. Ayrıca neredeyse en problem için hazırlanmış pluginlerde size çok kolaylık sağlayacaktır.

6 – Virtual Dom Yapısı

Virtual dom, react tarafından kullanılmış bir özelliktir. Avantajı ise projede değişiklik yapıldıkça, doğrudan dom’un değil, memory’deki dom’un clone’nin güncellenmesi ve aradaki farkların uygun zamanda gerçek dom’a yansıtılmasıdır.