Сравнение Angular, React и Vue в 2017 году

внешний интерфейс JavaScript Программа перевода самородков Vue.js React.js Angular.js внешний фреймворк

Сравнение трех мушкетеров Angular, React, Vue в 2017 году

Выбор среды разработки JavaScript для веб-приложения может быть сложным. Настоящее времяAngularа такжеReactОчень популярный и недавний выскокVueJSЭто также привлекло внимание многих людей. Более того, это всего лишь некоторыевосходящая звезда.

Javascripts in 2017 —— things aren’t easy these days!
Javascripts в 2017 году — в наши дни все не так просто!

Так как же нам выбрать, какой фреймворк использовать? Было бы здорово перечислить их плюсы и минусы. Мы собираемся сделать это так же, как и в предыдущей статье",9 шагов: выберите стек технологий для своего веб-приложения".

Прежде чем начать. Используете ли вы разработку одностраничных веб-приложений?

Сначала вам нужно выяснить, хотите ли вы одностраничное приложение (SPA) или многостраничный подход. Подробности на эту тему читайте в моем блоге».Одностраничное приложение (SPA) и многостраничное веб-приложение (MPA)"(Скоро, следуй за мнойTwitterОбновить).

Сегодняшний первый запуск: Angular, React и Vue

Во-первых, я хочу начатьЖизненный цикл и стратегические соображенияугловое обсуждение. Затем мы обсудим три фреймворка JavaScript.Особенности и концепции. Наконец, мы делаемВ заключение.

Вот что мы собираемся обсудить сегодня:

  • Насколько развиты эти фреймворки или библиотеки?
  • Эти рамки будут толькогорячий?
  • Каков размер сообщества, соответствующего этим фреймворкам, и какую помощь они могут получить?
  • Найдите каждого разработчика фреймворкаэто легко?
  • эти рамкиОсновные концепции программированиячто это такое?
  • Для малых или больших приложений, легко ли использовать фреймворк?
  • каждый кадркривая обученияНа что это похоже?
  • Что вы ожидаете от этих фреймворковпредставлениекак насчет этого?
  • Где можноТщательно понять основные принципы?
  • Вы можете использовать рамку по вашему выборуразвивать?

Приготовься и выслушай меня!

Жизненный цикл и стратегические соображения

比较 React、Angular 和 Vue
Сравнение React, Angular и Vue

немного истории

Angular— это фреймворк Javascript, основанный на TypeScript. Разработанный и поддерживаемый Google, он описывается как «Превосходный JavaScript».MVWФреймворк .angular (также известный как «Angular 2+», «Angular 2» или «NG2») был переписан и с AngularJS (также известный как «angular.js» или «angularjs 1.x») несовместим с последующими версиями. Когда AngularJS (более старая версия) первоначально выпущена в октябре 2010 г., она все ещеисправлять ошибки, и т. д. — новый Angular (без JS) вышел с версией 2 в сентябре 2016 года. Последняя основная версия - 4,потому что версия 3 была пропущена. Google, Vine, Wix, Udemy, Weather.com, Health.gov и Forbes используют Angular (согласноmadewithangular,stackshareа такжеlibscore.comпредоставленные данные).

ReactОписывается как «библиотека JavaScript для создания пользовательских интерфейсов». React был первоначально выпущен в марте 2013 года и разрабатывается и поддерживается Facebook, который использует компоненты React на нескольких страницах (но не как одностраничное приложение). согласно сChris Cordle эта статьяСогласно статистике, React используется в Facebook гораздо чаще, чем Angular в Google. React также используется Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart и другими (согласноFacebook, stackshareа такжеlibscore.comпредоставленные данные).

Facebook развиваетсяReact Fiber. Это изменит нижнюю часть React — скорость рендеринга должна быть выше — но после изменений версия позже будет совместима. Facebook будет на конференции разработчиков в апреле 2017 годаОбсуждатьновые изменения и опубликовать неофициальнуюСтатья о новой архитектуре. React Fiber может быть выпущен вместе с React 16.

VueЭто один из самых быстрорастущих фреймворков JS в 2016 году. Vue описывает себя как «платформу для создания интуитивно понятных, быстрых и основанных на компонентах интерактивных интерфейсов.MVVMframework». Впервые он был опубликован в феврале 2014 года бывшим сотрудником Google.Evan YouОпубликовано (кстати: You Yuxi опубликовал статью в то времяvue запускает первую неделю маркетинговых кампаний и данныхСообщение блога). Особенно с учетом того, что Vue приобрел такую ​​популярность как фреймворк, разработанный одним человеком без поддержки крупной компании, что, несомненно, очень успешно. You Yuxi в настоящее время имеет команду из десятков основных разработчиков. В 2016 году вышла версия 2. Vue используется Alibaba, Baidu, Expedia, Nintendo, GitLab —  Доступно по адресуmadewithvuejs.comНайдите список некоторых небольших проектов.

И Angular, и Vue следуютMIT licenseлицензия, в то время как React подчиняетсяBSD3-licenseлицензия. Существует много дискуссий о патентных документах.James Ide(Бывший инженер Facebook) объясняет, что стоит за патентным документомПричина и история: Патентное лицензирование Facebook — это возможность делиться своим кодом, защищая себя от патентных исков. Патентный документ обновлялся один раз, и некоторые люди утверждали, что если ваша компания не собирается судиться с Facebook, можно использовать React. Ты сможешьпо этому вопросу на GithubПроверьте обсуждение. Я не юрист, поэтому, если лицензия React является проблемой для вас или вашей компании, вы должны решить сами. На эту тему есть еще много статей:Dennis Walshнаписал,почему не стоит бояться.Raúl Kripalaniпредупреждать:Против стартапов, использующих React, он же написалОбзор памятки. Кроме того, в Facebook есть обновленное заявление:Объясните лицензию React.

основная разработка

Как упоминалось ранее, угловые и реагирование поддерживаются и используются крупными компаниями. Facebook, Instagram и WhatsApp используют реагирование на их страницах. Google использует угловые во многих проектах, например, новые ui adwords используютУгловой и Дартс. Тем не менее, Vue внедряется группой лиц, поддерживаемых Patreon и другими спонсорами, к лучшему или к худшему.Matthias GötzkeПодумайте, преимущества небольшой команды VueС более чистым и менее сложным кодом или API.

Давайте взглянем на статистику: Angular на странице знакомства с командойСписок 36 человек, Вью16 человек в списке, а у React нет страницы знакомства с командой.на Гитхабе, у Angular более 25 000 звезд и 463 автора кода, у React — более 70 000 звезд и более 1000 разработчиков кода, а у Vue — почти 60 000 звезд и всего 120 разработчиков кода. вы также можете просмотретьGithub Star История Angular, React и Vue. Еще раз кажется хорошим проиллюстрировать тенденцию Vue. согласно сbestof.jsПредставленные данные показывают, что за последние три месяца Angular 2 получал в среднем 31 звезду в день, React 74 и Vue.JS 107.

Angular，React 与 Due 的 Github Star 历史 (数据来源)
Github Star History of Angular, React и Due (источник данных)

Источники данных

возобновить: благодарныйPaul HenschelПредложенныйтренды NPM. Тенденции npm показывают количество загрузок пакетов npm, что относительно более полезно, чем просмотр звезд Github по отдельности:

在过去 2 年，npm 包的下载次数
Количество загрузок пакетов npm за последние 2 года

жизненный цикл рынка

Сравнивать Angular, React и Vue в Google Trends сложно из-за разных названий и версий. Приближенным может быть поиск в категории «Интернет и технологии». Результат выглядит следующим образом:

Vue не был создан до 2014 года — так что тут что-то не так. La Vue в переводе с французского означает «взгляд», «взгляд» или «мнение». Может быть, это все. Сравнение «VueJS» с «Angular» или «React» также несправедливо, поскольку VueJS практически не дает никаких результатов.

Тогда давайте попробуем что-нибудь еще. МысльВорксTechnology RadarТехнологии со временем меняются. МысльВорксTechnology RadarЭволюция технологий с течением времени впечатляет. Редукс этона этапе принятия(принято проектами ThoughtWorks!), его ценность во многих проектах ThoughtWorks неизмерима. Vue.js — этов пробной фазе(пытался использовать). Vue описывается как легкая и гибкая альтернатива Angular с плавной кривой обучения. Угловой 2оцениваетсяКоманда ThoughtWork успешно практиковала использование  — , но настоятельно не рекомендуется.

согласно сПоследний опрос от Stackoverflow в 2017 году, среди опрошенных разработчиков 67% любят React и 52% — AngularJS. Разработчики, которые «не заинтересованы в дальнейшем использовании его в разработке», составляют большее число, с AngularJS (48%) и React (33%). В обоих случаях Vue не входит в первую десятку. Тогда есть statejs.com по сравнению"внешний фреймворк". Самый интересный факт: React и Angular имеют 100% осведомленность, 23% респондентов не знают Vue. Что касается удовлетворенности, то 92% респондентов готовы снова "использовать" React, Vue - 89%, а Angular 2 - только 65%.

Как насчет опросов удовлетворенности клиентов?Eric ElliottНачал оценивать Angular 2 и React в октябре 2016 года. Только 38% респондентов снова будут использовать Angular 2, а 84% снова будут использовать React.

Долгосрочная поддержка и миграция

Facebook указано в его принципах проектирования, API React очень стабилен. Существуют также сценарии, которые помогут вам перейти с текущего API на более новую версию: см.react-codemod. Миграция очень проста, нет такой вещи (обязательной), как долгосрочная поддерживаемая версия. В этом сообщении Reddit было указано, что люди видели обновлениеникогда не проблема. Команда React написала о них статьюсхема контроля версийСообщение блога. Когда они добавляют предупреждение об устаревании, они сохраняют остальную часть текущей версии до тех пор, пока поведение не изменится в следующем основном выпуске. Переход на новую основную версию не планируется — v14 была выпущена в октябре 2015 года, v15 — в апреле 2016 года, а v16 пока не имеет даты выпуска. (Примечание переводчика:v16 выпущен в конце сентября 2017 г.)недавнийРазработчики ядра React отмечают, обновление не должно быть проблемой.

По поводу Angular начиная с релиза v2 есть статьяОб управлении версиями и публикации AngularСообщение блога. Основные обновления выходят каждые шесть месяцев, по крайней мере, шесть месяцев (два основных выпуска). Некоторые экспериментальные API отмечены в документации более коротким периодом устаревания. Официального объявления пока нет, ноСогласно этой статье, команда Angular объявила о выпуске долгосрочной поддержки, начиная с Angular 4. Они будут поддерживаться в течение как минимум года после следующего основного выпуска. Это означает, что по крайней мересентябрь 2018 г.Ранее будет поддерживаться Angular 4 с исправлениями ошибок и критическими исправлениями. В большинстве случаев обновление Angular с версии 2 до версии 4 так же просто, как обновление зависимостей Angular. Angular также предоставляет информацию о том, требуются ли дальнейшие изменения.Информационный гид.

Процесс обновления с Vue 1.x до 2.0 должен быть простым для небольшого приложения — команда разработчиков утверждает, что 90% API остается прежним. На консоли есть хороший инструмент помощи при обновлении, диагностике и миграции. разработчикуказать, обновление с версии 1 до версии 2 остается неизменным в больших приложениях. К сожалению, нет четкого (общедоступного) пути к следующему основному выпуску или запланированной информации для выпусков LTS.

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

Человеческие ресурсы и подбор персонала

Если в вашей команде есть HTML-разработчики, которым не нужно больше знать о технологии Javascript, Angular или Vue — лучший вариант. React нужно знать больше о технологии JavaScript (мы поговорим об этом позже).

Есть ли в вашей команде дизайнеры, которые умеют программировать во время работы? Пользователь pier25 на Reddit указал, что если вы работаете в Facebook,Каждый является старшим разработчиком, и React имеет смысл. В действительности, однако, вы не всегда найдете дизайнера, который может изменить JSX, поэтому будет проще использовать шаблоны HTML.

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

Angular также является хорошим выбором, если ваш разработчик имеет опыт объектно-ориентированного программирования или не любит Javascript. Чтобы управлять этим, вотМахеш Чанд Цитата:

Я не разработчик JavaScript. Я занимаюсь созданием крупных корпоративных систем с использованием «настоящих» программных платформ. Я создаю приложения на C, C++, Pascal, Ada и Fortran с 1997 года. (...) Я могу четко сказать, что JavaScript для меня просто тарабарщина. Как Microsoft MVP и эксперт, я хорошо разбираюсь в TypeScript. Я также не думаю, что Facebook является компанией по разработке программного обеспечения. Но Google и Microsoft уже являются крупнейшими новаторами в области программного обеспечения. Я чувствую себя более комфортно с продуктами, которые активно поддерживаются Google и Microsoft. Кроме того (...) с моим опытом я знаю, что у Microsoft есть более широкое представление о TypeScript.

эммммммммм... Должен упомянуть, что Махеш - региональный директор Microsoft.

Сравнение React, Angular и Vue

компоненты

Все фреймворки, которые мы обсуждаем, основаны на компонентах. Компонент получает входные данные и после некоторого внутреннего поведения/вычисления возвращает отрендеренный шаблон пользовательского интерфейса (область входа/выхода из системы или элемент списка дел) в качестве выходных данных. Определенные компоненты должны легко использоваться повторно на веб-страницах или в других компонентах. Например, вы можете использовать компонент сетки (состоящий из компонента заголовка и компонентов нескольких строк) с различными свойствами (столбцы, информация заголовка, строки данных и т. д.), а также иметь возможность использовать компоненты с другими наборами данных на другой странице. Вот статьяПодробная статья о компонентах, если вы хотите узнать больше об этом.

И React, и Vue хорошо справляются с компонентами: небольшими функциями без сохранения состояния, которые принимают входные и возвращаемые элементы в качестве выходных данных.

Машинопись, ES6 и ES5

React фокусируется на использовании Javascript ES6. Vue использует Javascript ES5 или ES6.

Angular использует TypeScript. Это обеспечивает большую согласованность между связанными примерами и проектами с открытым исходным кодом (примеры React можно найти в ES5 или ES6). Это также вводит такие понятия, как декораторы и статическая типизация. Статическая типизация очень полезна для инструментов анализа кода, таких как автоматический рефакторинг, переход к определениям и т. д. — они также могут уменьшить количество ошибок в приложении, хотя, конечно, на эту тему нет единого мнения.Eric ElliottВ своей статье "Шокирующий секрет статической типизации"не согласен с приведенной выше точкой зрения. Даниэль С. Ван сказал:Нет никакого вреда в использовании статической типизации, хороши как разработка через тестирование (TDD), так и статическая типизация.

ты тоже должен знатьПроверка типов может быть включена в React с помощью Flow. Это статическая проверка типов, разработанная Facebook для JavaScript. ПотокТакже может быть интегрирован в VueJS.

Если вы программируете на TypeScript, вам больше не нужно писать стандартный JavaScript. Несмотря на постоянное развитие, пользовательская база TypeScript все еще мала по сравнению со всем языком JavaScript. Одним из рисков может быть то, что вы идете в неправильном направлении, поскольку TypeScript может — что маловероятно — также исчезнуть со временем. Кроме того, TypeScript добавляет к проекту много накладных расходов (обучения) — вы можетеEric ElliottизСравнение Angular 2 и ReactПодробнее об этом читайте в .

возобновить: James RavenscroftВ комментарии к статье он написал:TypeScript имеет первоклассную поддержку JSX- Компоненты могут быть легко проверены на тип. Итак, если вам нравится TypeScript и вы хотите использовать React, это не должно быть проблемой.

Шаблоны - JSX или HTML

React порывает с давними передовыми практиками. На протяжении десятилетий разработчики пытались разделить шаблоны пользовательского интерфейса и встроенную логику Javascript, но с JSX они снова смешиваются. Звучит плохо, но вы должны послушать выступление Питера Ханта».React: переосмысление лучших практик(Октябрь 2013 г.) Он указывает, что разделение шаблонов и логики — это просто разделение технологий, а не разделение задач. Вы должны создавать компоненты, а не шаблоны. Компоненты можно использовать повторно, компоновать, тестировать.

JSX — это необязательный препроцессор с HTML-подобным синтаксисом и последующей компиляцией в JavaScript. JSX имеет некоторые особенности — например, вам нужно использовать className вместо class, так как последний является зарезервированным словом в Javascript. JSX является большим преимуществом для разработки, потому что код пишется в одном месте, что позволяет лучше контролировать работу при завершении кода и во время компиляции. Когда вы сделаете опечатку в JSX, React не скомпилирует и не выведет неверный номер строки. Angular 2 автоматически завершается сбоем во время выполнения (этот параметр может быть недопустимым при использовании предварительной компиляции в Angular).

JSX означает, что все в React — это Javascript — для шаблонов и логики JSX.Cory HouseсуществуетСтатья от января 2016 г.«Angular 2 продолжает использовать JS в HTML. React добавляет HTML в JS.» Это хорошо, потому что Javascript более мощный, чем HTML.

Шаблоны Angular используют специальный синтаксис Angular, такой как ngIf или ngFor, для улучшения HTML. В то время как React требует знания JavaScript, Angular заставляет вас учитьсяСинтаксис, специфичный для Angular.

Вью имеет "компонент одного файла". Кажется, это компромисс для разделения задач - шаблоны, сценарии и стили в одном файле, но в трех разных упорядоченных разделах. Это означает, что вы получаете подсветку синтаксиса, поддержку CSS и более простую предварительную обработку для использования отладчика (например, Jade или SCSS). Я читал другие статьи о том, что JSX легче отлаживать, потому что Vue не показывает синтаксические ошибки для нестандартного HTML. Это неправда, потому что VueПреобразование HTML в функцию рендеринга- поэтому ошибка не показывает проблемы (спасибоVinicius ReisКомментарии и исправления! ).

Примечание: если вам нравится идея JSX и вы хотите использовать ее в Vue, вы можете использоватьbabel-plugin-transform-vue-jsx.

Фреймворки и библиотеки

Angular — это фреймворк, а не библиотека, потому что он налагает строгие ограничения на то, как создаются приложения, а также предоставляет больше функциональности из коробки. Angular — это «полное решение» — полностью функциональное, и вы можете с радостью начать разработку. Вам не нужно искать библиотеки, решения для маршрутизации или что-то в этом роде — вы просто приступаете к работе.

React и Vue, с другой стороны, очень гибкие. Их библиотека может сочетаться с различными сумками. (существуетnpmПакетов React много, а пакетов Vue относительно мало, ведь фреймворк все-таки относительно новый). С React вы даже можете заменить API-совместимые альтернативы самой библиотеке, напримерInferno. Однако с большей гибкостью приходит и большая ответственность — в React нет правил и ограниченных руководств. В каждом проекте необходимо определиться с архитектурой, а это может быть более подвержено ошибкам.

С другой стороны, в Angular есть запутанный инструмент сборки, шаблоны, средства проверки (линтер) и временные интервалы, с которыми приходится иметь дело. То же самое касается React, если вы используете стартовый набор проекта или шаблон. Они, естественно, очень полезны, но React работает «из коробки», и, вероятно, вам следует этому научиться. Иногда работу в среде JavaScript с использованием различных инструментов называют «усталостью от JavaScript».Eric Clemmonsв егостатьясказал:

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

Vue кажется самым легким из трех фреймворков. В GitLab есть статьяСообщение в блоге о решении в пользу Vue.js (октябрь 2016 г.):

Vue.js — это идеальный баланс того, что он будет делать для вас, и того, что вам нужно делать. (...) Vue.js всегда доступен, надежная, но гибкая система безопасности, которая гарантирует эффективность программирования и сводит к минимуму боль, вызванную манипулированием DOM.

Им нравится простота и удобство использования — исходный код очень читабелен и не требует никакой документации или внешних библиотек. Все очень просто. Vue.js «ни о чем не делает больших предположений». есть еще одинЭпизод подкаста о решениях GitLab.

Другой от PixeljetsО переходе на Vueсообщение в блоге. React — это мир JS вуровень сознанияЭто большой шаг вперед, он показывает людям настоящее функциональное программирование в практичной и лаконичной форме. Одним из недостатков React по сравнению с Vue является меньшая степень детализации компонентов из-за ограничений JSX. Вот цитата из статьи:

Для меня и моей команды важна читабельность кода, но также очень важно, чтобы его было интересно писать. Неудивительно, что при реализации очень простого виджета калькулятора создается 6 компонентов. Это также плохо во многих случаях, когда речь идет об обслуживании, изменении или визуальной проверке определенного виджета, поскольку вам нужно обойти несколько файлов/функций и проверить каждый небольшой фрагмент HTML отдельно. Опять же, я не предлагаю писать монолиты — я бы предложил использовать компоненты вместо микрокомпонентов в повседневной разработке.

оHacker newsа такжеRedditИнтересная дискуссия в блоге — есть аргументы от несогласных с Vue и других сторонников.

Управление состоянием и привязка данных

Создавать пользовательские интерфейсы сложно, потому что везде есть состояние — данные, которые со временем меняются, создают сложность. Рабочие процессы с определенным состоянием имеют большое значение для роста и сложности приложений. Для менее сложных приложений нет необходимости в определенном потоке состояний, например, достаточно собственного JS.

Как это работает? Компоненты описывают пользовательский интерфейс в любой момент времени. При изменении данных фреймворк перерисовывает весь компонент пользовательского интерфейса — отображаемые данные всегда актуальны. Мы можем назвать эту концепцию «UI как функция».

React часто используется с Redux.Reduxна триОсновной принципЗаявление о себе:

  • Единственный источник правды
  • Состояние доступно только для чтения
  • Изменения вносятся с помощью чистых функций

Другими словами: состояние всего приложения хранится в дереве состояний одного хранилища. Это помогает отлаживать приложение и упрощает реализацию некоторых функций. Состояние доступно только для чтения и может быть изменено только действиями, чтобы избежать условий гонки (что также помогает при отладке). Напишите редукторы, чтобы указать, как преобразовывать состояние с помощью действий.

Большинство руководств и шаблонов уже имеют интегрированный Redux, но без него вы можете использовать React (вероятно, вам не нужен Redux в вашем проекте). Redux вносит в код сложность и довольно сильные ограничения. Если вы изучаете React, вам следует подумать об изучении чистого React, прежде чем вы захотите использовать Redux. вы обязательно должны прочитатьDan Abramovиз"Вам, вероятно, не нужен Redux".

некоторые разработчикиРекомендуется использоватьMobxвместо Редукса. Вы можете думать об этом как об «автоматическом Redux», который в первую очередь упрощает использование и понимание. Если вы хотите знать, вы должны начать спредставлятьНачинать. Вы также можете прочитатьСравнение Redux и MobX. Он также предоставилПереход с Redux на MobXИнформация. Если вы хотите найти другие библиотеки Flux,этот списокочень полезно. Если вы из мира MVC, вам следует прочитатьMikhail Levkovskyстатья "Мышление в Redux (когда все, что вы знаете, это MVC)".

Vue может использовать Redux, но предоставляетVuexкак собственное решение.

Большая разница между React и Angular заключается в том,Односторонняя и двусторонняя привязка. Двусторонняя привязка Angular изменяет состояние модели при обновлении элементов пользовательского интерфейса (например, пользовательского ввода). У React есть только один способ: сначала обновить модель, а затем визуализировать элементы пользовательского интерфейса. Способ Angular чище и проще для разработчиков. Способ React будет иметь лучший обзор данных, поскольку данные могут течь только в одном направлении (что упрощает отладку).

Обе концепции имеют свои плюсы и минусы. Вам необходимо понять эти концепции и определить, влияет ли это на ваш выбор фреймворка. статья"Двусторонняя привязка данных: Angular 2 и React"а такжеэтот вопрос StackoverflowОба дают хорошее объяснение.это здесьВы можете найти несколько интерактивных примеров кода (образцы трехлетней давности (только для Angular 1 и React). Наконец, Vue поддерживаетОдносторонняя привязка и двусторонняя привязка(по умолчанию односторонняя привязка).

Если вы хотите читать дальше, вот длинная статья о различных типах состояний иУправление состоянием в приложениях Angular(Victor Savkin).

Другие концепции программирования

Angular включает в себя внедрение зависимостей, шаблон, в котором один объект предоставляет зависимости (сервисы) другому объекту (клиентам). Это приводит к большей гибкости и чистоте кода. статья "Понимание внедрения зависимостей» объясняет концепцию более подробно.

Модель-представление-контроллер(MVC) делит проект на три части: модель, представление и контроллер. Angular (фреймворк для шаблона MVC) имеет функции MVC из коробки. В React есть только V — вам нужно решить M и C самостоятельно.

Гибкость и переход к микросервисам

Вы можете использовать библиотеки JavaScript React или Vue, просто добавив их в свой исходный код. Но поскольку Angular использует TypeScript, вы не можете использовать Angular таким образом.

Сейчас мы больше движемся в сторону микросервисов и микроприложений. React и Vue дают вам больше контроля над размером вашего приложения, выбирая только то, что вам действительно нужно. Они обеспечивают более гибкий способ перемещения частей старого приложения из одностраничного приложения (SPA) в микрослужбы. Angular лучше всего подходит для одностраничных приложений (SPA), поскольку он может быть слишком раздутым для микросервисов.

так какCory Houseсказал:

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

Некоторые люди также используют React для неодностраничных веб-сайтов (например, сложных форм или мастеров). Даже Facebook использует React не на главной странице Facebook, а на определенных страницах для определенных функций.

размер и производительность

Ни один фреймворк не идеален: фреймворк Angular очень раздут. Размер файла gzip составляет 143 КБ по сравнению с 23 КБ для Vue и 43 КБ для React.

Для повышения производительности и React, и Vue используют виртуальный DOM (Virtual DOM). Если вам это интересно, вы можете прочитатьРазличия между виртуальным DOM и DOMтак же какПрактические преимущества виртуального DOM в react.js. Также один из авторов Virtual DOM ответил на это на Stackoverflow.проблемы с производительностью.

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

Сравнение производительности Angular, React и Vue (Исходный файл)

выделение памяти (Исходный файл)

Подводя итог: Vue обладает отличной производительностью и сложными навыками распределения памяти. Эти фреймворки очень близки с точки зрения быстрого и медленного (например,Inferno). Помните, что тесты производительности следует рассматривать только как примечание, а не как критерий.

тестовое задание

Facebook Использование шуткичтобы протестировать его код React. Вот статьяСравнение Jest и Mochaстатьи - и еще одна оКак фермент и мокко работают вместестатья. Enzyme — это инструмент для тестирования JavaScript, используемый Airbnb (вместе с Jest, Karma и другими средами тестирования). Если вы хотите узнать больше, есть некоторая информация о React (здесьа такжездесь) тест старой статьи.

Используется в угловом 2Jasmineв качестве тестовой среды.Eric ElliottВ одной статье жаловались, что у Жасмин «есть сотни способов проверить и подтвердить, и вам нужно внимательно прочитать каждый, чтобы понять, что он делает». Вывод также очень раздут и трудно читаем. Об угловом 2с кармойа такжеMochaИнтеграция некоторых полезных статей. ВотСтратегия тестирования Angular 2старые видео (с 2015 года).

Vue не хватает руководства по тестированию, но Эван написал в своем прогнозе на 2017 год:Команда планирует работать над этим. они рекомендуют использоватьKarma.Использование Vue с Jest,а такжеавориаз как тестовый инструмент.

Универсальные и нативные приложения

Универсальные приложения переносят приложения в Интернет, на рабочий стол и в мир нативных приложений.

И React, и Angular поддерживают нативную разработку. Угловой имеетNativeScript(при поддержке Telerik) и Ionic framework для гибридной разработки. С React вы можете попробоватьreact-native-rendererсоздавать кроссплатформенные приложения для iOS и Android или использоватьreact-nativeРазрабатывайте нативные приложения. Многие приложения (включая Facebook; см. подробнееэкспонат) все построены с помощью react-native.

Платформа Javascript отображает страницу на клиенте. Это плохо для производительности, общего пользовательского опыта и SEO. Предварительный рендеринг на стороне сервера — хорошая идея. Все три фреймворка имеют соответствующие библиотеки для рендеринга на стороне сервера. У React есть next.js, у Vue есть nuxt.js, а у Angular есть...Angular Universal.

кривая обучения

У Angular действительно крутая кривая обучения. Он имеет исчерпывающую документацию, но вы все равно можете плакать, потому чтолегко сказать трудно сделать. Даже если у вас есть четкое представление о Javascript, вам необходимо понимать основные принципы фреймворка. Деинициализация проекта потрясающая, она приносит много пакетов и кода. Поскольку существует большая уже существующая экосистема, которую вам нужно изучить с течением времени, это недостаток. С другой стороны, поскольку было принято так много решений, это может быть хорошо в определенных ситуациях. С React вам, возможно, придется принимать много важных решений против сторонних библиотек. 16 только в ReactРазличные пакеты потоков для управления состояниемдоступный.

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

Некоторые люди говорят, что с React они справляются лучше, чем с Vue. Если вы неопытный разработчик Javascript или если вы в основном использовали jQuery в течение последнего десятилетия, вам следует рассмотреть Vue. Сдвиг в мышлении был еще более заметен при переходе на React. Vue больше похож на обычный Javascript, но также вводит некоторые новые концепции: компоненты, модель, управляемую событиями, и односторонний поток данных. Это тоже небольшая порция.

Между тем, у Angular и React тоже есть свои реализации. Они могут ограничивать вас, потому что вам нужно скорректировать свой подход, чтобы развиваться гладко. Это может быть недостатком, поскольку вы не можете делать все, что хотите, а кривая обучения крутая. Это также может быть преимуществом, поскольку при изучении технологии вы должны изучить правильные концепции. С Vue вы можете сделать это по старинке. Сначала может быть проще начать, но в долгосрочной перспективе могут возникнуть проблемы.

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

Основные принципы Angular, React и Vue

Хотите сами прочитать исходный код? Хочешь посмотреть, как идут дела?

Можно начать с просмотра репозитория Github: React (GitHub.com/Facebook/Горячие…), Угловой (GitHub.com/angular/ang…) и Вью (github.com/vuejs/vue).

Как выглядит синтаксис? ValueCodersСравнение синтаксиса Angular, React и Vue.

Его также легко просмотреть в рабочей среде — вместе с базовым исходным кодом.TodoMVCСписок десятков идентичных приложений Todo, написанных на разных платформах Javascript — вы можете сравнитьAngular,Reactа такжеVueрешение.RealWorldСоздано приложение реального мира (китайская имитация), и оно готовоAngular(4+) иReact(с Redux).Vueидет разработка.

Вы можете увидеть много реальных приложений, вот как будет выглядеть React:

  • Do(Очень полезное приложение для управления заметками, сРеагировать и Редуксвыполнить)
  • sound-redux(Клиент Soundcloud реализован в React и Redux)
  • Brainfock(Решение для управления проектами и командами, реализованное в React)
  • react-hnа такжеreact-news(фальшивые хакерские новости)
  • react-native-whatsapp-uiа такжеруководство(реактивная версия, имитирующая WhatsApp)
  • phoenix-trello(подделка Трелло)
  • slack-cloneа такжеДругие учебники(как в слаке)

Вот Angular версия приложения:

Вот версия приложения Vue:

Суммировать

Теперь решите, какой фреймворк использовать.

React, Angular и Vue — все круто, и ни один из них явно не затмевает другого. Доверьтесь своей интуиции.Последний пункт - интересные циничные словаМожет помочь вашему решению:

Грязный маленький секрет заключается в том, что большая часть «современной разработки JavaScript» не связана с созданием веб-сайтов — это создание библиотек или пакетов, которые могут быть созданы для использования людьми, которые могут создавать фреймворки для людей, которые пишут учебные пособия и проводят курсы. Я не уверен, что кто-то на самом деле строит какое-либо взаимодействие для реального пользователя.

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

Что мне выбрать?

Если вы работаете в Google:Angular

Если вам нравится TypeScript:Угловой (или реагировать)

Если вам нравится объектно-ориентированное программирование (ООП):Angular

Если вам нужны инструкции по эксплуатации, архитектура и помощь:Angular

Если вы работаете в Facebook:React

Если вам нравится гибкость:React

Если вам нравятся большие технологические экосистемы:React

Если вы предпочитаете выбирать из десятков пакетов:React

Если вам нравится JS и подход «все есть Javascript»:React

Если вам нравится действительно чистый код:Vue

Если вы хотите плавную кривую обучения:Vue

Если вам нужен самый легкий фреймворк:Vue

Если вы хотите разделить проблемы в одном файле:Vue

Если вы работаете один или у вас небольшая команда:Vue (или Реагировать)

Если ваше приложение имеет тенденцию становиться очень большим:Угловой (или Реагировать)

Если вы хотите создать приложение с помощью react-native:React

Если вы хотите, чтобы в кругу было много разработчиков:Угловой или Реагировать

Если вы работаете с дизайнерами и вам нужны чистые HTML-файлы:Angular or Vue

Если вам нравится Vue, но вы боитесь ограниченной технической экосистемы:React

Если не можете решить, сначала изучитеReact,ПотомVue,ПотомAngular.

Итак, вы сделали выбор?

Yeeesss，你做到了！
Даааа, ты сделал это!

отлично! Читайте о том, какНачните с Angular, React или Vueразработка (скоро, вTwitterСледите за обновлениями).

больше ресурсов

Спасибо за внимание. Я забыл что-то важное? У вас другое мнение? Я всегда рад получить обратную связь.

Следите за мной в Твиттере, чтобы быть в курсе обновлений и другого контента: @jensneuhaus—— 🙌

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,React,внешний интерфейс,задняя часть,товар,дизайнЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории