Yazılım Geliştirme ve Ön Yüz — Part 1
Öncelikle bu makalenin verilen bir eğitime destek amacı ile yazıldığını söylemem gerekiyor.
Eğitimin amacı da ön yüz teknolojileri konusunda var olan ekibe ve bu alana adım atmak isteyen kişilere temel ve önemli noktaları aktarmak ve bir yol haritası niteliği taşımak.
Ayrıca bir yazılım geliştirici olarak ürettiğimiz ürünlerin kalitesi ve standartlarımız hakkında bazı fikirlerde barındırıyor.
Eğitimin Kapsamı
Eğitim içeriğinde değinilecek ana başlıklar şu şekilde:
- Teknoloji
- Yazılım Dilleri ( Css , Html, Javascript, Typescript vs.)
- Mimari
- Disiplin
Bu part 1. ve 2. başlıkları ele alacağız.
Web Teknolojisi ve Tarayıcılar
Bölümün amacı ön yüz alanında çalışan veya çalışacak kişilerin, ortamlarını tanımaları ve nasıl çalıştığını kavramaları.
Öncelikle web teknolojisinin nasıl çalıştığını basitçe kavramak gerekiyor.
Web birden fazla bilgisayarın bir biri ile iletişime geçmesini sağlayan bağlantılar toplamı diyebiliriz. Bu bağlantıların oluşma şekli ve teknolojileri değişse de temelinde bir bilgisayardan diğerine veriyi gönderip alabilme bunu sağlıyor.
TCP , HTTP , URL ,DNS
TCP : Transmission Control Protocol internetin temel protokollerinden bir tanesi. İç ağ protokolü olan Internet Protocol (IP) üzerinden türemiş ve ikisi birlikte TCP/IP olarak biliniyor.
İki bilgisayar arasında ki iletişimde genelde bağlantıyı ilk isteyen CLIENT (İstemci) dinleyen ve cevabı dönen ise SERVER (Sunucu) olarak adlandırılıyor.
Yani internete bir web sayfası koymak istiyorsak bir server davranışı gösteren bilgisayarımızın olması ve internete bağlı olmak yeterli aslında.
HTTP: Hypertext Transfer Protocol olarak biliniyor ve adından anlaşılacağı gibi hypertext transeri için kullanılan protokol. Temelinde web siteleri birer text verisi.
80 portu varsayılan port olarak kabul edilir ve bu portu dinleyen bir sunucu direkt olarak ip adresi üzerinden erişilebilir. Port bilgisini girmete gerek olmadan.
URL: Uniform Resource Locator açılımı, basitçe bir web adresi. İçerisinde bölümler anlam barındıran bir string. Bu bölümler sunucuda ki tazılım tarafından kullanılarak istemciye farklı veriler verilebilir
DNS: Domain Name System açılımı. Internette her bir bilgisayarın bir adresi var ve bu adres IP olarak tanımlanıyor. Bir takım sayılardan oluşan bir adres. Çok çirkin olduğu için DNS keşfedildi.
Tarayıcınıza bir URL girdiğiniz zaman bu URL kayıtlı DNS sağlayıcısına gidiyor ve orada ilgili URL adresi ile eşleşen bir IP adresi var ise istek oraya yönleniyor.
Daha görsel bir anlatım için :
Tarayıcı (Browser)
Tarayıcı bir uygulama. Asıl görevi kullanıcı tarafından girilen url adresini bir HTTP request’e dönüştürerek internet üzerinden gelen cevaba göre kullanıcıya interaktif (önceden pek interaktif değilmiş) bir ekran sunmak.
Tarayıcı çok genel açıdan bakarsan bir I/O device. Yani girdi ve çıktı sağlıyor.
Girdi kullanıcının bir web sayfası istemesi ( url adresi girerek vs.) ve web sitesi ile etkileşime girmesi
Çıktı içerisinde gösterdiği her şey.
Bir http istek sonucunda dönen cevap başarılı ise (200) gelen text verisini anlamlandırıp işleyerek bir web sitesine dönüştürüyor.
Web sitesi kodları kendi içerisinde daha sonra tekrar istekler yapıp dönen veriyi kullanabilecek kodlar içerebilir (javascript vs.)
Web siteleri HTML kodlarından oluşuyor. Tarayıcıların bu kodları kullanıp anlamlandıran Rendering Engine leri bulunuyor. Bunlar çok temel düzeyde bir string içerisinden anlamlı yapılar oluşturan yazılımlar. Bunun için çokça regex kullandıklarını varsayıyorum
Udacity de google’ın ücretsiz olarak verdiği bir eğitimde tarayıcı yazma isimli bir ders var. İlgilenenler inceleyebilir. (6. ders)
https://www.udacity.com/course/programming-languages--cs262
Tarayıcının Yetenekleri:
- Kullanıcı Arayüzü: adres barı , geri ileri butonları vs.
- Render engine : web siteleri oluşturmayı sağlıyor
- Networking: internet ile veri alış verişini sağlıyor
- Javascript Interpreter : Javascript kodlarını parse edip çalıştırıyor
- Data Storage : Tarayıcı geçici ve kalıcı olarak kısıtlı düzeyde veri depolayabilir. Cookie , sessionStorage geçici depolamaya örnek. localeStorage, indexedDB kalıcı depolamaya örnek.
Pixel Pipeline
Tarayıcı Render Engine ile bir html kodunu web sitesi olarak göstermek için bazı aşamalardan geçiriyor.
Html kodunu DOM tree dediğimiz anlamlı bir veri yapısına dönüştürdükten sonra sırası ile bu yapıyı render etmeye başlıyor.
DOM : Document Object Model açılımı, Html elementlerinin hiyerarşik yapısını temsil eden bir ağaç yapısı.
Javascript: Bu aşamada bir javascript kodu ile karşılaşır ise onu Javascript Interpreter’ a gönderiyor ve onun çalışmasını sağlıyor. Bu yüzden javascript kodlarını HTML içerisinde koyduğumuz yer önemli, sayfanın tamamen render olmasını geciktirebilir.
Style: Bir sonraki aşamada css kurallarının hangi elementlere uygulanacağını hesaplıyor.
Layout: Ardından kurallar tamamen belli olduğu için hangi elementin ne kadar yer kaplayacağını hesaplıyor. Html elementleri bir birlerini etkileyebilir.
Paint: Tüm hesaplamalardan sonra ekrana pixel leri yerleştiriyor.
Composite: Web sitesinde elementler çoklu bir katmana sahip olabilir. Hangisinin üstte hangisinin altta olduğuna göre tüm sayfa render ediliyor.
Bu süreci tamamı yada belirli bir kısmı DOM ve doğal olarak HTML de bir değişiklik olduğu zaman tekrarlanıyor. Bu sürenin tamamı çalışması gereken javascript kodu , css ve html kodlarının yapısına göre değişiklik gösterebiliyor.
Developer Tools
Tarayıcılar geliştiricilere yardım etmesi amacıyla Developer Tools adlı araçları barındırır.
- Javascript için bir console.
- HTML ve CSS yapısını görüp değiştirmeye yarayan ekran
- Network faaliyetlerini inceleyebileceğiniz bir ekran
- Veri depolamayı izleyebileceğiniz bir ekran
- …
Özellikle yeni başlayanlar için HTML ve CSS de yaptığı değişiklikleri anlık görmesini sağlayan Elements ekranı çok kullanışlı.
Ön Yüz Geliştirici
Ön yüz dediğimiz alan tarayıcı veya genel olarak kullanıcının direkt etkileşime girdiği kullanıcı arayüzlerinin bulunduğu yer.
Web için genellikle tarayıcılar bu alana giriyor ve doğal olarak web sitelerinin tarayıcıya iletilen kısmını kapsıyor.
Html , css, javascript gibi temel diller ve bunlara yardımcı olan herşeyi kullanarak Erişilebilir, İhtiyaçları Karşılayan, Kullanışlı uygulamalar geliştiren kişi ön yüz geliştirici oluyor.
Web Projelerinde Ön Yüz Tipleri
Temelde 3 adet ön yüz tipi web projelerinde görülüyor.
- Backend Render: Html sayfasının içeriğinin tamamını her zaman backend de oluşturan ve kullanıcıya bu şekilde gönderen yapılar. Sayfalar arası geçiş ve kullanıcının aldığı aksiyonları sunucuda halleden bir yöntem
- SPA (Single Page Application): Ön yüz kodlarının tamamı bir html paketi içerisinde bulunan bir yapı. Bir kere sunucudan bu html paketini aldıktan sonra sayfa değişiklikleri , yada herhangi bir html içeriği için sunucuya gidilmez. Sunucu sadece veriyi sağlar.
- Hibrit : İkisini karşımı. Sayfaların bir kısmı için yine sunucuya gidilir ancak ön yüz deki javascript kodları ile de dinamik içerikler oluşturulabilir. Bazen ajax istekleri ile sunucuda render edilen html kodları alınıp dinamik olarak ekranda gösterilebilir.
Css ve Html
Bir web sayfasının görsel tasarımını oluşturan css ve html birlikte çalışır.
Html web sayfasının iskeletini oluşturan bir xml tabanlı biçimlendirme dilidir.
Elementler tagler ile tanımlanır ve genelde iç içe geçebilirler.
Bir html yapısının ekranda nasıl dizileceği, hangi renklere ve şekillere sahip olacağını CSS belirler.
Css bir tanım dilidir ve bloklardan oluşur. Her blok da bir selector ve onun için geçerli olacak olan kural seti bulunur.
selector kısmında bir veya birden fazla kural yazılabilir ve bu kurala uyan bütün elementleri kapsar. Bu elementler süslü parantez içerisinde bulunan tanımlara göre şekillenir.
Html ve css ile herhangi bir tasarımı web sitesine dönüştürebilirsiniz. Sadece yeterince alıştırma yaparak farklı senaryolar üzerinden öğrenmeniz gerekiyor.
Sadece html ve css ile yapılan harikaralardan bazıları:
Css ile bir websitesi oluştururken öncelikle genel layout yapısını çıkartmak önemli. Bunu yaparken biraz karmaşık olabilecek layoutlar için flex-box kullanmanızı tavsiye ediyorum.
Bu konuyu en güzel açıklayan yerlerden birisi :
Ayrıca özellikle dinamik responsive ( Farklı ekran boyutlarında farklı davranabilen ) tasarımlar için css-grid kullanmanızı tavsiye ediyorum.
Aynı şekilde css-tricks çok güzel bir anlatıma sahip:
Css Frameworkler:
Css kurallardan oluştuğu ve genelde web siteleri tasarlanırken ortak sorunlar ile karşılaşıldığı için bu alanda framework diyebileceğimiz çalışmalar var.
En popüleri Bootstrap , Bir diğeri Tailwind .
Bu tarz bir sürü framework var ancak özellikle normal bir websitesi tasarımını kolayca koda dökebilecek seviyeye gelene kadar herhangi bir framework kullanmayı tavsiye etmiyorum. O noktadan sonra basit işler için kullanılabilirler. İşleri kolaylaştırıyor.
Ancak büyük projelerde kendi css kütüphanenizi oluşturmanız daha doğru olur. Hatta bunu yaparken Sass , Less gibi css yazmayı kolaylaştıran css extension dillerini de öğrenmek daha faydalı olur.
Egzersizler
Html ve css temellerini algıladıktan sonra yapılacak en iyi şey kendinize basit bir kaç tasarım seçip onları gerçeğe dönüştürmek.
Bir web sitesi oluşturup test etmek için bir kod editor ve tarayıcı yeterli.
Eğer bunlarla uğraşmak istemiyorsanız çok güzel online editörler var.
Ben özellikle basit bir şey denemek için bunları kullanıyorum
Kod editor olarak Sublime Text, Vs Code özellikle tavsiye edebileceklerim.
Tasarım örnekleri için nereye bakacağınızı bilmiyorsanız bu adresten başlayabilirsiniz
Ayrıca Codepen.io üzerinden arama yaparak örnek bir sürü kod bulabilirsiniz.
Javascript
Javascript tarayıcı daki Javascript Interpreter ( Javascript Engine ) tarafından yorumlanıp derlenen bir yapıya sahip. Bu yüzden derleme gerektirmiyor.
Herhangi bir tarayıcının Geliştirici Araçları ( Developer Tools ) kısmından console’a istediğiniz javascript kodunu yazarak hızlıca test edebilirsiniz. Yazması ve çalıştırması çok pratik. Herhangi bir hazırlık gerektirmiyor.
Javascript dinamik tipler barındıran bir dil. C# , C++ gibi statik tip li dillerden farklı olarak değişkenler belirli bir tipe bağlı değildir. Php ye benziyor bu açıdan.
Javascript te tipler olmadığı gibi tanımladığınız bir değişkenin tipini istediğiniz gibi değiştirebilirsiniz.
Javascript sadece tarayıcıda değil , nodejs ve deno gibi ortamlar sayesinde backend de de çalışabilen bir dil.
Yazması ve çalıştırması aynı zamanda temellerini öğrenmesi çok kolay bir dil ancak artı ve eksileri var.
Single Thread — Non Blocking
Javascript single-threaded (Tek thread) üzerinde çalışan bir dil. Yani aynı anda tek bir iş yapabilir ve o iş bitince bir sonrakine geçer.
Bir websayfası açtığınız zaman tarayıcı bütün işlemleri için bir adet thread kullanılır. Bunu tek şeritli bir yol olarak düşünebilirsiniz.
Buradaki kaynak javascript işlemlerinde olduğu kadar tarayıcının sayfayı render etmesi içinde kullanılıyor. Bundan ötürü ağır yada yanlış kurgulanmış javascript işlemleri web sayfalarında donmaya sebep olabilir. Çünkü o sırada tarayıcı javascriptin işini bitirmesini bekliyordur.
Yukarıdaki while loop yerinde bir print fonksiyonuda olabilirdi. Print işlemi bitmeden kod çalışmaya devam etmez.
Tabi bu sahip olduğu dezavantajı azaltmak için tarayıcılar Web API dediğimiz bazı yardımcılara sahip. Http requestleri oluşturmamızı sağlayan fetch api bunlardan bir tanesi.
Fetch api çağırıldığı zaman main thread dışında bir kendine özel ayrılmış bir thread üzerinden çalışıyor. Bu thread javascriptin erişemeyeceği izole bir thread. İşlem sonuçlandığı zaman bir callback fonksiyonu çağrılır ve javascript bu fonksiyonu kullanarak dönen değerleri kullanabilir.
Bundan ötürü javascript single threaded non blocking bir language olarak adlandırılır ve son kısmı özellikle backend de çok performanslı olarak görülmesinin sebeplerinden birisidir.
Javascript garbage collector’a sahip yani memory de yer kaplayan şeyler (fonksiyon tanımı , değişkenler vs.) kullanımları bittiği zaman otomatik olarak siliniyor.
Ancak buradaki ‘kullanımları bittiği zaman’ kısmını biraz açmak gerekiyor.
Javascript de memory için stack olarak tanımlanır ve eğer aşağıda ki gibi bir hata gördüyseniz muhtemelen sonsuz bir döngünüz yada benzer etkiyi yapacak şekilde hafızayı dolduran kod bloklarınız var demektir.
Çok güzel bir açıklama:
Web Api ler çoğu async yani çağırdığınız anda sonuçlanmayacak ve callback ler ile yönetmeniz gereken yapılar. Çünkü bu yapılar ayrı bir thread üzerinde çalışıp işleri bittiği zaman javascript’e bildiriyorlar .
Tabiki direkt olarak bildirmiyor task queue adında bir bölgeye biten işleri gönderiyor. Bu bölge javascript runtime dışında bir alan. Burada bekleyen işler birikiyor.
Event loop adında bir yapı ise burada bekleyen işleri eğer main thread de bulunan stack boş ise oraya gönderiyor ve çalıştırıyor.
Bu yapı bazen stack boş olduğu zaman çalıştırmak istediğimiz kodlar içinde kullanılabiliyor.
WebApi ler içerisinde en çok kullanılan DOM Api.
Dom Api javascriptin DOM Ağacına erişip oradan istediği element veya elementleri seçip onlar üzerinde manipulasyon yapmasını , onların eventleri dinlemesini gibi işlemleri sağlıyor.
Javascriptin kullanıcı etkileşimlerini anlamlandırmasını sağlayan temel kısım burası.
Örneğin html içerisinden bir element seçmek:
Seçilen bir elemente tıklandığı zaman çalışan bir kod yazmak :
Bu örnekte addEventListener hemen çalışmıyor. Kullanıcı bu elemente tıkladığı zaman task queue ya atılıyor ve event loop call stack boşalınca callback function çalışıyor.
Tabiki her calback asenkron şekilde çalışmaz.
Array foreEach metodu bir WebApi değil ve senkron bir şekilde çalışır.
Javascript Versiyonları
Javascript netscape zamanında bulunmuş bir dil ve zamanla çok değişikliğe uğradı. Bu değişiklikler ECMAScript adında javascriptin temel aldığı bazı standartlar ile tanımlanıyor.
- ES3 : Eski javascript diyebileceğimiz bir versiyon
- ES5 : 2009 yılında çıkmış ve çoğu eski tarayıcının desteklediği versiyon. JSON objesi ve “strict mode” en belirgin özellikler
- ES6: ES2015 olarak da bilinir ve javascripte let, const , default parameter values , Array.find, Class , arrow functions gibi önemli özellikler getirmiştir.
- ES2016 : Array.includes
- ES2017: Object.entries ,Object.values , async functions, shared memory
- ES2018: rest/spread properties , asynchronous iterations
let, const
ES2015 öncesi javascript de değişkenler “var” ile tanımlanırdı. Bu değişkenlerin var olduğu scope ile ilgili bazı sorunlar vardı.
Javascript de 3 adet scope var.
Global Scope bütün javascript runtime tarafından erişilebilen bir scope
Function scope sadece fonksiyon içinde var oluyor
Block scope da süslü parantezler içinde var olan bir scope
Son örnekte 1,3,4…9 dan sonra for dışına çıkmasına rağmen “i” değişkeni hala var olduğu için 10 yazıyor. Bu “var” ile tanımlanan değişkenlerin sorunu.
Bunu çözmek için let ve const getirildi. Bunlar sadece block scope içinde var oluyorlar.
Value vs Reference
Javascript de değişkenler tanımlandıkları zaman verilen değerlere göre farklı grupa ayrılabilir.
Bunlar ilkel tipler ( sayı , string , boolean vs.) ve diğer (Array, Object vs.) tipler.
Eğer bir objeyi bir değişkene atarsanız o objenin değerini değil referansını atamış oluyorsunuz. Böylece bu değişkenlerden birisinde değişiklik olursa diğerinde de oluyor.
Ayrıca fonksiyonlara parametre olarak bir obje yada array atarsanız onlarda aynı şekilde referanslarıyla atanmış oluyor.
Web workers
Web workers javascript kodlarından bir kısmını ayrı bir thread de çalıştırmaya yaran bir özellik. Main thread ile Web Api ler gibi callback yapısı ile haberleşiyor.
Özellikle çok ağır işlerin yapıldığı kodlar için Web worker kullanılması tavsiye edilir. Bu sayede kullanıcıya daha iyi bir deneyim sağlanır.
Jquery Hakkında
Jquery zamanında javascript ile DOM üzerinde işlem yapmak daha karmaşık iken işleri kolaylaştıran bir çok metod barındıran bir kütüphane.
Ancak javascript geliştikçe jquery’nin yapabildiği herşeyi onu kullanmadan da yapabilir hale geldiğimiz için artık ihtiyaç duyulmayan bir kütüphanedir ve bana göre öğrenilmesine gerek yoktur.
Promise
Çevirisi verilmiş bir söz olan ve javascript içerisinde de benzer bir karşılığı olan bir obje.
Bu obje belirsiz bir zaman sonra bir değer üretebilir yada hata da verebilir. Javascriptin non blocking yapısının bir parçasıdır.
Örnek olarak:
Callback yapısına benziyor ancak ondan biraz daha temiz bir kullanımı var. Özellikle HTTP requestlerde kullanılır.
Async Await:
ES2017 ile gelen çok kullanışlı bir özellik. Bir promise değeri dönen yada async olarak tanımlanan bir fonksiyonu await ile bekleyebilirsiniz. Ancak await kullanmak için bir async fonksiyon içinde olmanız gerekir.
Class
Javascript ECMAScript 2015 e kadar class dediğimiz bir yapıya sahip değildi. Class ların karşılığında fonksiyonlar kullanılıyordu.
Fonksiyonların ve objeler metodlarını ve propertilerini prototype denilen yapılardan alıyor. Kalıtım da bu şekilde yapılıyor.
ES2015 ile class yapısı da javascript için tanımlandı.
Nodejs
Javascript kodlarının backend de çalıştırılarak uygulama geliştirilmesini sağlar.
Chrome tarayıcısının V8 isimli javascript interpreter kullanır ve tarayıcıda olan Web Api ler gibi C++ ile yazılmış apiler sunar.
Php yada ASP den farkı asenkron olması
Örnek bir dosya sunma isteği için Nodejs
- İstekleri dinlemeye başlar
- Gelen isteği dosya sistemine iletir
- Başka istekleri dinlemek için hazırdır.
- Dosya sistemi için bittiği zaman sunucuya bilgiyi döner oda cevap olarak istemciye veriyi gönderir
ASP yada PHP
- İstekleri dinlemeye başlar
- Gelen isteği dosya sistemine iletir
- Dosya sisteminin işini bitirmesini bekler
- Dosya sistemi sunucuya bilgiyi dönünce oda cevap olarak istemciye veriyi gönderir
- Başka istekleri dinlemek için hazırdır
Nodejs ile geliştirilen uygulamalar
- Masaüstü uygulamaları
- Backend Server uygulamaları
- Grunt, gulp, webpack, parcel gibi geliştirici araçları.
- Paket yönetimi
- Komut satırı araçları
Geliştirici Araçları
Genel olarak geliştiricilerin ihtiyacı olan işleri otomize etmeye yarayan araçlardır.
- Dosyaları sıkıştırmak ve anlaşılmasını zorlaştırmak için karıştırmak.
- Tarayıcıların desteklemediği teknolojiler kullanılarak kod yazmayı sağlamak. ( Babel, Typescript vs.)
- Oluşan dosyaları optimize etmek .
Webpack, parcel, grunt, yeoman, gulp, snowpack gibi bir sürü örneği bulunabilir.
Webpack en popülerlerinden birisidir.
Performans
Javascript performansı konusunun temelinde javascriptin nasıl single-threaded ve non blocking çalıştığını anlamak çok önemli. Bunun dışındaki konular detaylı ipuçları oluyor.
- Olabildiğince DOM üzerinde manipülasyonu azaltmak
- Main thread içerisinde ağır işler yapmamak
- Dom üzerinde elementlerin pozisyonlarında ki değişikliklerde GPU ile güçlendirilen metodları kullanın
Bu konu ile ilgili detaylı bilgiyi aşağıda ki linkten görebilirsiniz.
Güvenlik
Güvenlik kavramı verinin gizliliği ile örtüşmektedir. Genel olarak kullanıcıların erişmemesi gereken verilere erişmesi güvenlik açığı olarak değerlendirilebilir.
Javascript tarayıcı da çalışan bir uygulama olduğu için, olabiliyor ise hiç bir önemli bilgiyi ön yüze göndermemek gerek. Gönderiyorsak bile güçlü şifreleme algoritmaları kullanılmalı.
Javascript içinde değişkenlerde sakladığımız verileri hiç bir şekilde Global Scope erişimine açmamalıyız.
Sunucudan gelen her türlü veri ve sunucuya giden her türlü veri , o halleri ile kullanıcılara açılmış demektir. Ekranda göstermiyor olmanız bunu engellemez. Her kullanıcı geliştirici araçlarına erişebilir.
- Güvenli HTTPS protokolü kullanılmalı
- Doğru Content Security Policy ile ilgili gerekli ayarların Server tarafından tanımlanmış olması gerekiyor.
- Sql injection , Html injection gibi açıkları gidermek için kullanıcıdan alınan free text veri alanlarındaki verilerin kontrol edilmesi gerekir. Bu konuda daha güvenli hissetmek için framework kullanmak akıllıca bir çözüm olur
Bu konuda detaylı bilgi için:
Bazı Online Kurslar:
