React JS neden Angular veya Vue JS'den daha iyi?

Web sayfalarının öncelikle HTML, CSS ve JavaScript programlama dilleriyle (web'in üç temel yapı taşı) oluşturulduğu yaygın bir bilgidir. Özellikle HTML, menüler, metinler ve kutular gibi web sayfalarında öğeler oluşturur. CSS, bu öğeleri web sayfalarına stillendirmek, tasarlamak ve yerleştirmek için kullanılır. Ve son olarak, bu öğelerle etkileşimi ve manipülasyonu kolaylaştıran JavaScript. Tartışmamızın teması JavaScript etrafında dönecek; özellikle React.Js ve Angular ve Vue.Js üzerindeki üstünlüğü.

Özetle, React JS, üstün Virtual DOM yetenekleri, sağlam topluluk desteği, zengin dokümantasyonu, hafif özellikleri, yönetilebilir öğrenme eğrisi ve React Native ile mobil işlevselliğe izin verme esnekliği nedeniyle Angular veya Vue JS'den daha iyidir.

JavaScript: Tutkal Dili

React'in baskınlığını haklı çıkaran davamız için bir öncelik belirlemek için bazı temel bilgileri özetleyeceğiz. JavaScript genellikle diğer bileşenlerin birleştirilmesi için kullanılan bir yapıştırıcı dil olarak tanımlanmıştır. Üç web yapı taşından HTML ve CSS daha az karmaşıktır (ancak çoğunlukla statik tasarım amaçları için kullanılır). Ancak, dinamik web içeriği oluşturan geliştiriciler için JavaScript bir önceliktir ve bu da neden çağdaşlarından çok daha büyük ve karmaşık olduğunu gösterir. Esasen, çoğu web sayfasında kullanılan fiili standart haline gelmek.

Sonuç olarak, son on yılda, web sitelerinin geliştirilmesini ve bakımını kolaylaştırmak için JavaScript'in üzerine çok sayıda ön uç çerçeve geliştirildi. Sonuç olarak, 2020 itibariyle, bu ön uç JavaScript çerçevelerinin en popülerleri React ve Vue, ardından Angular idi.

JavaScript ve JavaScript tabanlı çerçevelerin ve kitaplıkların web geliştirme için kritik araçlar olduğunu kısaca belirlediğimizden beri. Bu nedenle, blogumuzun bağlamını belirlemek için kısaca geriye gidelim ve JavaScript'in tarihçesini ve gelişimini özetleyelim.

Web Teknolojileri ve Tarayıcıların Tarihçesi

İlk web tarayıcısı, Tim Berners-Lee'nin baş geliştirici olarak görev yaptığı Aralık 1990'da geliştirildi ve piyasaya sürüldü. Eş zamanlı olarak, web sitelerinin indekslenmesi ve gezinmesi için World Wide Web'in uygulama protokolü olan Hypertext Transfer Protocol'ü (HTTP) geliştirdi ve yayınladı.

Daha sonra, ilk grafik web tarayıcısı Mosaic, 1993 yılında piyasaya sürüldü. Benzer şekilde, aynı yıl HTML geliştirildi. Bu, JavaScript'in oluşturulmasından birkaç yıl önceydi, CSS ise JavaScript'ten bir yıl sonra 1996'da piyasaya sürüldü. Bu üç dil daha sonra “Web geliştiricilerinin öğrenmesi gereken teknolojiler üçlüsü” olarak adlandırılan bir teknoloji yığını oluşturdu.

JavaScript'in Gelişimi

Mosaic tarayıcısının ünlü takipçilerinden biri, 1994 yılında piyasaya sürülen Netscape Navigator tarayıcısıydı. 1995 yılında, o zamanlar popüler olan Netscape'in geliştiricileri, web sayfaları için yeni bir dinamik komut dosyası dili oluşturmak üzere bir programcı olan Brendan Elch'i işe aldı. ve verilerin istemci tarafı manipülasyonu.

Pazara yanıt olarak Netscape, HTML ile sınırlı olmak yerine dinamik web siteleri oluşturma ihtiyacını gördü. Ne yazık ki, ilk web sitelerinin çoğu yalnızca HTML kullanıyordu ve bu nedenle hesaplama açısından verimsizdi. Bu nedenle Netscape, DOM (belge nesne modeli) manipülasyonu için hedeflenen basit bir web betik dili tasarlamak zorunda kaldı. Sonuç olarak proje, Java'nın işlevselliğinden ve sözdiziminden ilham aldı - küçük bir sözdizimsel benzerliğe rağmen temelde farklı olsalar da.

Mart 1996'da resmi olarak piyasaya sürülen JavaScript, sonunda web sayfalarında HTML'nin tek başına sağlayamadığı yeni işlevleri etkinleştirdi. Örneğin, kullanıcı girişine yanıt verme, açılır pencereleri gösterme ve öğelerin renklerini değiştirme. Netscape daha sonra, JavaScript'in bir internet standardı olarak katlanarak büyümesine katkıda bulunan Mozilla'nın da sahibi olan America Online (AOL) tarafından satın alındı.

XML, AJAX ve Tek Sayfa Uygulamalarının Ortaya Çıkışı

2000'li yılların başlarında, web kullanıcıları yavaş sunucu yanıtları ve uzun veri aktarım süreleri ile hüsrana uğradılar. Bunlar, çağa damgasını vuran düşük hızlı İnternet bağlantıları ile daha da ağırlaştı. AJAX teknoloji yığınının geliştirilmesine öncülük etti (Eşzamansız XML ve JavaScript)

Bu bağlamda XML, içerik gösterimi yerine veri gösterimi için kullanılmasına rağmen HTML'ye benzer bir işaretleme dilidir. XML, AJAX yığınının oluşturulmasıyla JavaScript ile alakalı hale geldi.

Genellikle bir bütün olarak bir araya getirilmiş çeşitli teknolojilerin bir koleksiyonu olarak tanımlanan AJAX, XHTML, CSS, DOM, XML, XLST, XML HttpRequest ve JavaScript'ten oluşur. Ve AJAX içinde JavaScript, diğer tüm araçları birbirine bağlar . Sonuç olarak, AJAX, tüm içeriğini indirmeden bir HTML sayfasının bölümlerini güncellemenin bir yolunu sağladı.

Tek Sayfa Başvuruları

Genel olarak, tüm JavaScript çerçeveleri tek sayfalık uygulama ilkelerini benimser. Pratikte, Tek Sayfa Uygulaması (SPA), ilk sayfa ziyaretinde belleğe yüklenen ve daha sonra bağımsız olarak değiştirilebilen veya güncellenebilen, böylece tüm web sayfasının yeniden yüklenmesi gerekmeyen ayrı bileşenlerden oluşan bir uygulamadır. her kullanıcı eyleminde.

Ayrıca, SPA'lar ile bileşenler yeniden kullanılabilir ve böylece gereken kod miktarı önemli ölçüde azaltılır. İlk tek sayfalık uygulama 2002'de uygulandı ve JavaScript'in uygulama için hedef dillerden biri olması amaçlandı. Tek sayfalık uygulamaların başarısı, esas olarak önceki AJAX teknolojisi ve sunucu iletişimindeki önceliği sayesinde olmuştur.

JavaScript-HTML İlişkisi

HTML, jQuery'de olduğu gibi JavaScript'in tamamlayıcısı olarak da çalışabilir; veya HTML öğelerine derlenen entegre, HTML benzeri sözdizimi olarak. Bunun bir örneği, React ile geliştirme yaparken kullanılması önerilen JSX sözdizimidir. Ne saf JavaScript ne de HTML, ancak ikisinin birleşimidir. Bu nedenle, temelde, HTML'nin temel öğe oluşturma ve yapısal işlevselliğini JavaScript'in dinamik yetenekleriyle bütünleştirmek.

CSS-HTML İlişkisi

CSS, genellikle JavaScript ile birlikte kullanılır. Geleneksel bir örnek biçim, CSS özelliklerini ayrı .css dosyalarında uygulamaktır. Diğer biçim, CSS-in-JS ve stilli bileşenler gibi özel kitaplıklar aracılığıyla CSS'yi JavaScript çerçevelerine entegre etmektir. Bu tür kitaplıklar, geliştiricilerin, daha sonra genellikle tarayıcıda saf CSS'de derlenen CSS benzeri sözdizimi ile görsel öğelere stil veren JavaScript kodu yazmasına olanak tanır.

JavaScript'in Sunucu Tarafı Uygulamasının Ortaya Çıkışı

Sonunda 2009, JavaScript'in sunucu tarafı uygulaması olan Node.js'nin piyasaya sürülmesiyle geldi. Node.js, JavaScript etki alanını arka uca genişleterek JavaScript'in tam yığın bir dil olmasını sağladı.

Node.js şu anda en çok kullanılan JavaScript çalışma zamanı ortamıdır ve JavaScript kodunu web tarayıcısı ortamının dışında yürütmek için kullanılır. Sunucu taraflı işlevsellik için kullanılan Node.js'nin yaratıcıları, o zamanlar popüler olan Apache HTTP Sunucusuna (genellikle PHP ile kullanılır) daha verimli bir alternatif geliştirmeyi amaçladı. Node.js, Google'ın C++ kullanılarak oluşturulmuş V8 JavaScript motoru kullanılarak oluşturuldu.

Ön Uç JavaScript Çerçeveleri

Temeli attığımıza göre, artık tuğlaları yerleştirebilir ve React.js eğilimimizin nedenlerini araştırabiliriz.

Çerçeveler ve Kitaplıklar

Bu JavaScript üçlüsünden bahsederken kitaplık olarak nitelendirilen ortak bir argümandır. İronik olarak, React bazen bir kütüphane olarak ve diğer zamanlarda bir çerçeve olarak anılır. Ancak, netlik ve tutarlılık için çerçeveleri kitaplıklardan ayırmak genellikle yararlıdır.

Özellikle, bir kitaplık, geliştiricilerin kaynakların nasıl kullanılacağı üzerinde kontrol sahibi olduğu, kalıcı olmayan kaynakların pasif bir koleksiyonudur. Genellikle çok basittirler ve yalnızca belirli bir görevi yerine getirirler, bu nedenle araçlar olarak sınıflandırılabilirler.

Çerçeveler daha az pasif olacak ve geliştiricileri geliştirme amaçları için bir iskelet kullanarak ve bir kontrol akışı uygulayarak belirli bir şekilde işleri yapmaya zorlayacak şekilde tasarlanırken. Örneğin, bir geliştiriciye, bütün bir web uygulamasını geliştirmesi ve kurması için tanımlanmış bir yol sağlanır. Bir web uygulaması kitaplığı bunu sağlamaz, bunun yerine ağ istekleri veya stil işlemleri gibi daha basit alt etki alanı işlemleri sağlar.

Vue ve Angular teknik olarak çerçeveler olarak kabul edilse de, React'in bir çerçeve mi yoksa bir kitaplık mı olduğu konusunda hala bazı anlaşmazlıklar var. React'in orijinal geliştiricileri buna bir kütüphane olarak atıfta bulunsa da, hala daha yaygın olarak bir çerçeve olarak kullanılmaktadır.

Neden React Baskın Alternatif!

Geriye dönüp bakıldığında, React, XHP'nin (Facebook tarafından oluşturulan bir PHP kitaplığı) JavaScript bağlantı noktası olarak geliştirildi. Genel olarak, XHP, özel bileşen oluşturmaya izin veren ve kötü niyetli kullanıcı saldırılarını önlemeyi amaçlayan bir PHP modifikasyonuydu. Daha sonra bu JavaScript taşıma projesinden, React için ortak bir standart dil haline gelen JSX (JavaScript XML) ortaya çıktı.

Her şey düşünüldüğünde, React emsallerinden daha dar bir kapsama sahiptir, yalnızca uygulama kullanıcı arayüzünü oluşturur. Bununla birlikte, hafif bir yapının avantajını korur ve dolayısıyla öğrenmesi ve kullanması daha az maliyetlidir. Bununla birlikte, Vue ve Angular ile aynı amaç için kullanıldığı için hala bir çerçeve olarak kabul edilebilir.

Üstün Sanal DOM Yetenekleri.

React, işlevselliğini DOM'a göre optimize eden ilk çerçeveydi. Bu, DOM manipülasyonunun kullanılan bilgi işlem kaynakları açısından oldukça maliyetli olması nedeniyle başarısına katkıda bulunan bir faktördü. Spesifik olarak, React, bu manipülasyonu kontrol etmek için sezgisel durum yönetimi ve sanal DOM kullanarak mümkün olduğunca az DOM manipülasyonu gerçekleştirmek üzere tasarlanmıştır.

Sanal DOM'nin bu şekilde kullanılması, React güncellemesini daha hızlı hale getirirken, daha fazla bellek yoğun olması pahasına. Ve tarayıcı DOM'de hızlı güncellemeler yapmak için, tepki, ek bellek tüketen bellekte sanal DOM ağacının bir kopyasını tutar. Sonuç olarak, React'in popülaritesi, mobil geliştirme için React Native gibi çok sayıda yan ürün kitaplığı doğurdu.

Tek Yönlü Veri Akışı

React'te verilerin aşağı doğru akması amaçlanmıştır ve tek yönlü veri akışı olarak adlandırılır. Angular ve Vue'nin iki yönlü veri bağlaması kodu daha güzel ve basit hale getirirken, React üstün yönetilebilirlik ve performansta telafi eder. Argümanımızda dikkate değer bir avantaj.

React Neden Açısaldan Daha İyidir?

Daha fazla bağlam için duruma göre karşılaştırma yapalım, olur mu? Daha büyük uygulama geliştirme için tasarlanan Angular, programlama özellikleri ve dosya boyutu açısından daha tam özellikli bir JavaScript çerçevesidir.

Bununla birlikte, React ile karşılaştırıldığında, Angular, olumsuz şişkinlik, karmaşıklık ve ağır geliştirme tarzı özelliklerine sahiptir. Daha küçük geliştirme projeleri için önerilir ve dik bir öğrenme eğrisine sahip olduğu belirtilir. İşleri daha da kötüleştirmek için AngularJS artık aktif geliştirme aşamasında değil.

Angular tamamen TypeScript'te yerleşiktir ve çok sayıda kod gerektirir, bu da onu biraz karmaşık hale getirir. Aksine, React oldukça “basittir” ve orijinal yönelimi, görünümü kontrol etmeye ve manipüle etmeye odaklanmıştır. Esasen, geliştiricinin tam olarak neye ihtiyaç duyduğunu seçmesine izin verir, ancak aynı zamanda çok sayıda üçüncü taraf paketi kullanma yeteneğinden de yararlanır. Sonuç olarak, React, Angular'a kıyasla çok fazla ek yük içermez.

React Neden Vue'dan Daha İyi?

Vue.js, Google çalışanı Evan You tarafından oluşturuldu. Evan, AngularJS'den ilham aldı, ancak daha akıcı, geliştirilmiş bir sürümünü oluşturmak istedi. Hafif özelliklerine, mükemmel performansına ve güzel programlama stiline rağmen, Vue'nin olumsuz yönü sakarlığıdır. React'in üstünlüğü burada kendini gösterir.

Örneğin, Vue.js'de React'in aksine açık bir en iyi uygulama yoktur, bu da büyük uygulamaların bakımını zorlaştırabilir. Ancak, React için en iyi uygulamalar toplulukta bulunur. Örneğin, resmi create-react-app paketi aracılığıyla geçerli bir iş akışı oluşturulması etkinleştirilir. Yukarıdaki noktalar nedeniyle, React uygun bir şekilde birçok karmaşık kod yazma ve koruma yeteneği sağlar.

ES6 Sözdizimi

Ayrıca, geliştiriciler Vue ile ES6 sözdizimini de kullanabilir, ancak React bu konuda Vue'dan daha optimum şekilde tasarlanmıştır. Vue şu anda TypeScript desteği sunarken, desteği tek bir komutta TS desteğiyle CRA (Create React App) kullanarak React gibi iyi cilalanmamıştır. Ek olarak, Vue ile gerçek, eksiksiz bir TypeScript uygulaması oluşturmak için özel dekoratörlere ve özelliklere sahip bazı üçüncü taraf paketlerine ihtiyaç duyuyoruz. Ve ne yazık ki resmi belgeler, başlamak için gereken tüm bilgileri sağlamıyor. Bir başka React avantajı!

Argümanımızı pekiştirirken, daha net belirli kriterler kullanarak tartışmayı daha da detaylandıralım.

1. Çerçeve Boyutu

Bir çerçevenin küçültülmüş paketinin npm kayıt defterindeki boyutunun, herhangi bir geliştiriciyi çerçeveyi seçmekten caydırması veya teşvik etmesi olası olmasa da, yine de argümanımıza yardımcı olabilir. Angular, diğerlerinden (187,6 kB) oldukça büyükken, React 6,4 kB'dir ve Vue, 63,5 kB'de arada bir yere düşer.

Genel olarak, paket boyutu karşılaştırması, Angular'ın daha geniş bir işlevsellik yelpazesini desteklediğini ve içerdiğini gösterirken, React daha akıcı geliştirme için tasarlanmıştır. React'in doğası bu nedenle geliştiriciye verimliliği artırmak için daha az seçenek sunar, bu da daha küçük projeler için kullanışlıdır.

Ayrıca, Angular'ın karmaşık yapısı, özellikle bellek tahsisi için React veya Vue ile karşılaştırıldığında potansiyel bir düşük performans riskine yol açar.

2. Geliştirme Deneyimi, Öğrenme Eğrisi ve Kullanılabilirlik

Genel olarak, TypeScript'i öğrenmek JavaScript'ten çok daha zor veya daha kolay değildir. Ancak, yaygın olarak kullanılmaz ve JavaScript'ten daha az kitaplık ve genel belge içerir. Sözdizimindeki farklılıklar ve JavaScript'in biraz farklı bir varyasyonunda kodlamaya alışmak için geçen süre ile birleşen bu faktörler, React'e Angular'a göre küçük bir avantaj sağlar.

3. Dil Temelli Durum

Diğer bir önemli nokta ise React ve Vue'nin temel dil olarak JavaScript ES6 kullanmasıdır. ES6, 2015'ten itibaren en yeni JavaScript endüstri standardıdır. Öte yandan, Angular 1, önceki sürüm olan JavaScript ES5'ten yararlanırken Angular 2, TypeScript'e dayanır.

TypeScript, geliştiricilerin geleneksel JavaScript programlama biçiminden kurtulmasını sağlasa da, sınırlı kullanıcı topluluklarına sahiptir. Bu, JavaScript'in başka bir yeni sözdizimsel katı üst kümesinin ortaya çıkması durumunda TypeScript'in ortadan kaybolma riski olduğu anlamına gelir. Aksine, JavaScript ES6, JavaScript'te geliştirme yaparken mevcut endüstri kriteri olduğu için yakında ortadan kalkmayacaktır.

4. Belgeler

Dürüst olmak gerekirse, belgelerin mevcudiyeti tüm bu çerçeveler için tatmin edicidir. Bununla birlikte, React belgelerinin en fazla sayıda dilde mevcut olması hala dikkate değerdir (16). Vue, 8 dilde belgelerle geride kalırken, Angular belgeleri 4 dilde mevcuttur. React belgeleri tutarlıdır ve farklı geliştiriciler için teslimatta birleşik teoriye sahiptir.

Ne yazık ki, Angular'ın çerçeve durumu, bir geliştirici için AngularJS ve Angular 2 arasında bölünmüş olduğu için bazı zorluklar sunabilir. Ayrıca, "Angular" terimi, zaman zaman çevrimiçi bağlamlarda hangi çerçeveye atıfta bulunduğu konusunda belirsiz olabilir. Özellikle daha küçük sitelere ve daha kısa yanıtlara göz atarken.

5. Topluluk Desteği

Çoğunlukla, React tartışmasız şu anda tüm JavaScript çerçeveleri arasında en büyük topluluk desteğine sahiptir. Bu, tartışma forumlarının ve sohbet odalarının genişliğiyle örneklendirilir. Ayrıca, kullanıcılar en son haberleri takip edebilir ve Facebook ve Twitter'daki tartışmalara katılabilir.

Svelte Çerçevesi (Mansiyon Ödülü)

JavaScript alanına nispeten yeni bir girişten bahsetmenin akıllıca olduğunu düşündük. Rich Harris tarafından geliştirilen ve ilk olarak 2016'da piyasaya sürülen Svelte, 2019 boyunca büyük bir popülerlik kazandı. JavaScript'te yerel durum işlemedeki değişiklikler gibi çeşitli geliştirmeler yaptı.

Ayrıca Svelte'nin sanal DOM'si olmadığını ve yazılı kodu çalışma zamanı yerine derleme zamanında JavaScript'e dönüştürdüğünü belirtmekte fayda var. Esasen, bildirimsel öğelerin gerçek DOM'a dönüştürülmesini engeller.

Özet

Vue biraz daha fazla Github yıldızına sahip olsa da, React hala fark edilebilir bir zayıflık ve daha iyi performans güçleri ile üstündür. Özünde, daha iyi performans, daha düşük yükleme süreleri ve artan kullanıcı memnuniyeti anlamına gelir. Ayrıca, ticari web siteleri için bu, birkaç milisaniyelik yükleme süresinin azaltılması, kullanıcı etkileşimini ve kullanıcıyı elde tutma oranını artırabileceğinden gelir artışı sağlar.

Sonuç olarak, JavaScript çerçeve ortamının geleceğini tahmin etmek zordur. Kanıtların gösterdiği gibi, React öngörülebilir gelecek için baskın çerçeve olmaya devam edecek gibi görünüyor. Bununla birlikte, mükemmel bir performans ve bol miktarda belge ile olgun, iyi desteklenen bir çerçeve kullanarak uygulamalar geliştirmek isteyen geliştiriciler için React üstün bir seçimdir!