Web Developer Yol Haritası: Frontend Development

Bilgisayar bilimleri çok geniş bir alanda uygulamaları olan bir bilim dalıdır. Hatta bu alanlar o kadar fazla ki uzmanlaşmak istediğiniz bir alanı seçmeye kalkıştığınızda bu sizin için olumsuz bir durum bile yaratabiliyor. Bu yazımızda bilgisayar bilimlerinin uygulama alanlarından sadece birisi olan “web development” ve “web developer” kavramlarını ele alırken bir frontend (önyüz) web developer için “web developer yol haritası” çıkarmaya çalışacağız.

Web Development Nedir? Web Developer Kimdir?

web developer

“Web Development Nedir? Web Developer Kimdir?” sorularını hepimizin günlük hayattan aşina olduğu bir örnekle açıklamaya çalışacağız. Örneğin “Google” arama motoru çok sık olarak kullanılan ve internet aramalarının artık vazgeçilmezi haline gelmiş bir web sitesidir. İşte bu siteyi belli bir süreç içinde bu haline getirme işi web development, bu development işini yapan kişiler ise web developer olarak adlandırılır. Ancak web development süreci bilgisayar bilimlerinde uzmanlaşma gerektiren bir alt dal olsa da, bu alt dal da kendi içinde uzmanlaşmalar gerektirmektedir. Web developer yol haritası seçiminde gerekli olan bu uzmanlık alanları nelerdir?

Frontend Developer ve Backend Developer Kavramları

frontend vs backend

Örneğin “teknoloji.org” web sayfasının biz kullanıcılara hitap eden, yani web sayfasını açtığımızda bizim gördüğümüz bir tasarımı vardır. Bir de siz bir haberi ya da inceleme yazısını tıkladığınızda arka planda sizin istediğiniz haberi ya da yazıyı ekranınıza getirmek için yürütülen belki de binlerce satır kod parçası bulunur. Genel hatlarıyla tanımlamak gerekirse bu tasarım kısmı frontend (ön yüz); arkada yürütülen ve biz kullanıcıların göremediği kod kısmı ise backend (arka yüz) olarak adlandırılabilir. Yani frontend masaya gelen yemeğin servis ediliş şekliyse, backend için de bu yemeğin mutfakta hazırlanış süreci demek yanlış olmaz. Tabii ki her iki alanda da birtakım programlama dillerini bilmeniz gerekmektedir. Bu yazımızda siz değerli okuyucularımıza bir frontend web developer yol haritası çizmeye çalıştık.

Frontend Web Developer Yol Haritası

web developer frontend

Bir frontend developer olma yolunda öğrenmeniz gereken programlama dili ve teknolojilere göz atıyoruz. Burada bulunan bilgiler siz değerli okuyucularımıza bir fikir vermek için oluşturulan tanıtım amaçlı içerikler olup tanıtılan her programlama dili ya da teknoloji üzerinde detaylı bir çalışma yapılmalıdır.

1)HTML

Nasıl ki bir yapı inşa ederken önce onun temelini atmak gerekir, HTML de web sitesi oluştururken bir web developer’ın atacağı temeldir. Bir web sitesini düşündüğünüzde genel olarak üstte bir menü, altta site haritası ya da farklı bilgilerin yer aldığı footer bölümü vardır. Merkezde ise genel konsepte yönelik ürün ya da yazıların bulunduğu bir bölüm bulunur. Yani o sayfayı zihninizde nasıl tasarladıysanız onu ekranınıza dökmenizi sağlayan bir işaretleme dili denilebilir HTML için. HTML kullanarak web sayfanız için yazı, başlıklar, tablolar, fotoğraflar ya da butonlar ekleyebilirsiniz. HTML sizlere, değindiğimiz gibi bunları en temel haliyle ekleme imkanı sunar.

2)CSS

CSS bizlere HTML ile eklediğimiz başlık, tablo, fotoğraf, buton vb. yapılara stil kazandırmamızı sağlar. HTML ile evimizin temelini atıp iskeletini oluşturduktan sonra tabii ki bu evi estetik olarak daha hoş bir hale sokmak isteyeceğiz. Evimizin pencerelerinin rengi, büyüklüğü, bu pencerelerin evimizin tam olarak neresine konumlanacağı, evimizin dış ve içinin hangi renk olacağı ve buna benzer aklınıza gelebilecek her türlü detayın bir web sitesini tasarlarken uygulanabilmesi için bize lazım olan teknolojinin adı ise CSS’dir.  Özellikle günümüzde popüler olan ve bir CSS ön işlemcisi olan SASS, klasik CSS’i bir programlama dili havasına sokmuş ve kullanıcılara daha keyifli bir deneyim sunmuştur.

3)Javascript

Javascipt programlama dili bize HTML ve CSS ile oluşturduğumuz yapıları daha dinamik hale getirme imkanı sağlar. Örneğin HTML ile ekleyip CSS ile şekillendirdiğimiz bir butona tıklandığında yeni bir pencerenin açılıp bize bir mesaj vermesi bu programlama dili ile sağlanır. Yani bir anlamda web sayfanızı hareketli bir hale getiren, dinamizm katan özellikler için Javascript’e ihtiyaç duyarız.

Javascript; HTML ve CSS’ten farklı olarak çok geniş bir aileye sahiptir. Web development ile daha fazla içli dışlı olmaya başladığınızda “framework ” terimini çok sık duyacaksınız. Framework terimini, size ilgili dili daha kolay kullanmanız için birtakım hazır kod paketleri sunan çatı olarak tanımlamak mümkün. İşte Javascript ailesinin geniş olması bu framework sayısının fazlalığı ile alakalıdır. İlerleyen bölümlerde Javascript frameworklerinin neler olduğunu siz değerli okuyucularımıza açıklamaya çalışacağız. Ancak ilk olarak sizlerin öğrenmesi gereken Javascript dilinin saf hali diyebileceğimiz “Vanilla Javascript” olacaktır.

Web Developer Yol Haritası: Javascript Frameworkleri

web developer javascript frameworks

Javascript onlarca framework’e sahip olmasına rağmen, en popüler olan 3’ünü burada sizler için inceliyoruz:

comparison javascript frameworks
Grafik 22 Haziran 2020 tarihine kadar olan son 1 yıllık indirme sayısını göstermekte olup kaynağına buradan ulaşabilirsiniz.

1) Vue.js

Vue aşamalı bir Javascript framework’üdür. Diğerlerinden öne çıkan özelliği basit, anlaşılır ve dolayısıyla daha hızlı öğrenilebilir olmasıdır. Ayrıca bir diğer önemli nokta da VueJS’in mevcut bir projeye dahil edilmesinin kolay olmasıdır. Örneğin halen geliştirme süreci devam eden bir projeye VueJS dosyası dahil edilerek projeye devam etmek mümkündür. Bu bir web developer için önemli bir avantaj olarak göze çarpar. Ancak VueJS’nin çok fazla ünlü şirket tarafından kullanılmıyor olması onun dezavantajı olarak göze çarpar.

2) React

Belki de JS kütüphaneleri arasında en popüler olanı Facebook tarafından geliştirilen React demek yanlış olmaz. React kendi sitesinde şöyle tanımlanır: “Interactive UI tasarımlarını acısız bir şekilde yapmanızı sağlar”. Öğrenmesi diğer frameworklere oranla zor olsa da öğrenildiğinde daha üst seviye kullanıcı arayüzü oluşturma konusunda keyifli bir deneyim sunar. Bunun en önemli kanıtı Airbnb, Walmart Labs, Tesla, BBC, Netflix, Dropbox, Coursera, IMDb, PayPal, Dailymotion, Chrysler, American Express, Khan Academy, Lyft, Atlassian, New York Times, Reddit ve ismini listeye sığdıramayacağımız daha birçok ünlü şirket ve girişimin bu framework’ü kullanıyor olması desek hata etmiş olmayız.

3) Angular

Angular, Google tarafından sağlanan bir JS kütüphanesidir. Vanilla JS’in farklı bir versiyonu olan TypeScript kullanır. Öne çıkan özelliği, kullanıcıya birçok hazır uygulama sunmasıdır. Bu sayede React kadar çok kod yazmayı gerektirmemesi bir avantaj olarak göze çarpar.

Sonuç olarak, yazımızı sizler için özetlemeye çalışalım. Öncelikle kendinizi frontend tarafında geliştirmek istiyorsanız ilk öğrenmeniz gereken HTML olmalıdır. Daha sonra CSS öğrenmelisiniz. Sonrasında Javascript’in yalın hali olarak tabir edebileceğimiz “Vanilla Javascript” öğrenilmelidir. Aslında bu saydığımız programlama ve işaretleme dilleri web development için backend tarafında bir kariyer yapmak isteseniz dahi sizler için bir gerekliliktir. Temel seviyede bunları bilmek ve kullanmak zorundasınız. Sonrasında bir Javascript framework’ünde uzmanlaşmanız ise sizin sektörde bir frontend developer olarak yer edinmenizi sağlayacaktır.

Teknoloji'den geri kalmamak için e-posta listemize abone olun!

30'undan sonra Yazılım Mühendisliği öğrencisi...