Vue vs React: 2021'deki En İyi JavaScript Çerçevesi Hangisi?

React veya Vue.js, hangi JavaScript çerçevesini seçmelisiniz? React, WordPress'in yeni düzenleyicisine güç verirken Vue.js, Laravel topluluğunda popüler bir çerçevedir.

Bu yazıda, bu iki popüler çerçevenin ne hakkında olduğunu, bazı kullanım durumlarını gözden geçireceğiz ve nasıl benzer olduklarını ve nasıl farklı olduklarını göreceğiz.

yarışmacılar

Pek çok ön uç web geliştiricisinin, Facebook'ta geliştirilen React adlı açık kaynaklı JavaScript UI çerçevesini duyduğunu tahmin ediyorum. Facebook web sitesinin çoğuna ve Instagram'a güç sağlar. Aynı zamanda Gutenberg – WordPress'in yeni editörü tarafından kullanılan JS çerçevesidir.

React, jQuery, Backbone.js ve Angular 1 gibi diğer o zamanki çerçevelerden oldukça farklı olduğu için ortaya çıktığında JavaScript dünyasında biraz değişiklik oldu. buna daha sonra gir) ve geliştiricilerin JavaScript'te HTML yazmasına izin veren JSX adlı yeni bir sözdizimi oluşturdu. WAT?

Vue.js benzer bir web geliştirme aracıdır – React ile aynı sorunları farklı bir şekilde çözmeyi amaçlayan bir JavaScript çerçevesidir. Vue.js, JSX yerine bir şablon sistemi kullanır, bu da muhtemelen mevcut web uygulamalarına entegrasyonu daha kolay hale getirir. Şablonlar normal HTML kullandığından Vue.js, bir oluşturma adımına gerek kalmadan mevcut koda oldukça kolay bir şekilde entegre edilebilir. Vue.js'nin ayrıca daha düz bir öğrenme eğrisine sahip olduğu söyleniyor – Vue.js'de yeni olduğum için yakın zamanda doğruladığım bir şey. Vue.js hakkında bahsedilmesi gereken diğer bir önemli nokta ise gelişiminin Facebook gibi büyük bir şirket tarafından desteklenmemesidir.

benzerlikler

React ve Vue.js, her ikisi de yalnızca zengin ön uç deneyimleri oluşturmaya odaklanan UI JavaScript çerçeveleri oldukları için çok ortak noktaya sahiptir. 'Piller dahil' önceki JavaScript çerçevelerinden farklı olarak, hem React hem de Vue.js, ayrı çerçeveler tarafından ele alınan yönlendirme ve durum yönetimi gibi işlevlere sahip oldukça barebone'lardır.

Sanal DOM Kullanımı

Vue.js ve React arasındaki en büyük benzerliklerden biri, 'Sanal DOM' denilen şeyin kullanılmasıdır. Sanal DOM, temelde kulağa nasıl geliyorsa, DOM ağacının sanal bir temsilidir. Gerçek DOM'yi sık sık güncellemenin hesaplama açısından ağır olduğu kavramına bağlıdır. JavaScript nesnelerini güncellemek, karşılaştırmaya göre nispeten hafiftir.

Sanal DOM ile gerçek DOM ağacını temsil eden bir JavaScript nesnesi oluşturulur. Herhangi bir öğeye yönelik güncellemeler, gerçek DOM yerine Sanal DOM'de yapılır. Bir şey değiştirildiğinde yeni bir Virtual DOM nesnesi oluşturulur ve eski ile yeni arasındaki değişiklikler belirlenir. Bu değişiklikler daha sonra gerçek DOM'a uygulanır.

Örneğin, bu listeyi HTML'de ele alalım:

 <ul class="list"> <li>item 1</li> <li>item 2</li> </ul>

JavaScript'te bu basitçe şu şekilde temsil edilebilir:

 { type: 'ul', props: {'class': 'list'}, children: [ { type: 'li', props: {}, children: ['item 1'] }, { type: 'li', props: {}, children: ['item 2'] } ] }

Gerçek Sanal DOM uygulamaları bundan daha karmaşıktır, ancak esasen iç içe dizilere sahip iç içe bir JavaScript nesnesidir.

Bu JavaScript nesnesine yeni bir öğe eklendiğinde, bir işlev değişiklikleri 'farklılaştıracak' ve yeni işaretlemeyi gerçek DOM'ye uygulayacaktır. Bu 'farklı' algoritma gizli sostur ve hem React hem de Vue.js bunu biraz farklı şekilde yapar.

Vue.js'nin, oluşturma sırasında her bileşenin bağımlılıklarını takip ettiği ve tüm bileşenin alt ağacını yeniden oluşturmaya gerek duymadığı için, Sanal DOM'deki değişiklikleri daha hızlı bir şekilde değiştirebildiği bildiriliyor.

React ile, uygulama durumu her değiştirildiğinde alt bileşenlerin tümü yenilenecektir. Bu, shouldComponentUpdate yaşam döngüsü yöntemi kullanılarak geçersiz kılınabilir, ancak Vue.js bu tür bir optimizasyonu varsayılan olarak işler.

Bileşen Tabanlı Mimari

Hem React hem de Vue.js, bileşen tabanlı bir mimariyi teşvik eder. Bu, esasen, uygulamanızı, her bir parçanın birbiriyle 'konuşması' için tanımlanmış bir yolla, ilgili işlevselliklerin farklı parçalarına ayırmak anlamına gelir. Bu Medium makalesinde bir bileşenin ne olduğuna dair iyi bir açıklama bulunabilir:

Bir bileşeni, kullanıcı arayüzünün bir parçasını oluşturan küçük bir özellik olarak düşünebilirsiniz. Facebook'un kullanıcı arayüzü kapsamında bir bileşeni tanımlayacak olsaydım, bir sohbet penceresi bir bileşen, bir yorum beslemesi başka bir bileşen olurdu ve sürekli güncellenen bir arkadaş listesi başka bir bileşeni temsil ederdi.

Vue.js'de bu prensibe uyan tek dosya bileşenleri kullanabilirsiniz.

 //PastaItem.vue <template> <li class="pasta-dish list-unstyled"> <div class="row"> <div class="col-md-3"> <img :src="this.item.image" :alt="this.item.name" /> </div> <div class="col-md-9 text-left"> <h3>{{this.item.name}}</h3> <p> {{this.item.desc}} </p> <button v-on:click="addToOrderNew" class="btn btn-primary">Add to order</button> <mark>{{this.orders}}</mark> </div> </div> </li> </template> <script> export default { name: 'pasta-item', props: ['item'], data: function(){ return{ orders: 0 } }, methods: { addToOrderNew: function(y){ this.orders += 1; this.$emit('order'); } } } </script> <style src="./Pasta.css"></style>

Yukarıdaki örnekte görebileceğiniz gibi HTML, JavaScript ve CSS tek bir dosyada birleştirilmiştir. Bileşen .vue dosyalarınıza CSS'yi dahil etmeniz gerekmez , ancak bu bir seçenektir.

React'te JavaScript ve bir bileşen dosyasındaki bu eğlenceli JSX işaretlemesi ile çok benzer.

 import React from "react"; class PastaItem extends React.Component { render() { const { details, index } = this.props; return ( <li className="pasta-dish list-unstyled"> <div className="row"> <div className="col-md-3"> <img src={details.image} alt={details.name} /> </div> <div className="col-md-9 text-left"> <h3>{details.name}</h3> <p> {details.desc} </p> <button onClick={() => this.props.addToOrder(index)} className="btn btn-primary">Add to order</button> <mark>{this.props.orders || 0}</mark> </div> </div> </li> ); } } export default PastaItem;

sahne

Yukarıdaki örnekte olduğu gibi, hem React hem de Vue.js, özelliklerin kısaltması olan 'props' kavramına sahiptir. Bunlar, verilerin ebeveynden çocuğa aktarılmasına izin veren bir öğe üzerindeki özel niteliklerdir.

 Object.keys(this.state.pastadishes).map(key => <PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} /> )

Yukarıdaki JSX örneğinde index , key , details , orders ve addToOrder nitelikleri alt PastaItem bileşenine veri ileten aksesuarlardır.

React'te bu, 'tek bir hakikat kaynağı' olarak hareket eden yerel bir 'durum'a (daha sonra bahsedeceğiz) dayandığı için gereklidir.

Vue.js'de aksesuarlar biraz farklıdır. Aynı şekilde bir bileşen üzerinde tanımlanırlar, ancak Vue.js bir şablon sözdizimine dayandığından, yerleşik şablon döngü işlevlerini kullanmanız gerekir.

 <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>

Biraz daha 'şablon' tarafında, ama işi hallediyor ve bunu React versiyonu kadar karmaşık buluyorum.

Yapı Araçları

Hem React hem de Vue.js, geliştirme ortamınızla hızlı bir şekilde çalışmaya başlamanızı sağlayan önyükleme uygulamalarına sahiptir. React'te bu, Create React App (CRA) ve Vue.js'de vue-cli'dir. Her iki durumda da en son en iyi uygulamalara göre ayarlanmış bir proje şablonu alırsınız.

CRA ile seçenekler açısından biraz daha kelepçelisiniz. Bu, sizi Webpack ve Babel'i kutudan çıktığı gibi kullanmaya zorlayan, üzerinde düşünülmüş bir araçtır. vue-cli ile, onu biraz daha esnek hale getiren şablonlar şeklinde seçenekleriniz var.

Chrome Geliştirme Araçları

Hem React hem de Vue.js ayrıca hata ayıklamaya yardımcı olacak harika Chrome uzantılarına sahiptir. Uygulamanızı başka herhangi bir web sitesinde yaptığınız gibi incelemenize izin verirler, ancak işaretlemenin Vue.js veya React sürümünü görmenize izin verirler. Ayrıca uygulama durumu verilerini görebilir ve güncellemelerin gerçek zamanlı olarak gerçekleştiğini görebilirsiniz.

Geliştirici araçları çalışırken tepki verin:

Vue.js geliştirici araçları iş başında:

Tamamlayıcı Çerçeveler

Bu iki çerçeve arasındaki son bir benzerlik (ve fark), tamamlayıcı çerçeveleri nasıl ele aldıklarıdır. Hem React hem de Vue.js, yalnızca UI katmanına odaklanır ve yönlendirme ve durum işleme gibi işlevleri tamamlayıcı çerçevelere bırakır.

Vue.js ve React arasındaki fark, ilgili tamamlayıcı çerçeveleriyle nasıl ilişki kurduklarıdır. Vue.js çekirdek ekibi, vue-router ve vuex çerçevelerini korur ve ana Vue şemsiyesi altında tutar. React'in tepki-yönlendirici ve tepki-redux, topluluk üyeleri tarafından korunur ve Facebook/React şemsiyesi altında 'resmen' değildir.

Ana Farklılıklar

Vue.js ve React'in pek çok ortak noktası olsa da, bazı önemli farklılıklar vardır.

Şablonlama vs JSX

React ve Vue.js arasındaki en büyük fark, şablonlamanın nasıl yapıldığıdır. Vue.js'de şablonlama için normal-eski-HTML kullanmanız önerilir. Bu yaklaşım, standart HTML öğelerindeki özel niteliklerden yararlanır.

 <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul>

Nitelikler, bileşen sözdizimini geçerli JavaScript ve HTML'ye dönüştürmek için bir oluşturma adımı gerektirse de, tek dosya bileşenlerinde de kullanılabilir.

 <ul> <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item> </ul>

Vue.js, bir şeyleri oluşturmak için HTML kullanımını teşvik ederken, Bıyık stili sözdizimi ile dinamik içeriğin çıktısını almak için tanıdık bir Angular stili yöntemi kullanır. Bu nedenle, Vue.js şablonlarını çok fazla ek yük olmadan mevcut şablonlara çok basit bir şekilde dahil edebileceğiniz için, Vue.js'nin mevcut uygulamalara entegre edilmesi tartışmasız daha kolaydır. Bunun ayrıca yeni gelenlerin bu sözdizimine uyum sağlamasını kolaylaştırdığı bildiriliyor.

Öte yandan React, tüm şablon kodunuzu JSX adlı bir 'JavaScript için sözdizimi uzantısı' kullanarak JavaScript'te yazmanızı önerir. Örneğin, JSX'teki aynı kod:

 <ul className="pasta-list"> { Object.keys(this.state.pastadishes).map(key => <PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} /> ) } </ul>

React/JSX ilk bakışta kesinlikle daha ayrıntılı görünüyor, ancak şablonlar içinde JavaScript kullanma yeteneği eklendiğinde geliştiriciye çok daha fazla güç veriliyor.

Ama hatırla:

Büyük güç büyük sorumluluk getirir. Ben Parker

JSX, bazı komik XML sözdizimine sahip gerçekten sadece JavaScript'tir. Ancak bir kez alıştığınızda, çok daha esnek ve sağlam hissettiriyor . Bu benim kendi önyargılarım olabilir, ancak Angular 1 tarzı öznitelik karmaşasının hiçbir zaman hayranı olmadığım için bunun daha iyi bir yaklaşım olduğunu hissediyorum.

Karşı argüman, Vue.js'nin şablon sözdiziminin, görüşlerinize/bileşenlerinize ek mantık yığma cazibesini ortadan kaldırarak endişelerin ayrılmasını sağlamasıdır.

Ayrıca Vue.js'nin React gibi render fonksiyonlarını ve JSX'i teknik olarak desteklediğinden de bahsetmek gerekir, ancak bunlar varsayılan yaklaşım değildir.

Durum Yönetimi ve Nesne Özellikleri

React'e aşina iseniz, uygulama durumunun anahtar bir kavram olduğunu bilirsiniz. Redux gibi büyük ölçekli durum nesnelerini yönetmeye adanmış çerçeveler bile var. Ek olarak, React uygulamalarındaki durum verileri değişmezdir, yani doğrudan değiştirilemez (bu tam olarak doğru olmasa da). React'te, yerel durumda herhangi bir şeyi değiştirmek için setState() yöntemini (veya useState() kancasını) kullanmanız gerekir.

 addToOrder(key) { //Make a copy of this.state const orders = { ...this.state.orders }; //update or add orders[ key ] = orders[ key ] + 1 || 1; this.setState( { orders } ); }

Vue.js ile yerel durum nesnesi gerekli değildir ve veriler Vue nesnesindeki data özelliği aracılığıyla yönetilir.

 export default { name: 'app', data() { return { samplePasta: samplePasta, orders: {} } }, ... methods: { handleOrder: function (key) { if (!this.orders.hasOwnProperty(key)) { this.$set(this.orders, key, { count: 0 }); } this.orders[key].count += 1; } } }

Vue nesnesindeki data parametresi uygulama verilerinin sahibi olarak hareket ettiğinden, setState() gibi bir durum yönetimi işlevini çağırmaya gerek yoktur.

Büyük ölçekli uygulamalar için durum yönetimi konusunda Vue.js'nin yaratıcısı Evan You, bu tür çözümlerin küçük ölçekli uygulamalar için uygun olduğunu, ancak daha büyük uygulamalar için ölçeklenebilir olmadığını söyledi.

Çoğu durumda, çerçevelerin kendileri tarafından sağlanan yerleşik durum yönetimi kalıpları, büyük ölçekli uygulamalar için yetersizdir ve Redux veya Vuex gibi özel bir çözüm kullanılmalıdır.

Bunu akılda tutarak, uygulamanızda durumun nasıl yönetildiğini tartışmak büyük olasılıkla erken bir optimizasyondur ve çoğu şeyde olduğu gibi bu kişisel tercih meselesidir. Ayrıca, bunun için endişelenmenize bile gerek olmayabilir.

Tepki Kancaları

2019'da React'e yapılan en büyük güncellemelerden biri, React 16.8'de Hooks'un eklenmesiydi. Kancalar önemlidir çünkü durum bilgisi olan işlevsel bileşenler sunarlar. Bu, bileşenleri oluşturmak için artık ES2015+ sınıfı sözdizimini kullanmanız gerekmediği ve çok daha az ayrıntılı işlevsel sözdizimini kullanabileceğiniz anlamına gelir.

Örneğin, sınıf sözdizimini kullanarak bir bileşen oluşturmak için gereken minimum kod miktarı şu şekildedir:

 class MyComponent extends React.Component { constructor() { super(); this.state = { someStateValue: true }; } handleClick = event => { this.setState({ someStateValue: !this.state.someStateValue }); }; render(){ return ( <> <p>React Class test</p> {`state: ${this.state.someStateValue}`} <p> <button onClick={()=> this.handleClick()}>Toggle state</button> </p> </> ); } } ReactDOM.render( <MyComponent />, document.getElementById('root') );

Ve kancalarla:

 const MyComponent = props => { const [someStateValue, setSomeState] = React.useState(true); return ( <> <p>React hooks test</p> {`state: ${someStateValue}`} <p> <button onClick={() => setSomeState(!someStateValue)}> Toggle state </button> </p> </> ); }; ReactDOM.render(<MyComponent />, document.getElementById("root"));

Gördüğünüz gibi, işlevsel sözdizimi ile yalnızca genel kod daha az olmakla kalmaz, aynı zamanda neler olup bittiğini görmek çok daha kolaydır. Kancalara yapılan en büyük ekleme, useState() ve useEffect() gibi yeni yerleşik kancaların eklenmesidir.

useState() , bir bileşendeki durumu yönetmek için Hooks yöntemidir. this.setState() kullanmak yerine, useState() yönteminden iki değişkeni yok edersiniz. İlk değişken durum özelliğidir ve ikinci değişken 'ayarlayıcı' işlevidir.

Örneğin, yukarıdaki kodda const [someStateValue, setSomeState] = React.useState(true); . someStateValue , bileşenimizde kullanacağımız durum değeridir ve setSomeState aslında durumumuzu güncellemek istediğimizde çağıracağımız bir fonksiyondur.

Kalemi Gör
Peter (@tasker82) tarafından React Hooks örneği
CodePen'de.

Kancalarla ilgili diğer büyük geliştirme, sınıf 'yaşam döngüsü' yöntemlerinin bir useEffect() kancasıyla değiştirilmesidir. Tüm 'componentDidMount(), componentWillUnmount() vb.' ile ilgilenir. serseri.

React belgelerine göre, daha önce bir bileşen 'monte edildiğinde' (DOM'ye eklendiğinde) ve bir bileşen güncellendiğinde bir şeyler yapmak istiyorsanız, iki farklı yöntemi kullanmanız gerekir:

 componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; }

useEffect() kancasıyla, her iki durumu da ele alan bir işleviniz olur:

 useEffect(() => { document.title = `You clicked ${count} times`; });

useEffect kancası bu basit örnekten çok daha güçlüdür; bileşenlerin bağlantısını kestiğinde (bileşenWillUnmount yerine) eylemleri çalıştırma desteğinin yanı sıra efektleri yalnızca işlemeler arasında belirli değerler değişmediğinde çalışacak şekilde sınırlandırır.

Kancaların diğer güzel yanı, kendi özel kancalarınızı oluşturabilmenizdir. Bu, 'bileşen mantığını yeniden kullanılabilir işlevlere çıkarmanıza' izin verir. Bunun anlamı, tıpkı bileşenleri yeniden kullanmak gibi, uygulamanız genelinde durum ve yaşam döngüsü yönetimi kodunu yeniden kullanabilmenizdir.

Vue 3 – Kompozisyon API'si

Peki Vue.js'de React'in kancaları gibi bir şey var mı? Vue 2.x değil ama Vue 3 hemen köşede. Sürüm 3'teki yeni özelliklerden biri, Kompozisyon API'si adı verilen bir şeydir. Daha ileri gitmeden önce, Vue 3'ün 'alfa öncesi' aşamada olduğunu belirtmeliyim, bu nedenle sürüm 3 resmi olarak yayınlandıktan sonra bunların bir kısmı değişebilir.

Hook'ların React'e eklenmesinin bazı nedenleri Vue.js için de geçerlidir. Vue.js genellikle daha basit bir API'ye sahiptir ve verileri ve hesaplanan özellikleri ayırır. Büyük uygulamalarda olabilecek şey, bu daha basit arayüzün yeniden kullanılabilir kod oluşturmayı zorlaştırabilmesidir. Geliştiriciler, tıpkı React sınıfları gibi, üzerinde düşünülmesi zor olan devasa bileşenler oluşturabilirler!

Bazı Vue 2 kodlarına bir göz atalım:

 <template> <div> <h3>Vue 2 test</h3> <h3>Hungry? {{ hungry }}</h3> <h3>Eating? {{ setEating }}</h3> <button v-on:click="updateEating">Toggle</button> </div> </template> <script> export default { data() { return { hungry: true }; }, computed: { setEating: function() { if (!this.hungry) { return true; } return false; } }, methods: { updateEating: function() { return (this.hungry = !this.hungry); } } }; </script>

Bu süper basit örnekte, takip etmek için nasıl üç farklı yöntemimiz olduğunu görebilirsiniz: data() , computed() ve methods() . Ayrıca, this anahtar sözcüğünü kullanarak örnek değişkenlere başvurarak sözde sınıf tabanlı arabirim sözdizimine güveniyoruz. Vue.js'nin 3. sürümünde, tüm bu veriler aynı yöntemde birleştirilebilir.

Not: Vue 3 Composition API'yi kullanmak için @vue/composition-api paketini eklemeniz ve onu Vue.js projenize eklemeniz gerekir .

 <template> <div> <h3>Vue 3 test</h3> <h3>Hungry? {{ hungryState.hungry }}</h3> <h3>Eating? {{ setEating }}</h3> <button v-on:click="updateEating">Toggle</button> </div> </template> <script> import { reactive, computed } from '@vue/composition-api' export default { setup() { // Pet name const hungryState = reactive( { hungry: false } ); const setEating = computed(() => { if (!hungryState.hungry) { return true; } return false; }); const updateEating = () =>{ return (hungryState.hungry = !hungryState.hungry); } // All properties we can bind to in our template return { hungryState, setEating, updateEating }; } }; </script>

Yukarıdaki uydurma örnekte, şeylerin bir setup() yönteminde nasıl birleştirilebileceğini görüyoruz. Bu, daha sıkı bir şekilde bağlanmış bir kod kümesine izin verir ve yeniden kullanılabilirliği biraz daha basitleştirir. Composition API için Vue 3 RFC'de, bu organizasyon yönteminin iki ana nedeni vardır:

1. Özellikler zamanla büyüdükçe karmaşık bileşenlerin kodunu anlamak zorlaşır. Bu, özellikle geliştiriciler, kendilerinin yazmadıkları kodu okurken meydana gelir. Temel neden, Vue.js'nin mevcut API'sinin seçeneklere göre kod organizasyonunu zorlamasıdır, ancak bazı durumlarda kodu mantıksal kaygılarla düzenlemek daha mantıklıdır.

2. Birden çok bileşen arasındaki mantığı ayıklamak ve yeniden kullanmak için temiz ve ücretsiz bir mekanizmanın olmaması.

React Hooks gibi, Vue 3 Composition API, eski Seçenekler API'si hala desteklenmekteyken isteğe bağlıdır.

Statik Site Üreticileri

Son birkaç yılda React dünyasına gelen bir sonraki en büyük şey, özellikle Gatsby olmak üzere statik site oluşturuculardır. Görünüşe göre JS tabanlı statik site oluşturucular birdenbire büyük bir olay haline geldi – bu özellikle Gatsby için geçerlidir.

Gatsby'ye aşina değilseniz, temel olarak statik HTML dosyaları oluşturmak için React ve GraphQL'ye dayanan bir derleme sistemidir. Daha önce Gatsby hakkında yazmıştım ve Vue'nun benzer bir aracı olup olmadığını merak ettim. Görünüşe göre öyle – Gridsome. Gridsome'ı deneme şansım olmadı ama Vue aromalı Gatsby'ye benziyor. Tıpkı Gatsby gibi, birden fazla içerik kaynağı (API'ler, başsız CMS') belirtebilir, içerik sorguları tanımlamak için GraphQL kullanabilir, Markdown'da içerik yazabilir ve önceden hazırlanmış bir başlangıç ​​şablonundan yeni siteler oluşturabilirsiniz.

Gridsome'ın özellik listesine bakıldığında, Gatsby ile neredeyse özellik eşliğine ulaştığı görülüyor. Gridsome gibi bir şeyde gördüğüm en büyük sorun Gatsby'nin popülaritesinin üstesinden gelmek. Tamamen Github yıldızlarının yüzeysel ölçümüne göre değerlendirildiğinde, Gridsome 5.6k'ya sahipken Gatsby'nin 42.6k ile ~9x'i var. Bu bir sonraki noktaya giriyor – pazar payı.

Pazar payı

2020'de çok az kişi React'in popülerlik açısından en iyi JavaScript çerçevesi olduğunu iddia edebilir. İyi ya da kötü, React burada kalacak gibi görünüyor. Popülerliği nedeniyle, çevrimiçi olarak React için çok sayıda belge ve öğretici bulunmaktadır.

Büyük bir pazar payının bir yan etkisi gelişme hızıdır. React, React Hooks'u Şubat 2019'da gönderdi, Vue 3 ise bu yazı yazılırken erken alfa aşamasında. Şimdi, “Ama React, büyük bir şirket olan Facebook tarafından destekleniyor!?!” dediğinizi duyar gibiyim. Bu doğrudur, dolayısıyla React üzerinde çalışan ve geliştirmeyi hızlandıran daha fazla insan olabilir.

Tüm bunlar söylenecek olursa, React şimdilik ön uç çerçeve ortamına hükmetmeye devam edecek. Bu, tamamen React ve ilgili çerçevelerle oluşturulduğundan özellikle WordPress editörü için geçerlidir.

Bu popülerlik ile birlikte, iş ve kariyer beklentileri hakkında da konuşmaya değer. Tepki işleri daha fazla talep görüyor, en çok para ödüyor ve geliştiricilerin büyük bir kısmını elinde tutuyor gibi görünüyor. Ama her şeyde olduğu gibi zamanla değişir 🙃. Tüm bunlar, React veya Vue.js'yi almayı düşünüyorsanız, kariyer gelişimi düşünmeye değer bir şeydir.

Sonuç olarak

İşte karşınızda, React ve Vue.js'ye 'bir çeşit kapsamlı' genel bakış. Burada tartışılmayan pek çok şey var, ancak bu size her iki çerçeveyi de hızlandırmak için oldukça iyi bir başlangıç ​​noktası sağlayacaktır.

Bununla birlikte, React'in her zamankinden daha fazla orada en popüler ön uç çerçeve olduğunu düşünüyorum. Gatsby ve React yöneten mobil (React Native ve masaüstü (Electron) çevresinde artan fanfare, yalnızca bu popülerliği vurgular.

Vue.js, React'te geliştirilen birçok kavramı alıyor ve bunları iyileştiriyor ve daha iyi hale getiriyor gibi görünüyor. Bazıları Vue.js'nin daha az dik bir öğrenme eğrisine sahip olduğunu iddia edebilir. Laravel topluluğunda çok popüler görünüyor ve Vue 3'ün piyasaya sürülmesinin Vue.js hayranları için büyük bir olay olacağını düşünüyorum. Vue.js'nin güçlü bir topluluğa sahip olduğunu iddia ediyorum, sadece React ile aynı seviyede değil.

Ayrıca React ve Vue.js'de işe yarayanları alan ve onları daha iyi hale getiren yeni çerçeveler görmeye başlıyoruz. Bir örnek Svelte'dir. Svelte , kullanıcı arayüzünde güncellemeler yapmak için sanal DOM farkını kullanmaz, ancak '…uygulamanızın durumu değiştiğinde DOM'yi cerrahi olarak güncelleyen kod yazar." Benim gibi geliştiricilerin karmaşıklığa alerjisi olduğu için Svelte'nin göz önünde bulundurulması gereken bir şey olduğunu düşünüyorum!

Tüm React geliştiricilerine ve Vue geliştiricilerine sesleniyorum, sizce React ve Vue.js'nin en iyi özellikleri nelerdir? Hangisini tercih ediyorsun? Yorumlarda bize bildirin.