Сравнение Angular и React и их ключевые особенности
В этой статье мы сравним популярные веб-технологии Angular и React, а также рассмотрим их историю, особенности и основные области применения.
Эти технологии значительно облегчили жизнь разработчикам: повторное использование, рефакторинг, разделение на модули – это лишь часть плюсов от использования Angular или React.
Вы должны понимать, что сравнение этих технологий не может быть полным, т. к. Angular – это MVC-фреймворк, а React – фронтенд-библиотека с большим количеством пакетов и открытым исходным кодом для интеграции.
Ключевые отличия
Проведем быстрое сравнение в таблице: Angular (слева) и React (справа).
Чем действительно хорош 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, но все-таки.
Open-source
React имеет более 100 000 звезд на Github, 1200 контрибьютров и около 300 проблем, ожидающих решения.
React имеет преимущество по времени выхода на рынок, так как он был выпущен на три года раньше, чем Angular. Это означает, что он столкнулся со множеством реальных проблем, был хорошо оттестирован и превратился в адаптируемую и гибкую библиотеку, так полюбившуюся многим.
Когда дело доходит до Angular, можно заметить, что у него в шесть раз больше проблем, ожидающих решения (как-то, не очень). Тем не менее, мы не должны забывать, что Angular является гораздо более крупным фреймворком, а также имеет меньше разработчиков, использующих его (в настоящее время), потому что он был выпущен в 2016 году.
Что используют компании?
React был первоначально разработан компанией Facebook для собственных нужд, оптимизирования и облегчения разработки компонентов. Бытует мнение, что React используется в Facebook чаще, чем Angular в Google.
Итак, кто какую технологию использует?
- AirBnb
- Uber
- Netflix
- Dropbox
- Eat24
- CVS shop
- onefootball
- Google Express
- NBA
- Delta
TypeScript и JavaScript (ES6+)
Сравнивать Angular и React, не фокусируясь на основном языке, было бы неправильно.
С точки зрения пользовательской базы, JavaScript имеет гораздо больший потенциал. Но TypeScript постепенно наверстывает упущенное и увеличивает количество своих пользователей, поэтому кто знает, что будет через 10-15 лет.
TypeScript был первоначально разработан в октябре 2012 года компанией Microsoft, чтобы сделать JavaScript проще. TypeScript позволяет компилировать свой код в код JavaScript, а также написать, код ES5 в файле TypeScript.
TypeScript обеспечивает плавный переход для программистов с опытом объектно-ориентированного программирования. Важно отметить, что TypeScript был выпущен во времена ES5, и в течение этого времени не стал языком, основанным на классах.
В последние годы JavaScript претерпел множество значительных изменений, таких как модули, классы, операторы распространения, литералы шаблонов и т. д. Это позволяет разработчикам писать декларативный код, работая в духе истинного ОО языка.
Статическая типизация
Статически типизированный язык означает, что вы можете определить тип переменной (строка, число, массив и т. д.). Нужно всегда помнить о типизации. Если вы работаете с большим приложением, вам придется держать в голове все передаваемые аргументы и типы, в противном случае вы можете сломать код.
Статически типизированное свойство
Статически типизированный аргумент
Многие люди считают, что статически типизированный язык = надежный код, и чаще всего используется в качестве выигрышного аргумента против динамически типизированных языков. Опровергнуть это утверждение довольно сложно, поскольку оно опирается на программиста, его опыт и требования к проекту.
Что выбрать
Вопрос не только в Angular и React, а на какой основной язык вы должны тратить время. И это не имеет большого значения. Но если бы пришлось выбирать, то, похоже, причин, по которым TypeScript не стоит внимания, не так много. Если вы не поклонник типов, то вам ничего не мешает на пути написания ES6 кода в .ts файле.
Вот простое сравнение класса и объекта:
Итого
- React эффективно работает с памятью (virtual DOM).
- React использует JavaScript (ES6), признанный веб-язык с 1995 года.
- Angular использует TypeScript, выпущенный в 2012 году.
- Статически типизированные языки великолепны, но не делают код более надежным.
- Динамически типизированные языки требуют меньше времени для написания и дают больше гибкости для творчества.
- Изучение языка со статической типизацией может оказаться сложной задачей, особенно если вы работаете только с динамически типизированными языками.
- В ES6 реализовано множество замечательных модулей, классов, операторов распространения, литералов, что позволяет писать чистый и структурированный код.
Вместо точки
Выбранный вами фреймворк / библиотека может повлиять на то, сколько времени вы тратите на программирование и на ваш бюджет. Если у вас есть команда разработчиков C#, Java или C++, то логичнее было бы податься в Angular, поскольку TypeScript имеет много общего с этими языками (в случае чего, с ним будет проще).
В качестве эксперимента можно создать приложение как в Angular, так и в React, затем оценить язык, удобство и производительность, и принимать решение.
Как уже упоминалось ранее, обе технологии имеют свой набор преимуществ и сходств, и это действительно сводится к тому, какой функционал будет предлагать приложение.