Frontend Developer Yol Haritası

IT kariyerinize Frontend Developer olarak başlamak mı istiyorsunuz? İşte size tam kapsamlı yol haritası öyle ki bitirdiğinizde işe başvuruları yapmaya hazır hissedebileceğiniz bir klavuz.

Bu yazı bir yıldan az bir sürede yeni başlayan seviyesinde (Junior) nasıl Frontend Developer olunur, ne gibi bir yetenek seti gereklidir ve hangi sırayla öğrenilmelidir sorularına cevap vermek amacıyla hazırlandı.

Bu rehberin tek doğru olduğunu ya da mutlaka bu rehberi takip etmeniz gerektiğini iddia etmiyorum ancak motivasyonunuzu yüksek tutarak ve sabırla ilerlediğinizde yaklaşık bir yıl içinde bir Frontend Developer olarak iş bulabileceğinize inanıyorum.

Yol haritası sırası ve tavsiye edilen teknolojiler bu yazının yazıldığı 2022 Eylül ayı itibariyle hazırlandı. Aşağıda belirtilen sıra ve konular seçilirken Stackoverflow anketleri başta olmak üzere Linkedin gibi ünlü iş arama platformlarının iş tanımlarında (Job Description) en çok istenen yeteneklere de odaklanıldı. Öğrenmeye tabiki istediğiniz teknolojiden başlayabilirsiniz ama yeni başlayan biri iseniz sırayı takip etmenizi tavsiye ederim.

• Temel Bilgi Sistemleri...
• Frontend' ten önce Web' i Öğrenin
• Web'in Yapı Taşları, HTML ve CSS
• İlk Andan İtibaren Versiyon Kontrol - Git Öğrenin
• İlerlemeden Önce Biraz Pratik
• Programlama ve Algoritmalara Giriş
• İnteraktif Sayfalar Zamanı - Javascript Öğrenin
• Hatayı En aza İndirin - Test Öğrenin
• Paket Yöneticileri ve Server side - Node.js Zamanı
• Backend' i Anlamak, API
• Pratik ve pratik
• Siber Güvenlik mi? Elbette
• Bir Framework Seçme Zamanı
• Stil İşini Bir Adım İleri Taşıyın
• Daha güvenli kod tipleri - Typescript
• Optimize edilmiş ve gelişmiş API Sorguları - GraphQL

1. Temel Bilgi Sistemleri...

Temel bilgi sistemleri altyapısı (Computer Science) olmadan Frontend olmaz. Aslında hiçbir IT kariyer yolu olmaz. Hergün 6 saatten fazla kullanacağınız bilgisayar ve bilgisayar teknolojileri nasıl çalışır konusu ilk halledilmesi gereken husustur.

Genel olarak; bilgisayar bileşenleri nedir, API nedir ne işe yarar, yazdığımız kod bilgisayar tarafından nasıl işlenir, data ve data yapıları nedir, bilgisayar ağları (network) nasıl çalışır ve fonksiyon ne demektir gibi temel konular bu alan içindedir.

Bazıları bu konuları öğrenmenin zaman kaybı olduğunu düşünür ve doğrudan bir programlama dilini öğrenekrek başlamaya çalışır. Ancak burada harcayacağınız birkaç hafta zaman kaybı değildir. Bu kısmı hallettiğinizde ilerleyen bölümlerdeki teknik konuları anlamanızda nasıl sizi hızlandırdığını görünce niçin gerekli olduğunu daha iyi anlayacaksınız.

Elbette bu kısım işin ABC'si ve siz temeller konusunda yeterli bilgiye sahip olduğunuzu düşünüyorsanız burayı es geçip bir sonraki adıma ilerleyin ancak gerçekten yeni başlayan biri iseniz Harvard Üniversitesinin CS50 kursuna bir göz atabilirsiniz.

2. Frontend' ten önce Web' i Öğrenin

Başarılı bir Frontend developer olmak için geliştirme yapacağınız ortamın yani web 'in nasıl çalıştığını anlamak olmazsa olmazdır. HTTP, DNS, Cookie gibi kavramlar size yabancı olmamalıdır. Web aplikasyonları görüntülediğimiz browser nasıl çalışır, bir web sitesini nasıl görüntüler gibi sorular cevabını bulmuş olmalıdır. Bu nedenle yeni başlayanlar için web nasıl çalışır öğrenilmelidir.

3. Web'in Yapı Taşları, HTML ve CSS

Bir web aplikasyonu bir insana benzetirsek, HTML onun iskeletidir. Herşey HTML ile başlar.

Daha sonra ona iyi bir görüntü vermek istersiniz. İşte insanın derisi, saçı göz rengi yani dış görünüşü ne ise bir web sayfası için de CSS odur. CSS ile HTML elemanları stil kazanır. Kısacası bir web aplikasyonu cool yapmak istiyorsanız CSS' e ihtiyacınız var.

HTML ve CSS başlangıç için net ninja HTML & CSS kursu iyi bir alternatif.

4. İlk Andan İtibaren Versiyon Kontrol - Git Öğrenin

IT kariyer yollarından herhangi birini düşünün ki Git versiyon kontrol sistemi ana konulardan biri olmasın. Evet git öğrenmek opsiyonel değil gereklilik. Git açık kaynak, dağıtık versiyon kontrol sistemidir ve bugün yazılım dünyasında de-facto standart haline gelmiştir.

Git kodunuzun tarihçesini tutabileceğiniz, kodunuzu yedekleyebileceğiniz, takım halinde çalışırken çakışmaları ve tutarsızlıkları önleyebileceğiniz, istenmeyen değişikleri engelleyip değişik branşlarda çalışabileceğiniz muazzam bir versiyon kontrol sistemidir.

Git ile beraber çalışmalarınızı saklayacağınız repo (bir nevi yazılım deposu) kontrol sistemlerinden birini de öğrenmek akıllıca olur. En yaygın olan GitHub ile başlayabilirsiniz ama GitLab ve BitBucket da alternatifler arasında. Burdan başlayabilirsiniz.

5. İlerlemeden Önce Biraz Pratik

HTML, CSS ve git öğrenildiğine göre GitHub hesabımıza birkaç proje eklemek hem öğrendiğimiz becerileri uygulama şansı verir hem de portfolyömüzü zenginleştirir.

Öğrenilen bilgileri elde tutmak ve onları kendimize mal etmenin ilk anahtarı bol pratiktir. Bu pratik adımı CV'mizi zenginleştirmek adına da bir fırsat olarak kullanabiliriz.

Çünkü bir FrontEnd Developer olarak işe başvurduğunuzda ilk sorulacak şeylerden biri de sizin portfolyonuzdur. Tabiki bunları saklamak için en güzel yer git repolarınız. Bir önceki adımda onu öğrenmiştik şimdi kullanma zamanı. Daha yol uzun demeyin şimdiden başlayabilirsiniz. Sadece HTML ve CSS bilgisi ile görsel olarak güzel projeler yapabilirsiniz. tıpkı buradaki gibi.

6. Programlama ve Algoritmalara Giriş

Artık bir an önce bir programlama diline başlamak istiyorsunuz ve elbette FrontEnd için bu Javascript. Fakat bir dile başlamadan önce genel programlama terimleri ve algoritma temellerini öğrenmek yapbozdaki eksik parçayı tamamlar. Dilerseniz bu adımla bir sonraki adımı birleştirebilirsiniz. Ancak variables, types, loops, data structure, conditionals, functions, iterations, recursive . . .  gibi terimlerin sizin için yabancı olmadığından emin olun. Programlama giriş için bu kursu takip edebilirsiniz.

7. İnteraktif Sayfalar Zamanı - Javascript Öğrenin

Web sayfaları gücünü Javascript  'ten alır. Bir web sitesi düşünün ki Javascript içinde olmasın. Hatırlarsanız yukarıda web aplikasyonu bir insana benzetmiştik. Tıpkı insanın hareket etmesi, yürümesi ya da koşması gibi bir web applikasyonun da kendinden beklenen davranışları yapması Javascript ile mümkün olur.  Bir formun açılması, gönderilmesi, açılan bir sayfaya data'ların çekilmesi, sayfanızda Twitter'dan post eklenmesi ve daha aklınıza gelen tüm davranışlar Javascript ile yazılır.

Javascript' i öğrenmek için başka iyi bir nedeniniz daha var. Javascript FrontEnd geliştirmede kullanıldığı gibi Node.js programlama dili sayesinde Backend geliştirmede de kullanılır. Modern Javascript'e buradan bir başlangıç yapabilirsiniz.

8. Hatayı En aza İndirin - Test Öğrenin

Birçok kaynakta yazılım testi kısmı yol haritasının başında olmaz. Oysa bu adıma Javascriptle aynı numarayı, "7" numarayı verseydim yanlış olmazdı. Kodunuzu yazmaya başladığınız ilk andan itibaren Test yazmayı öğrenmeli ve kodunuzu test etmelisiniz. Yazılım testi ile ilgili olarak Unit test, Integration Test ve Functional Test gibi kavramları bilmeli ve aşağıda belirtilen test araçları ile bunları nasıl yazacağınızı öğrenmelisiniz.

Birçok test aracı olsa da başlangıç olarak mocha veya Jest test kütüphaneleri iyi bir seçim olabilir. Bunula birlikte test deneyiminizi bir adım daha ileri taşımak ve entegrasyon ve komponent testleri için Cypress veya Playwright frameworklerinden birini seçip öğrenebilirsiniz.

Bu adıma mutlaka zaman ayırdığınızdan emin olun ve Test Driven Development olarak bilinen Test güdümlü geliştirmeyi mutlaka öğrenin. Burdan başlayabilir ve öğrendikçe üstüne ekleyebilirsiniz.

9. Paket Yöneticileri ve Server side - Node.js Zamanı

Javascripten sonra kendinize yapacağınız en büyük iyilik Node.Js ve onunla birlikte npm paket yöneticisini öğrenmek olacaktır. Node.js Javascript ile Backend geliştirmede ve React, Vue Angular gibi frameworkleri build ve bundle (oluştur ve gerekklilikleri bağla) etmede kullanılır. Başlangıç için bir tutam Node.js

10. Backend' i Anlamak, API

Bunu özellikle ayrı bir başlık olarak vermek istedim. Bir FrontEnd developer olarak Backend Teknolojilerini tam olarak bilmeseniz bile anlayacak kadar öğrenmelisiniz. Backend başlı başına çok geniş bir konu olduğu için iki konu burada ön plana çıkıyor birincisi API, diğeri ise Data ve Database. İlşkisel veritabanı (Relational Database) için MySQL, döküman tip (NoSQL) veritabanı için ise MongoDB iyi bir başlangıç olacaktır.

11. Pratik ve pratik

Yaparak öğrenmek çok etkili bir öğrenme yöntemi. Buraya kadar öğrendijklerinizi sindirmek ve tekrar etmek için de en iyi yöntem. Artık Javascript ve API kullanmayı da bildiğinize göre birkaç proje geliştirme ve portfolyonuza ekleme zamanı. Bu nedenle basitten başlayıp daha interaktif sayfalara ve oradan da datanın kullanıldığı uygulamalara uzanan birkaç proje yapabilirsiniz. Fikir vermesi açısından birkaç proje:

• Landing Page
• Kullanıcı giriş formu (Registration Form)
• Alışveriş Sepeti
• Todo Aplikasyonu (CRUD)

Ayrıca buraya da gözatmak isteyebilirsiniz. Bu projeleri yaparken herhangi bir FrontEnd framework (Vue, React ya da Angular gibi) kullanmayın. Sadece vanilla Javascript kullanın.

vanilla Javascript:

Bu ifade kodun sade Javascriptle kullanıldığını herhangi bir kütüphane ya da çerçeve (framework) kullanılmadığını ifade eder.

12. Siber Güvenlik mi? Elbette

Web Güvenliği ile ilgili temel konuları bilmek ve bunları uygulamak bir FrontEnd Developer için istenen özellikler arasında. Sizden cybersecurity uzmanı olmanız istenmiyor fakat şu konularla ilgili farkındalık seviyesinde bilgi çok işinize yarar.

• HTTPS, SSL, TLS, SSH nedir?
• CORS nedir?
• OWASP Güvenlik Tavsiyeleri

13. Bir Framework Seçme Zamanı

Vanilla javascript kullanarak komple bir web applikasyon geliştirebilirsiniz. Ancak uygulamanız büyüdükçe kodunuzu sürdürmek, yeni ihtiyaçlara cevap vermek ve ölçeklendirmek giderek zorlaşacak ve çok zaman alacaktır. Bu nedenle FrontEnd kütüphanelerineya (library) da çerçevelerine (framework) ihtiyaç duyacaksınız.

Peki ama hangisi? Başlamak için seçenek çok ve hangisi sorusunun tek bir doğru cevabı yok. Bu kişiden kişiye, bulunduğunuz bölge ve ülkeye göre bile değişebilir.

Biz yine fikir vermesi açısından Stackoverflow 2022 en popüler framework' ler anketine başvurduğumuzda sırasıyla;

• React
• Angular
• Vue

üçlüsünün ilk sıralarda olduğunu görüyoruz. Angular IT endüstri standartlarında A-Z'ye bütün parçaları içinde komple bir framework' tür. Yeni başlayanlar için biraz karmaşık gelebilir ve Typescript (Javascript'in type kontrol eden versiyonu) öğrenmeden başlamak çok anlamlı olmayabilir.

React markette en çok iş ilanı bulunan ve en popüler FrontEnd kütüphanesidir. Aynı zamanda en çok kaynağı bulabileceğiniz seçenektir.

Vue ise giderek poülerliği artan ve öğrenilmesi en kolay (tartışmaya açık görüşümüz 😄) FrontEnd Framework' üdür.

14. Stil İşini Bir Adım İleri Taşıyın

Sass “Syntactically Awesome Style Sheets” kelimelerinin kısaltılmışıdır ve dinamik CSS stil dosyaları oluşturmak için kullanılır. FrontEnd Developer olarak bir pozisyonda başladığınızda bir ihtimal bir CSS Preprocessors ile çalışmak durumunda kalabilirsiniz. Sass bu preprocessors' lardan en yaygın olanı. Hemen belirteyim ki modern frameworkler her geçen gün Sass yerine Javascript ile desteklenmiş CSS kütüphanelerine yönelmekte. Bu nedenle Sass'a aşina olacak kadar öğrenin ve zamanınızı daha çok CSS-First ve utility-first diye tabir edilen CSS frameworklerine ayırın.

CSS-First framework için Bootsrap,
utility-first framework içinse Tailwind ve Material UI iyi bir başlangıç olabilir.

15. Daha güvenli kod tipleri - Typescript

Typescript, Javascript'in bilinen eksiklerini gidermek için oluşturulmuş, içerisine güvenli kod tipleri (type safe) eklenmiş ve daha iyi geliştirme deneyimi sunan bir proglamlama dilidir. Aslında günün sonunda Typescript Javascript' ten başka bir şey değildir. Javascript' i zaten bildiğiniz için hızlı bir kursla hemen öğrenmeye başlayabilirsiniz.

16. Optimize edilmiş ve gelişmiş API Sorguları - GraphQL

GraphQL API için oluşturulmuş bir sorgu dilidir dersek yanlış olmaz. REST API aksine spesifik olarak istenen bilgiyi sunumcudan (API server) almak ve spesifik olarak istenen bir bilgiyi değiştirmek, manuple etmek için kullanılır. REST API ile kıyaslandığında daha esnektir ve istenen bilgi çok spesifik olarak belirlenebildiği için ağ üzerinde daha az yük oluşturur. 2022 yılında kullanımı giderek artan GraphQL kesinlikle öğrenmeye değer ve öğrenmeye bu hızlı kurs ile başlayabilirsiniz.

Yazının Sonu ama Yolun değil...

Öncelikle yazıyı sabırla buraya kadar okudu iseniz kendinizi tebrik etmelisiniz. Evet yol haritası yazımız sona erdi ama sizin yolculuğunuz daha yeni başlıyor.

FrontEnd Developer olmak ve IT sektörüne bu kariyer adımı ile başlamak 2022 yılında kendiniz için yapacağınız en iyi kararlardan biri olabilir.

Sabırla ve güçlü bir motivasyonla devam edin.