Angular vs React

mobiroller.com

Transcript

1. Mehmet Köse Mobiroller Angular vs React. Bir aylık Angular öğrenme deneyimi ve 6+ ay, 2+ uygulama ile React tecrübesi, Türkiye ve Dünya’dan geliştiricilerden aldığım görüşler ile yapmaya çalıştığım kıyaslamadır. Amaç uzun vadeli projelerde tercih etmenin avantaj / dezavantajlarını görebilmektir.
2. React • Facebook • AirBnb • Uber • Netflix • Instagram • Whatsapp • Dropbox • Atlassian Kimler Ne Kullanıyor? Angular • Eat24 • CVS shop • onefootball • Google Express • NBA • Delta • wix.com
3. TLDR;
4. React 1.285 Contributor 418 Issue 123.637 Star İstatistikler Angular 1.595 Contributor 386 Issue 59.405 Star
5. Angular şu an 7. versiyonunda. React ise 16.8. İlk versiyon olan Angular 1 ve şu anki versiyonun temeli olan Angular 2 tamamen farklı projeler. Dolayısıyla, blog post okurken veya component araştırması yaparken “AngularJS” ile “Angular” farklı şeyler ifade ediyor. Hatta component ararken “ngx” prefix’ini kullanmak çok daha zaman kazandırabilir. Bulduğunuz kaynağın Angular 2+ ile uyumlu olmadığı durumlarla karşılaşmanız olası. https://www.sitepoint.com/angularjs-vs-angular/ React’te ise bir component’ı oluşturmanın OOP veya Functional temelli birkaç çeşit yolu var (3+) ve tüm sürümlerinde eskiye dönük desteği sağlıyor. 16. versiyonda React Core’unda çok önemli bir değişiklik yapıldı ve bu değişikliği React “kullanıcıları” na hissettirmeden smooth bir şekilde yapmayı başarabildiler. Buna rağmen React fiber çalışma mantığı olarak arkaplanda büyük yeniliklerle geliyor ve React’i “hızlı” dan “süper hızlı” çalışır hale getiriyor. https://github.com/acdlite/react-fiber-architecture Versiyonlama. 12
6. Karşılaştırma Third Party Components Elbette topluluktan kişilerin yaptığı listelere göre karşılaştırma yapmak göreceli olsa da fikir sahibi olmak açısından önem arz edebilir. Angular listesinde 217 “awesome” component bulunurken, React listesinde bu sayı 497. Ayrıca içeriğin kalitesi de kesinlikle önemli. Benim deneyimimde Angular “swipe” componenti bulabilmek için uzun süre uğraşıp bir çoğu çalışmayan componentların arasından seçerek yalnızca bir tane işe yarar component bulup kullanabildim. Bir proje hakkındaki 3.parti popüler componentlara bakmanın en kolay yolu awesome listelerine göz atmak. React listesine şuradan; https://github.com/brillout/awesome-react-components Angular listesine şuradan ulaşılabilir; https://github.com/brillout/awesome-angular-components Topluluk desteği açısından React ekosisteminin iyi iş çıkardığından söz edebiliriz.
7. Nedir? E l m a l a r v e A r m u t l a r React bir UI library, Angular ise bir Framework. Angular’ın bir MVC framework’ü olduğunu söyleyebiliriz, React ise bu MVC’nin sadece View kısmına tekabül ediyor. Dolayısıyla React’in sadece arayüz rendering için odaklanmasını beklerken, Angular’ın arayüzdeki tüm ihtiyaçlarımızı karşılamasını bekleriz. Fakat 2018 yılındaki gelişmelerle beraber, ilginç bir şekilde React arayüz tarafındaki neredeyse tüm ihtiyaçları karşılayabilir hale gelmişken, Angular bu konuda geri kaldığını görüyoruz. Yani model yönetimi için bir bir yapı sunsa da, state yönetimi için external bir library kulanmak gerekiyor.
8. State Management E l m a l a r v e A r m u t l a r Örneğin state management konusu. React’e gelen Context özelliği sayesinde içerik componentler arasında prop-drilling denen yolla her aşamada paylaştırılmak yerine bu süreci yönetebileceğimiz ve veriyi sadece kullanılacağı componentlara gönderebileceğimiz bir araç yayınladı. Bu hali hazırda Redux gibi extra kütüphaneler kullanılarak yapılıyordu. Angular’daki karşılığı NgRx Redux’dan esinlenilmiş bir çalışma ve Angular Framework içinde de bahsettim üzere prop-drilling harici bir built-in çözüm yok.
9. Prop Drilling
10. Angular two way, React one way data binding kullanıyor. Bunun anlamı, Angularda modeldeki data görünümü, görünüm modeli değiştirebilirken, React’te görünümün modeli değiştirme işini çoğu zaman method yazarak biz yaparız. Bu ilk bakışta dezavantaj gibi gelse de büyüyen uygulamalarda test edilebilirlik açısından daha mantıklı bir yaklaşıma dönüşüyor. Ayrıca 16.8 sürümde duyurulan React Hooks ile Class yazmadan fonksiyonlarla ve stateleri dinamik güncelleyen mekanizmalarla işlemlerin daha da kolaylaştırıldığı görülüyor. Data Binding
11. Angular CLI built-in olarak Typescript uyumlu kurulum yapıyor ve topluluk da bu şekilde kullanıyor. Anladığım kadarıyla kurumsal tarafta kabullenilmesinin nedenlerinden biri de bu. Fakat typescript sadece code base’deki logic’i type safe yapmaya yarıyor ve Javascript’e derlenen kodda bir type checking durumu olmuyor. Typescript ES5 için OOP özellikleri getirmeyi de amaçlamıştı. Ama Javascript bu sürede gelişti ve kendi OOP özelliklerini getirdi. Bugün javascript es10 versiyonunu deniyor. Typescript’in gelecekte native javascript’e karşı ayak uydurup uyduramayacağını bilmiyoruz. Ayrıca type checking için JS içinde kullanılabilecek kütüphaneler de mevcut, örneğin; flow.org Ayrıca bir araştırmanın bulgularına göre (tl;dr video) 49 “denek” ile yapılan çalışmada; * Statically typed diller yazım hatalarını düzeltmek için daha fazla zaman gerektiriyor. * Dinamik dilleri okuması ve yazması kolay. https://medium.freecodecamp.org/a-comparison-between-angular-and-react-and- their-core-languages-9de52f485a76 Typescript vs ES6+
12. Html motoru biraz ayak bağı mı? JSX ile Native Javascript özellikleri varken.
14. Günümüzde bir çok Javascript framework’ü ortaya çıkıyor ve hepsi kendi etrafındaki geliştiricileri heyecanlandırıp hype yaratmayı deniyor ve bir çoğu da başarılı oluyor. Kısa vadede fayda getirebilse de kullanılan araçların uzun ömürlü olabilmesi genelde mümkün olmuyor. Arkasında büyük firmalar olsa da arayüz framework’lerini öldürmek mümkün ki örneklerini gördük, bkz: angularjs. Bu noktada bence framework’ün arkasında ne kadar büyük bir firmanın olduğuna değil ne kadar büyük bir geliştirici kitlesinin olduğuna bakmak gerekiyor. Çünkü şirket çalışanlarını projenin arkasından her zaman çekebilir. Ve topluluk destekli gitmiyorsa projenin hızlıca ölmesi işten bile değil. Facebook bu noktada projelerini küçük bir core mühendis grubu ve topluluk ağırlıklı gitmeyi tercih ediyor, bkz: Tornado. Arkasında tek Facebook mühendisi var, topluluk destekli ilerliyor. Sonuç. Ayrıca tercih nedenlerinden biri de, bu framework / library’nin nasıl bir yenilik getirdiğine bakılmalı. Angular2+, AngularJS’den çok büyük bir fark içermiyor bana kalırsa. Core mimarideki hatalı kısımları düzeltmiş olabilirler fakat neden? Sorusunun çok güçlü bir sebebi yok. Angular’ın Typescript driven gitmesi bence bir framework avantajı değil. Typescript Angular’dan bağımsız bir dil ve React ile birlikte de kullanılabiliyor. Ama projede typescript kullanmanın avantaj değil dezavantaj getireceğini düşünüyorum. Bugünlerde ES10 draft aşamasında ve her yıl yeni özellikler getiriliyor. Bundan 3 yıl sonra Typescript’in kendini native Javascript’e kıyasla kendini güncel tutabileceğini düşünmüyorum. Type safe diller ise projeyi bir önceki sayfada bahsettiğim üzere maintain etmesi zor bir hale getirdiğini düşünüyorum. Neden React? Sorusunun sebebi ise, başlı başına bir tercih sebebi olarak Virtual Dom fikrinin implemente edilmiş olması, JSX ile dinamik arayüzlerin inşa edilebiliyor olması, son aylarda gelen Context, Fragments, Portals, Hooks özellikleri, topluluğun dinamik ve kendi isteklerine cevap verebilir olduğunun kanıtı olarak görülebilir. Araştırma neticesi ve kişisel düşünceler.
15. Bkz: anlatım bozukluğu