İçeriğe geç

Etiket: javascript

Javascript Callback nedir?

Javascriptte en çok kullanılan yapılardan biri de callback’lerdir. Bu yazıda asenkron fonksiyonları değil sadece callback yapısına değineceğim daha sonraki yazılarda asenkron yapılara await, then gibi özelliklere değineceğim.

callback
callback

En yalın hali ile callbackler başka bir fonksiyonun içine yolladığımız fonksiyonlardır.Basit bir örnekle daha iyi anlayalım:

	var callback = function(){
			alert("merhaba dünya")
		       }

	var button = document.createElement("button")
	button.onclick=callback

Yukarıdaki örnekte bir buton nesnesi oluşturduk ve bu buton nesnesinin onclick özelliğine bir callback atadık. Artık buton nesnesine yolladığımız fonksiyonun çalıştırılmasından biz sorumlu değiliz, onu eklediğimiz nesne onclick eventi gerekli olduğunda bizim dışarıdan verdiğimiz fonksiyonu çalıştırmış olacak. En yalın haliyle budur. Bir nesneye veya fonksiyona içeride kendi çalışma biçimine göre bizim ona yolladığımız bir fonksiyonu çalıştırmasıdır.

Şimdi bir fonksiyona bir fonksiyon yollayarak bir örnek yapalım.

var mycallback = function(s1,s2){
		
		return 	s1+" user"+s2
	
	}
	
	var mainfunc = function(callback){
		var s1 = "merhaba"
		var s1 = ", giriş başarılı."
		
		console.log(callback(s1,s2))
	}
	
	mainfunc(mycallback)
	//Output: merhaba user, giriş başarılı.

Böyle bir kullanım da olabilir örneğin express js hello world örneği tam anlatmak istediğimiz şeye uygun:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Yukarıdaki örnekte “(req, res) => res.send(‘Hello World!’)” kısım bir arrow fonksiyon yazımı(normal yazımı: function (req,res){} , arrow fonksiyonları başka bir yazıda değineceğim aklımızı karıştırmasın şimdi.), req, res yazması yolladığımız fonksyiona içeride req res adında parametrelerin yolanacağını ifade ediyor. Bunları yazmadan bir fonksiyon yollarsak zaten ana fonksiyonun içindeki req res değerlerine callback içinden ulaşamazdık. Bu parametlerelerle birlikte sanki main fonksiyonun içnideymişiz gibi bu değişkenleri istediğimiz şekilde kullanıp ana fonksiyona yollayabiliyoruz. Callback in en güzel yanı da budur. Umarım sade faydalı bir içerik olmuştur.

Webpack katili Parcel nedir ?

Neden parcel ?

 

Günümüzde web uygulamaları için geniş özelliklere sahip birçok demetleyici bulunmaktadır, bunların en çok kullanılanları webpack ve browserify da dahil.

Bir çok demetleyici konfigurasyon ve eklentiler ile kurulur ve sadece birşeylerin çalışması için 500 satırdan fazla satır sayısı olan konfigurasyon doslayarı genellikle var olan şeyler. Bu konfigurasyonlar sadece sıkıcı ve zaman harcayan şeyler değil ayrıca her uygulama için çoğaltmak ve doğru ayarı yapmak da zor. Sıklıkla ürün kısmına geçmede alt optimizasyonların gerektiği bir hal alabiliyor. Parcel sıfır configurasyon ayarı olacak şekilde tasarlanmıştır. SAdece giriş noktanızı belirtmeniz yeterli o geri kalanı doğru bir şekilde yapacaktır.

Var olan demetleyicilerin bir olumsuz yanı da çok yavaş olmalarıdır. Geliştirme sürecinde fazlaca değişiklierin yapılması çok fazla bağımlılığı ve fazla dosyaların olduğu büyük uygulamalarda demetleme sürecinin dakikalar alması acı verici bir durumdur. Parcel modern çok çekirdekli işlemcilerden yaralanarak kodunuzu paralel işlemlerle derler. Sonuç olarak ilk demetlemede büyük bir hız artışı olur. Ayrıca her dosya için dosya sistemi önbelleğine sahiptir, böylece ileriki başlangıçlarda da hızlıdır.

Sonuç olarak var olan demetleyiciler string yükleyiciler/dönüştürücüler üzerine kurulmuştur. Bir stringi alırlar parse ederler bazı dönüşümlerden eçirerek tekrar kod üretirler.Bu da bir dosya için fazla sayıdadönüşüm ve kod üretme anlamına gelir, pek etkili bir yol değildir bunu aksine Parcel her dosya için bir kere parse eder, birçok kez dönüşüm uygular ve birçok dönüşümden geçirerek bir defa kod üretir.

 

Yükelemek için :

yarn global add parcel-bundler

Başlangıç noktası göstermek için :

parcel index.html

Bu kadar artık geliştirme işlemine başlayabiliriz.

 

Ana sayfası: https://parceljs.org/

Github sayfası: https://github.com/parcel-bundler/parcel

Kullanımı video:

 

 

Velocity ve GSAP nedir?

 

Velocity.js ve GSAP popüler Javascript animasyon kütüphanelerindendir. Bu kütüphaneler hem birlikte hemde jquery olmadan kullanılabilir.Jquery ile kullandığınızda performansınızda herhangi bri bozulma meydadna gelmez.jQuery sayfanızda varsa, sadece yapmanız gereken jQuery’nin $.animate(). ‘si gibi Velocity ve GSAP kullanabilirsiniz.