Angular uygulamalar\u0131n\u0131zda performans ve reaktiviteyi k\u00f6kten de\u011fi\u015ftiren Signals yap\u0131s\u0131n\u0131 merak m\u0131 ediyorsunuz? Bu kapsaml\u0131 rehberde, Angular Signals’\u0131n ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ger\u00e7ek d\u00fcnya \u00f6rnekleriyle projelerinizde nas\u0131l kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedin. Art\u0131k daha temiz, daha h\u0131zl\u0131 ve daha y\u00f6netilebilir kod yazmaya haz\u0131r olun!<\/p>\n
Modern web uygulamalar\u0131 s\u00fcrekli etkile\u015fim halindedir. Kullan\u0131c\u0131lar veriyi girer, butonlara t\u0131klar, listeleri kayd\u0131r\u0131r ve uygulaman\u0131n an\u0131nda tepki vermesini bekler. \u0130\u015fte tam da bu noktada reaktivite devreye girer. Reaktivite, bir veri de\u011fi\u015fti\u011finde, bu veriye ba\u011fl\u0131 olan t\u00fcm bile\u015fenlerin otomatik ve verimli bir \u015fekilde g\u00fcncellenmesi yetene\u011fidir. Angular gibi tek sayfa uygulamas\u0131 (SPA) \u00e7er\u00e7eveleri i\u00e7in bu, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir \u00f6zelliktir.<\/p>\n
Peki, Angular bu reaktiviteyi daha \u00f6nce nas\u0131l sa\u011fl\u0131yordu? Temel olarak, Angular’\u0131n de\u011fi\u015fim alg\u0131lama mekanizmas\u0131 (change detection) devreye giriyordu. Bu mekanizma, bile\u015fen a\u011fac\u0131ndaki de\u011fi\u015fiklikleri tespit etmek ve DOM’u buna g\u00f6re g\u00fcncellemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Geleneksel olarak, Angular bunu Zone.js ad\u0131 verilen bir k\u00fct\u00fcphane arac\u0131l\u0131\u011f\u0131yla yapm\u0131\u015ft\u0131r. Zone.js, asenkron i\u015flemler (HTTP istekleri, zamanlay\u0131c\u0131lar, kullan\u0131c\u0131 etkile\u015fimleri) tetiklendi\u011finde Angular’\u0131 bilgilendirerek t\u00fcm uygulama genelinde bir de\u011fi\u015fim alg\u0131lama d\u00f6ng\u00fcs\u00fc ba\u015flat\u0131r. Bu yakla\u015f\u0131m, bir\u00e7ok durumda olduk\u00e7a iyi \u00e7al\u0131\u015fsa da, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda performans darbo\u011fazlar\u0131na yol a\u00e7abilir.<\/p>\n
\u00d6rne\u011fin, bir uygulaman\u0131n y\u00fczlerce bile\u015feni oldu\u011funu ve her bir kullan\u0131c\u0131n\u0131n her etkile\u015fiminde t\u00fcm bile\u015fen a\u011fac\u0131n\u0131n kontrol edildi\u011fini d\u00fc\u015f\u00fcn\u00fcn. Her ne kadar Angular \u0130\u015fte tam da bu ihtiya\u00e7lar do\u011frultusunda Angular Signals, daha modern, daha verimli ve daha sezgisel bir reaktivite modeli sunarak sahneye \u00e7\u0131kt\u0131. Signals, Zone.js’in t\u00fcm uygulamay\u0131 kontrol etme yakla\u015f\u0131m\u0131n\u0131n aksine, sadece belirli bir sinyale abone olan bile\u015fenlerin veya DOM par\u00e7alar\u0131n\u0131n g\u00fcncellenmesini sa\u011flar. Bu, \u00e7ok daha ince taneli bir de\u011fi\u015fim alg\u0131lama demektir. Veri de\u011fi\u015fti\u011finde sadece etkilenen k\u0131s\u0131mlar g\u00fcncellendi\u011fi i\u00e7in, uygulama performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde artar ve geli\u015ftiriciler i\u00e7in kod yazma deneyimi basitle\u015fir. K\u0131sacas\u0131, Angular Signals, uygulamalar\u0131m\u0131z\u0131n daha h\u0131zl\u0131, daha ak\u0131c\u0131 ve daha duyarl\u0131 olmas\u0131n\u0131 sa\u011flayarak hem kullan\u0131c\u0131lar\u0131 hem de geli\u015ftiricileri mutlu etmeyi hedefler.<\/p>\n Angular Signals, reaktif programlamaya yeni bir bak\u0131\u015f a\u00e7\u0131s\u0131 getiriyor. Temelde, bir “signal” (sinyal), de\u011feri de\u011fi\u015fti\u011finde otomatik olarak ba\u011f\u0131ml\u0131 oldu\u011fu t\u00fcm yerleri bilgilendiren bir de\u011fer tutucudur. Bu, bir yay\u0131lma (propagation) mekanizmas\u0131 arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. RxJS’in aksine, Signals do\u011frudan de\u011ferleri i\u00e7erir ve bunlara eri\u015fmek i\u00e7in Angular Signals’\u0131n kalbinde \u00fc\u00e7 ana kavram bulunur: <\/code> <\/code> <\/code><\/p>\n Bir OnPush<\/code> de\u011fi\u015fim alg\u0131lama stratejisi gibi optimizasyonlar sunsa da, Zone.js’in do\u011fas\u0131 gere\u011fi geni\u015f kapsaml\u0131 kontroller, gereksiz yeniden render’lara ve dolay\u0131s\u0131yla yava\u015flamalara neden olabilir. Geli\u015ftiriciler bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in RxJS gibi g\u00fc\u00e7l\u00fc reaktif programlama k\u00fct\u00fcphanelerini kullanmak zorunda kalm\u0131\u015ft\u0131r. RxJS, karma\u015f\u0131k asenkron veri ak\u0131\u015flar\u0131n\u0131 y\u00f6netmek i\u00e7in harika bir ara\u00e7 olsa da, kendi \u00f6\u011frenme e\u011frisi ve zengin operat\u00f6r seti ile gelir. Bu durum, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in bazen kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir ve kodun okunabilirli\u011fini d\u00fc\u015f\u00fcrebilir.<\/p>\nAngular Signals Temel Kavramlar\u0131 Nelerdir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
.value<\/code> veya subscribe()<\/code> gibi y\u00f6ntemlere ihtiya\u00e7 duymazs\u0131n\u0131z; do\u011frudan bir fonksiyon \u00e7a\u011fr\u0131s\u0131 gibi eri\u015firsiniz (\u00f6rn. mySignal()<\/code>). Bu, \u00f6zellikle \u015fablonlar\u0131n\u0131zda (templates) kodun daha basit ve okunabilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nsignal()<\/code>, computed()<\/code> ve effect()<\/code>. Bu \u00fc\u00e7 yap\u0131 ta\u015f\u0131, reaktif uygulaman\u0131z\u0131 in\u015fa etmenizi sa\u011flar.<\/p>\n\n
signal()<\/code>: Temel Reaktif De\u011ferler<\/strong>
\n signal()<\/code> fonksiyonu, reaktif bir de\u011fer yaratman\u0131n en temel yoludur. \u0130\u00e7ine ba\u015flang\u0131\u00e7 de\u011feri alarak bir WritableSignal<\/code> nesnesi d\u00f6nd\u00fcr\u00fcr. Bu nesne, mevcut de\u011ferine eri\u015fmek i\u00e7in bir getter fonksiyonu ve de\u011ferini de\u011fi\u015ftirmek i\u00e7in set()<\/code> ve update()<\/code> metotlar\u0131 sa\u011flar. Bir sinyalin de\u011feri de\u011fi\u015fti\u011finde, bu sinyali okuyan (ba\u011f\u0131ml\u0131 olan) t\u00fcm computed<\/code> veya effect<\/code> bloklar\u0131 otomatik olarak yeniden \u00e7al\u0131\u015f\u0131r.<\/p>\n\n import { signal } from '@angular\/core';\n\n const count = signal(0); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0 olan bir sinyal\n console.log(count()); \/\/ 0 - De\u011fere eri\u015fim\n\n count.set(5); \/\/ De\u011feri do\u011frudan 5 olarak ayarlar\n console.log(count()); \/\/ 5\n\n count.update(value => value + 1); \/\/ Mevcut de\u011feri kullanarak g\u00fcnceller\n console.log(count()); \/\/ 6\n <\/pre>\n
\n set()<\/code> metodu, sinyalin de\u011ferini do\u011frudan yeni bir de\u011fere ayarlar. update()<\/code> metodu ise, mevcut de\u011feri al\u0131p yeni bir de\u011fer d\u00f6nd\u00fcren bir geri arama fonksiyonu (callback function) kabul eder. Bu, mevcut de\u011fere ba\u011fl\u0131 olarak g\u00fcncelleme yapman\u0131z gerekti\u011finde olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r, \u00f6zellikle nesneler veya dizilerle \u00e7al\u0131\u015f\u0131rken immutability (de\u011fi\u015fmezlik) prensibini koruman\u0131za yard\u0131mc\u0131 olur.\n <\/li>\ncomputed()<\/code>: T\u00fcretilmi\u015f (Derived) Sinyaller<\/strong>
\n computed()<\/code> fonksiyonu, bir veya daha fazla sinyalden t\u00fcretilmi\u015f yeni bir sinyal olu\u015fturman\u0131z\u0131 sa\u011flar. Bu, bir sinyalin de\u011ferinin ba\u015fka sinyallerin de\u011ferlerine g\u00f6re hesapland\u0131\u011f\u0131 durumlarda kullan\u0131l\u0131r. computed<\/code> sinyaller, ba\u011f\u0131ml\u0131 olduklar\u0131 sinyallerden herhangi biri de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplan\u0131r. En \u00f6nemlisi, computed<\/code> sinyaller \"memoize\" edilir; yani, ba\u011f\u0131ml\u0131 olduklar\u0131 sinyaller de\u011fi\u015fmedi\u011fi s\u00fcrece, tekrar tekrar \u00e7a\u011fr\u0131lsa bile hesaplama fonksiyonu yeniden \u00e7al\u0131\u015ft\u0131r\u0131lmaz. Bu, ciddi performans iyile\u015ftirmeleri sa\u011flar.<\/p>\n\n import { signal, computed } from '@angular\/core';\n\n const firstName = signal('Can');\n const lastName = signal('Y\u0131lmaz');\n\n const fullName = computed(() => ${firstName()} ${lastName()}<\/code>);\n console.log(fullName()); \/\/ \"Can Y\u0131lmaz\"\n\n firstName.set('Ay\u015fe');\n console.log(fullName()); \/\/ \"Ay\u015fe Y\u0131lmaz\" (otomatik olarak g\u00fcncellendi)\n <\/pre>\n
\n Bu \u00f6rnekte, fullName<\/code> sinyali, firstName<\/code> veya lastName<\/code> sinyallerinden herhangi biri de\u011fi\u015fti\u011finde otomatik olarak g\u00fcncellenir. computed<\/code>'in i\u00e7indeki fonksiyon, sadece ba\u011f\u0131ml\u0131 sinyallerin de\u011ferleri de\u011fi\u015fti\u011finde tetiklenir, bu da verimli bir reaktivite sa\u011flar.\n <\/li>\neffect()<\/code>: Yan Etkileri Y\u00f6netme<\/strong>
\n effect()<\/code> fonksiyonu, sinyal de\u011ferlerine tepki olarak \"yan etkileri\" \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Yan etkiler, bir sinyalin de\u011feri de\u011fi\u015fti\u011finde tetiklenen kod par\u00e7alar\u0131d\u0131r ve genellikle DOM manip\u00fclasyonu, konsola \u00e7\u0131kt\u0131 yazma, veritaban\u0131 kaydetme veya API \u00e7a\u011fr\u0131lar\u0131 gibi \u015feyleri i\u00e7erir. effect()<\/code> fonksiyonu, ba\u011f\u0131ml\u0131 oldu\u011fu sinyallerden herhangi biri de\u011fi\u015fti\u011finde otomatik olarak yeniden \u00e7al\u0131\u015f\u0131r.<\/p>\n\n import { signal, effect } from '@angular\/core';\n\n const userId = signal(1);\n\n effect(() => {\n console.log(Kullan\u0131c\u0131 ID de\u011fi\u015fti: ${userId()}<\/code>);\n \/\/ userId() de\u011ferini kullanarak bir API \u00e7a\u011fr\u0131s\u0131 yapabilir veya localStorage'a kaydedebilirsiniz.\n });\n\n userId.set(2); \/\/ Konsola \"Kullan\u0131c\u0131 ID de\u011fi\u015fti: 2\" yazd\u0131r\u0131r\n <\/pre>\neffect<\/code> blo\u011fu, ba\u011f\u0131ml\u0131 oldu\u011fu sinyallerin ilk okundu\u011fu anda otomatik olarak \u00e7al\u0131\u015f\u0131r ve daha sonra bu sinyaller her de\u011fi\u015fti\u011finde tekrar \u00e7al\u0131\u015f\u0131r. effect<\/code>'in i\u00e7indeki kod, Angular'\u0131n de\u011fi\u015fim alg\u0131lama d\u00f6ng\u00fcs\u00fcnden ba\u011f\u0131ms\u0131z olarak tetiklenebilir ve bu da performans\u0131 optimize etmede b\u00fcy\u00fck bir rol oynar. Ancak, effect<\/code>'leri dikkatli kullanmak \u00f6nemlidir; sonsuz d\u00f6ng\u00fcleri \u00f6nlemek veya gereksiz yan etkileri tetiklememek i\u00e7in sadece ger\u00e7ekten ihtiya\u00e7 duyulan yerlerde kullan\u0131lmal\u0131d\u0131rlar.<\/p>\n<\/li>\n<\/ul>\n