<\/div>\n

Merhaba,<\/p>\n

Ge\u00e7mi\u015ften bu g\u00fcne takip eden okuyucular\u0131m bilir… Bir zamanlar C# programlama dilinin her yeni s\u00fcr\u00fcm\u00fc i\u00e7in e\u015fsiz bir heyecan duyuyordum. Art\u0131k bu heyecana Angular mimarisinin yeti\u015femedi\u011fimiz evrimsel s\u00fcrecindeki yenilikler de eklenmi\u015f bulunmaktad\u0131r. Evet… Angular son d\u00f6nemlerde(ki s\u00fcr\u00fcm yerine d\u00f6nem diyorum, \u00e7\u00fcnk\u00fc k\u0131sa vadede h\u0131zl\u0131ca yeni s\u00fcr\u00fcmlerle geldiler) bir\u00e7ok yenilik ve iyile\u015ftirmelerle yol katetmi\u015f vaziyette ve \u00f6zellikle bunlar\u0131n bir\u00e7o\u011funu kararl\u0131 hale getirerek bu h\u0131zl\u0131 geli\u015fimin maliyeti olan \u015f\u00fcpheleri de h\u0131zl\u0131 bir \u015fekilde g\u00f6lgede b\u0131rakm\u0131\u015f bir duru\u015f sergilemektedir. Velhas\u0131l kelam, bu i\u00e7eri\u011fimizde Angular 18 s\u00fcr\u00fcm\u00fc ile gelmi\u015f olan Zoneless Change Detection<\/em> davran\u0131\u015f\u0131na odaklanacak ve pratik olarak incelemelerde bulunaca\u011f\u0131z. O halde buyurun ba\u015flayal\u0131m…<\/p>\n

Zoneless Change Detection<\/h4>\n
Angular mimarisinde, uygulama baz\u0131nda veri de\u011fi\u015fikliklerini alg\u0131lay\u0131p, bu de\u011fi\u015fikliklere g\u00f6re kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcncelleme i\u015flemini etkin bir \u015fekilde y\u00f6netebilmek i\u00e7in Zone.js k\u00fct\u00fcphanesinden istifade edilirdi. Tabi bu k\u00fct\u00fcphanenin getirdi\u011fi avantajlar\u0131n yan\u0131nda bir nebze performans dezavantaj\u0131 gibi durumlarda s\u00f6z konusuydu. Angular geli\u015ftirici ekibi, son zamanlarda Zone.js’siz bir mimari \u00fczerine odaklanm\u0131\u015f vaziyettedirler ve son s\u00fcrat \u00e7al\u0131\u015fmalar\u0131n\u0131 ger\u00e7ekle\u015ftirmektedirler. \u0130\u015fte bu s\u00fcre\u00e7 neticesinde art\u0131k ‘Zoneless’ \u015feklinde ifade edilen ilk deneysel API’ler Angular 18 ile payla\u015f\u0131lm\u0131\u015ft\u0131r.<\/p>\n
Zoneless Change Detection’\u0131 kullanmaya ba\u015flamak i\u00e7in \u00f6ncelikle provideExperimentalZonelessChangeDetection<\/code> metodunun a\u015fa\u011f\u0131daki gibi uygulama provider’\u0131na eklenmesi gerekmektedir;<\/p>\n
\n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideExperimentalZonelessChangeDetection()\r\n ]\r\n};\r\n<\/pre>\n<\/div>\nArd\u0131ndan angular.json<\/em> \u00fczerinden Zone.js polyfills<\/code> k\u0131sm\u0131ndan da kald\u0131r\u0131lmal\u0131d\u0131r;<\/a>B\u00f6ylece art\u0131k uygulamam\u0131z Zone.js olmaks\u0131z\u0131n aya\u011fa kald\u0131r\u0131laca\u011f\u0131 i\u00e7in daha k\u00fc\u00e7\u00fck bir paket boyutuna sahip olacak ve bu da daha h\u0131zl\u0131 sayfa y\u00fckleme ve runtime’da ilk olu\u015fturma(initial render) sa\u011flayacakt\u0131r.<\/p>\n Bu yap\u0131land\u0131rmadan sonra art\u0131k component’lerde zoneless kullanman\u0131n en iyi yolu a\u015fa\u011f\u0131daki gibi signal’lardan istifade etmektir;<\/p>\n \n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n imports: [RouterOutlet, FormsModule],\r\n template: `\r\n <h1>Merhaba {{name()}}<\/h1>\r\n <button (click)="handleClick()">Zoneless<\/button>\r\n `\r\n})\r\nexport class AppComponent {\r\n name = signal("");\r\n handleClick() {\r\n this.name.set("Gen\u00e7ay");\r\n }\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer zone.js’den birka\u00e7 farkla \u00e7al\u0131\u015fan signal yap\u0131lanmas\u0131 g\u00f6r\u00fcyoruz. Normalde zone.js, uygulaman\u0131n state’i de\u011fi\u015fti\u011fi an bunu tespit eder ve bu \u015fekilde bir \u00e7al\u0131\u015fma sergilerken, zoneless ise bu de\u011fi\u015fiklik kontrol\u00fcn\u00fc signal ile daha az maliyetle ger\u00e7ekle\u015ftirir. Bu yenilik, state de\u011fi\u015fiklikleri s\u00f6z konusu oldu\u011funda bu de\u011fi\u015fiklikleri yakalayabilmek i\u00e7in art arda birden \u00e7ok kez kontrol edilmesi durumunun \u00f6n\u00fcne ge\u00e7mekte ve b\u00f6ylece ciddi maliyetten uygulamay\u0131 t\u00f6rp\u00fclemektedir. Yani bu avantaj\u0131 \u00f6rnek baz\u0131nda izah edersek e\u011fer, butona t\u0131kland\u0131\u011f\u0131nda de\u011fi\u015fikliklerin tespiti yaln\u0131zca bir kez \u00e7al\u0131\u015fan bir fonksiyonla yap\u0131lacakt\u0131r ve bu direkt DOM’a yans\u0131t\u0131lacakt\u0131r.<\/p>\n Ayr\u0131ca zoneless davran\u0131\u015f\u0131 esas\u0131nda zone.js ile ayn\u0131 scheduler’\u0131 kullanmaktad\u0131r. B\u00f6ylece, zone.js k\u00fct\u00fcphanesine ba\u011fl\u0131 uygulamalar i\u00e7in performans \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131lm\u0131\u015ft\u0131r. Bunun i\u00e7in de provideZoneChangeDetection<\/code> metodunun a\u015fa\u011f\u0131daki gibi uygulamaya provide edilmesi yeterlidir;<\/p>\n \n\r\nexport const appConfig: ApplicationConfig = {\r\n providers: [\r\n provideZoneChangeDetection({ eventCoalescing: true }),\r\n ]\r\n};\r\n<\/pre>\n<\/div>\nNeden Zoneless Change Detection Kullanmal\u0131y\u0131z?<\/h4>\nZone.js, uygulama durumunun ne zaman g\u00fcncellenmi\u015f olabilece\u011fine dair g\u00f6stergeler olarak DOM event’lerini ve asenkron task’lar\u0131n\u0131 kullan\u0131r. Asenkron i\u015flemler ne zaman tamamlan\u0131r zone.js uygulamaya haber verir. Uygulama da bu bildirim \u00fczerine change detection mekanizmas\u0131n\u0131 devreye sokar ve bu mekanizma da uygulama state’inde bir de\u011fi\u015fikli\u011fin olup olmad\u0131\u011f\u0131n\u0131 kontrol ederek, component’lerin view’ini g\u00fcnceller. Ancak zone.js, uygulama state’inin ger\u00e7ekten de\u011fi\u015fip de\u011fi\u015fmedi\u011fine dair herhangi bir bilgiye sahip de\u011fildir. Bu y\u00fczden her asenkron i\u015flem tamamland\u0131\u011f\u0131nda change detection’\u0131 tetikleyebilir ve bu da gereksiz yere s\u0131k s\u0131k \u00e7al\u0131\u015fmas\u0131na ve do\u011fal olarak yersiz bir maliyete sebebiyet verebilir. Ee bu da ister istemez performans\u0131 negatif etkileyebilir. \u0130\u015fte s\u0131rf bu duruma istinaden zoneless change detection kullan\u0131m\u0131na \u00f6zen g\u00f6sterilmelidir.<\/p>\n Evet, uygulama performans\u0131 a\u00e7\u0131s\u0131ndan olduk\u00e7a \u00f6nem arz eden bu s\u00fcr\u00fcm\u00fcn\u00fcn en g\u00f6zde yenili\u011fi olan bu davran\u0131\u015f\u0131 kullan\u0131rken hala ba\u015flang\u0131\u00e7 a\u015famas\u0131nda oldu\u011funu unutmaman\u0131z ve olas\u0131 de\u011fi\u015fikliklere a\u00e7\u0131k olman\u0131z gerekti\u011fini hat\u0131rlatarak i\u00e7eri\u011fimi burada noktal\u0131yorum.<\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, Ge\u00e7mi\u015ften bu g\u00fcne takip eden okuyucular\u0131m bilir… Bir zamanlar C# programlama dilinin her yeni s\u00fcr\u00fcm\u00fc i\u00e7in e\u015fsiz bir heyecan duyuyordum. Art\u0131k bu heyecana Angular mimarisinin yeti\u015femedi\u011fimiz evrimsel s\u00fcrecindeki yenilikler de eklenmi\u015f bulunmaktad\u0131r. Evet…...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5061],"tags":[5062,5063,5064],"class_list":["post-27039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-18","tag-angular-18","tag-angular-18-yenilikleri","tag-zoneless-change-detection"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=27039"}],"version-history":[{"count":6,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27039\/revisions"}],"predecessor-version":[{"id":27047,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27039\/revisions\/27047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/26698"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=27039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}