Сравнение между Angular и React и их основными языками

1656541470 sravnenie mezhdu angular i react i ih osnovnymi yazykami

В этой статье мы сравним две из самых популярных веб-технологий в 2019 году, а также рассмотрим их историю, ключевые отличия, рекомендованные основные языки (TypeScript и JavaScript). В целом эти технологии значительно облегчили разработчикам повторное использование, реорганизацию и поддержку кода, разделив вещи на модули/компоненты.

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

Вы должны знать, что сравнение этих двух технологий невозможно полностью охватить. Angular поставляется с полным фреймворком (MVC), а React – это библиотека с большими открытыми исходными кодами для интеграции.

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

Вопросы, которые нужно решить

  • Каковы ключевые отличия между Angular и React?
  • Что делает TypeScript таким особенным?
  • Насколько популярны эти технологии?
  • Каков текущий статус открытого кода?
  • Какую технологию компании используют больше всего?
  • Влияют ли статические типизированные языки на качество кода и время разработки?

Будущие разделы будут добавлены в соответствии с требованиями комментариев.

Ключевые сравнения

Вот быстрое сравнение между Angular (слева) и React (справа).

1*w9DLq-pSxDGabNxUzawN_w
Angular и React

Одна вещь, которая действительно великолепна в React с точки зрения производительности, – это виртуальная DOM, о которой вы наверняка слышали несколько раз. Если нет, не беспокойтесь, я объясню!

Проблема
Скажем, вы хотите обновить дату рождения пользователя в блоке тегов HTML.

Виртуальный DOM
Он обновляет только ту часть, которая нужна, видя отличия между предыдущей и текущей версиями HTML. Это подобный подход к тому, как GitHub работает при обнаружении изменений в файле.

Обычный DOM
Он будет обновлять всю древовидную структуру тегов HTML, пока не достигнет даты рождения.

Почему это имеет значение?

Это может не иметь значения для описанной выше проблемы. Однако если мы имеем дело с 20–30 асинхронными запросами данных на одной странице (и для каждого запроса страницы мы заменяем весь блок HTML), это повлияет на производительность, а также на работу пользователя.

Нужно больше контекста? Смотрите статью Dace!

Но сначала вернемся к началу…

История

Нам нужно чуть-чуть знать историю (контекст), поскольку она дает представление о том, как все может складываться в будущем.

Я не буду вдаваться в подробности того, что произошло между Angular и AngularJS, и я уверен, что есть много доступных ресурсов, которые освещают это. Но вкратце, Google заменил AngularJS на Angular, а JavaScript на TypeScript.

Ладно, поэтому в те дни с ES4/ES5 кривая обучения JavaScript была действительно высокой. Если вы пришли из мира Java, C# или C++, мира объектно-ориентированного программирования (ООП), то изучение JavaScript было не столь интуитивным. Другими словами, это была боль в заднице.

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

Популярность

Как показывает Google Trends, Angular и React являются двумя популярнейшими веб-технологиями 2019 года.

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

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

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

1*QHPY_nB9Gvx0pNNPtPqUiQ
Google Trends Angular против React

Открытый источник

React имеет более 100 000 звездочек, 1200 участников и около 300 проблем, ожидающих своего решения.

React имеет преимущество за время выхода на рынок, поскольку он был выпущен за 3 года до Angular. А это значит, что он столкнулся со многими реальными проблемами, прошел критические испытания и в целом превратился в адаптированную и гибкую библиотеку, которую многие любят.

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

1*peSbHEIzoh41XzjjEcyaOQ
Angular и React – популярность Github

Статистика взята со странички Angular и Reacts GitHub.

Что используют компании

Первоначально React был разработан в Facebook для Facebook для оптимизации и облегчения разработки компонентов. В статье, написанной Крисом Кордлом, указывается, что React используется в Facebook чаще, чем Angular в Google.

Так кто какой технологией пользуется?

# Отреагировать

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • Whatsapp
  • Dropbox

# Угловая

  • Ешьте 24
  • Магазин CVS
  • onefootball
  • Google Express
  • НБА
  • Дельта
  • wix.com

Если вы знаете какие-то крупные (известные) компании, использующие Angular, поделитесь пожалуйста по ссылке.

TypeScript и JavaScript (ES6+)

Как я уже упоминал, может быть обманчивым сравнивать только Angular и React, не сосредотачивая внимание на основном языке, на котором подчеркивает каждый (в соответствии с их документами).

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

1*VgrihKGD-D8TdfX1CTAB-A
TypeScript (слева) против JavaScript (справа)

Что касается базы пользователей, JavaScript лучше. Но TypeScript стремительно растет, кто знает, что принесут 10–15 лет.

Популярность TypeScript за последние 5 лет

1*cRXezTFmwhdPEmXX7eMCQA
Google Trends – популярность TypeScript

Популярность JavaScript за последние 5 лет

1*Ga66wSTNP6w1MT6JRbfYjA
Google Trends — популярность JavaScript

Популярность JavaScript против TypeScript за последние 5 лет

1*axNBATWdEu5lNC9zcL2Fug
Тенденции Google – популярность TypeScript и JavaScript

TypeScript сначала был разработан Microsoft, чтобы облегчить JavaScript (другими словами, чтобы облегчить ES5). Он был выпущен в октябре 2012 года. Это просто транспиллер, который компилирует TypeScript в код JavaScript, что также означает, что вы можете писать код ES5 в файле TypeScript. TypeScript называют сверхнабором JavaScript.

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

Короче говоря, ближе всего к классам и объектам тогда можно было подойти из-за наследования прототипов. И, как мы знаем, это был трудный переход для большинства разработчиков из ООП. Итак, идеальным решением, конечно, был выбор того, что вам удобно и знакомо, а это, вероятно, TypeScript.

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

Статически и динамически типизированные языки

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

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

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

Ладно, если вы все еще не знаете, что означает статически введенное, проверьте это:

Статическое типизированное свойство

1*mY3mIKr4VVX2Dfdd44klqA
Статическое сравнение типизированных свойств между JavaScript и TypeScript

Статический типичный аргумент

1*wp-KxiqHmsplvH9R9jf84g
Статическое сравнение типизированных аргументов между JavaScript и TypeScript

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

К счастью, исследования (tl;dr видео) восприняли это серьезно и проверили этот миф на 49 субъектах.

Наблюдения по исследованию таковы:

  • Статически типизированный язык требует больше времени из-за исправления ошибок
  • Динамически введенный язык читается и легче писать (декларативный код)
1*bshGBQgntp2lz78ZZENNLA

На рисунке 5 показано, что в среднем разработчики сокращают время разработки в два раза при написании динамически типизированного языка.

Если вы хотите углубиться в эту тему, я предлагаю прочитать эту статью Эрика Эллиота, в которой сказано, что вам может не нужен TypeScript (или статически типизированные языки).

Что выбрать

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

Если вы не поклонник типов, то вам ничего не помешает писать код ES6 в TypeScript. Просто если вам это нужно, оно есть.

Но если вы создаете достаточно обширную интерфейсную программу с Angular, которая работает со многими HTTP-запросами, то наличие типов действительно помогает с такими вопросами, как «Что это за тип объекта, какие поля я могу использовать, и какой тип это поле и т.д. ». . Он отлично подходит для сотрудничества и прояснения мелочей.

Вот простое сравнение классов-объектов между TS и JS(ES6).

1*hlNk4pSA_NOAyUclRxAkFw
TypeScript
1*AqwhtWGVeDmOqf_J0_vCGg
JavaScript (ES6)

IMO

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

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

Вот обновление – сейчас я работаю с несколькими разработчиками Microsoft, чтобы создать приложение с помощью Angular Framework. Причина, по которой мы выбрали Angular, в том, что большинство пакетов уже определено, а документация для всего находится в одном месте. Он также акцентирует внимание на TypeScript, являющемся идеальным выбором, поскольку большинство разработчиков уже имеют большой опыт объектно-ориентированного программирования.

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

Заметки на вынос

  • TypeScript – это просто транспиллер, его можно использовать с React или любыми другими фреймворками JS
  • React эффективно обрабатывает управление памятью (виртуальная DOM)
  • React использует JavaScript (ES6), признанный веб-язык с 1995 года.
  • Angular использует TypeScript, выпущенный в 2012 году
  • Статически типизированный язык – это отлично, но это не обязательно
  • Языки с динамическим типом требуют меньше времени для написания и большей гибкости для использования творческих возможностей
  • Изучение языка со статическим типом может быть сложной задачей, особенно если вы работали только с динамически введенными языками
  • ES6 реализовал множество замечательных функций, таких как модули, классы, оператор распространения, функции со стрелками, шаблонные литералы, позволяющие писать меньше, более чистый и более структурированный код (синтаксический сахар)
  • TS — это просто ES6+ с типами и многое другое

Вывод

Выбранная платформа/библиотека компонентов может повлиять на то, сколько времени вы тратите на программирование и на ваш бюджет. Если у вас есть команда разработчиков C#, Java или C++, то я бы, пожалуй, выбрал Angular, поскольку TypeScript имеет много сходства с этими языками.

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

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

Вот несколько статей, которые я написал о веб-экосистеме вместе с личными советами и подсказками по программированию.

Вы можете найти меня на Medium, где я еженедельно публикую. Или вы можете подписаться на меня в Twitter, где я публикую соответствующие советы и рекомендации по веб-разработке вместе с личными историями.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *