Modern web uygulamalar\u0131 geli\u015ftirmek hi\u00e7 bu kadar dinamik ve karma\u015f\u0131k olmam\u0131\u015ft\u0131. Peki, bu karma\u015f\u0131k d\u00fcnyada bir framework nas\u0131l olur da on y\u0131l\u0131 a\u015fk\u0131n s\u00fcredir lider konumunu koruyabilir? Angular, k\u00f6kl\u00fc ge\u00e7mi\u015fi ve s\u00fcrekli evrilen yap\u0131s\u0131yla bu sorunun cevab\u0131n\u0131 sunuyor. Bu makalede, Angular’\u0131n ilk ad\u0131mlar\u0131ndan g\u00fcn\u00fcm\u00fczdeki g\u00fc\u00e7l\u00fc yap\u0131s\u0131na kadar olan yolculu\u011funu, temel de\u011fi\u015fiklikleri ve web geli\u015ftirme d\u00fcnyas\u0131na katk\u0131lar\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Angular’\u0131n neden bu kadar g\u00fc\u00e7l\u00fc bir oyuncu oldu\u011funu ve gelecekte bizi nelerin bekledi\u011fini ke\u015ffetmeye haz\u0131r olun.<\/p>\n
G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131 beklentileri hi\u00e7 olmad\u0131\u011f\u0131 kadar y\u00fcksek. H\u0131zl\u0131 y\u00fcklenen, ak\u0131c\u0131 \u00e7al\u0131\u015fan, etkile\u015fimli ve g\u00fcvenli web uygulamalar\u0131 art\u0131k l\u00fcks de\u011fil, bir zorunluluk haline geldi. Bu beklentileri kar\u015f\u0131lamak i\u00e7in geli\u015ftiricilerin g\u00fc\u00e7l\u00fc ara\u00e7lara ihtiyac\u0131 var. \u0130\u015fte tam da bu noktada, Angular gibi kapsaml\u0131 bir front-end framework devreye giriyor ve adeta bir kurtar\u0131c\u0131 g\u00f6revi \u00fcstleniyor. Peki, Angular’\u0131 di\u011ferlerinden ay\u0131ran ve web geli\u015ftirme camias\u0131nda bu denli merkezi bir konuma getiren \u00f6zellikler nelerdir?<\/p>\n
\u00d6ncelikle, Angular, b\u00fcy\u00fck \u00f6l\u00e7ekli ve kurumsal d\u00fczeyde uygulamalar\u0131n geli\u015ftirilmesi i\u00e7in ba\u015ftan sona d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f bir ekosistem sunar. Sadece bir k\u00fct\u00fcphane olmaktan \u00f6te, tam te\u015fekk\u00fcll\u00fc bir \u00e7er\u00e7eve (framework) olarak, geli\u015ftiricilere proje ba\u015flatmaktan da\u011f\u0131t\u0131ma kadar t\u00fcm s\u00fcre\u00e7lerde rehberlik eder. Bu b\u00fct\u00fcnc\u00fcl yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck ekiplerle \u00e7al\u0131\u015f\u0131rken ve uygulaman\u0131n uzun vadede s\u00fcrd\u00fcr\u00fclebilirli\u011fini sa\u011flamak istendi\u011finde paha bi\u00e7ilmez bir avantaj sa\u011flar. Geli\u015ftiriciler, belirli bir dizi kural ve mimari prensip etraf\u0131nda topland\u0131klar\u0131 i\u00e7in kod kalitesi artar, yeni ekip \u00fcyelerinin projeye adaptasyonu kolayla\u015f\u0131r ve bak\u0131m maliyetleri d\u00fc\u015fer.<\/p>\n
Ayr\u0131ca, Angular’\u0131n geli\u015ftirme s\u00fcrecine getirdi\u011fi standartla\u015fma ve d\u00fczen, projenin tahmin edilebilirli\u011fini art\u0131r\u0131r. Bile\u015fen tabanl\u0131 mimarisi sayesinde, uygulamalar k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara ayr\u0131l\u0131r. Bu par\u00e7alar, farkl\u0131 b\u00f6l\u00fcmlerde kolayca birle\u015ftirilebilir veya g\u00fcncellenebilir. Bu modular yap\u0131, kod tekrar\u0131n\u0131 azalt\u0131r, hata ay\u0131klamay\u0131 basitle\u015ftirir ve uygulaman\u0131n genel performans\u0131n\u0131 optimize etmeye yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n profil sayfas\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn; bu sayfa, kullan\u0131c\u0131n\u0131n bilgileri, sipari\u015f ge\u00e7mi\u015fi ve ayarlar\u0131 gibi farkl\u0131 bile\u015fenlerden olu\u015fabilir. Her bir bile\u015fen kendi i\u00e7inde geli\u015ftirilip test edilebilir, bu da paralel geli\u015ftirmeye olanak tan\u0131r ve geli\u015ftirme s\u00fcresini k\u0131salt\u0131r.<\/p>\n
Performans a\u00e7\u0131s\u0131ndan da Angular \u00f6nemli avantajlar sunar. H\u0131zl\u0131 y\u00fckleme s\u00fcreleri, sorunsuz animasyonlar ve duyarl\u0131 kullan\u0131c\u0131 aray\u00fczleri, Angular’\u0131n performans odakl\u0131 mimarisinin do\u011frudan sonu\u00e7lar\u0131d\u0131r. \u00d6zellikle modern Angular s\u00fcr\u00fcmlerindeki Ivy render motoru gibi yenilikler, uygulama boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcrken \u00e7al\u0131\u015fma zaman\u0131 performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rm\u0131\u015ft\u0131r. Sunucu Taraf\u0131 \u0130\u015fleme (SSR) ve Statik Site \u00dcretimi (SSG) gibi tekniklerin entegrasyonuyla, ilk y\u00fckleme s\u00fcreleri k\u0131salt\u0131labilir ve SEO performans\u0131 iyile\u015ftirilebilir. Sonu\u00e7 olarak, Angular, sadece h\u0131zl\u0131 bir geli\u015ftirme s\u00fcreci sunmakla kalmaz, ayn\u0131 zamanda son kullan\u0131c\u0131lara da \u00fcst d\u00fczey bir deneyim ya\u015fat\u0131r.<\/p>\n
Her b\u00fcy\u00fck hikayenin bir ba\u015flang\u0131c\u0131 vard\u0131r ve Angular’\u0131n hikayesi de AngularJS (ya da yayg\u0131n ad\u0131yla Angular 1.x) ile ba\u015flad\u0131. 2010 y\u0131l\u0131nda Google taraf\u0131ndan geli\u015ftirilen bu framework, o d\u00f6nemde JavaScript d\u00fcnyas\u0131na adeta bir f\u0131rt\u0131na gibi girmi\u015f ve tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirme bi\u00e7imimizi k\u00f6kten de\u011fi\u015ftirmi\u015fti. AngularJS’in en \u00e7arp\u0131c\u0131 \u00f6zelliklerinden biri, iki y\u00f6nl\u00fc veri ba\u011flama (two-way data binding) idi. Bu \u00f6zellik sayesinde, modeldeki bir de\u011fi\u015fiklik an\u0131nda g\u00f6r\u00fcn\u00fcmde (view) yans\u0131t\u0131l\u0131yor, g\u00f6r\u00fcn\u00fcmdeki bir etkile\u015fim de modeli g\u00fcncelleyebiliyordu. Bu, manuel DOM manip\u00fclasyonu ihtiyac\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde ortadan kald\u0131rarak geli\u015ftiricilere inan\u0131lmaz bir kolayl\u0131k sa\u011flam\u0131\u015ft\u0131. Adeta, karma\u015f\u0131k bir senkronizasyon mekanizmas\u0131yla u\u011fra\u015fmak yerine, framework’\u00fcn sizin i\u00e7in bunu halletmesine izin vermek gibiydi.<\/p>\n
AngularJS ayn\u0131 zamanda MVC (Model-View-Controller) veya MVVM (Model-View-ViewModel) mimari desenlerini benimsiyordu. Bu, uygulaman\u0131n farkl\u0131 katmanlar\u0131n\u0131 ay\u0131rarak kodun daha d\u00fczenli ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011fl\u0131yordu. Kontrolc\u00fcler (controllers), model ile g\u00f6r\u00fcn\u00fcm aras\u0131ndaki k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcrken, Direktifler (directives) HTML’e yeni davran\u0131\u015flar ve elementler eklememize olanak tan\u0131yordu. \u00d6rne\u011fin, Pek \u00e7ok geli\u015ftirici i\u00e7in AngularJS, b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k web uygulamalar\u0131 geli\u015ftirmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015fti. PayPal, Google’\u0131n kendi servisleri ve Netflix gibi devler bile AngularJS’i \u00fcr\u00fcnlerinde kullanm\u0131\u015flard\u0131. Ancak her teknolojide oldu\u011fu gibi, AngularJS’in de kendi s\u0131n\u0131rlamalar\u0131 vard\u0131. \u00d6zellikle b\u00fcy\u00fck uygulamalarda performans sorunlar\u0131 ya\u015fanabiliyordu. \u0130ki y\u00f6nl\u00fc veri ba\u011flama mekanizmas\u0131, karma\u015f\u0131k scope hiyerar\u015fileri ve digest d\u00f6ng\u00fcs\u00fc, uygulaman\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fc artt\u0131k\u00e7a performans darbo\u011fazlar\u0131na yol a\u00e7abiliyordu. Ayr\u0131ca, test edilebilirli\u011fi ve kodun okunabilirli\u011fi konusunda da baz\u0131 zorluklar mevcuttu. \u00d6\u011frenme e\u011frisi de ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiriciler i\u00e7in biraz dikti, \u00e7\u00fcnk\u00fc kendi felsefesi ve ara\u00e7 seti vard\u0131. Bu durum, zamanla modern web ihtiya\u00e7lar\u0131na daha iyi cevap verebilecek yeni bir yakla\u015f\u0131m\u0131n gereklili\u011fini ortaya \u00e7\u0131kard\u0131.<\/p>\n Web teknolojileri s\u00fcrekli olarak evriliyordu ve AngularJS’in ortaya \u00e7\u0131kt\u0131\u011f\u0131 d\u00f6nemden sonra, JavaScript ekosistemi \u00f6nemli \u00f6l\u00e7\u00fcde de\u011fi\u015fmi\u015fti. ES6 (ECMAScript 2015) ile gelen yeni dil \u00f6zellikleri, komponent tabanl\u0131 mimarilerin y\u00fckseli\u015fi (React’in pop\u00fclaritesi gibi) ve TypeScript’in sundu\u011fu statik tipleme avantajlar\u0131, AngularJS’in baz\u0131 tasar\u0131m kararlar\u0131n\u0131 eski moda g\u00f6stermeye ba\u015flam\u0131\u015ft\u0131. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda ya\u015fanan performans ve bak\u0131m zorluklar\u0131, Google ekibini s\u0131f\u0131rdan, gelece\u011fe y\u00f6nelik, tamamen yeni bir framework tasarlamaya itti. Bu, sadece bir s\u00fcr\u00fcm y\u00fckseltmesi de\u011fil, adeta bir devrimdi; AngularJS’ten Modern Angular’a (ba\u015flang\u0131\u00e7ta Angular 2 olarak adland\u0131r\u0131ld\u0131) ge\u00e7i\u015f, mevcut codebase’in tamamen yeniden yaz\u0131lmas\u0131 anlam\u0131na geliyordu.<\/p>\n Bu k\u00f6kl\u00fc de\u011fi\u015fimin ana motivasyonlar\u0131ndan biri, performans ve \u00f6l\u00e7eklenebilirlik sorunlar\u0131n\u0131 k\u00f6kten \u00e7\u00f6zmekti. Modern Angular, bile\u015fen (component) tabanl\u0131 bir mimariyi benimseyerek, her bir UI par\u00e7as\u0131n\u0131 kendi izole scope’unda \u00e7al\u0131\u015ft\u0131rmay\u0131 hedefledi. Bu, AngularJS’deki karma\u015f\u0131k scope hiyerar\u015filerinden ve digest d\u00f6ng\u00fcs\u00fcnden kaynaklanan performans sorunlar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7ti. Bile\u015fenler, ba\u011f\u0131ms\u0131z, test edilebilir ve yeniden kullan\u0131labilir par\u00e7alar haline geldi. Her bile\u015fen kendi g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, mant\u0131\u011f\u0131n\u0131 ve stillerini bar\u0131nd\u0131rarak, uygulaman\u0131n genel yap\u0131s\u0131n\u0131 daha mod\u00fcler ve y\u00f6netilebilir k\u0131ld\u0131.<\/p>\n TypeScript’in benimsenmesi, bu yeni mimarinin en kritik kararlar\u0131ndan biriydi. TypeScript, JavaScript’e statik tipleme, aray\u00fczler ve s\u0131n\u0131flar gibi g\u00fc\u00e7l\u00fc nesne y\u00f6nelimli programlama (OOP) \u00f6zelliklerini getirerek, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde geli\u015ftirme s\u00fcrecini \u00e7ok daha g\u00fcvenli ve hatas\u0131z hale getirdi. Derleme zaman\u0131nda hatalar\u0131n yakalanmas\u0131, \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131n\u0131 azalt\u0131rken, kodun daha okunabilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flad\u0131. Ayr\u0131ca, TypeScript’in sundu\u011fu IDE deste\u011fi, otomatik tamamlama ve refactoring yetenekleri, geli\u015ftirici verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rd\u0131.<\/p>\n Bir di\u011fer \u00f6nemli mimari fark, ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu (Dependency Injection – DI) mekanizmas\u0131n\u0131n daha merkezi bir rol oynamas\u0131yd\u0131. Angular, bu \u00f6zelli\u011fiyle bile\u015fenler ve servisler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmeyi basitle\u015ftirdi, bu da kodun test edilebilirli\u011fini ve mod\u00fclerli\u011fini art\u0131rd\u0131. Ayr\u0131ca, reaktif programlama i\u00e7in RxJS (Reactive Extensions for JavaScript) k\u00fct\u00fcphanesinin \u00e7ekirdek bir par\u00e7as\u0131 haline gelmesi, e\u015fzamans\u0131z veri ak\u0131\u015f\u0131n\u0131 ve olay y\u00f6netimini \u00e7ok daha zarif ve g\u00fc\u00e7l\u00fc bir \u015fekilde ele almay\u0131 m\u00fcmk\u00fcn k\u0131ld\u0131. Bu ve benzeri de\u011fi\u015fiklikler, ba\u015flang\u0131\u00e7ta AngularJS geli\u015ftiricileri i\u00e7in ciddi bir \u00f6\u011frenme e\u011frisi anlam\u0131na gelse de, uzun vadede daha sa\u011flam, performansl\u0131 ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirmek i\u00e7in zemin haz\u0131rlad\u0131.<\/p>\n Modern Angular, bir dizi temel ilke ve teknoloji \u00fczerine in\u015fa edilmi\u015ftir. Bu temel ta\u015flar\u0131 anlamak, Angular ile g\u00fc\u00e7l\u00fc ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. Bile\u015fenler, Mod\u00fcller, Servisler, CLI, RxJS ve Y\u00f6nlendirme (Routing) gibi kavramlar, Angular ekosisteminin merkezinde yer al\u0131r ve bir araya gelerek kusursuz bir geli\u015ftirme deneyimi sunar.<\/p>\n Bile\u015fenler (Components):<\/strong> Angular uygulamas\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131d\u0131r. Her bile\u015fen, uygulaman\u0131n bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eden bir UI eleman\u0131d\u0131r. Kendi HTML \u015fablonu, TypeScript kodu (mant\u0131\u011f\u0131) ve CSS stilleri bulunur. Bu yap\u0131, bile\u015fenlerin kendi kendini kapsayan ve yeniden kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir {{ product.description }}<\/p>\n ng-repeat<\/code> ile bir dizi veriyi listeleyebilir, ng-model<\/code> ile bir input alan\u0131n\u0131 modele ba\u011flayabilir veya kendi \u00f6zel direktiflerinizi olu\u015fturarak HTML’in yeteneklerini geni\u015fletebilirdiniz. Bu yenilik\u00e7i yakla\u015f\u0131mlar, \u00f6zellikle o d\u00f6nemdeki jQuery tabanl\u0131 yakla\u015f\u0131mlara k\u0131yasla \u00e7ok daha verimli ve g\u00fc\u00e7l\u00fc bir alternatif sunuyordu.<\/p>\nNeden Kapsaml\u0131 Bir De\u011fi\u015fime Gidildi: AngularJS’ten Modern Angular’a Ge\u00e7i\u015f<\/h3>\n
Modern Angular’\u0131n Temel Ta\u015flar\u0131 Nelerdir ve Uygulamal\u0131 \u00d6rneklerle Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
Bile\u015fenler (Components), Mod\u00fcller (Modules) ve Servisler (Services): Birlikte Nas\u0131l \u00c7al\u0131\u015f\u0131rlar?<\/h3>\n
NavbarComponent<\/code> veya ProductCardComponent<\/code> gibi elementler d\u00fc\u015f\u00fcnebiliriz.<\/p>\n\n \/\/ product-card.component.ts\n import { Component, Input } from '@angular\/core';\n\n @Component({\n selector: 'app-product-card',\n template: {{ product.name }}<\/h3>\n