Web Geliştiricileri İçin Yol Haritası: Full-Stack Web Developer Nasıl Olunur?

Bu aralar Web geliştiriciliğine de meraklandığım için Web programlama ile alakalı rehberleri araştırmaya başladım. Her ne kadar önceden bir Web programcılığı geçmişim olsa da Web programcılığını bıraktığım 2012’den beri Web teknolojilerinde ciddi bir gelişmenin yaşandığını gördüm. Artık eski bilgilerle çok da bir şey yapmanın imkanı yoktu. Web sürekli gelişen ve son yıllarda gelişme hızı en yüksek olan sektörlerden biri olduğu için birkaç yıl öncesinin lider teknolojisi bile günümüzde tarih olabiliyor. Bu durumda ben de sıfırdan öğrenen biri olarak kendime yol haritası aramaya başladım.

Öncelikle belirtelim ki benim zamanımda Türkçe kaynaklar oldukça kısıtlıydı. İnternette neredeyse hiç bilgi bulamazdınız. Günümüzde ise bu durum çok değişmiş değil. Birkaç basit blog yazısı ve Youtube videosu hariç Türkçe internet kaynağı bulmamız mümkün değil. Bu Youtube videolarının bazılarının eski bazılarının ise oldukça basit seviyede olduğunu söyleyebiliriz. İngilizce kaynaklarda ise durum çok çok farklı. Kaliteli Youtube videolarının yanı sıra pek çok eğitim sitesi de mevcut. Türkçe kaynakların kalitesini beğenmediğim için bu alanda da Türkçe kaynak yazmak bana düşüyor diye düşünüyorum.

Web programcılığına dair Türkçe bir rehber yazarak konuya başlayalım. Bu rehberi pek çok kaynağı bir araya getirerek hazırlıyorum. İlgili kaynakları kaynaklar bölümünden görebilirsiniz.

Web de nereden çıktı?

Ben gömülü sistem geliştiricisi ve alt seviye (donanım seviyesi) çalışan biri olarak Web’e ilgi duymam bazıları için tuhaf karşılanabilir. Aslında ben programcılığa Web ile başlayan ama ihtiyaçlar doğrultusunda gömülü sistemlere ve donanıma kayan birisiyim. Günümüzde ise Web teknolojileri yazılım sektöründe bir numara ve artık pek çok yazılım Web tabanlı olarak yürütülüyor. Pek çok masaüstü yazılım Web tabanlı yazılıma evrildiği gibi Web tabanlı yazılımlar mobil sektörde de kullanılmakta. Artık tarayıcıyı açıp online FPS oyunu oynamanız bile mümkün. Hatta Javascript tabanlı DOS emülatörleri bile mevcut. Bu kadar gelişen bir teknoloji aynı zamanda gömülü sistemler ile de “Nesnelerin İnterneti” teknolojisi ile bağ kurmakta. Üstelik Web programcılığının önemli bir tarafı ise yüksek seviye diller, kütüphaneler, uygulama geliştirme arayüzleri gibi bize yardımcı olan araçların kullanılmasıdır. Ben gömülü sistemler üzerine kafa yorduktan sonra Web’i çocuk oyuncağı gibi görmekteyim!.

Nereden Başlamalı?

Öncelikle yola çıkmadan önce kendi yolunuzu seçmeniz gereklidir. Web teknolojilerin üç ana çalışma alanı vardır. Front-end, Back-end ve Full-Stack geliştiricilik. Front-end geliştiricilik ön yüz ile ilgilenir ve eskiye nazaran günümüzde daha zor ve teferruatlı olmasının yanı sıra daha da önem kazanmıştır. Back-end ise sunucu tabanlı geliştiricilik olup işin arka planı ile ilgilenir. Bunun içerisinde ayrı bir iş olan veri tabanı programcılığı da vardır genellikle. Full-stack (Tam donanımlı) Web geliştiricisi ise front-end ve back-end teknolojilerinin ikisini de öğrenmiş hem ön yüzde hem de perde arkasında geliştiricilik yapabilene denir.

Eğer tek kişilik dev kadro olmak istiyorsanız, kendi işimi kendim yapabileyim diyorsanız siz tam donanımlı Web geliştiricisi olmalısınız. Eğer büyük firmalarda belli bölümlerde çalışmak istiyorsanız sadece front-end veya sadece back-end öğrenebilirsiniz. Ama full-stack olmak her zaman için daha avantajlı olacaktır. Eğer aranızda front-end veya back-end olmak isteyen varsa bu dediklerimizin yarısını öğrenmeli ve o alana daha da yoğunlaşmalıdır. Ben full-stack olmayı tercih ettiğim için bundan sonra yazdıklarımı da bu alana göre yazacağım.

Önce Front-End mi Back-End mi?

Biz gömülü sistemlerde önce donanımı (devre kartı veya cihazı) sonra donanım üzerine yazılımı yaparız. Çünkü donanım olmadan yazılım bir anlam ifade etmeyecek, yazılımı deneyeceğimiz bir ortam da olmadığından bazen yazılım yazma imkanımız bile olmayacaktır. Web geliştiriciliğinde ise önce front-end teknolojilerini öğrenerek bir Web sitesi yapmayı öğrenirsiniz. Sonrasında back-end’e geçerek bu front-end site üzerinde çalışırsınız. Back-end olmadan da site yapmak mümkündür. Ama front-end olmadan sadece back-end ile site yapmak mümkün değildir. O yüzden biz front-end teknolojileri ile işe başlarız. Günümüzde de front-end daha fazla önem kazanmış ve sitenin ön yüzleri daha çok değerlendirilir olmuştur. Aslında kimse sizin arka planda ne yazdığınız ile ilgilenmez. Ama siteye koyduğunuz ufak bir resim bile göze batar.

Front-End’in 3 Dili

Web programcılığına başlamak için öncelikle front-end’den başlamanız gerektiğini biliyorsunuz. Front-end geliştiriciliğe başlamak için ise front-end’in üç temel dilini öğrenmeniz gerekli. Bunlar HTML, CSS ve Javascript dilleridir. Diğer bütün teknolojiler, frameworkler, kütüphaneler bunlar üzerine kurulmuştur. O yüzden bu üç temeli öğrendikten sonra diğer geri kalanlar sizin için araç mahiyetinde olacak ve işinizi kolaylaştıracaktır.

HTML, HyperText Markup Language ifadesinin kısaltmasıdır. Bir programlama dili değil bir işaretleme dilidir. Web sayfalarının iskeletini oluşturur. Örneğin bu makaleyi yazarken benim kullandığım kalın veya italik yazılar HTML etiketleri vasıtasıyla belirtiliyor. Bunun gibi nereye resim ekleneceği, nerede tablo olacağı, nerede başlık, nerede çerçeve olacağı gibi konular HTML’ye girmektedir. HTML ile internet sayfasına elementler eklenir ve içerik biçimlendirilir.

CSS, Cascading Style Sheets yani Basamaklı Biçim Sayfaları yine HTML gibi bir işaretleme dilidir. Buna biçimlendirme dili de diyebiliriz. CSS’de bazı değişkenler ve bu değişkenlerin parametreleri vardır. Değişken olarak ifade ettiğimiz değerlere kendisi property (özellik) adını verir. Örneğin yazı rengi, arka plan rengi, yazı boyutu, yazı fontu, yazı biçimi, kenar aralıkları, kenar kalınlığı, kenar rengi, metin hizalaması, saydamlık, görünürlük gibi pek çok özellik CSS’in kendisinde property olarak kayıtlıdır. Siz bu değişkenlere değer atayarak biçimlendirme yaparsınız ve bunu HTML elementleri ile ilişkilendirirsiniz. CSS internet sitesinin ince işçiliği, makyajı ve süsüdür. CSS olmadan HTML ile yapılmış siteler renkten, biçimden ve estetikten uzak düz yazı gibidir. CSS ile binlerce tema, şablon ve tasarım meydana gelmektedir. HTML olmadan CSS olmaz, CSS olmadan HTML olsa da iyi görünmez. O yüzden HTML’yi ayrı CSS’i ayrı olarak ele almamak gerekir. İkisi birbirinden ayrılmaz parçalardır.

Javascript, Bu dil aynı bir programlama dili gibi aritmetik ve mantık operatörlerine, değişkenlere ve fonksiyonlara sahiptir. Dilin yapısını incelediğinizde bir C++ veya Java’dan çok da farklı olmadığını göreceksiniz. Javascript dili her ne kadar bir istemci tabanlı script dili olarak tanımlansa da Unity gibi oyun motorlarında ve Node,js ile sunucu tabanlı olarak da kullanılmaktadır. Eskiden Javascript’in ününü açıkcası pek duyamazdık. Günümüzde Javascript üzerine geliştirilen araçlar ile (framework) dilin uygulanabilirliği oldukça artmıştır. Unutmayın! Javascript, HTML ve CSS gibi bir işaretleme dili değil bir script yani programcıkların yazıldığı bir dildir. Programlama dillerine (Özellikle C, C++, Java) yabancı olmayanlar için oldukça kolay ve yüksek seviye bir dildir. Programlama dillerine yabancı olanlar ise algoritma ve programcılık mantığı üzerine biraz kafa yormalı. Javascript özetle bizim internet sayfalarımızı bir kitap sayfası gibi sabit bir sayfa olmaktan çıkarıp dinamik, etkileşimli ve hareketli sayfalar haline getirmektedir. Önemli bir nokta ise bunu istemci tabanlı yapmasıdır. Yani program kodu sunucudan sizin bilgisayarınıza gelir ve tarayıcının Javascript makinesi (interpreter) tarafından çalıştırılır. Javascript HTML ve CSS kodları ve parametreleri üzerinde değişiklik yapabilir.

Kısacası front-end teknolojilerinde öncelikle öğrenmeniz gereken üç ana dil vardır. Bunlar sıfırdan başlayanların öğrenmesi gereken ilk konulardır. Şu üçünü çok iyi bilmeniz gerektiğini aklınızdan çıkarmayın ve bir yere not edin.

  • HTML
  • CSS
  • Javascript 
Front-End Kütüphaneleri

Front-end teknolojilerinde CSS, Javascript gibi diller üzerine yazılmış pek çok kütüphane bulunmaktadır. Artık bu kütüphaneler günümüz Web programcılığının olmazsa olmazlarındandır. Artık bu kütüphaneleri kullanmayan site yok gibidir diyebiliriz. Bu kütüphaneler sizin oturup saatlerce yazacağınız kodu beş dakikada yazıp hemen siteyi hazır etmenizde size yardımcı olmaktadır. Dikkat edin, kütüphaneler bilmeden, emek harcamadan boş bir adamın da geliştiricilik yapması için değil geliştiricilerin gereksiz yere emek ve zaman harcamasının önüne geçmesi içindir. Kısacası siz yukarıda bahsettiğimiz üç dili çok iyi bildikten sonra hem yeni teknolojileri kullanma adına hem de işinizi kolaylaştırma adına bu kütüphaneleri kullanabilirsiniz. Bu kütüphaneleri şöyle sıralayabiliriz.

Paket Yöneticileri: Bu paket yöneticileri vasıtasıyla çeşitli kütüphane, kod ve dosyayı elde edebilirsiniz. Günümüzde en popüleri tartışmasız npm sonrasında ise yarn yöneticisidir.

CSS Frameworkleri : Framework kendisini kullanarak bir uygulama yapabileceğiniz, içinde eksik bir şey bulunmayan, tam teşekküllü bir kütüphane veya kütüphane kolleksiyonu demektir. Bu kütüphaneleri kullanarak hem zamandan tasarruf sağlarsınız hem de yılların tecrübesiyle ancak yapabileceğiniz şeyleri 2 satır kod yazmakla yapabilirsiniz. Biz gömülü sistemlerde hazır kütüphane kullananlara kızsak da Web geliştiriciliğinde hız ve verim çok önemli olduğundan hazır kütüphane kullanmak hayat kurtarıcıdır. Hangi alanda olursa olsun eğer bir kişi kullandığı kütüphanenin kodlarını anlayabiliyor ve yeri geldiğinde değiştirebiliyor ise kütüphane kullanmasının bir sakıncası yoktur. Biz işin derinini bilmeden bilinçsizce kütüphane kullanımını eleştiriyoruz. CSS Frameworkleri Bootstrap, Meterialize CSS, Bulma ve Semantic UI olarak özetlenebilir.

CSS Mimarileri : BEM, OOCSS, SMACSS

Front-End Frameworkler: Günümüzde en popülerleri React.JS, Angular.JS ve Vue.JS ve Jquery’dir. Yukarıda saydığımız kütüphanelerle bu kütüphanelerin hepsini öğrenmenize gerek yok. Birini öğrenmeniz başta yeterli olacaktır.

Front-end’de öğrenmeniz gerekenleri bu şekilde özetlesek de makalenin kaynaklar kısmını mukakkak inceleyiniz. Orada daha ayrıntılı bilgiyi bulabilirsiniz. Aşırı ayrıntıya kaçmamak için sadece önemli konulara değindim.

Back-End Geliştiricilik

Ne zaman back-end desem hatrıma lisede notepad üstünde yazdığım PHP kodları gelir. Evet, o zamanlar bir virgülü unutursak sınavdan sıfır alıyorduk. O yüzden hatta Web geliştiriciliğinden soğumuş ve PHP dilini pek iyi anmaz olmuştum. Bunun gibi Visual Basic ile ASP.NET, MySQL gibi teknolojileri de zamanında öğrensem de o zamanlar front-end kolay olduğu için back-end zor gelmekteydi. Elbette 7-8 yıl öncesinden bahsediyorum. Şimdi baktığımda back-end daha kolay görünmekte. Front-end teknolojileri gelişse de back-end’de çok fazla şeyin geliştiğini göremiyoruz. Back-end’i kısaca özetlememiz gerekirse kendinize bir dil seçiyorsunuz ve bu dil veri tabanından veri alıp veri tabanına veri yazmakta ve kullanıyıcıya da HTML dosyaları üretmekte. Aslında yapmanız gereken belli başlı işlerin olduğunu ve genel itibariyle çok da değişmediğini görebilirsiniz.

Ama bazı servislere baktığımızda bunların arkasında büyük bir back-end yazılımı olduğunu görürüz. Örneğin Google, Youtube algoritması, Facebook yapay zekası gibi oldukça göze batan teknolojiler back-end ile yapılmaktadır. Şimdi sunucu tabanlı programlamanın dillerine bakalım.

  • Node.js
  • Java
  • Python
  • Ruby
  • PHP
  • C#(.NET)

Bu dillerden günümüzde ne yeni ve revaçta olanı Node.js’dir. PHP her ne kadar popüler olsa da günümüzde eskimeye başlamıştır. Python ise popüler ve gittikçe popülerleşen bir dildir. PHP’nin zor yapısının eseri bu dilde yoktur. .NET teknolojileri ise günümüzde eskide kalmış ancak eski geleneklerini sürdüren firmalar tarafından kullanılmaktadır. Bir de bu back-end teknolojilerle beraber bir veri tabanını da kullanmanız gerekcektir. Bu durumda günümüzde en iyi ikilinin Node.js + MongoDB olduğunu söyleyebiliriz. Bir klasik olan PHP ve MySQL ikilisini de kullanabilirsiniz. Ayrıca front-end’de olduğu gibi back-end geliştiricilikte de dillerin frameworkleri vardır. Bunları kullanmayı ihmal etmemek gerek. Veri tabanı teknolojilerini ise şöyle sıralayabiliriz.

  • Oracle
  • MySQL
  • MariaDB
  • PostgreSQL
  • MSSQL
  • MongoDB
  • RethinkDB
  • Cassandra
  • Couchbase

Benim burada şahsi tercihim en popüler ve yeni veri tabanlarından MongoDB yönünde olacaktır. Bir klasik olan MySQL’i de unutmamak gerekir elbette.

Türkçe Kitaplar

Okuyucuların Türkçe kitaplara karşı önyargılı olduğunu biliyorum. Emin olun bir yazar olarak benim öryargım sizinkinden fazla. Çoğu Türkçe kitap sırf yazılmak için yazılmış ve okura neredeyse hiç faydası dokunmuyor. Ama araştırmalarım sonucunda iki güzel kitap buldum ve bunları sizlere tavsiye ediyorum.

Yeni Başlayanlar İçin HTML5 & CSS3 – Fahrettin Erdinç

Kitap yani başlayanlara yönelik, güzel bir anlatıma sahip ve HTML ile CSS konusunu kapsamlı bir şekilde ele alıyor. Kitabın öğreticiliği gayet yüksek.

A’dan Z’ye Yeni Nesil Tekniklerle Web Tasarımı ve Web Programlama – Uğur Gelişken

Bu kitapta pek çok kitap olacak konu yer almakta. Örneğin HTML5, CSS, Javascript, Bootstrap, PHP gibi konular tek kitap altında toplanmış. Bu durumda “El Kitabı” sorunu meydana gelmekte. Yani konular yüzeysel olmakta fakat yazar bunu anlatımı ve tecrübesi ile telafi etmiş durumda. Yani kitabı elinize aldığınızda referans kılavuzlarının kötü bir özetini değil sade bilgilerle eğiticiliği yüksek bir kitabı elinize alıyorsunuz. Bu kitap da giriş seviyesine hitap etmekte.

Eğer İngilizceniz yoksa önceden dediğimiz gibi internette Türkçe kaynak sayısı çok az ve yetersiz. Bu kitapları alıp okumanız size çok şey katacaktır. İlerleyen zamanlarda size tavsiye ettiğim İngilizce kitaplar hakkında bir makale yazacağım.

Ben Nasıl Öğreneceğim?

Yazımın sonunda ise kendime çizdiğim yol haritasından bahsediyorum. Bu süreçte her konuda olduğu gibi bilgimi saklamadan size yardımcı olmaya çalışacağım. Şu an HTML, CSS ve Javascript’in çoğu kısmını halletsem de bunun ince ayrıntıları kaçırmamaya çalışıyorum. Çünkü bütün teknolojiler bu üç temelin üzerine bina edildiğinden bunları yüzeysel olarak bilip diğerlerine geçersem geri dönüp tekrar öğrenme ihtiyacı duyacağım zamanlar gelecektir.

Bunun için İngilizce kitapları arşivlesem de aynı zamanda referanslara, standartlara ve videolu eğitimlere bakmaktayım. Udemy, Coursera ve edX gibi platformlardaki eğitimler görsel olarak pratik kazandırmaya da yönelik nitelikte. Aynı zamanda Traversy Media gibi Youtube kanalları da uygulamalı olarak pek çok konudan bahsetmekte. Yine de ben her zaman olduğu gibi kitaplara ağırlık vermekteyim. W3Schools sitesi çok derin bilgi içermese de bir referans niteliğinde. Yine https://htmlreference.io/ sitesi de güzel bir referans olarak karşımıza çıkmakta.  Bütün faydalandığım kaynaklar İngilizce olsa da zor bir dilde yazılmamış. Siz de basit bir arama ile diğer İngilizce kaynakları bulabilirsiniz.

HTML, CSS ve Javascript’i çok iyi bildikten sonra front-end frameworklere yöneleceğim ve yukarıda saydıklarımı öğrenmeye başlayacağım. Sonrasında ise back-end için Node.js ve MongoDB’yi düşünmekteyim. Bu süreç içerisinde çıkacak pek çok ayrıntıyı ise zamanı geldiğinde açıklayacağım.

Kaynaklar,

 

Bizi Facebook grubumuzda takip etmeyi unutmayın. Bilgili ve öğrenmeye hevesli bir topluluk oluşturmak istiyoruz.

https://www.facebook.com/groups/1233336523490761/

Gökhan Dökmetaş

"Arduino Eğitim Kitabı" ve "Arduino ve Raspberry PI ile Nesnelerin İnterneti" kitaplarının yazarı. Başkent Teknoloji ve Dedektör Merkezi'nde Ar-ge Sorumlusu. Araştırmacı-Yazar.

1 Response

  1. Mesut dedi ki:

    Merhaba. Sitenizi çok faydalı buluyorum. Youtube kanalınızda AVR dersleri oluşturma imkanınız varsa büyük bir eksiği gidermiş olursunuz. Çok teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.