Front-end Teknolojileri

Merhabalar, bu yazıda bazı front-end teknolojilerinden bahsedeceğim. Önce internet ve web ile ilgili terimlerden, sonra teknolojilerden bahsedeceğim.

WWW nedir?

İngilizcedeki World Wide Web'in baş harflerinden gelir. Kısaca web olarak ifade edilir. Web, internet ile karıştırılmaktadır. Fakat internet, TCP/IP kullanarak bilgisayar ağlarının birbirlerine bağlanmasını sağlar. Web ise internet üzerinde çalışan bir servistir. Web, HTML kullanan internet üzerindeki tüm kaynakların (yazı, grafik, resim, ses ve hareketli görüntüler) ve kullanıcıların birleşimidir. Kullanıcılar, tarayıcılar yardımıyla web servisinden kolayca yararlanabilir. Tarayıcılarda gördüğümüz her bir web dokümanına web sayfası denir. Ortak bir domainle birbirine bağlanan web sayfalarının bir araya getirilmesiyle bir web sitesi oluşturulabilir.

Domain, web sitelerinin internet üzerindeki adresini belirleyen özgün isimlerdir. Örnek: siberyavuzlar.com

---

Web tasarımı, kısaca dünya çapında online olarak paylaşılabilmesi ve erişilebilmesi için bir web sitesinde yer alan içeriği planlama ve düzenleme sanatıdır. Bir web sitesinin görünümünü (renkleri, yazı tiplerini, grafikleri vb.) belirleyen, bunun yanında sitenin yapısını ve kullanıcı deneyimini şekillendiren bir süreçtir.

Web sitesi geliştirme, bir web sitesinin yapısal olarak kurulumu ve bakımını ifade eden ve web sitesinin düzgün çalışmasını sağlayan karmaşık kodlama sistemlerini içerir. Web sitesi geliştirmek için kullanılan bazı teknolojiler:

• HTML

• CSS

• JavaScript

• PHP

• Go Programming

• ASP.NET

---

Kısaca Back-end

Türkçesi arkayüz olan back-end; GO, Python, PHP, Ruby, Java, ASP.NET, MySQL, MSSQL, MongoDB vb. teknolojilerle bir sistemin mimarisinin oluşturulması, veri tabanı yönetiminin planlanması, sunucu ayarlamalarının yapılması, sistemin maksimum seviyede verimli ve hızlı çalışmasının sağlanmasıdır. Back-end geliştiren kişilere back-end developer (arkayüz geliştirici) denir.

Kısaca Front-end

Türkçesi önyüz olan front-end, bir web sitesinin HTML, CSS ve JavaScript gibi teknolojileri kullanarak geliştirilmesidir. Front-end geliştiren kişilere front-end developer (önyüz geliştirici) denir.

Front-end Geliştirici Ne Yapar?

Front-end geliştiricileri, kullanıcının doğrudan etkileşimde bulunduğu kısmı oluşturan arayüzü geliştirir. Bu arayüz, bir web sitesi veya uygulamada kullanıcının gördüğü her şeyi içerir: metin, resimler, düğmeler, formlar, menüler vb. Front-end geliştiricilerin sorumlulukları şunlar olabilir:

• Kullanıcı arayüzü geliştirme: HTML, CSS ve JavaScript kullanarak web sayfalarını veya uygulamaları geliştirirler. Kullanıcıların deneyimini şekillendirir.
• Arayüz tasarımı: Grafik tasarım yetenekleri kullanarak sayfa düzenleri, renk şemaları, tipografi ve diğer görsel öğeleri belirler.

• Kullanıcı etkileşimi: Kullanıcıların düğmelere tıklaması, formları doldurması ve sitede gezinmesi gibi etkileşimleri sağlayan JavaScript kodlarını geliştirir.

• Uyumlu tasarım: Farklı cihazlarda ve farklı tarayıcılarda doğru görüntülenme sağlamak için responsive tasarım tekniklerini uygular.

• Hız ve performans optimizasyonu: Sayfaların hızlı yüklenmesi ve akıcı bir deneyim sunması için optimizasyonlar yapar.

UI/UX Nedir?

Türkçe karşılığı "Kullanıcı Arayüzü" olan UI'ın açılımı "User Interface", bir tasarımın dış görünüş (arayüz) özelliklerini kapsar. Örneğin, kullanıcının bir web sitesinde kolayca dolaşması, bilgiye ulaşması ve bunun sayesinde sitede uzun süre kalmasını sağlamak için kullanılan görsel tasarımlardır. Sayfa yapısı, butonlar, resimler, çizgiler, renkler gibi grafik elemanları UI tasarımının bir parçasıdır.

Türkçe karşılığı "Kullanıcı Deneyimi" olan UX'in açılımı "User Experience" ise arayüzden ziyade kullanıcı etkileşimine, erişilebilirliğe, teknolojik yeterliliğe ve işleyiş özelliklerine odaklanır.

Nedir bu HTML, CSS ve JavaScript

HTML

Web sayfalarını oluşturmasında iskelet görevinde kullanılan, Türkçe karşılığı "Hiper Metin İşaretleme Dili" olan HTML'in açılımı "Hyper Text Markup Language" olarak bilinir.

HTML, bir programlama dili değildir.

HTML Ne İşe Yarar?

HTML, front-end geliştiricilerinin sayfalar ve uygulamalar için yapı profilleri, bağlantılar, blok alıntılar, paragraflar ve başlıklar gibi iskelet yapıları oluşturmalarında yardımcıdır. HTML, bir web sitesinin iskeletidir denilebilir. Yani HTML kodları olmadan web sitesi geliştirilemez.

Örnek bir HTML kod parçası

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yavuzlar'ın ana sayfası</title>
</head>

<body>
    <!-- sayfanın kodları buraya... -->
    Hello World!
</body>

</html>

HTML kodları, bir web sayfasının yapısını (iskeletini) oluşturan parçacıklardır. Kullanılan HTML kodları “<” ile başlar ve “>” ile biter. Temel bir HTML belge yapısı yukarıdaki kod bloğu şeklinde olmalıdır.

<!DOCTYPE html>: Tüm HTML belgeleri bu kod ile başlar. Bu kod sayfanın HTML5 formatına göre kodlandığını gösterir.

<html>: Kök etiket olarak da bilinen bu temel kullanımda HTML kodları bu iki etiket arasında tanımlanır.

<head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.

<meta charset=”UTF-8″>: HTML kodunun dil seti içerdiğini belirtir.

<title>: Web sitesinin başlık alanını tanımlamak için kullanılır. <title> etiketi, <head> etiketleri arasında olmalıdır.

<body>: Görünebilir HTML kod parçalarının eklendiği alandır.

---

CSS

Web sayfalarının görsel olarak şekillendirilmesinde kullanılan ve kendine has kuralları olan bir tanım dilidir. Türkçe karşılığı "Basamaklanmış Stil Katmanları" olan CSS'in açılımı "Cascading Style Sheets" olarak bilinir.

CSS, bir programlama dili değildir.

CSS Ne İşe Yarar?

CSS kodları web sayfalarının tüm elemanlarını dilediğiniz özelliklerle şekillendirebilmenize ve özelleştirebilmenize imkan sağlar. Bu da doğrudan sıradan bir web sayfasını özelleştirilmiş bir görünüme ulaştırır.

CSS Kodlama İle Neler Yapılabilir?

• Font boyutlandırma.

• Font renklendirme.

• Başlık stilleri.

• Yatay ve dikey menüler.

• Geçiş efektleri.

• Gölgelendirme.

• Kenar süsleri.

• Animasyonlar.

• Sayfa arka plan rengi ya da görseli.

Örnek bir CSS kod parçası

div {
    color: white;
    background-color: red;
    width: 200px;
    height: 150px;
    box-shadow: blue 5px 5px;
}

CSS kodları seçicilerden ve kod gruplarından oluşur. Kod grupları "{}" sembolleri arasında yazılır ve kod gruplarındaki ifadeler daima bir noktalı virgül sembolüyle sonlandırılır.

seçici: Hangi etiket, sınıf, id vb. ifadeyi sitillendireceğimizi söyler.

{} grubu: Seçiciye yapılacak olan sitillendirme ifadeleri yazılır.

---

JavaScript (JS)

HTML ve CSS'in aksine Javascript, etkileşimli -dinamik- web sayfaları oluşturmak için kullanılan bir programlama dilidir. JavaScript, hem kullanıcı tarafında hem de sunucu tarafında yaygın olarak kullanılan bir programlama dilidir.

Java ile karıştırılsa da Java ve JavaScript birbirinden farklı teknolojilerdir.

JavaScript Motoru Nedir?

JavaScript kodunu çalıştıran bilgisayar programlarına JavaScript motoru denir. İlk JavaScript motorları sadece yorumlayıcılardı ancak modern motorlar performansı artırmak için tam zamanında veya çalışma zamanı derlemesi kullanır.

JavaScript İle Neler Yapılabilir?

• Web ve Mobil Uygulamalar

• Web Sunucuları ve Sunucu Uygulamaları Oluşturma

• Web Sitelerinde Etkileşimli Davranış

• Oyun Geliştirme

JavaScript'in Dezavantajları Nelerdir?

• Açıklara karşı oldukça zayıf bir yapıya sahiptir.

• Kullanıcı bilgisayarlarında zararlı kod çalıştırmak isteyen kötü niyetli kişilerce kullanılabilir.

• Farklı cihazlarda veya tarayıcılarda çalıştırılmasından kaynaklı tutarsızlıklar meydana gelebilir.

Örnek bir JavaScript kod parçası

const merhaba = () => {
    alert('Hello World')
}

document.addEventListener('DOMContentLoaded', merhaba)

---

Bazı Front-end Teknolojilerinden Bahsedelim

• HTML
• CSS
• JavaScript
• React JS
• Next.js
• Vue.js
• Bootstrap

HTML, CSS ve JavaScript dillerinden yukarıda bahsetmiştik. Biraz da diğer teknolojilerden bahsedelim.

React JS

Kullanıcı arayüzü (UI) oluşturmak için kullanılan açık kaynak kodlu bir JavaScript kütüphanesidir. React JS'nin en önemli avantajlarından biri, tüm sayfayı yeniden yüklemeye gerek kalmadan kullanıcı arayüzünü verimli bir şekilde güncellemesine olanak tanıyan sanal DOM'udur. Bu aracın bileşenleri Facebook tarafından geliştirilmiştir.

Sanal DOM (Virtual DOM)

React JS, kullanıcı arayüzünü verimli bir şekilde güncellemek için sanal bir DOM (Belge Nesne Modeli) kullanır. Sanal DOM, React'in tüm sayfayı yeniden yüklemeden kullanıcı arayüzünde değişiklik yapmasına olanak tanıyan gerçek DOM'un hafif bir kopyasıdır. Bu da kullanıcı deneyimini daha akıcı ve duyarlı hale getirir.

React JS, bir JavaScript kütüphanesidir.

React JS Ne İşe Yarar?

• Single-page sayfalar ve mobil uygulamalar geliştirmek için kullanılır.

• Hızlı ve interaktif kullanıcı arayüzü geliştirmeyi kolaylaştırır. Örneğin Instagram'da karşımıza çıkan arama kutusu, logo ve mesaj gönder butonu gibi görsellerin oluşturulmasını kolaylaştırır.

• Arayüzdeki işlemleri kolay, maliyetsiz ve yüksek performanslı olarak yapar. Bu nedenle verilerin ve özelliklerin çok hızlı değiştiği uygulamalarda kullanılır.

Neden React JS Kullanmalısınız?

1. Öğrenmesi ve Kullanımı Kolay: Açık kaynaklı bir JavaScript kütüphanesi olan React’ı öğrenmesi nispeten kolaydır.

2. Artan İş Fırsatları: Çok çeşitli alanlarda React becerisine sahip olanlara talep var.

3. Gelişen Topluluk: Açık kaynaklı bir kütüphane olduğundan herkes React’ı kullanabilir ve geliştirebilir. Ekosistemi destekleyen ve geliştiren, kendi katkılarını ekleyen bir topluluğu da var!

4. Yeniden Kullanılabilirlik: Yeniden kullanılabilir bir sisteme sahip olduğu için aynı sistem farklı uygulamalarda tekrar kullanılabilir. Yeniden kullanabilme özelliği React’ın tercih edilmesindeki nedenlerden bir tanesidir.

5. Hızlı Sonuç: Uygulamalardaki canlı değişiklikleri hızlı, verimli ve gerçek zamanlı bir şekilde aktarır. Ayrıca DOM kullanılarak çok daha çabuk sonuç alınabilir.

6. Çeşitli Eğitim Materyalleri: React’ın sahip olduğu bilgilerine erişim kolaydır. Çevrimiçi veya çevrimdışı React kursları öğrenmeyi kolaylaştırır.

7. SEO Friendly: React ile oluşturulan kullanıcı arayüzleri farklı arama motorlarına da erişebilir.

Bazı React Kitaplıkları

• Material UI

• Ant Design

• React-Bootstrap

• React Router

• Semantic UI React

• Blueprint UI

• React Motion

• Reactstrap

Örnek React JS Kod Parçası

const App = () => {
    return (
        <main>
            <h1>Ana sayfa</h1>

            <p>Hello World!</p>
        </main>
    );
}
export default App;

---

Next.js

Next.js bir React JS framework'üdür. Bu framework sayesinde React JS kullanarak SSR (Server Side Rendering) işlemi yapabilen web uygulamaları geliştirebiliyorsunuz. Bu sayede uygulamanız hem daha performanslı hem de SEO uyumlu olmuş oluyor.

Next.js, JavaScript ve React tecrübesi olan herkes tarafından kolayca öğrenilebilir ve kullanılabilir.

Next.js, React JS'in bir framework'üdür.

Framework (Çerçeve) Nedir?

Framework, daha önceden hazırlanıp yazılımcının kullanımına göre şekillendirebildiği kod dokümanlarıdır. Bir proje geliştirirken projenin belli kısımlarında standart işlemler gerçekleştirilir. Bunu yazılımcılar yerine frameworkler yapıyor. Yazılımcılar da hazır olan düzeneğin üstünde çalışabiliyor. Bu durum, yazılımcılara zamandan tasarruf sağlar ve iş yükünü hafifletir.

Neden Next.js kullanmalıyız?

1. SSR ve SSG Desteği: Sunucu tarafında işlenen (SSR) veya statik sitelerin üretimi (SSG) modunda çalışabilen tam özellikli bir framework olarak tasarlanmıştır.

2. Kolay Yapılandırma: Kurulumu ve yapılandırması kolaydır. Önceden yapılandırılmış ayarları sayesinde, geliştiriciler zaman kazanabilir ve hızlı bir şekilde uygulama geliştirebilirler.

3. Otomatik Kod Bölünmesi: Otomatik olarak kodunuzu parçalara ayırarak uygulamanızın yalnızca ihtiyaç duyduğu kısımları yükleyerek performansı artırır.

4. Hizmet Prosesleri: Hizmet proseslerini kullanarak veri önyükleme ve uzun süreli işlemler gibi işlemleri istemci tarafından değil, sunucu tarafından yönetebilir. Bu, uygulamanın daha güvenli ve performanslı olmasını sağlar.

5. Geliştirici Deneyimi: Popüler bir framework olduğu için geniş bir topluluğa sahiptir. Ayrıca React tecrübesi olan herkes tarafından kolayca öğrenilebilir ve kullanılabilir.

6. Dinamik Yönlendirme: Dinamik URL'leri kolayca yönetmenizi sağlar. Bu özellik sayesinde uygulamanızın yönlendirmesi daha da kolay hale gelir ve kullanıcı deneyimi artar.

7. Materyal Tasarım Desteği: Materyal tasarım desteği sunar. Bu sayede uygulamanızın tasarımına profesyonel bir görünüm kazandırabilirsiniz.

8. Ölçeklenebilirlik: Ölçeklenebilir bir yapıya sahiptir. Bu sayede uygulamanızın trafik arttığında bile performansı etkilenmez.

9. Vercel Entegrasyonu: Vercel platformunda barındırılabilir. Vercel'in küresel ağı sayesinde uygulamanız hızlı ve güvenilir bir şekilde çalışır.

10. Güncelleme Kolaylığı: Düzenli olarak güncellenir ve yeni özellikler eklenir. Bu sayede geliştiricilerin uygulamalarını her zaman en son teknolojilerle güncel tutmaları mümkündür.

Next.js'in Dezavantajları

1. Kısıtlı özelleştirme: Belirli kurallar ve önceden yapılandırılmış ayarlarla gelen bir framework olduğundan bazı özelleştirme seçenekleri kısıtlı olabilir.

2. Öğrenme zorluğu: React tecrübesi olan herkes tarafından kolayca öğrenilebilen Next.js, yeni başlayanlar için öğrenme zorluğu olabilir.

3. Yavaş İlk Yükleme Süresi: Büyük boyutlu uygulamaların ilk yüklenmesinde yavaşlık yaşayabilir. Bununla birlikte otomatik kod bölünmesi özelliği ile bu sorunun üstesinden gelinebilir.

4. Karmaşık Tasarım: Materyal tasarım desteği sunsa da bazı durumlarda karmaşık tasarım düzenleri oluşturmak zor olabilir.

5. Güvenlik Riskleri: SSR modu kullanıldığında güvenlik riskleri söz konusu olabilir. Bu nedenle geliştiricilerin güvenlikle ilgili en iyi uygulamaları takip etmeleri önemlidir.

6. Sunucu Maliyeti: SSR modu kullanıldığında sunucu maliyeti artabilir. Bu nedenle büyük ölçekli web uygulamaları için yüksek sunucu kapasitesine ihtiyaç duyulabilir.

import { Html, Head, Main, NextScript } from "next/document";

const Document = () => {
    return (
        <Html>
            <Head>
                <link rel="favicon" href="/favicon.png" />
                <title>Ana sayfa</title>
            </Head>

            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
};

export default Document;

---

Vue.js

Vue (Vue.js / Vue JS), UI ve tek sayfalı uygulamalar oluşturmayı sağlayan, açık kaynaklı popüler bir Javascript framework(çerçevesi)'üdür. Vue.js ile modern, küçük, orta ve büyük ölçekli mobil ve masaüstü uygulamalar oluşturmak mümkün.

DOM (Document Object Model) üzerinde değişiklik yapmak maliyetli olduğu için Vue.js sanal DOM kullanır. MVVM (Model-görünüm-görünüm modeli) mimari deseni kullanır ve bu mimari modelin GUI (Grafik Kullanıcı Arayüzü) ve görünümden ayırt edilmesini sağlar. Bu ayrım, Frontend ve Backend geliştiricilerin birlikte çalışmasını sağlar.

Vue.js bir JavaScript framework'üdür.

Neden Vue.js Kullanmalısınız?

1. Kolay Bir Başlangıç: Klasik CSS, HTML ve JavaScript, Vue öğrenirken yeterli olacaktır.

2. Büyük Resmi Kütüphaneler: Vue.js’de ek işlevsellik için isteyeceğiniz özellikler, framework’ün resmi kütüphaneleri tarafından kapsanmaktadır.

3. Hızlı Renderizasyon: Vue.js’nin hafif yapısı (21 KB’lık paket boyutu), onu rakiplerinden daha hızlı kılıyor. Özellikle sanal DOM oluşturmayı hızlandırır.

Örnek Vue.js Kod Parçası

<html>
    
    <head>
        <title>ilk örnek</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="deneme">
            <h1>{{ title }}</h1>
            <p>{{ description }}</p>
        </div>

        <script>
            new Vue({
                el: "#deneme",
                    data: {
                    title: "Başlık",
                    description: "Açıklama"
                }
            })
        </script>
    </body>

</html>

---

React JS

1. HTML'yi doğrudan JS koduna eklemenizi sağlayan bir uzantı olan JSX'i kullanır.

2. React’in temel yapısı bileşenler, DOM manipülasyonu ve bileşen durumu yönetimidir. Geri kalan her şey topluluk tarafından geliştirilir ve desteklenir.

3. Sanal DOM kullanır.

4. React bileşeninin durumunu değiştirdiğinizde, alt bileşenler de yeniden oluşturulacaktır.

5. React, yerleşik bir mimari modele sahip değildir.

6. React uygulamaları yalnızca JavaScript kullandığından geliştiriciler kolay ölçeklendirme için geleneksel kod düzenleme yöntemlerini kullanabilir.

7. Doküman içeriği Vue kadar geniş olmasa da topluluğu çok daha geniştir.

Vue.js

1. HTML şablonlarını ve JSX'i kullanır

2. Vue.js, topluluk tarafından oluşturulmuş geniş bir yapıya sahip olsa da, çekirdek ekibi yaygın olarak kullanılan araçlar ve yardımcı kitaplıkları oluşturur ve destekler.

3. Sanal DOM kullanır.

4. Vue.js'de gereksiz yeniden oluşturmaları önlemek için bağımlılıklar izlenir.

5. Vue.js, MVVM modelinin ViewModel yaklaşımına odaklanmıştır.

6. Dinamik mimari nedeniyle, ölçeklendirme sınırlamalarının üstesinden gelmek için Vue kütüphanelerinden ve Mixin öğelerinden yararlanmanız gerekecektir.

7. Birçok dilde son derece ayrıntılı açıklamalar içerir.

---

Bootstrap

Bootstrap; HTML, CSS ve JavaScript ile yazılmış kullanışlı ve yeniden kullanılabilir kod parçalarından oluşan dev bir koleksiyondur. Ayrıca geliştiricilerin ve tasarımcıların hızla tam olarak duyarlı web siteleri oluşturmasını sağlayan bir framework'tür.

Neden Bootstrap Kullanmalısınız?

1. Responsive yapı sağlar: Ekran boyutuna göre otomatik olarak yeniden boyutlandırma olanağı sağlar.

2. Komponentler kolaylık sağlar: Web sayfanıza kolayca yapıştırabileceğiniz bir dizi özellik ile birlikte gelir.

3. Dokümantasyonu vardır: Dökümantasyon desteği çok başarılıdır. Her kod parçası web sitelerinde açık bir şekilde tanımlanmış ve açıklanmıştır.

4. İhtiyaca göre özelleştirilebilir: Bootstrap, framework'ü özelleştirebilmenize imkan sağlar. Kullanmak istemediğiniz özellikleri uygulamalarınızdan kaldırarak daha hafif, performanslı uygulamalar geliştirebilirsiniz.

5. Geniş bir topluluğa sahiptir: Bootstrap'ın arkasında büyük bir tasarımcı ve geliştirici topluluğu vardır. GitHub üzerinde barındırılması, geliştiricilerin Bootstrap’in kod tabanını değiştirmesini ve bunlara katkıda bulunmasını kolaylaştırır.

6. Tema desteği sunar: Bootstrap dayalı özel şablonları paylaşmak ve satın almak için adanmış birçok web sitesi bulunmaktadır.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

---

Front-end yol haritası ve el kitabı için kaynaklar

Roadmap: https://roadmap.sh/frontend Handbook: https://frontendmasters.com/guides/front-end-handbook/2019/#1.2

mozlercelik - OverviewGitHub

Bu yazı Mehmet Özler Çelik tarafından hazırlanmıştır.