VDS за 300р от нашего партнера SpaceWeb
[123]
01 Янв 2020, 23:53

Vue vs React, сравнение в контексте 2020 года

  1. Скорость обучения: React против Vue
  2. Производительность
  3. Инструменты и библиотеки
  4. Разработка мобильных и настольных систем
  5. Сообщество и Популярность
  6. Работа и найм
  7. Вывод

Когда дело доходит до выбора фреймворков и библиотек Javascript, разработчикам предоставляется множество возможностей, но React и Vue оказываются наиболее вероятным выбором.

Что же и когда использовать, React или Vue? Они похожи в двух аспектах: оба используют Virtual DOM и обладают  реактивной и компонентной структурой. 

В этой статье будут изложены сильные стороны и недостатки двух технологий, что позволит лучше понять популярные фреймворки и решить, какой из них наиболее благоприятен как для разработчиков так и для бизнеса.

Скорость обучения: React против Vue

React использует формат JSX, где HTML встроен в JavaScript. Хотя JSX соответствует функциональному программированию, которое является довольно удачной концепцией, разработчики несут ответственность за использование этого нового подхода.

React является зависимым по своей сути и активно использует сторонние компоненты для эффективной работы. Это может быть проблемой для разработчиков, так как им нужно аккумулировать много информации, чтобы реализовать свои задачи.

Хотя документация для React хороша, дока по Vue в все-таки считается еще лучше.

Vue легче учиться по сравнению с React. Vue распределяет структуру приложения так, как веб-разработчики уже привыкли, разделяя HTML, CSS и JavaScript. Это также позволяет использовать JSX для разработчиков, которые любят этот стиль.

К Vue также легче привыкнуть, потому что он вобрал в себя лучшее от React и Angular . Таким образом, разработчикам, имеющим опыт любого из этих двух фреймворков, будет легче влиться.

Как написано выше, документация по Vue очень хорошо написана и пытается ответить на большинство (если не на все) вопросы, которые могут возникнуть.

Производительность

React и Vue взаимодействуют с DOM; каждый раз, когда элементы DOM удаляются или добавляются, обновляются данные. Это взаимодействие является метрикой для измерения производительности.

Производительность React Vue

Из приведенной выше таблицы видно, что React и Vue выполняют одни и те же манипуляции практически в одинаковые сроки. Разница между производительностью Vue и React практически ничтожна, так как она отличается всего на несколько миллисекунд.

Это доказательство того, что в отношении производительности Vue и React довольно похожи. 

Инструменты и библиотеки

Управление состоянием

React может обрабатывать управление состоянием изнутри, используя setState () для установки состояния компонента. Однако для приложений с возможностью повышенной сложности и надежности разработчики используют такие пакеты, как Redux , Mobx и React Context API для управления состоянием. Ни один из этих пакетов не разрабатывается основной командой React.

Redux

import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);
function render() {
 ReactDOM.render( … );
}

store.subscribe(render);
render();

Vue, с другой стороны, использует «шаблон хранилища» для управления состоянием, когда создаваемое приложение является относительно простым и небольшим. Однако для крупномасштабных SPA, где многие компоненты остро нуждаются в общем хранилище состояний, Vue предоставляет Flux-подобную архитектуру под названием Vuex с централизованным хранилищем. 

Vuex

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

console.log(store.state.count) // -> 1

Vuex разработан и управляется командой Vue и предназначен для пользователей Vue. Он очень специфичен в своих способностях управления государством.

Зарегистрируйтесь, чтобы получать учебные пособия по Vue и React.
 

   

Маршрутизация

Для маршрутизации React использует библиотеку react-router , которая также не управляется командой React. Библиотека реагирует на синхронизацию компонентов приложения с URL-адресом.

React Router

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to={`/`}>Home</Link>
        <Link to={`/contacts`}>Contact Us</Link>
      </aside>

      <main>
        <Route exact path="/" component={Home} />
        <Route path="/contacts" component={Contacts} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

Vue имеет библиотеку маршрутизации под названием Vue-Router . Маршрутизатор Vue является официальным маршрутизатором для Vue, хотя есть несколько других сторонних маршрутизаторов, таких как page.js и Director, и его очень легко использовать с Vue.

Vue Router

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/contacts">Contact Us</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Router)

const Home  = {
  template: '<div>Home</div>'
}

const Contacts = {
  template: '<div>Contacts</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/contacts', component: Contacts }
  ]
})

new Vue({
  router
}).$mount('#app')
</script>

Также возможно обрабатывать маршрутизацию без какой-либо библиотеки, но это эффективно для приложений, которым требуется только простая маршрутизация.

CLI

Для быстрого доступа к среде разработки React предоставляет интерфейс командной строки, который облегчает запуск проекта реагирования . Это называется создать-реагировать-приложение .

Vue предоставляет ресурс под названием vue-cli, который дает разработчикам возможность быстро начинать новые проекты Vue. Интерфейс Vue CLI уже настроен и позволяет добавлять плагины в любое время в течение жизненного цикла разработки.

Разработка мобильных и настольных систем

React Native — это потрясающая платформа React для создания собственных мобильных приложений, которые работают как для Android, так и для iOS. Это действительно круто, потому что разработчики React могут использовать свои знания для создания мобильных приложений.

Во время написания статьи Vue сотрудничает с Weex, кроссплатформенной инфраструктурой пользовательского интерфейса, для разработки платформы, которая будет функционировать как React Native. В настоящее время Vue имеет плагин NativeScript под названием NativeScript-vue для создания собственных приложений в Vue.

Для создания кроссплатформенных настольных приложений Vue можно легко использовать с Electron. Используя Vue-CLI в качестве строительных лесов, Electron-vue предоставляет образец, в котором о внутренних конфигурациях уже позаботились.

Сообщество Vue and React и Популярность

При поддержке Facebook React имеет очень большое сообщество по сравнению с Vue. В настоящее время React имеет более 125 000 вопросов о StackOverflow. Он также имеет более 50000 пакетов в минуту. 

Сообщество React, хотя и большое, очень фрагментировано из-за свободы, предоставленной разработчикам в выборе любой структуры, которая им подходит. Эта свобода является причиной путаницы, отсюда и большое количество вопросов, записанных в StackOverflow.

В настоящее время React имеет 177 500 звезд на Github, на несколько тысяч звезд меньше, чем Vue. Аналитика из GoogleTrends показывает, что по сравнению с Vue, React имел около 85% релевантности поиска за последние 12 месяцев.

Реагировать против Vue

Источник: GoogleTrends: февраль 2018 — февраль 2019  Vue.js стал известен широким массам в 2014 году. Сообщество растет, но пока и близко не сопоставимо с React, но оно действительно многообещающее. В StackOverflow есть более 66 000 вопросов с тегами Vue.js и около 14 000 пакетов в минуту. Vue имеет более 122 000 звезд на Github.

интерфейсные рамки

Источник: StateFJs-2018

Vue и React Вакансии и найма

Большая база сообщества, которая есть у React, и множество вопросов по StackOverflow — это большая группа разработчиков React. У React больше доступных разработчиков по сравнению с Vue.

Тем не менее, из отчета  StateofJs-2018 выше, есть много разработчиков, которые все больше заинтересованы в изучении Vue. Это может означать, что через несколько месяцев или лет количество разработчиков Vue может резко возрасти.

Недавний поиск в StackOverflow показывает, что разработчик React может заработать до 150 тысяч долларов, а разработчик Vue.js — около 90 тысяч долларов. Это также показывает, что заданий React больше, чем заданий Vue. 

 

Вывод

React и Vue — очень хорошие технологии JavaScript, отличный выбор и очень полезные как для небольших, так и для крупных приложений.

React предлагает гибкость, горячий рынок труда и такой же стабильный, как Vue. Тем не менее, Vue более структурирован, его легче вычислять и настраивать, что приводит к сокращению продолжительности и времени простоя проекта, если CTO представляют Vue.js как часть своего стека разработчиков. 

Vue предлагает ясность, приводящую к предсказаниям, что среда будет приравнивать React и, возможно, станет главным выбором для разработчиков.

Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 7767]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 6778]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 6583]
[123]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 5471]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 5455]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 4196]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 4097]

Вести с Хабра