Vue или react что легче
React VS Vue: Что лучше в 2020 году?
Дата публикации: 2019-11-04
От автора: Javascript-фреймворки наряду с HTML и CSS стали неотъемлемой частью разработки интерфейса любого современного программного проекта. 2020 год станет еще одним годом выбора правильного JavaScript-фреймворка для вашего проекта.
Если вы читаете этот пост, то я предполагаю, что вы не уверены в техническом стеке для своего следующего проекта. Это не просто определить, и этот пост ставит себе целью разрешение таких дилемм для каждого предпринимателя. Вот некоторые из распространенных запросов, связанных с выбором стека технологий:
React VS Vue: что лучше для моего следующего проекта веб-разработки?
Который из них даст лучшую производительность?
Какая из этих двух технологий javascript наиболее популярна среди разработчиков?
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Который из них лучше для небольших веб-приложений?
Который из сравниваемых javascript-фреймворков является более надежным?
Прочитав ответы на все эти вопросы, вы сможете выбрать идеальную технологию Javascript для своего проекта. Давайте сравним React и Vue на основе различных параметров, чтобы раскрыть перспективы этих инструментов программирования на 2020 год.
React или Vue: Популярность
В экосистеме Javascript довольно быстро запускаются новые фреймворки и библиотеки. Фактически, это постоянный процесс, и графики популярности этих технологий продолжают меняться каждые несколько месяцев.
Давайте посмотрим на последние статистические данные за 2019 год, чтобы выяснить, кто является более популярным. Google trends: Поисковые тренды Google для Vue и React приведены на линейной диаграмме. Здесь React значительно опережает Vue.js.
Обзор Stack Overflow: Чреди самых популярных фреймворков React возглавил список. Но vue.js также показал замечательный результат. С момента запуска в 2014 году он стал популярным выбором для разработчиков за меньшее время.
React или Vue: Основные аспекты
Давайте кратко рассмотрим эти технологии javascript. Vue.JS: Эван Ю, бывший инженер Google, создал этот Javascript-фреймворк в 2014 году. Он не поддерживается глобальной организацией. Последняя версия 2.6.10 — 20 марта 2019 г.
С момента его запуска прошло всего пять лет, что делает его самым молодым членом семейства javascript. Alibaba и Gitlab — это лишь некоторые популярные имена, которые пользуются преимуществами этой платформы. Vue известен как платформа, сочетающая в себе функции некоторых успешных технологий JavaScript.
React: В отличие от Vue, эта библиотека JavaScript была создана Facebook. Управление рекламным трафиком в Facebook стало основной причиной его создания. Это было, когда у Facebook возникли проблемы в обслуживании и кодировании.
Он хорошо известен своей способностью создавать динамические и интерактивные пользовательские интерфейсы. Версия 16.8.6 — это последняя версия React, выпущенная 6 мая 2019 года. Некоторые популярные компании, пишущие коды с помощью React — это BBC, Instagram, WhatsApp, и этот список на самом деле длинный!
React или Vue: Производительность
Изменения в приложении отражаются в его пользовательском интерфейсе и так называемой DOM. Существуют виртуальный DOM и реальный DOM. Тип DOM оказывает большое влияние на производительность любой технологии программирования.
React: У него есть виртуальный DOM, который легок и не специфичен для браузера. Это основная причина популярности React, поскольку с помощью виртуального DOM он устранил проблему неэффективной производительности.
Vue: Vue также работает с виртуальным DOM, но обеспечивает более высокую производительность по сравнению с React. Он также гарантирует безошибочную производительность.
React или Vue: Поддержка сообщества
Поддержка сообщества имеет решающее значение для каждой технологии программного обеспечения. Это побуждает новых пользователей увлекаться определенной технологией. Давайте узнаем о поддержке сообществом обеих этих технологий.
React: Facebook разработал эту библиотеку Javascript для поддержания растущего трафика рекламной кампании. Сотрудники Facebook работают над добавлением новых и расширенных функций. Это обеспечило высокую надежность данной библиотеки среди активных разработчиков.
Vue: Разработан бывшим инженером Google, но не поддерживается ни одним из ведущих брендов. Это приводит к недостаточной надежности и первоначальному росту рынка. Но, преодолев это препятствие, Vue приобрел неожиданную популярность и поддержку разработчиков. Vue обеспечил себе поддержку самостоятельно.
React или Vue: Размер платформы
React немного больше по размеру, чем Vue.js. Размер React составляет около 100 КБ, а Vue — 80 КБ. Размер фреймворков / библиотек может оказать существенное влияние на проекты разработки программного обеспечения.
React нужна поддержка для определенных задач из других библиотек. Одна из этих задач — маршрутизация. Ее небольшой размер идеально подходит для легких приложений. Vue еще меньше по размеру, что делает его более подходящим для компактного применения.
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
React или Vue: Варианты использования
Прежде чем сделать выбор в пользу определенной технологии программирования, для предпринимателей важно исследовать тип компаний, использующих различные технологии. Javascript уже давно стал важной частью сервисов разработки программного обеспечения.
Основная заслуга в этом принадлежит возможностям его различных фреймворков и библиотек. Итак, вот основные примеры использования React и Vue:
React:
Facebook, как уже упоминалось, рекламные кампании Facebook управляются с помощью этой технологии.
Twitter, платформа социальных сетей, известная своей способностью быстро расширять сеть.
Instagram, социальная платформа в первую очередь поддерживает обмен фотографиями
Whatsapp, приложение для обмена сообщениями, широко используемое по всему миру.
GitLab — это поддержка разработчиков, которая позволяет им формировать командные коды или копировать коды.
9Gag известен тем, что делится вирусными мемами и другим популярным контентом
React или Vue: Кривая обучения
Кривая обучения — это способность разработчиков программного обеспечения применять коды определенного языка / фреймворка или библиотеки. Между этими двумя технологиями программирования, согласно статистике, Vue более дружественен для веб-разработчиков.
В исследовании Stateofjs было предложено проголосовать за «использовал его, и буду использовать его снова», и больше респондентов проголосовали за React. Помимо этого, у респондентов также спрашивали мнения о других ситуациях. Вот представление ответов от респондентов:
Обратитесь к этому ресурсу, чтобы понять приведенную выше диаграмму более четко.
Vue — это новая и обязательная среда для разработчиков веб-приложений. Он хорошо представлен в варианте «слышал о нем, хотел бы изучить». Это обеспечивает многообещающую кривую обучения для данной технологии в ближайшие годы.
React или Vue: Гибкость
React: Официальная библиотека React предлагает не так много. Здесь вы получаете исключительную гибкость при выборе инструментов по вашему выбору. Существуют некоторые фреймворки, такие как Angular, содержащие в комплекте практически все, и это не дает достаточно места для экспериментов.
Некоторые инструменты, которые могут быть интегрированы с этой технологией — Redux и MobX для задач управления офисом. Опытные разработчики мобильных приложений будут наслаждаться такой свободой в разработке, поскольку она позволяет им создавать динамические приложения.
Vue: В отличие от React, на официальном сайте Vue разработчикам vue.js предоставлены определенные сведения. Кроме того, разработка на стороне сервера также поддерживается рендерингом на стороне сервиса Vue. Например, Vuex для управления состоянием и Vue Router для маршрутизации — это надстройки, которые можно использовать в пользовательских службах разработки программного обеспечения.
Вывод: React или Vue
Основываясь на представленном выше анализе, мы можем суммировать следующие моменты:
React является более популярной и востребованной технологией программирования по сравнению с Vue.
React поддерживается мощным брендом Facebook, а Vue — нет.
React обеспечивает большую гибкость, чем Vue.
Размер Vue меньше, чем React
В конце этого поста я предполагаю, что ваши сомнения относительно правильного технологического стека для разработки приложений прояснились. Если вы все еще находитесь в раздумьях, поговорите с экспертом из известной компании по разработке веб-приложений.
Автор: Patricia Neil
Редакция: Команда webformyself.
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
В чём разница между React и Vue?
Однажды мы уже публиковали материал, посвящённый сравнению React и Vue. Это был практический пример, на котором можно было увидеть сходства и различия этих фреймворков в довольно-таки мелких деталях. Сегодня мы хотим поделиться с вами переводом статьи, автор которой, Джон Ханна, рассматривает React и Vue в более крупном масштабе. Он говорит о том, что в сегодняшнем мире веб-разработки можно видеть, во-первых, господство React, а во-вторых — взрывной рост популярности Vue. Если существующие тренды продолжатся, весьма вероятно, что к концу 2018-го года Vue обойдёт Angular и займёт второе место в рейтинге самых используемых веб-инструментов.
По словам Джона, последние три года он занимается коммерческой разработкой на React. Он говорит, что когда в компанию, где он работает, приходят клиенты, чаще всего они заявляют о том, что хотят, чтобы их проект был создан с использованием React. Однако, судя по всему, через некоторое время похожим уровнем внимания будет пользоваться и Vue. В этом материале он анализирует React и Vue для того, чтобы лучше понять разницу между этими двумя библиотеками? и говорит о том, что то, чему посвящена эта статья, поможет ему в работе с клиентами. Он полагает, что даже хотя работает с React уже несколько лет, и ему нравится то, что он делает, неплохо будет подготовиться к будущему, так как при работе с Vue могут возникнуть неожиданные ситуации, в которых его опыт ему не поможет.
Начнём с конца
Я хочу начать мой рассказ о React и Vue, как ни странно, с выводов. Эти два фреймворка похожи, хотя между ними имеются некоторые важные различия, о которых я кратко расскажу. Зачем их сравнивать? Одна из причин заключается в том, что для Эвана Ю, разработчика Vue, React был одним из источников вдохновения. Эти фреймворки гораздо сильнее похожи друг на друга, чем они же, скажем, похожи на Angular или Ember. Из документации Vue можно узнать, что оба фреймворка, о которых мы сегодня говорим, обладают следующими особенностями:
Если вы разрабатываете приложение, рассчитанное на разные платформы, например — на традиционный веб и на мобильные устройства, преимущество оказывается у React благодаря замечательному React Native. Мои коллеги, кроме того, использовали React для создания встраиваемых приложений для телевизоров. Это — интересный пример экзотической платформы, на которой можно использовать React. Однако, возможности разработки приложений под мобильные платформы есть и у Vue, благодаря Weex, поэтому, вполне возможно, что для некоего мобильного проекта предпочтительным окажется именно этот фреймворк.
Нужно отметить, что экосистема React гораздо больше, чем у Vue, что вполне может способствовать успешности и скорости разработки. Если для того, чтобы React-приложение состоялось, нужен некий важный функционал, велики шансы того, что нечто подобное уже реализовано. На самом деле, весьма вероятно то, что для множества проблем в сфере React можно будет найти даже несколько вариантов решений.
Ещё одно важное соображение для того типа клиентов, с которыми работает моя компания, это возможность найти разработчиков, которые хорошо разбираются в библиотеке или фреймворке, на который эти клиенты делают ставку. Тут у React тоже есть преимущество, хотя я полагаю, что оно, скорее всего, временное.
Другие различия, в основном, относятся к тонкостям разработки и к техническим деталям. Например, они касаются парадигм программирования, которым свойственны определённые особенности, какие-то компромиссы, и я не могу выделить ни в одной из них чётких сильных или слабых сторон. Это мы ещё обсудим.
В итоге можно сказать, что если имеется команда, которая уже знакома с React, переход на Vue особых преимуществ ей не даст (о минусах поговорим ниже). Если ваша команда только начинает заниматься разработкой фронтенда веб-приложений, или подумывает о том, чтобы перейти на что-то новое с фреймворков вроде Backbone или AngularJS, тогда вам стоит посмотреть в сторону Vue, хотя вышеозначенные сильные стороны React никуда не деваются. Другие факторы, опять же, касаются технических деталей, о которых мы сейчас поговорим.
Различия React и Vue
Пожалуй, лучше всего, сравнивая React и Vue, обратиться к документации по Vue (весьма качественной), в которой их сходства и различия раскрыты очень хорошо. Эта документация особенно полезна, так как она была написана Эваном Ю вместе с Дэном Абрамовым, членом команды React. Кроме того, если я буду относиться к чему-то предвзято, выдержки из документации помогут трезво взглянуть на положение дел.
▍Производительность
В плане производительности Vue и React очень похожи. В документации Vue сказано, что у Vue, в большинстве случаев, есть небольшое преимущество, однако, свежие бенчмарки показывают, что React 16 быстрее чем Vue 2.5. Некоторые различия в работе с фреймворками наблюдаются и при оптимизации производительности.
Тут мне хотелось бы отметить, что 19-го декабря 2017-го, после того, как я, вникая в тонкости вопросов производительности веб-фреймворков, опубликовал свежую статью, я понял, что мои выводы о производительности фреймворков стоит уточнить. Vue немного быстрее, но результат зависит от того, что именно измеряют.
▍Шаблонизация и JSX
Ещё одно серьёзное различие между рассматриваемыми фреймворками заключается в том, что в Vue используются шаблоны, а в React — JSX. Многим программистам не нравится язык шаблонов. Вот что об этом говорит документация Vue:
Некоторые утверждают, что для того, чтобы писать шаблоны, нужно изучить дополнительный специализированный язык. Мы считаем поверхностным такой подход при сравнении Vue и React. Во-первых, использование JSX не означает, что программисту не нужно изучать ничего нового, так как перед нами — дополнительные конструкции, построенные на обычном JavaScript. В результате JSX легко освоить тому, кто знаком с JS, но говорить, что для использования JSX не нужно прилагать вообще никаких усилий — это уже чересчур. Аналогично, шаблоны — это расширение обычного HTML, и, таким образом, те, кто знаком с HTML, могут освоить их без особых проблем. Благодаря особенностям шаблонов, мы, кроме того, можем помочь программисту добиться большего, написав меньше кода (например, с использованием модификаторов v-on ). Для решения тех же задач может понадобиться гораздо больше кода при использовании обычного JSX или рендер-функций.
Меня беспокоит ситуация, когда при разработке приложения смешивают JSX и язык шаблонов. Это усложняет проект. Проще придерживаться какого-то одного подхода, иначе неизбежна трата сил на «переключение контекста», на переход из одной среды в другую. Однако, могут найтись те, кто с этой идеей не согласится.
В Vue очень приятно работать с CSS. В документации Vue, где этот фреймворк сравнивают с React, определённое внимание уделено и CSS. В React, в частности, весьма популярно использовать так называемый CSS-in-JS. Взглянем в документацию:
Мне нравятся однофайловые компоненты, которые включают в себя CSS. На рисунке ниже показан пример компонента из документации. Обратите внимание на тег в нижней части кода.
Этот тег в файле компонента даёт нам стили, ограниченные рамками этого компонента, плюс — удобства при редактировании кода в виде подсветки синтаксиса. Кроме того, такой подход проще в реализации, чем CSS-in-JS из React…
▍Экосистема
Как уже было сказано, экосистема React намного больше, чем экосистема Vue. Перед нами — одно из преимуществ React, но это может запутать новичков. Vue даёт сообществу меньше свободы. Вместо этого важные библиотеки пользуются официальной поддержкой:
Вспомогательные библиотеки Vue для управления состоянием приложения и маршрутизации (помимо прочего), официально поддерживаются и обновляются в соответствии с основной библиотекой. В React, вместо этого, выбран путь передачи этих функций сообществу. Это усиливает фрагментацию экосистемы. Однако, благодаря большей популярности React, и его экосистема оказывается более обширной, чем у Vue.
▍Управление состоянием
Для меня управление состоянием приложения — основное различие React и Vue. Одна из ключевых парадигм в React — функциональное программирование. Если вы используете вместе с React популярную библиотеку для управления состоянием Redux, значит вы уже работаете в рамках функционального подхода к разработке приложений.
Подобное внимание к функциональному программированию в React в последние годы оказало серьёзное воздействие на обширное сообщество JS-разработчиков. Создатели React не являются изобретателями функционального программирования — это довольно старая идея. Однако, React, совершенно очевидно, популяризовал эту концепцию среди нового поколения программистов. Это — мощный подход к программированию, который, лично мне, помогает писать более качественный код.
Один из основополагающих принципов функционального программирования — неизменяемость (иммутабельность). Вот, если интересно, недавнее выступление, посвящённое важности иммутабельности, но основная идея тут заключается в том, чтобы управлять тем, что называется «побочными эффектами», а также упростить и сделать более предсказуемым управление состоянием приложения.
Надо отметить, что сам по себе React — это библиотека, которую нельзя назвать полностью соответствующей духу функционального программирования. Существует, кроме того, популярная библиотека для управления состоянием React-приложений, которая называется MobX. Она реализует изменяемое состояние приложения. Вот что об этом можно найти в документации к Vue:
Библиотека MobX стала весьма популярной в сообществе React-разработчиков, и она, на самом деле, использует систему реактивности, практически идентичную таковой в Vue. В некоторой степени связку React + MobX можно рассматривать как более многословную версию Vue, поэтому, если вы используете эту комбинацию и она вам нравится, переход на Vue, вероятно, это следующий логический шаг.
Об этом же пишет и Эван Ю в одном из своих твитов.
Ещё одно популярное средство управления состоянием в Vue — это библиотека, которая называется Vuex. Вот выдержка из статьи, где сравнивают Redux и Vuex, которая поможет выделить отличия этих библиотек:
Vuex, как и Redux — это библиотека, создатели которой вдохновлялись Flux. Однако, в отличие от Redux, Vuex изменяет состояние вместо того, чтобы сделать его иммутабельным и заменять его полностью, как с помощью функции-редьюсера в Redux.
Это позволяет Vue.js автоматически получать сведения о том, какие директивы, при изменении состояния, нуждаются в повторном рендеринге. Вместо того, чтобы использовать специализированные редьюсеры, Vuex позволяет организовать управление состоянием приложения с использованием хранилищ, называемых модулями.
Хотя тут мы уходим в технические сферы, для многих разработчиков парадигмы кое-что значат. Если вы из тех, кто придерживается функционального подхода, тогда React, вероятно, окажется для вас более привлекательным (с возможным исключением тех, кто пользуется MobX). Если нет — тогда интереснее может оказаться Vue.
Дополнительные материалы
Недавно Дэн Абрамов довольно активно общался в Твиттере, высказываясь по поводу сравнений React и Vue, сделанные не в пользу первого. Думаю, на эти твиты стоит взглянуть. Дэн — это часть команды разработчиков React, и в его комментариях есть некоторая предвзятость, но они, всё равно, предоставляют дополнительную пищу для ума в отношении сравнения React и Vue.
Вот Дэн отвечает на критику простого примера с использованием React, говоря, что React нацелен на то, чтобы упростить понимание кода даже несмотря на растущую сложность требований к проекту, а не на то, чтобы сделать простые примеры как можно более короткими.
Здесь он рассказывает о том, что React реализует поток данных, направленный сверху вниз. Поэтому изменения перенаправляют поток данных по предсказуемым путям в кодовой базе вместо того, чтобы, если что-то поменялось, пускать их по произвольным маршрутам. Он говорит, что в некоторых случаях это означает больше кода. Но это ведёт к появлению кода, который, в долгосрочной перспективе, легче читать и поддерживать.
Тут он говорит, что простой и сложный код обычно выглядят практически одинаково. И нет пропасти, которую нужно перепрыгнуть для того, чтобы добиться большей выразительности программ. В случаях с привязками данных или с потоком управления, предоставленных некоей библиотекой, это часто не так. При этом он добавляет, что это не говорит о том, что Vue — это плохо (многим нравятся особенности этого фреймворка), но судить о фреймворках, основываясь на том, какой «Hello World» меньше, по его мнению, уводит от реальности.
Итоги
Как вы помните, итоги сравнения React и Vue мы подвели ещё в самом начале этого материала. Поэтому здесь я хочу привести цитату из интервью Эвана Ю, которое он дал Вивиан Кромвель. Разговор шёл о том, как выглядит Vue в сравнении с другими фреймворками.
Я думаю, если учитывать все существующие фреймворки, Vue, вероятно, сильнее прочих похож на React, но в более широком смысле, среди всех фреймворков, его можно назвать придуманным мной термином «прогрессивный фреймворк». Идея заключается в том, что Vue — это ядро, которое представляет собой привязку данных и компоненты, что делает его похожим на React. Оно решает очень точно определённый, ограниченный набор задач. В сравнении с React, Vue уделяет больше внимания доступности технологий. То есть, он нацелен на то, чтобы люди, которые знают основы, а именно — HTML, JavaScript и CSS, могли бы освоить его как можно быстрее.
Мы стараемся строить Vue как фреймворк с компактным, минималистичным ядром. Но, по мере роста сложности ваших приложений, перед вами, вполне естественно, встают новые проблемы. Например — маршрутизация, обмен данными между компонентами, разделение состояния в больших приложениях. В том же ряду — потребность в инструментах для сборки проектов, помогающих сделать кодовую базу модульной. Тут же можно задаться вопросами об организации стилей и различных дополнительных ресурсов, входящих в состав приложения. Многие фреймворки, которые можно назвать более завершёнными, охватывающими решение более широкого спектра задач, чем возлагается на ядро Vue, такие, как Ember или Angular, пытаются предложить разработчику решение всех задач, с которыми он может столкнуться, и пытаются сделать всё встроенным в фреймворк.
Это — некоторый компромисс. Чем больше предположений о том, как программисты будут пользоваться фреймворком, делается при его разработке, тем меньше гибкости, в итоге, такой фреймворк допускает. Ещё один вариант, противоположный первому — перекладывание решение всех вспомогательных задач на сообщество, как сделано в React, экосистема которого полна жизненных сил. Тут постоянно возникает множество идей, но в таком положении вещей есть и минусы. Vue пытается найти золотую середину, когда ядро предоставляет весьма ограниченный набор возможностей. Однако, в дополнение к этому, мы предлагаем решения, подходящие для поэтапного внедрения, вроде систем маршрутизации и систем управления состоянием приложения, вроде набора инструментов для сборки проектов и средств командной строки. Все они поддерживаются официально, хорошо документированы, спроектированы с расчётом на их совместное использование, но использовать их все разработчик не обязан. Я думаю, что это, вероятно, самое главное, что отличает Vue, как фреймворк, от других подобных решений.
Уважаемые читатели! Как вы полагаете, какая судьба ждёт React и Vue в будущем году?