Dikkat : Single Page Application yada AngularJS konusunda herhangi bir fikriniz yoksa, öncelikle http://angulartr.com/angularjs-nedir/ konusunu incelemenizi tavsiye ederim.

Angular JS ve React her ikiside open source projelerdir. AngularJS bir Framework, React ise kütüphanedir. Her iki ile de Single Page Application yapılabilmektedir. 2015 yılı, hem Angular JS hemde React için adeta parlama yılı oldu. 6 yaşındaki AngularJS artık büyük projelerde güvenle kullanılmaya başlandı. Standart haline gelmeye başladı ve 6 yılın tecrübesi ile 2.versiyonu hazırlandı. Şuan beta versiyonunda. http://angulartr.com/angular-2-beta-versiyonu-yayinlandi-buyuk-degisiklikler-yapildi/ adresinden detayları alabilirsiniz.

React ise 2 yaşında, lakin Facebook ve Instagram’ da çoktan kullanılmaya başlandı. Şimdi ise herkes bu ikisini kıyaslıyor. Bu iki projeyi kıyaslamak, ASLINDA elma ile armut u kıyaslamak gibi. Çünkü biri framework diğeri ise kütüphane. Fakat her ikisininde tam teşekküllü bir single page application yapabilmeyi sağlaması yüzünden, yolları ister istemez keşiyor. Single page application yapmak isteyen birisi, ikisinden birini tercih etmek zorunda olduğu için, elbetteki kıyaslamak istiyor. Bu yazımızda, detaylı bir kıyaslamaya gireceğiz.

Öncelikle aralarındaki farkları, üstün körü bir inceleyelim.

Basic-Differences-Between-AngularJS-and-React-484781-2

 

React’ ın daha hızlı olduğunu fakat mimarisinin Angular’a göre zengin olmadığını ama öğrenmesinin kolay olup MVC’ yi desteklememesi yüzünden de büyük projelerde kullanmakta sıkıntı yaşanabileceğini düşünüyor olmalısınız. Bakalım, yazımızın sonunda fikriniz ne olacak 🙂

Öncelikle her ikisinin de avantajlarını inceleyelim.

Angular’ ın Avantajları;

*İnceleme Angular 2 baz alınarak yapılacaktır.

  • AngularJS bir framework demiştik. Framework’ ler pek çok kütüphanenin bir çatı altında birleşmesiyle oluşur. Angular projenizde kullanacağınız tüm gereksinimlere yanıt verecek kütüphanelere sahip durumda. Bu kütüphaneler başlıca Route, Web Api Call, Testing, Dependency Managment ve diğerleri şeklinde sıralanıyor. Fakat React’ ın kendisi sadece bir kütüphane ve bahsi geçen temel gereksinimleri kendisi karşılamıyor. Bu gereksinimler için araştırma yapıp, kütüphaneler bulmalısınız. Mesela route yapısı için https://github.com/mtrpcic/pathjs, template engine için http://handlebarsjs.com/, Ajax Call’ lar ve diğer ayak işleri için https://jquery.com/, OOP class yapısı için http://jsclass.jcoglan.com/, FALANNN FİLAN, liste uzar gider, hemde aynı işler için birbirinden sorunlu onlarca alternatif kütüphane bulabilirsiniz. Her birindeki bug ların fikslenmesinide dört gözle beklersiniz. Halbuki Angular kullandığınızda, herşey zaten vardır, ve buglar onbinlerce kişi tarafından farkedilip, çözülmektedir https://github.com/angular/angular
  • Angular TypeScript üzerine yoğunlaşıyor. TypeScript elbetteki herkes tarafından sevilmiyor. Lakin kod TypeScript ile yazıldığında bir bütünlük oluşuyor. TypeScript ile yazılan bir kod, es5 ve es6 ya compile ediliyor. Bu da şu demek, bir kere ortak bir yapıda yaz ve tüm standartlara tüm tarayıcılara ortak olarak çevrilsin. Keza Angular da TypeScript zorunlu değil. Ama Angular ekibinin, geliştiricileri buna sevketmesi bile, sektör açısından çok olumlu.
  • Angular’ ın arkasında Google geliştiricileri var. Tüm baz gereksinimleri karşılayan componentlerden de onlar sorumlu. Ama React’ ta işler daha farklı. Örneğin routing için kullanılan şu https://github.com/rackt/react-router kütüphanenin geleceği belirsiz, yeni bir React versiyonunda çakılması ve işleri öngörülemeyecek şekilde arttırması muhtemel.
  • React’ ın JSX yapısından ilerde bahsedeceğiz. Bu yapı gerçekten büyük bir kazanım, lakin halen çoğu IDE tarafından desteği yok. React’ a başlamak isteyenler için negatif bir durum. Fakat Angular HTML dosyalarını kullanıyor ve IDE’ ler ilk çıktığı günden beri bunu destekliyor 🙂

React’ ın Avantajları;

  • JSX ! https://facebook.github.io/react/docs/jsx-in-depth.html ve https://facebook.github.io/jsx/ adreslerinden detaylarına ulaşabileceğiniz ECMASCRIPT için XML benzeri bir syntax’ tır. Kodunuzu JSX olarak yazarsınız ve JavaScript’ e compile olur. Bunun pek çok avantajı olduğu gibi. En önemlisi compile time checked yapılabilmesidir. Yani Angular ile kodunuzu yazarken, hatalar tarayıcının console’ unda patlarken, JSX ile compile edilirken patlar. Bu da bugların anında çözülebilmesini sağlar.
    compile
    Angular’ da genellikle patlayan satırı bulmak zordur. Ama JSX’ te patlayan satırı görebilirsiniz.
  • React’ ta bir hata yaptıysanız anında haberiniz olur. Çünkü kodunuz compile olmaz. Ve hemen düzeltirsiniz. Angular ile yaptığınız bir uygulamanın herhangi bir satırında hata yaptınız. Uygulamanızın tamamını test etmeden bunu göremezsiniz.
  • React’ ı okumak için sadece JavaScript bilmeniz yeterlidir. Angular için ise ayrıyetten Angular’ a özgü syntax’ ı da bilmeniz gerekir.
  • JSX’ in kod tamamlama özelliği, compile time kontrolleri ve zengin hata mesajı yapısı ile geliştirme süreçlerini, diğerlerine oranla hiç olmadığı kadar kısalttığı görülmüş.
  • Bir uygulama, Angular 2 ile yapıldığında minified şekilde 764kb, React ile yapıldığında minified şekilde 216kb olduğu görülmüş. Bu karşılaştırma ne kadar kıstas olabilir bilinmez ama, yinede Angular’ ın React’ tan 3 kat daha büyük olduğunu görmekte fayda var. Frameworkler her zaman büyük olmuştur, çünkü pek çok özelliği barındırmaktadırlar. Siz bu özellikleri kullansanızda kullanmasanızda, hali hazırda gelmektedirler.

React kullanılarak yapılmış siteleri inceleyelim; https://github.com/facebook/react/wiki/Sites-Using-React

Angular kullanılarak yapılmış siteleri inceleyelim; https://www.madewithangular.com/#/

 

Ve sonuç;

En başından beri elma ile armut’ u kıyasladığımız konusunda ısrarlıyım. Her ikisininde kendine özgü teknik olarak avantajları ve dezavantajları olduğunu gördük. Eğer klasik mantık ile şunu dersek tam bir yanılgıya düşeceğiz. Biri framework diğeri kütüphane demekki, biriyle büyük siteler yapılabilir, diğeriyle ise sadece basit uygulamalar yapılabilir. Bu tamamen yanlış olur. Facebook ve Instagram React’ ın en başarılı örnekleri. Ama Instagram her ne kadar yüzmilyonlarca kişinin girdiği bir site olsada, sadece bir kaç temel özelliği var. Feed, media sayfası, tag sayfası. Büyük ama basit.

Benim kişisel tavsiyem, Angular’ dan vazgeçmemeniz.

 

 

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir