Fatih Acet

Fatih Acet

Frontend Engineer at GitLab.com

twittergitlabgithubenvelope-olinkedinyoutubeinstagram

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

Koddaki bir yerin neresi tarafindan cagrildigini bulmak

Merhabalar Bu videoda console.trace'den bahsettim. Eger ulasmaya calistiginiz yerin neresi tarafindan cagrildigini bilmiyorsaniz bir debugger koyup stack ...

Sahibinden.com'da karsima cikan Nijeryali dolandiricilar

Merhaba arkadaslar Bu videoda Sahibinden.com'da MacBook Pro satarken karsima cikan Nijeryali dolandiricilarin hikayesini anlattim. Ozellikle bu videoyu ...

Uzaktan calisilacak is bulmak

Bu videoda uzaktan calismak isteyenlere is bulma konusunda yardimci olacak konulardan bahsettim. CV ve cover letter'in oneminden, farkli islere ...

Logitech C930e ve Samson Go Mic inceleme

Merhaba arkadaslar Bu videoda sizlere yeni aldigim Logitech C930e kamera ve Samson Go Mic'in bir incelemesini ve Nikon D3200 DSLR, Go Pro Hero ...

Kod Review nedir? Neden yapilir?

Bu videoda sizlerin istegi uzerine kod review konusunu anlattim. Kod review'in ne oldugundan, neden onemli oldugundan ve kod review yapan kisinin nelere ...

MacBook Mevzusu: Neden çok da şey yapmamak lazım?

Bu videoda gerek emaillerde gerekse canli yayinlarda olsun sikca sorulan sorulardan biri olan MacBook konusuna degindim. Sorular genelde, "Neden herkes ...

Tips & Tricks #1: DevTools Break on ozelligi

Yeni bir video konsepti olan Tips & Tricks playlist'inde sizlere gunluk hayatta kullandigim, isimi kolaylastiran, yillarin deneyimi ile ogrendigim kolayliklari 2-3 dk ...

Yazilim gelistirme uzerine Soru Cevap Yayini - 2

Bu aralar bebek telasindan dolayi yeni videolara pek zaman ayiramiyorum. O yuzden bir, bir bucuk saat arasinda sorulariniza cevap vermeye calistigim bir yayin ...

Ozel saglik sigortasi deneyimimiz

Bebegimiz ozel saglik sigortasi kapsaminda dunyaya geldi. Ayrica kisisel olarak 2 yildan fazla suredir ozel saglik sigortasi kullaniyorduk. Ozellikle hamilelik ...

Frontend Developer kimdir? Neleri bilmelidir?

Bu video sizlere Frontend Developer'in kim oldugunu, sorumluluklarini ve neleri bilmesi gerektigini anlattim. Umarim yararli bir video olmustur. Begendiyseniz ...

Kullandigim ve isime yarayan bazi uygulamalar

Bu video uzaktan calisirken ozellikle mobil datami ve zamanimi verimli kullanmama yardimci olacak bir kac uygulamayi sizle paylasmak istedim.Bu uygulamalari ...

Server Side Rendering Nedir? VueJS ile basit SSR yapalim

Bu videoda Server Side Rendering'in ne olduguna bakip VueJS ile yaptigim basit bir ornegi sizlerle paylastim. Blogumda YouTube'da yayinladigim videolarin ...

Sektorde Ingilizcenin onemi ve Ingilizce ogrenme ipuclari

Bu videoda esim Didem ile yazilim sektorunde Ingilizce'nin onemi ve Ingilizce konusunda kendinizi gelistirmeniz icin ipuclari verdigimiz bir video kaydettik.

Kolay IK Yazilim Kampi: Genclere egitim ve is firsati

Arkadaslar Kolay IK bir egitim kampi duzenliyor. Yaklasik bir bucuk ay surecek bu egitimde HTML, CSS, JS, NodeJS, Laravel, PostgreSQL, MongoDB, Redis, ...

Git nedir? Neden ve nasil kullaniyoruz?

Ne nedir'in ikinci videosunda Git'den bahsettim. Git'in ne oldugundan, neden kullandigimizdan, oneminden, SSH key'lerin ne oldugundan ve nasil ...

Vue JS, Vue Router ve Vuex SPA Bölüm 4

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in dorduncu bolumu. Bir onceki bolumde uygulamanin anasayfasini yapmistik, ...

Terminal nedir? Neden kullaniyoruz?

Ne Nedir playlist'inin ilk videosunda Terminal'in ne olduguna ve gunluk hayatimizda neden ve nelerde kullandigimizi anlattim. Mac OS icinde yuklu gelen ...

GitLab'da 1. yılım bitti. Ne yaptım, ne ögrendim?

Mayis 2016'da calismaya basladigim GitLab'da bir yil gecirdim ve gectigimiz bir yilin ozetini yapmak icin GitLab'e nasil girdim? Ben GitLab'e girdigimde GitLab ...

Vue JS, Vue Router ve Vuex SPA Bölüm 3

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in ucuncu bolumu. Bu bolumde uygulamamizi ayaga kaldirip, anasayfamizi ...

Vue JS, Vue Router ve Vuex SPA Bölüm 2

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in ikinci bolumu. Bu bolumde Vuex ve Vue Router'in temel prensiplerinden ...

Vue JS, Vue Router ve Vuex SPA Bölüm 1

Vue Router, Vuex ve Firebase kullarak gelistirdigim Vue Single Page Application'in birinci bolumu. Uygulama videolarini ise Playlist'de bulabilirsiniz. Vue JS ile ...

Vue JS, Vue Router ve Vuex SPA Trailer

Vue JS, Vue Router ve Vuex kullanarak gelistirdigim Single Page Application'in tanitim videosu. Uygulama videolarini ise Playlist'de bulabilirsiniz. Vue JS ile ...

Çayı demledin mi? Aile boyu uzaktan çalışma deneyimlerimiz

Bu videoda kanalima esimi de davet ettim, uzaktan calisma tecrubelerimizden bahsettik ve keyifli bir sohbet ortaya cikti. Umarim izlerken siz de keyif alirsiniz.

Jstanbul Meetup: GitLab'da VueJS'i nasil ve neden kullaniyoruz?

Bu videoda 8. Jstanbul Meetup'da, daha once yapmis oldugum bir VueJS sunumu ile bir giris yaptim ve ardindan GitLab'da neden VueJS tercih ettigimizden, ...

All Aspects of Remote Working

The talk about Remote Working I gave in Bilkent University, Ankara.

Yazilim gelistirme ve Frontend uzerine soru cevap canli yayini

Yazilim gelistirme ve Frontend dunyasi uzerine merak ettiginiz sorulara canli yayinda cevap vermeye calisacagim.

Genclere ve kendini gelistirmek isteyenlere tavsiyeler

Bu videoda yazilim sektorunde yeni giris yapacaklara ve kendisini gelistirmek isteyenlere nacizane tavsiyelerimi aktariyorum. Frontend ve yazilim gelistirme ...

JS egitim serisi ve Pro JS kitabi hakkinda

Dogukan Guven Nomak ve Fatih Kadir Akin ile cektigimiz jQuery Biliyorum Ama JavaScript Bilmiyorum videosunda bahsettigim JS kitabi ve JS egitimleri ...

VueJS 11: Swagger ile API tasarlayalim

Bu videoda, Swagger kullanarak basit bir API tasarlayacagiz ve bir sonraki videoda bu API'i kullanarak Vue Form islemleri yapacagiz. Swagger cok uzmani ...

VueJS ile GitLab icin proje yapiyorum

GitLab'de bulunan merge request widget'ini VueJS ile refactor ediyorum. Canli yayinda bakalim neler olacak :)

VueJS 10: Vue JS icin Unit ve E2E testler yazmak

Bu videoda Vue JS uygulamamizi test etmekteyi anlattim. Vue JS uygulamamiz icin Karma, Mocha ve Chai ile Unit test ve Nightwatch ile E2E testler yazdik.

VueJS 09: BONUS 1: Eksik kalan kisimlar

Bu videoda bir onceki videolardan eksik kalan kisimlari anlattigim bir video oldu. Filters, nextTick, event modifiers gibi guzel ve farkli konuladan bahsettim.

VueJS 08: Vue Router

Serinin 8. videosunda Vue Router'dan bahsettim. Vue Router kullanarak biri basit digeri daha kapsamli iki ornek yaptik. Bu videoda yazilan kodlari GitHub ve ...

VueJS 07: Giphy API kullanarak yeni bir app yapalim

Bu videoda bir onceki videoda kullanmaya basladigimiz vue-cli ile yeni bir proje olusturduk ve Giphy API'ini kullanarak yeni bir app yaptik. Diger app'den farkli ...

VueJS 06: vue-cli ve .vue dosyalarinin yapisi

Bu videoda vue-cli'dan ve vue-cli'in kullanimindan bahsettik. Basit bir webpack projesi olusturup, HTML, CSS ve JS'imizin bir arada oldugu .vue dosyalarinin ...

VueJS 05: Components

Bu videoda bir onceki ornekte yaptigimiz Amazon Cart benzeri ekrani Vue Component'i olacak sekilde refactor ettik. Vue'da Component'ler cok onemli bir yer ...

VueJS 04: Computed Properties ile dinamik data kullanimi

VueJS serisinin dorduncu videosu. Daha onceki videolari kanalimda bulabilirsiniz. Bu videoda VueJS'deki Computed Properties'den bahsettim. Bir onceki ...

VueJS 03: Amazon benzeri bir shopping cart yapiyoruz

Bu videoda VueJS'deki v-for ozelligini kullanarak dinamik olarak server'dan cektigimiz data ile Amazon Shopping Cart benzeri bir ekran yapiyoruz. Bu videoda ...

VueJS 02: Hello World!

Bu videoda VueJS'e kod uzerinde giris yaptik. Konu listesi 00:40 GitHub VueJS reposu 01:16 Vue.js anasayfasi 02:19 Awesome Vue 03:00 Vue Hello World ...

VueJS 01: VueJS ile Uygulama Geliştirme Sunumu

VueJS ile ilgili video serimin ilk videosu. Bu video'da daha önce yaptığım VueJS sunumunu tekrar anlattım, bu sayede VueJS'e genel bir bakış atmış olduk.