{"id":26701,"date":"2023-11-12T11:50:41","date_gmt":"2023-11-12T11:50:41","guid":{"rendered":"https:\/\/www.gencayyildiz.com\/blog\/?p=26701"},"modified":"2023-11-12T11:50:41","modified_gmt":"2023-11-12T11:50:41","slug":"angular-17-defer-deferrable-views","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angular-17-defer-deferrable-views\/","title":{"rendered":"Angular 17 – @defer Deferrable Views"},"content":{"rendered":"
<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular 17 ile component lazy loading<\/a> davran\u0131\u015f\u0131na kar\u015f\u0131n yeni bir yol olarak gelmi\u015f olan @defer<\/code> syntax’\u0131 ile birlikte Deferrable Views<\/em> \u00f6zelli\u011fini inceliyor olaca\u011f\u0131z.<\/p>\n

@defer Nedir? Nas\u0131l Bir \u0130\u015fleve Sahiptir?<\/h3>\n

@defer<\/code> syntax’\u0131 component’lere lazy loading davran\u0131\u015f\u0131n\u0131 uygulaman\u0131n yeni bir yolunu sa\u011flayan \u00f6zelliktir. \u0130\u015flevsel olarak, bir ko\u015fula kar\u015f\u0131n lazy loading ile y\u00fcklenecek bir template blo\u011fu tan\u0131mlanmas\u0131na olanak tan\u0131maktad\u0131r. Bu blok i\u00e7erisinde bulunan t\u00fcm component, pipe, directive ve library’ler lazy loading ile y\u00fcklenecektir.<\/p>\n

Mevcut lazy loading davran\u0131\u015f\u0131 Router mekanizmas\u0131na ba\u011fl\u0131yken, @defer<\/code> ile gelecek olan davran\u0131\u015f selector \u00fczerinden kullan\u0131lan component’ler ve kapsad\u0131klar\u0131 i\u00e7erikleri i\u00e7in ge\u00e7erlidir.<\/em><\/p><\/blockquote>\n

Misal olarak a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ele al\u0131rsak e\u011fer;<\/p>\n

\n
\r\n@Component({\r\n  selector: 'app-child2',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  template: `Child2 Component`\r\n})\r\nexport class Child2Component {\r\n\r\n}\r\n<\/pre>\n<\/div>\n
\n
\r\n@Component({\r\n  selector: 'app-child1',\r\n  standalone: true,\r\n  imports: [CommonModule, Child2Component, ExamplePipe],\r\n  template: `Child1 Component\r\n    <br>\r\n    <app-child2><\/app-child2>\r\n  `\r\n})\r\nexport class Child1Component {\r\n\r\n}\r\n<\/pre>\n<\/div>\n
\n
\r\n@Component({\r\n  selector: 'app-home',\r\n  standalone: true,\r\n  imports: [CommonModule, Child1Component, ExampleDirective],\r\n  template: `Home Component\r\n  <br>\r\n  <app-child1><\/app-child1>\r\n  `\r\n})\r\nexport class HomeComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere ‘Child2Component’ ‘Child1Component’te, ‘Child1Component’ ise ‘HomeComponent’te kullan\u0131lmaktad\u0131r. Ayr\u0131ca bu component’lere dikkat ederseniz ‘ExamplePipe’ ve ‘ExampleDirective’ yap\u0131lar\u0131 da e\u015flik etmektedir. Ve nihai olarak ‘HomeComponent’in de ‘AppComponent’te a\u015fa\u011f\u0131daki gibi kullan\u0131ld\u0131\u011f\u0131n\u0131 varsayal\u0131m.<\/p>\n
\n
\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [CommonModule, RouterOutlet, HomeComponent],\r\n  template: `\r\n    <button>Change State<\/button>\r\n    @if(state){\r\n      <app-home><\/app-home>\r\n    }\r\n  `\r\n})\r\nexport class AppComponent {\r\n  state: boolean = false;\r\n  ngOnInit() {\r\n    const button = document.getElementsByTagName("button");\r\n    fromEvent(button, "click").subscribe(() => {\r\n      this.state = !this.state;\r\n    })\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
Yukar\u0131daki kullan\u0131ma g\u00f6z atarsan\u0131z e\u011fer ‘HomeComponent’ sayfan\u0131n ilk y\u00fcklendi\u011fi anda g\u00f6z\u00fckmemekte ve state de\u011fi\u015fkeninin de\u011ferine g\u00f6re bu durum opsiyonel bir \u015fekilde devam etmektedir. \u015eimdi -madem g\u00f6z\u00fckmeyecekti o zaman bu component’i lazy loading ile y\u00fckleyeydik-<\/em> dedi\u011finizi duyar gibiyim. Ki makbul olanda budur. \u0130\u015fte bu durumda @defer<\/code> \u00f6zelli\u011fi ile ilgili component’i ve bu component’in kulland\u0131\u011f\u0131 t\u00fcm alt component, pipe ve directive’leri kullan\u0131c\u0131n\u0131n ger\u00e7ekten ihtiyac\u0131 oldu\u011fu durumda rahatl\u0131kla y\u00fckleyebilirsiniz.<\/p>\n
\u015e\u00f6yle ki;<\/p>\n
\n
\r\n    <button>Change State<\/button>\r\n    @defer(when state){\r\n      <app-home><\/app-home>\r\n    }\r\n<\/pre>\n<\/div>\n
\u0130\u015fte bu kadar \ud83d\ude42
\n\"Angular<\/a>G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere @defer<\/code> kontrol\u00fc ile ilgili component(ve alt component’ler ile birlikte pipe ve directive’ler) ko\u015ful sa\u011fland\u0131\u011f\u0131nda y\u00fcklenecektir ve b\u00f6ylece performansl\u0131 bir \u00e7al\u0131\u015fma sergilenmi\u015f olacakt\u0131r.<\/p>\n
\u015eimdi @defer<\/code> syntax’\u0131n\u0131n ba\u015fka bir ilgin\u00e7 \u00f6zelli\u011fine odaklanal\u0131m. Ertelenmi\u015f blok(deferred block) y\u00fcklenene kadar placeholder’\u0131n g\u00f6r\u00fcnt\u00fclenmesini…<\/p>\n
@placeholder, @loading ve @error<\/h3>\n
@defer<\/code> ile y\u00fckleme ko\u015fulu kar\u015f\u0131lanana kadar farkl\u0131 bir g\u00f6r\u00fcnt\u00fcde bulunmak istiyorsan\u0131z e\u011fer @placeholder<\/code>‘\u0131 kullanabilirsiniz. Daha sonra y\u00fckleme ko\u015fulu kar\u015f\u0131land\u0131\u011f\u0131 taktirde component y\u00fcklenene kadar @loading<\/code>‘den istifade edebilir ve y\u00fckleme s\u00fcrecinde bir hatayla kar\u015f\u0131la\u015f\u0131l\u0131rsa e\u011fer @error<\/code> blo\u011funda gerekli \u00f6nlemleri alabilirsiniz.<\/p>\n
\n
\r\n      @defer(when state){\r\n        <app-home><\/app-home>\r\n      }\r\n      @placeholder {\r\n        ...***...\r\n      }\r\n      @loading {\r\n        <marquee>Loading...<\/marquee>\r\n      }\r\n      @error {\r\n        Error\r\n      }\r\n<\/pre>\n<\/div>\n
Burada unutulmamas\u0131 gereken, @defer<\/code> i\u00e7eri\u011fi lazy loading’le y\u00fcklerken; @placeholder<\/code>, @loading<\/code> ve @error<\/code> eagerly loading ile y\u00fckleme ger\u00e7ekle\u015ftirmektedir.<\/em><\/p><\/blockquote>\n
Ayr\u0131ca kimi durumlarda @defer<\/code> blo\u011funun y\u00fcklenmesi olduk\u00e7a h\u0131zl\u0131 olabilece\u011finden dolay\u0131 @loading<\/code> blo\u011funun \u00e7ok h\u0131zl\u0131 g\u00f6r\u00fcnt\u00fclenip gizlenmesi ve bu durumdan kaynakl\u0131 bir titre\u015fim etkisi riski s\u00f6z konusu olabilmektedir. \u0130\u015fte bu duruma \u00f6nlem ama\u00e7l\u0131 y\u00fcklemenin ka\u00e7 milisaniye sonra g\u00f6r\u00fcnt\u00fclenece\u011fini belirtmek i\u00e7in @loading<\/code> blo\u011funda after<\/code> se\u00e7ene\u011fini kullanabilirsiniz.<\/p>\n
\n
\r\n      @defer(when state){\r\n        <app-home><\/app-home>\r\n      }\r\n      @placeholder {\r\n        ...***...\r\n      }\r\n      @loading(after 150ms;) {\r\n        <marquee>Loading...<\/marquee>\r\n      }\r\n<\/pre>\n<\/div>\n
after<\/code>, @defer<\/code> i\u00e7eri\u011finin y\u00fcklenmesi belirtilen zamansal de\u011ferden daha az s\u00fcrd\u00fc\u011f\u00fc taktirde @loading<\/code> blo\u011funu hi\u00e7bir zaman g\u00f6r\u00fcnt\u00fclemeyecektir. B\u00f6ylece olas\u0131 titre\u015fim etkisi ortadan kald\u0131r\u0131lm\u0131\u015f olacakt\u0131r.<\/p>\n
Ayr\u0131ca minimum<\/code> se\u00e7ene\u011fi ile de y\u00fckleme i\u00e7in minimum s\u00fcreyi belirleyebilirsiniz. Yani, @defer<\/code> i\u00e7eri\u011finin y\u00fcklenmesi minimum<\/code> de\u011ferinden daha h\u0131zl\u0131ysa o taktirde @loading<\/code> i\u00e7eri\u011fi bu s\u00fcre zarf\u0131nda g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\n
\n
\r\n      @defer(when state){\r\n        <app-home><\/app-home>\r\n      }\r\n      @placeholder {\r\n        ...***...\r\n      }\r\n      @loading(minimum 150ms;) {\r\n        <marquee>Loading...<\/marquee>\r\n      }\r\n<\/pre>\n<\/div>\n
Tabi isterseniz t\u00fcm bu se\u00e7enekleri a\u015fa\u011f\u0131daki gibi k\u00fcm\u00fclatif bir \u015fekilde de kullanabilirsiniz;<\/p>\n
\n
\r\n      @defer(when state){\r\n        <app-home><\/app-home>\r\n      }\r\n      @placeholder {\r\n        ...***...\r\n      }\r\n      @loading(after 50ms;minimum 500ms;) {\r\n        <marquee>Loading...<\/marquee>\r\n      }\r\n<\/pre>\n<\/div>\n
minimum<\/code> se\u00e7ene\u011fi ayr\u0131ca @placeholder<\/code> i\u00e7in de kullan\u0131labilmektedir. Bu hi\u00e7bir ko\u015ful olmaks\u0131z\u0131n y\u00fcklemenin hemen ger\u00e7ekle\u015fti\u011fi durumlarda, olas\u0131 titre\u015fim etkisini \u00f6nlemek i\u00e7in yararl\u0131 olabilir.<\/p>\n
\n
\r\n    @placeholder(minimum 500ms) {\r\n      ...***...\r\n    }\r\n<\/pre>\n<\/div>\n
@defer Ko\u015fullar\u0131<\/h3>\n
Angular 17’de @defer<\/code> \u00f6zelli\u011fi ile bir\u00e7ok mant\u0131kta ko\u015fullu davran\u0131\u015f sergilenebilmektedir. \u015eimdi gelin bunlar\u0131 tek tek inceleyelim;<\/p>\n