Fatih Acet

Fatih Acet

Co-f & CTO at Superpeer

twittergitlabgithubenvelope-olinkedinyoutubeinstagramAbone Ol!

Object Observe

ECMAScript 7’nin belki de en onemli ozelligi olan Object.observe Chrome 36 ile resmen hayatimiza girdi ve artik object uzerinde olusan degisiklikleri native bir sekilde dinlemek ve aksiyon almak mumkun.

Aslinda bir cogumuz gundelik hayatinda bu ozelligi Angular, Backbone, Ember gibi framework’ler ile zaten kullaniyor fakat bu ozelligin JavaScript’e native olarak geliyor olmasi cok daha heyecanlandirici bir durum. Ayrica suradaki Angular developer’larin yaptigi testlerde Angular ile native Object.observe arasinda 20x-40x performans farki olmasi da bir baska guzel haber.

Ufak bir ornek ile nasil kullanabilecegimizi gostereyim.

1
2
3
4
5
6
7
8
9
10
obj = {
name: 'Fatih',
nickname: 'fatih',
age: 26,
job: 'Developer'
}

Object.observe(obj, function(change){
console.log(change);
});

obj diye basit bir object’imiz var ve Object.observe(obj, callbackFn) ile bu object uzerinde olusacak degisiklikleri dinlemeye basladik. Simdi obj.nickname degerini fatihacet olarak degistirelim ve asagidaki console ciktisina bakalim.

obj.nickname = 'fatihacet'

Yukaridaki degisikligi yaptigimiz zaman callback function’imiza gelen change object’i icinde degisiklik ile ilgili detaylar mevcut.

  • name alaninda degisikligin oldugu field adi
  • object alaninda object’imizin degisiklikden sonraki hali
  • oldValue alaninda degisiklikden onceki degeri
  • type alaninda ise degisikligin tipi. update add ve delete olabiliyor. Bizim ornegimizde update

Object.observe tabi ki array’ler icin de calisiyor. Fakat cok ufak degisiklikler ile. Asagidaki console ciktisina bakalim ve sonra devam edelim.

k.splice(1, 1, 1) ile arrayin 1. index’inden baslayarak 1 item cikardik ve yerine 1 sayisini koyduk ve console’da log’lagimiz change object’inde addedCount, index ve removed gibi yeni key’ler gorduk. Bunlar yapilan degisiklikle ilgili detaylar.

  • addedCount kac tane item ekledigimiz.
  • index array’imizin hangi index’inde degisiklik oldugu
  • removed ise array’den cikardigimiz item’lardan olusan bir array

Bu yeni ozellik suan icin sadece Chrome 36’da bulunmakta. Butun modern browser’lar implement ettigi zaman suan kullandigimiz butun framework’lerin cok daha performansli calismasi mumkun. Ozellikle Angular, Ember gibi framework’lerin en buyuk ozelliklerinden biri olan Two Way Data Binding‘i cok kolay bir sekilde kendi uygulamamiz icin kullanabiliriz. Basit bir ornegi icin suradaki JSFiddle’ima bakabilirsiniz.


Konuyla ilgili daha fazla bilgi icin,

Comments

Bolum 4: Hollanda kamp yeri gezelim! (Camping de Ruimte)

Merhaba arkadaslar Hollanda'da kaldigimiz kamp yerini gezip gostermek istedim sizlere. Gorusmek uzere.

Bolum 3: Karavan turu (Adria Altea 552PK ic mekan)

Merhaba arkadaslar Bu videoda karavanimizin icini ve disina taktigimiz cadiri anlattim. Umarim begenirsiniz. Gorusmek uzere!

Bolum 2: Karavan yerine yerlesiyoruz

Merhaba arkadaslar, Hollanda kamp yeri acisindan cok secenege sahip olan bir ulke ama bu sene buradaki 4. kamp yerimiz olan ...

Bolum 1: Yeni Karavanimizi Teslim Aliyoruz

Merhaba arkadaslar, Gecen sene sahip oldugumuz Caravelair Antares 400 karavani satip Adria Altea 552PK karavan aldik.

My Afternoon Coffee Routine (with Rocket Appartamento & Eureka Specialita)

Merhabalar Is guc yogunlugundan kanala icerik gonderemiyorum, bildiginiz uzere Superpeer asiri yogun Bazi gunler ...

Superpeer'in kuruluş hikayesi

Superpeer'i kuralı neredeyse 1 yıl oldu. Bu süreçte iki yatırım aldık ve büyük bir ekip haline geldik. Aşağıdaki sorular çeşitli ...

Superpeer'in Serverless Yapisi, Cloud Functions/Cloud Run ve GCP/AWS karsilastirmasi

Merhabalar Superpeer, 2020 yilininda basinda kurdugum ve Subat ayinda 2.8 milyon dolar yatirim alan yeni girisimim.

Superpeer Test LiveStream

JavaScript Egitimi #03: Statements

03:40 If statement 05:40 For statement 14:54 While statement 19:37 Do while statement 23:11 Object 26:55 Array 45:08 forEach ...

JavaScript Egitimi #02

Frontend Calisma Grubuyla beraber JavaScript egitim serisine basladik. Serinin devami gelmeye devam edecek. Bu videodaki ...

JavaScript Egitimi #01: JavaScript'e Giris

Frontend Calisma Grubuyla beraber JavaScript egitim serisine basladik. Bu ilk videoda JS'e giris yaptik ve yaptigimiz oturumu ...

Acet Yollarda EP01: Gokay Gurcan

Selamlar Bu videoda Almere'den Amsterdam'a giderken Gokay Gurcan'la arabada yaptigimiz muhabbeti kaydettik. Spontane ...

Hollanda'ya taşınmak, ev bulmak ve yaşam | Yurtdışında Yaşam Medium

Merhabalar arkadaslar Bu videoda Didem'le beraber Melissa Gurcan'in Yurtdisinda Yasam Medium'u icin Hollanda'da is ...

VLOG:🌷Keukenhof - Hollanda Lale Bahcesi

Merhaba arkadaslar Keukenhof Hollanda'nin Lisse sehrinde bulunan ve Mart ayinda acilip Mayis ayinda kapanan cok ozel ...

Vue Router: Alias ve Nested Route ornegi

Selam arkadaslar kodilan.com icin kodilan.com/ilan-ara?type=3 seklinde gozuken URL'leri kodilan.com/ilan-ara/stajyer ...

Google Tag Manager nasil kullanilir?

Bu videoda Google Tag Manager ile sayfada olan olaylarin nasil track edilecegini anlattim. Google Analytics uzerine eklenen ...

Proje Kod İncelemesi: kodilan.com | Vue, Vuex, Vue Router

Selamlar arkadaslar Uzun bir aradan sonra yeni bir video ile tekrar YouTube'a donus yapmak istedim. Bu arada halimi hatrimi ...

Tatil 2018 Drone Footage

Kas ve Kalkan'da yaptigimiz 2018 tatilimizin drone videosu. Drone: DJI Spark.

Hangi üniversite ve bölümü tercih etmeyeliyim?

Email bultenine abone olmak icin http://bit.ly/acet-subs Üniversite sınav sonuçları yakında açıklanıyor, tercih dönemi yaklaştı.

Faydalı İpuçları #4: Mac OS Pencere Yönetimi | Better Touch Tool

Email bultenine abone olmak icin http://bit.ly/acet-subs Merhaba arkadaşlar Bu videoda Better Touch Tool kullanarak Mac OS ...

Sunum: GitLab ve GitLab Frontend'i

Email bultenine abone olmak icin http://bit.ly/acet-subs Herkese merhaba arkadaslar Software Craftsmanship Turkey'de ...

Vue JS SPA'lari deploy etmek: GitLab CI DigitalOcean ve Surge.sh

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda daha onceden olusturdugumuz bir Vue SPA'i GitLab CI ...

Faydalı İpuçları #3: VueJS .native event modifier nedir?

Email bultenine abone olmak icin http://bit.ly/acet-subs Selam arkadaşlar Bu videoda, kullandığımız bir child component'in ...

Bolum 3: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Ilk iki bolumunu beraber gelistirdigimiz Chrome eklentisine bu ...

Bolum 2: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Birinci bolumune asagidaki linkten ulasabileceginiz GitLab ...

Bolum 1: GitLab Chrome Extension'i yapalim

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar Aniden bir canli yayina basladim fakat aklimda olan bir fikri ...

Biraz sohbet edip AmsterdamJS Tshirt Çekilişi yapalım

Email bultenine abone olmak icin http://bit.ly/acet-subs Oncelikle biraz sohbet edip, bir kac soru cevap yaptiktan sonra ...

VLOG #06: AmsterdamJS'e gidiyorum

AmsterdamJS etkinliginde VueJS Best Practices konulu bir konusma yapacagim. AmsterdamJS Vlog serisinin ilk videosunda ...

Benden haberler ve Refactor vs Rewrite konusu

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda en cok merak edilen konulardan biri olan Refactor ve Rewrite ...

Yazilimcilar Tasarim Bilmeli mi?

Hakan Ertan Yazilimcilar Tasarim Bilmeli mi? video serisinin 2. videosunda benim de yer almami istedi ve ayni soruyu ...

Gunluk Latte’mi beraber yapalim

Her gun kahvaltidan sonra yaptigim kahvemi ufak bir video yapmak istedim. iPhone'daki iMovie'yle editledim ve oldukca kullanisli ...

Vuex #03/03: Vuex olmadan nasil yapariz?

Email bultenine abone olmak icin http://bit.ly/acet-subs Vuex mini serisinin son videosunda bir uygulamayi Vuex kullanmadan ...

VLOG #05: Yerinde Inceleme: Amsterdam'a yaz gelmis mi?

Amsterdam'da havalarin duzeldigini ve yaz geldigini soyluyorlardi. Dun Amsterdam'a donduk ve bugun yerinde inceledik. Sonuc: ...

Vuex #02/03: 15 Dakikada Vuex konseptleri

Email bultenine abone olmak icin http://bit.ly/acet-subs Bu videoda 15 dk icinde size Vuex konseptlerini kolay bir ornekle ...

GitLab Workflow: VSCode extension for GitLab

This is a product demo of the VSCode extension I built for GitLab. Below you can find related links. Repository: ...

VUEX #01/03: Nedir? Neden kullaniyoruz?

Email bultenine abone olmak icin http://bit.ly/acet-subs Selamlar arkadaslar Bu video ile kanaldaki teknik videolara donus ...

Drone nasil ucurulmaz? DJI Spark Crash

Bugun Rembrandt Park'da talihsiz bir drone kazasi yasadim. 19mt yukseklikte ve yaklasik 40mt ilerimdeydi drone ve bu ...

Bilgem Cakir ile Canli Yayindayiz

Bilgem Cakir'la yazilim ve oyun gelistirme uzerine guzel bir sohbet yapacagiz. Canli yayin suresince Bilgem Cakir'a sorularinizi ...

NYC'den Fatih Arslan ve SF'dan Cihangir Savas'la beraberiz

Bundan yaklasik 2 ay once Fatih Arslan ve Cihangir Savas'la beraber bir yayin yapma fikrini konusuyorduk. Ortak takvim ...

VLOG #02: Amsterdam'da ev aradigim ikinci gun

16 Kasim 2017'de Amsterdam'a tasiniyoruz. O yuzden, Amsterdam'a ev bakmak amacli 3 gunluk kisa bir gezi yaptim.