Frontend web sitelerinde kullanıcıların gördüğü ve etkileşime girdiği kısma verilen genel addır. Kullanıcı arayüzü ve kullanıcı deneyimi standartları göz önünde bulundurularak oluşturulur. Backend ve kullanıcı arasında bir köprü görevi görüp dinamik bir bağlantı sağlar. Frontend kendi içinde üç temel bileşeni barındırır. Bu bileşenler HTML, CSS ve JavaScript’tir. HTML web sayfasının temelini oluşturur. HTML kelimesinin açılımı hiper metin işaretleme dilidir. HTML başlık, paragraf, liste ve resim gibi temel elementleri kullanarak basit bir sayfa düzeni oluşturur. Oluşturulan düzeni görüntü açısından biçimlendirmek ise CSS’in işidir. CSS basamaklı stil şablonu olarak Türkçeye çevirilir. Web sayfasındaki öğelerin renk, yazı tipi ve büyüklük gibi özellikleri değiştirip özelleştirebilmesini mümkün kılar. Hem HTML kodlarının içine yazılarak hem de harici css uzantılı bir dosya oluşturarak kullanılabilir. HTML ile iskeleti oluşturulan sayfaya CSS ile stil kazandırıldıktan sonra üçüncü temel bileşen yani JavaScript ile de dinamiklik eklenir. JavaScript Frontend’de form doğrulama, buton işlemleri ve animasyonlar gibi kullanıcı etkileşimi gerçekleşen kısımlarda görev alır. Bunlara ek olarak sayfadan gelen ve sayfaya gid en verileri de işler. Böylece Frontend’in temelde bu üç bileşene dayalı olarak çalıştığını söylemek mümkün hale gelir.
Frontend Nedir?
Tam olarak Frontend nedir? Frontend kullanıcının gördüğü ve etkileşimde bulunduğu önyüzdür. Etkileşim sayfada bulunan öğeler aracılığıyla gerçekleşir. Butonlar, formlar, menüler, animasyonlar ve medya oynatıcılar bu öğelere örnektir. Butonlar kullanıcının belirlenmiş eylemleri yerine getirmesine olanak tanır. Formlar bilgi girişini mümkün kılarlar ve formlar aracılığıyla bilgi alınıp depolanabilir bir hale gelir. Menüler ise kullanıcının web sayfası üzerinde gitmek istediği farklı bölümlere gidebilmesine olanak tanır. Bu etkileşimleri sağlayabilmek ve daha farklı özellikleri mümkün kılmak için Frontend’in Backend’e ihtiyacı vardır. Frontend kullanıcının gördüğü önyüz olması dışında aynı zamanda arka katmanla iletişim halinde olan bir köprüdür. Backend ile sağladığı etkileşim sonucunda birkaç temel olay meydana gelir. Bu olaylar Frontend’in istek gönderip yanıt aldığı istem-yanıt modeli, verileri işleyerek sunucuya gönderip sunucunun da bir süreç sonrası önyüze gönderdiği veri işleme ve veri tabanı işlemi olarak örneklendirilebilir.
Frontend Nasıl Çalışır?
Nasıl çalıştığına değinmeden Frontend ne demek önce onu anlamamız gerekir. Frontend kullanıcının gördüğü önyüzdür. Görüntüsel olarak sayfayı oluşturmasının yanında işlevsellik de bu kısımda sağlanır. Şimdi birkaç adımda çalışma mantığına bakalım. Birinci adımda HTML ile bir iskelet oluşturmak gerekir. Sayfanın içeriğini oluşturan başlıklar, paragraflar ve listeler gibi elementler bu kısımda tanımlanır. Arama motoru optimizasyonu için de gerekli olan anlamsal işaretleme de bu kısımda gerçekleştirilir. Sonrasında CSS stillemesi adımı gerçekleştirilir. HTML de tanımlanan elementlere renk, yazı tipi, kenar boşluğu ve düzen gibi değerler atanılarak bir kompozisyon oluşturulur. Bu adımda farklı boyutlardaki cihazlarla uyumlu çalışabilecek bir tasarım yapılması son derece önemlidir. Uyumlu yani responsive tasarımda ekran boyutları değiştikçe elementlerin büyüklükleri ve düzenleri de değişir. Organik site trafiğini de arttıran bu özellik sitenin daha fazla kişi tarafından görüntülenmesine olanak sağlar. Görsellik ve genel iskelet oluşturulduktan sonra da JavaScript ile işlevsellik sağlanmalıdır. İşlevsellik etkileşimle mümkün olur. DOM manipülasyonu, form doğrulama, animasyon ekleme, Ajax istekleri, olay işleme ve veri yönetimi JavaScript’in sağladığı etkileşimlere örnek verilebilir. Özetlemek gerekirse Frontend içinde barındırdığı üç temel bileşeni belirli amaçlar ve işlevler doğrultusunda kullanarak web sayfaları oluşturur.
Frontend Öğrenmenin Avantajları Nelerdir?
Frontend yazılım geliştirme eğitimi almanın birçok avantajı vardır. Son yıllarda bu alan Frontend geliştiricilere olan talebin de artması ile cazip bir meslek olarak kabul görmeye başlamıştır. Bu talebin ortaya çıkma sebeplerinin başında şirketlerin dijital ürünleri için responsive ve kullanıcı dostu sayfalara daha çok ihtiyaç duymaya başlaması vardır. Birbirini tekrar eden işlerden sıkılan ve kendi yeteneklerini keşfetmek isteyen kişiler için de son derece iyi bir seçim olabilir. Görsellikle ilişkili bir alan olması sebebi ile kimi zaman yaratıcılığı gerektirir. Görsel olarak iyi düşünülmüş arayüzler oluşturmak kişinin tasarım becerilerini sergilemesine olanak tanırken bu işin monotonlaşmasının önüne geçer. Bu alanın en önemli özelliklerinden bir diğeri de öğrenilen becerilerin çeşitli sektörlerde kullanılabilecek olmasıdır. Teknoloji şirketleri, E-ticaret firmaları, pazarlama ajansları, eğitim kurumları ya da kamu kurumları gibi farklı sektörler için geliştirmeler yapabilirsiniz. Web yerine mobilde geliştirme yapmak isterseniz de halihazırda sahip olduğunuz HTML, CSS ve Js bilginizine ek olarak React Native ya da Flutter gibi çerçeveler öğrenerek yolunuza devam edebilirsiniz. Hızlı bir şekilde sektöre giriş yapmak isteyenler için de Frontend uygun bir alan olarak görülür. Sürekli değişen ve güncellenen ekosistemine ayak uydurmak kişinin kariyer basamaklarını daha hızlı çıkmasına olanak tanır. Yazılımcı maaşları da kariyer basamaklarını çıkarken son derece motive edici olacaktır. Takım çalışmalarına uyumlu bir kişiyseniz Frontend geliştirici olarak farklı insanlardan yeni şeyler öğreneceğiniz bir ekibe girmek size büyük bir avantaj sağlar. İnsanlarla iletişiminiz gelişirken projeler süresince takıldığınız yerlerde daha deneyimli birinden tavsiyeler alabiliyor olmak daha motive hissetmenizi olanak tanır. Üstelik dijitalleşen dünyada bir ekip içinde yer almak amacıyla her gün uzak mesafelerde olan çalışma alanına gitmek için vakit harcamanıza gerek kalmaz. Freelance çalışma konum farketmeksizin kariyer fırsatlarına erişmeyi mümkün hale gelir.
Frontend Developer Nasıl Olunur?
İnternetten Frontend developer nasıl olunur diye arattığınızda karşınıza bir takım yol haritaları çıkar. Bu haritalar konu konu ve adım adım planlanmış olsalar bile kimi zaman öğrenme sürecini daha karmaşık gösterirler. Özellikle haritada bulunan başlıkların neyi temsil ettiğini bilmeyen insanlar her yeni konunun aşılması gereken zorlu bir buzdağı olduğu izlenimine kapılır. Böyle yanlış izlenimlerle süreci daha zor hale getirmemek için başlangıçta temel bilgileri edinmek daha yararlı olacaktır. Bilgi birikimi arttığında çalışma mantığının da kavranması ile detaylı öğrenim kendiliğinden gerçekleşecektir. Şimdi temel adımlara daha yakından bakalım. Frontend’in yapı taşı olan HTML, CSS ve JavaScript bileşenlerinin tam anlamıyla öğrenilmesi gerekir. Sıfırdan başlıyorsanız HTML etiketleriyle neler yapabileceğinizi keşfetmeniz gerekir. HTML ile sayfa düzenleri oluşturabilmeye başladıktan sonra tasarımsal açıdan daha da detaylandırmak isteyeceksiniz. İşte tam da bu noktada CSS öğrenmeye geçebilirsiniz. CSS HTML ile oluşturduğunuz her bir elemente görüntüsel olarak değerler atamanızı sağlayacaktır. Boyutlandırma ve renklendirme gibi çabuk kavranan konuların yanında konumlandırma gibi üzerinde uğraşılması gereken konular da vardır. Temeli öğrenirken her şeyin bir anda kavranamayacağını göz önünde bulundurmanız gerekir. Bazı konuların yerine oturması için pratik ve ilişkilendirme gereklidir. Yani Js öğrenmeye başlamak için CSS uzmanı olmanıza gerek yoktur aslında. HTML ve CSS temel olarak kavrandıktan sonra JavaScript öğrenilmelidir. JavaScript sayfalara dinamiklik kazandıracaktır. Sayfaların mantıksal olayları da Js de yönetildiği için önceki adımlara kıyasla biraz daha karışık görünebilir. Bu noktada karışıklığı ortadan kaldırmak ve bu teknolojilere ek olarak gerçek bir Frontend geliştiricinin bilmesi gereken ileri düzey şeyleri de vakit kaybetmeden öğrenmek için yazılım geliştirme eğitiminden yararlanabilirsiniz. Online yazılım kursu aracılığıyla sonsuz öğrenme döngüsüne düşmeden hedef odaklı bir şekilde Frontend developer kariyerinize adım atabilirsiniz.
Frontend Developer Görevleri Nelerdir?
Görevlerinden bahsetmeden önce Frontend developer nedir bunu açıklamak gerekir. Frontend developer arayüzü geliştiren ve ona işlevsellik katan kişidir. Frontend developer’ın sorumlu olduğu birkaç konu vardır. Bu konulardan biri web sitesi tasarımı ve düzenidir. Tasarımcıdan gelen tasarımları iyi bir şekilde koda aktarması gerekir. Geliştiricinin Mockup ve Wireframe’lere bakarak kodu tasarıma dökerken nasıl ilerleyeceğini bilmesi gerekir. Proje kurgusunu iyi anlamalıdır. Renkler, yazı tipleri ve aralıklar gibi özellikler genel konseptin bütünleşmesi açısından tutarlı olmalıdır. Görsel yönleri oluştururken JavaScript ile dinamiklik kazandırmalıdır. Frontend geliştiricinin bir başka görevi de tasarımların farklı cihazlara ve ekran boyutlarına duyarlı olmasını sağlamaktır. Web sitesinin duyarlılığını test etmeli ve gerekli düzenlemeleri gerçekleştirmelidir. Yaptığı sitenin kodlarının Chrome, Firefox, Safari ve Edge gibi tarayıcılarda tutarlı bir şekilde çalıştığından emin olmalıdır. Proje gereksinimine göre farklı çerçeveler ve kütüphaneler üzerinde bilgi sahibi olmalıdır.
Frontend Programlama Dilleri
Web sayfalarının ön yüzlerini oluştururken kullanılan programla dilleri Frontend dilleri olarak adlandırılabilir. Şimdi en yaygın kullanılan Frontend yazılım dilleri genel hatları ile inceleyelim. HTML sayfanın ana yapısını oluşturmak için kullanılır ve sayfanın öğelerini tanımlar. CSS sayfaların öğeleri üzerinde stil özelliği ataması yapmayı mümkün kılar. CSS atanan farklı özelliklerle birlikte HTML elementlerini görsel açıdan şekillendirir. JavaScript web sitelerini dinamik ve kullanıcı etkileşimli yapmak için kullanılır. JavaScript’in bir başka alternatifi TypeScript’tir. Yazılan koda tip güvenliği ekler ve derleme aşamasında hataları ortadan kaldırmayı kolaylaştırarak kodun güvenilir bir hale getirir. Sass ve Less ise CSS kodunu organize ve yönetilebilir hale getirir. Bu teknolojiler değişkenler aracılığıyla kod tekrarını azaltırlar.
KAYNAKÇA Lindley, C. (2018). What Is a Front-End Developer? https://frontendmasters.com/guides/front-end-handbook/2018/ CoderSpace. (n.d.). Front-End. https://coderspace.io/sozluk/front-end de Voorhoede. (n.d.). How Front-End Works. https://www.howfrontendworks.com/ Clark, J. (n.d.). Front-End Programming Languages. https://blog.back4app.com/front-end-programming-languages/