FRONTEND KAPSAM

Nasıl Frontend Uzmanı Olabilirim? (2)

Frontend Development konusunda kendimi nasıl geliştirebilirim ? Nasıl bir rota izlemem gerekiyor ? Bu konudaki sorulara cevap olması açısından yaklaşık 2 yıl öncesinde bir yazı yazmıştım.

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readMar 19, 2022

Aynı yazının bazı kısımlarını daha görsel fazla görsel ve blog yazılarına referanslar vererek genişletmek istiyorum. Tabi öncesinde ilk yazıyı okumayı unutmayın çünkü orada bahsettiğim tüm konuları burada tekrar anlatmayacağım.

Peki bu yazıyı neden yazıyorum ?

Burada amacım hem öğrenmek, öğrenirkende diğer kişilerin faydalanacağı ücretsiz bir eğitim serisi ortaya çıkarmak (https://onurdayibasi.com/). Bu yazıda bu seriyi nasıl okuyacağınız konusunda görsel bir rehber oluşturmak.

Frontend alanında çok kısa zaman aralıklarında yeni teknolojiler ve kütüphaneler çıktığı için Hello World tadında bir çok yazı bulunuyor. Benim derdim biraz daha bunlardan soyutlanarak derinlere inebilmek.

Aşağıda bahsedeceğim bakış açısıda bu notları okursanız büyük fayda sağlayacağınızı düşünüyorum.

Kafamda Oluşan Kapsam

Web uygulaması geliştirirken 3 ortamdan bahsedebiliriz.

Tarayıcı Ortamı
Geliştirici Ortamı
Sunucu Ortamı

Biraz daha detaylı konunun anlaşılabilmesi için aşağıda kullanılan teknolojileri kümenin içerisine yazarak anlatayım.

Tarayıcı Ortamı: Web uygulamalarına ait HTML, CSS, JS ve resim, pdf benzeri dosyaların, Sunucu/Dosya sistemi/CDN gibi ortamlardan bilgisayarınızdaki tarayıcılarda işletilmesi.
Sunucu Ortamı : Sunucudan HTML, CSS ve JS dosyaları sunulur. Burada sunucunun sorumluluğu sadece API üzerinden REST sağlama seviyesinden, Template rendering ile HTML üretme arasında farklılık göstermektedir. Amacınıza göre Rendering yönteminiz değişir, buna göre sunucu sorumluluğu ve kullanacağınız Framework değişkenlik gösterir.

CSR(ClientSide Rendering) <--  ...... --> SSR(ServerSide Rendering)

Geliştirici Ortamı: Localde hem sunucu, hemde tarayıcı ortamlarını çalıştırırız ama bunun haricinde bir takım geliştirmeve üst seviye soyutlama araçları bulunurki, bunlar hayatlarımızı kolaylaştırır.

Eğitim İçeriklerini Nasıl Tüketmelisiniz ?

Frontend ve Yazılım Mimarisi Çalışma Notlarım blog yazısında bu konuya detaylıca anlatmıştım. Bu yazıdan web sitesi içerisindeki yazıları nasıl grupladığım, aradığınız anahtar sözcükler ile blog

Web Sayfamda Hangi Konulara Değiniyorum ?

Web Sayfamdaki (https://onurdayibasi.com/). blog postları okuduğunuzda aşağıdaki resimde gördüğünüz konularda bilgi sahibi olursunuz.

Gelin resme biraz daha yakından bakalım, resimdeki her bir parçayı tek tek açıklamayacağım zaten ilgili parçaları web sayfamda detaylı olarak anlatılıyor. Eksik bazı kısımlar var onlarıda ilerleyen zaman içerisinde tamamlamayı düşünüyorum.

1. Tarayıcı Ortamı

WebApp: Tarayıcıda çalışan uygulama anlamına gelir. Burada web sayfası ile web uygulaması arasındaki temel fark Web Uygulamasının daha etkileşimli ve daha karmaşık bir yapıda olurken, Web Sayfası daha statik ve içerik gösterme üzerine bir yapıdır.

Buradaki işlem hep aynı şekilde çalışır, bir sunucu veya CDN sistemi üzerinden tarayıcı(browser) akan HTML, CSS ve JS kodunun Web Page Rendering (Pipeline) üzerinde işletilmesi ile gerçekleşir.