Сравнение Angular и React и их ключевые особенности

2
10615
Добавить в избранное

В этой статье мы сравним популярные веб-технологии Angular и React, а также рассмотрим их историю, особенности и основные области применения.


Эти технологии значительно облегчили жизнь разработчикам: повторное использование, рефакторинг, разделение на модули – это лишь часть плюсов от использования Angular или React.

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

Ключевые отличия

Проведем быстрое сравнение в таблице: Angular (слева) и React (справа).

key comparizons

Чем действительно хорош React, и чем он лучше Angular с точки зрения производительности – это Virtual DOM. Если вы не в курсе, что это такое, давайте разбираться.

Задача

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

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

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

Почему это важно?

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

Но сначала, немного истории…

История

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

В те дни (с ES4 / ES5) изучение JavaScript было очень затруднительным. Если вы приходили из мира Java, C# или C++, мира объектно-ориентированного программирования, то изучение JS приносило одни разочарования. Это не потому, что язык был плохо написан, а потому, что у него другое назначение. Он был создан для обработки асинхронной Web-природы – взаимодействие с пользователем, привязка событий, анимации и т. д.

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

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

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

Одно можно сказать точно: Angular и React стремительно развиваются, и останавливаться не собираются. Не следует забывать о том, что случилось с AngularJS – Only business, но все-таки.

popularity

Open-source

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

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

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

company uses

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

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

Итак, кто какую технологию использует?

# React

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

# Angular

  • Eat24
  • CVS shop
  • onefootball
  • Google Express
  • NBA
  • Delta

TypeScript и JavaScript (ES6+)

Сравнивать Angular и React, не фокусируясь на основном языке, было бы неправильно.

typescript javascript

С точки зрения пользовательской базы, JavaScript имеет гораздо больший потенциал. Но TypeScript постепенно наверстывает упущенное и увеличивает количество своих пользователей, поэтому кто знает, что будет через 10-15 лет.

Angular и React after 10-15 years

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

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

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

Статическая типизация

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

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

static typed property

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

static typed argument

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

Что выбрать

Вопрос не только в Angular и React, а на какой основной язык вы должны тратить время. И это не имеет большого значения. Но если бы пришлось выбирать, то, похоже, причин, по которым TypeScript не стоит внимания, не так много. Если вы не поклонник типов, то вам ничего не мешает на пути написания ES6 кода в .ts файле.

Вот простое сравнение класса и объекта:

TypeScript

JavaScript

Итого

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

Вместо точки

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

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

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

Оригинал

Другие материалы по теме:

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 2

  1. Я конечно понимаю что это перевод, но мое мнение что статья ни о чем. Сравнивать инструменты по ишуям и звёздам на гитхабе ну такое себе. На гитхабе у ангуляре есть ишуи которые относятся ко всей инфраструктуре это и cli и новые рендер движок и старый, проблемы которые никак не относятся к ангуляру или реакту, например проблемы с вебпаком и т.д. Люди очень часто идут и задают в issue вопросы например и они потом висят там незакрытые. По поводу этих двух технологий для начала нужно было сказать какие задачи они решают. В статье написано что чтобы обновить дату в dom дереве ангуляру надо обновить все дерево до даты, это же неправда. Ангуляр сейчас компилирует шаблоны в js объект так же как и реакт jsx только виртуальное дерево не строит, там другие механизмы обновления dom.
    Эти две технологии хорошо каждые по своему, если вам нужно быстро стартануть разработку spa и чтоб у вас из коробки было все что пожелаете то берете Angular и живёте радуетесь. Особенно хорошо в корпоративных системах. Если вам нужен больший контроль за тем что у вас там работает под капотом берете реакт, только надо готовиться к тому что придется продумывать архитектуру и на каждую потребность искать библиотеки или писать самостоятельно.
    Написали бы тесты какие нибудь бенчмарки, а то сравнивают ts с js при том что typescript это тот же js с типами. Ну и да на react тоже можно писать на typescript и там это тоже прекрасно, типизация jsx и прочие плюшки.

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