Bir ön-yüz geliştiricisinin yol haritası

“Öğrenmeye nereden başlanmalı?”

Bir ön-yüz geliştiricisinin görev tanımı, kullanıcının etkileşime girdiği ön-yüzün HTML, CSS ve JavaScript teknolojilerini kullanarak geliştirilmesini sağlamaktır. Bir web sitesinde gördüğünüz tipografik düzenler, nesneler, animasyonlar, düğmeler hepsi bir/birkaç ön-yüz geliştiricisinin eseridir. Web sitelerini bir insan olarak düşleseydik ön-yüz (front-end) vücudunu ve giysilerini; arka-yüz (back-end) ise organlarını ve damarlarını oluştururdu.

“Sanat dünyayı kurtaramaz ancak daha estetik bir görünüm kazandırabilir.”

2017 yılında, bir ön-yüz geliştiricisinin günümüzün gelişen teknolojilere ayak uydurabilmesi için öğrenmesi/bilmesi gereken birçok teknoloji var. Bu metodoloji yazısının amacı, yeni başlayan/ilgilenen arayüz geliştiricilerine bir yol haritası minvalinde olabilmek.


01. HTML5

HTML (açılımıyla Hyper Text Markup Language) web sitelerinin iskeletini oluşturmakta kullanılan betik bir işaretleme dilidir. Web sitesine herhangi bir görsellik katamadığı gibi, işlevsel olarak da kullanılamaz. Bu neticeyle bir programlama dili değildir. CSS, JavaScript gibi stil şablonları ile görsellik ve işlem kazandırılmadığı sürece hiçbir işlev göremez. Ancak olmazsa olmazdır, bir web sitesi HTML kaynak kodları olmadan asla çalışamaz.

HTML5 ise, HTML’in günümüz web teknolojilerinin ihtiyaçları göz önünde bulundurularak geliştirilmiş son versiyonudur. Klasik HTML’ye göre daha komplike, işlevsel ve gelişmiştir.

1989 yılında, CERN laboratuvarlarında Tim Berners-Lee tarafından geliştirilmiştir.

İleri Okumalar


02. CSS3

CSS, (açılımıyla Cascading Style Sheets) web sitelerinin stil şablonunu oluşturmayı sağlayan bir işaretleme dilidir. Tipografi, renk biçimlendirme, öge boyutları, gölgelendirme gibi aklınıza gelebilecek bütün stil işlevleri CSS ile sağlanır. Web sitelerini bir insan bedeni olarak düşleseydik; HTML vücudu, CSS ise giysileri oluştururdu.

CSS3 ise, CSS’in önceki sürümlerinin üzerine geliştirilmiş son versiyonudur. CSS3 ile birlikte gölgelendirme, ovalleştirme, opaklık, animasyon efektleri, geçişler, 2B ve 3B dönüşümler, web fontları gibi yenilikler dahil olmuştur.

Ek olarak CSS için SASS, LESS ve Stylus olmak üzere üç farklı adet derleyici geliştirilmiştir. Büyük çaplı projeler için olmazsa olmaz olan derleyiciler, projelerin kod satırını olabildiğince azaltmayı ve zaman kazandırmayı hedeflerler.

1996 yılında, Håkon Wium Lie tarafından W3C araştırma kampüslerinde geliştirilmiştir.

A) SASS

SASS (açılımıyla Syntactically Awesome Style Sheets) Ruby dilini kullanan, web sayfası tasarlarken CSS’in içerisinde bulunmayan özellikleri kullanmamıza müdahil veren bir CSS derleyicisidir. İçerisinde birisi SASS, diğeri ise SCSS olmak üzere iki adet sentaks barındırır. İkisinin arasındaki hemen hemen tek fark söz dizimleridir.

SASS sayesinde CSS içerisinde değişken tamamlayabilir, projeniz boyunca kullanabilirsiniz. Diyelim ki bir web sitesi oluşturuyorsunuz, sitenin genelinde Open Sans fontunu kullandınız. Ancak revizyona gönderdiğinizde Open Sans’i beğenmediklerini, onu Helvetica ile değiştirmek istediklerini söylediler. Bu durumda SASS kullanmayan bir arayüz geliştiricisi tek tek Open Sans fontları Helvetica’ya çevirmek durumundadır, ancak SASS ile değişken tanımlayıp tüm fontları tek bir kabuktan yönettiğiniz takdirde tek bir değişim ile tüm fontları etkileyebilirsiniz.

Bu durum yalnızca fontlar için değil, CSS’de yer alan her türden stil ögesi (kenarlık, renk, gölge vs…) için geçerli. SASS, en kısa tanımıyla büyük projelerde zaman kazandırmaya yönelik bir CSS derleyicisidir.

B) LESS

LESS, yine Ruby ile geliştirilmiş bir CSS derleyicisidir. Özellikleri SASS ile aynı olmakta birlikte, temel fark sentaksıdır. Ancak LESS’in SASS’e göre en temel artısı, kurulum ve kullanımının yalınlığı. SASS’ın kurulumunda yüklemeler yapmanız gerekirken LESS için yalnızca bir kod çağırmanız yeterli oluyor. Her iki derleyici de CSS yazımınızı büyük ölçüde kolaylaştıracak, proje üretim hızını arttıracaktır.

C) Stylus

Stylus, dinamik CSS yazımını bir ileri seviyeye taşıyarak tam anlamıyla “daha az kod yazmanızı” sağlamaktadır. SASS ve LESS, CSS’in getirisi olan işaretleri kullanırken Stylus bu konuda epey özgürlük vermekte.

body {padding: 10px 5px;} gibi standart CSS yazımı yerine, body padding 10px 5px gibi bir kullanımda bulunmanıza opsiyon tanımakta. Süslü parantezler, iki nokta üst üsteler, noktalı virgüller olmadan olabildiğince yalın bir kod yazabiliyorsunuz.

D) Bootstrap

Bootstrap; LESS, SASS ve Stylus’dan ayrı olarak bir derleyici değildir. CSS’in ızgara sistemini kullanan popüler bir kütüphanedir. Duyarlı tasarımlar geliştirmeye yarayan Bootstrap, web sitenizin telefon, tablet ve masaüstü platformlarında olan görüntüsünü düzenler. Ayrıca web sitenizin tarayıcılara (Google Chrome, Mozilla Firefox, Opera) olan uyumluluğunu sağlar. Keza Google Chrome’un destek verdiği bir animasyon özelliği, Opera’da bozuk çalışabilir.

İleri Okumalar


04. JavaScript

JavaScript, Nescape firması tarafından geliştirilmiş olan dinamik bir programlama dilidir. Etkileşime sahip web siteleri oluşturmanıza imkan veren JavaScript, senaryo bütünlemesiyle işler; etkileşimin olması için bir olayın olması gereklidir. Örneğin kullanıcının bir yere tıklaması, bir tuşa basması, bir şey sürüklemesi olabilir.

JavaScript’in temel işlevi, HTML ve CSS ile oluşturulan web sitelerine dinamizm katmaktır. Bir tuşa bastığınızda açılan pencere, bir düğmeye tıkladığınızda gösterilen yazı bunlara örnektir.

İsim benzerliği nedeniyle sürekli Java programlama dili ile karıştırılmakta ancak hiçbir alakaları olmamaktadır.

1995 yılında, Brendan Eich tarafından Netscape laboratuvarlarında geliştirilmiştir.

A) jQuery

Sloganı “az kod, çok iş” olan jQuery, aynı işi daha az kod satırıyla yapabilmenize olanak veren bir JavaScript kütüphanesidir. Yapısı kod uzunluğunu azaltarak JavaScript yazma işini hızlandırmaya, kolaylaştırmaya yöneliktir. Geniş kod kütüphanesi, güçlü açık-kaynak topluluğu, gelişmiş dokümantasyonları, AJAX entegrasyonu gibi avantajlarıyla dünya üzerinde en çok tercih edilen kütüphanelerden birisidir.

Ancak bunca artısının yanında; SEO ile uyumda sıkıntılar çıkartabilmesi, geriye dönük uyumluluğun olmaması, bant genişliğine bağlı olarak yavaş çalışması, fonksiyonelliğinin sınırlı olması, tarayıcı uyumlarında stabilite sorunlarına yol açabilmesi gibi eksileri büyük projelerde tercih edilmemesine sebep olmaktadır.

İleri Okumalar


05. Sürüm Takip Sistemleri

Programcılar için bir mihenk taşı öneminde olan sürüm takip/kontrol sistemleri, büyük çaplı projelerde çalışan programcıların senkronizasyonu için oldukça önemlidir. Kodlamada yapacağınız değişiklikler, birden fazla yazılımcının çalışması, otomatik versiyon kaydı alma gibi özellikleri sayesinde projeler için olmazsa olmazdır.

Sürüm takip sistemleri arasında başlıca Git ve SVN olmak üzere iki büyük alternatif bulunuyor. Doğal olarak ikisininde birbirine göre artıları, eksileri var. Diğer alternatifler olan Mercurial, Perforce ve Bazaar’ın kullanımı günümüzde neredeyse yok denilecek kadar az. Bu yüzden en popüler iki sistem, Git ve SVN’e değinelim.

Git, 2005 yılında Linus Torvalds tarafından geliştirilmiştir.

A) Git

Git, kısa süre içerisinde yazılımcıların vazgeçilmezleri arasına giren bir sürüm/versiyon kontrol sistemidir. Yazdığımız projeleri internet üzerinde tutmamızı ve yönetmemizi sağlayan bir platformdur.

Projenizi bilgisayar, harici disk veya bir bulut sisteminde tutuyorsanız başına bir şeyler gelmesi ihtimaline karşı her an yedekleme almanız gerekmektedir. Git, programcıları bu zahmetten kurtararak projenizin istediğiniz zaman, istediğiniz haline ulaşabilmenize olanak veriyor.

Ulaşmakla sınırlı kalmayıp, “kim; hangi tarihte, hangi dosyalar üzerinde, hangi açıklamayla, nasıl bir değişiklik yapmış” gibi birçok kaydı da otomatik olarak bünyesinde tutmakta.

Diğer sürüm takip sistemlerine nazaran en başlıca artısını çevrimdışı olarak da kullanılabilmesinden kazanıyor. Diğer sistemlerde proje merkezi bir yerde dururken Git sisteminde her kullanıcının bilgisayarında bir kopyası olur ve bu kopya sayesinde çevrimdışı olarak da geliştirilmeye devam edilebilir.

Verimlilik açısından da Git’in bir diğer özelliği, aynı proje üzerinde birden fazla kullanıcının eş zamanlı olarak çalışabilmesi. Bu özellik, kod birleştirme veyahut kod alışverişi yapılabilmesinin çetrefilliğini alıp, programcıların birbirleri ile daha senkronize çalışabilmesini sağlıyor.

B) SVN

SVN (açılımıyla Subversion) bir diğer sürüm takip sistemi alternatifidir. Git’in SVN’ye göre başlıca dezavantajları öğrenme sürecinin zorluğu, hata mesajlarının arkadaş canlısı olmaması, kurulumunun komplikeliği olarak görülmektedir. Ancak Git; performans hızı, SVN’ye kıyasla ön plana çıkan opsiyonları, IDE entegrasyonları sayesinde SVN’ye göre daha tercih edilen bir sürüm takip sistemidir.

İleri Okumalar


06. Paket Yönetim Sistemleri

Paket yöneticileri, projelere dahil edilen CSS ve JavaScript kütüphanelerinin daha kolay yönetilmesini sağlayan sistemlerdir. Kütüphanelerin kurulum, güncelleme, konfigürasyon ve kaldırılma işlemlerinin stabil bir şekilde yürütülmesini sağlarlar.

Bir JavaScript kütüphanesi olan Backbone.js’i kullandığınız farz edelim, Backbone çalışabilmesi için iki farklı kütüphaneye daha (jQuery ve Underscore) ihtiyaç duyar. Herhangi bir paket yönetim sistemi kullanmıyorsanız toplamda bu üç farklı kütüphaneyi tek tek elle yüklemeniz gerekir. Ancak paket yöneticileri sizi bu zahmetten kurtararak yüklediğiniz kütüphanenin yanında bütün bağımlı olduğu kütüphaneleri de otomatik olarak yükler.

Kütüphanelerin yalnızca yüklenme değil, son sürümünü barındırma görevini de yaparlar. Beş farklı kütüphane kullandığımızı düşünelim, her bir kütüphanenin yeni sürümü çıkmış mı diye sürekli araştırıp, elle yüklemek zaman kaybı olmaz mıydı? Aynı şekilde kütüphane kaldırma, düzenleme gibi opsiyonlarında tek bir yöneticiden yapılmasını sağlarlar.

Bower, Gulp, Grunt, Npm ve Webpack olmak üzere beş büyük paket yönetim sistemi bulunmaktadır.

Npm, Isaac Z. Schlueter tarafından 2010 yılında geliştirilmiştir.

A) Npm, Bower

Npm ve Bower yalnızca paket yöneticileridir. Görevleri yalnızca kütüphane kurulumu, güncellemesi, konfigürasyonu ve kaldırmasıdır. Diğer otomatikleştirme özellikleri Grunt ve Gulp gibi paketler sayesinde sağlanır. Npm, Node.Js modülleri için kullanılırken; Bower önyüz web teknolojileri (JavaScript, CSS…) için kullanılır.

B) Grunt, Gulp

Grunt ve Gulp belirlenen eklentileri çalıştıran bir yapıdadır, çalışmak için Npm’e ihtiyaç duyarlar. CSS dosyalarının küçültülmesi, imajların sıkıştırılması, artıkların temizlenmesi, grafiklerin optimize edilmesi, birden fazla dosyanın tek bir dosya haline getirilmesi gibi işleri otomatikleştirerek geliştiricilerin işini ziyadesiyle kolaylaştırırlar. Grunt ve Gulp için farklı ihtiyaçlara hitap eden bu tarz binlerce eklenti oluşturulmuştur.

C) Webpack

Webpack bir modül paketleyicisi/toplayıcısıdır, isminden anlaşılabileceği üzere modül toplama üzerine kuruludur. Projede kullanılan farklı yerlerdeki farklı kodları (örneğin bir yerde ES6, bir yerde CoffeScript, bir yerde LESS kullanılmış ve proje kazan gibi olmuş) tek bir çatı altında toplamaya yarar. Aynı işlevi Grunt ve Gulp’da görebilse de Webpack daha esnek ve güçlüdür, bu iş için biçilmiş kaftandır.

İleri Okumalar


Okuduğunuz için teşekkürler!