react angular что это
Angular или React? Преимущества и отличия двух популярных фреймворков
Angular или React? А вы задавались таким вопросом? Обычно он возникает в двух случаях:
либо когда стоит выбор, что использовать в своей разработке.
Angular или React
Angular — это полноценный фреймворк;
React — это библиотека JavaScript.
Теперь давайте приступим к сравнению основных моментов, на которые нужно обратить внимание при выборе между этими инструментами.
Возраст технологий Angular и React
Обычно молодыми технологиями разработчики пользуются с опаской, так как предпочитают пользоваться проверенными временем инструментами. Потому что новые инструменты:
могут нестабильно работать из-за своей «незрелости»;
в любой момент разработчик инструмента может «оставить» свой продукт;
вокруг инструмента еще не образовалось комьюнити, которое сможет прийти на помощь в случае возникновения проблем.
Что касается Angular и React, то тут с разработчиками и сообществом все «на отлично», за это переживать не стоит.
React
Разработан компанией Фейсбук в 2013-м году. Фейсбук не просто создал новый инструмент для разработки, а активно применяет его в своих продуктах:
новостная лента со цс ети;
А это значит, что компания уверена в эффективности своего инструмента.
Angular
Поэтому уверенность в этом продукте тоже должна присутствовать, раз компания Гугл применила его в своих ключевых продуктах.
Вывод: Angular или React — неважно, оба продукта имеют серьезную поддержку.
Функциональность
Если сравнивать варианты «из коробки», то Angular изначально обладает более широкой функциональностью. Но возможности React уравниваются при помощи вспомогательных инструментов.
Но, в целом, многие основные функции у обоих инструментов одинаковы.
Angular
шаблоны для различных html-версий;
взаимодействия с ajax;
защищенность от XSS;
инструменты для unit-тестирования;
React
React преследует идею минимализма. То есть изначально предустановлен самый минимум, а всю остальную «сборку» необходимого инструмента нужно сделать самостоятельно. Из коробки будет доступно:
взаимодействие с JSX;
защищенность от XSS;
По умолчанию их не очень много, но это и хорошо, потому что будет возможность самостоятельно собрать себе библиотеку по своим потребностям. Наиболее популярные дополнительные библиотеки, которые подходят к Реакту:
React-router, чтобы наладить маршрутизацию;
Fetch — для настройки HTTP;
Enzyme — для дополнительного тестирования.
Вывод: Angular или React — неважно, все можно «докрутить», если в этом есть необходимость.
Языки и концепции
У каждого из описываемых инструментов есть собственные «козыри».
Angular
У Angular есть 2 основных козыря:
В озможность использовать TypeScript, что существенно расширяет возможности самого Angular.
RxJS. Эта библиотека расширяет возможности управления асинхронными событиями.
React
Здесь тоже есть чем похвастаться:
Redux. Эта библиотека помогает контролировать изменения состояния программы и придавать разработке определенную структуру.
Вывод: Angular или React — неважно, везде есть собственные достойные дополнения.
Развитая экосистема
Ангуляр или Реакт — неважно, оба эти инструмента распространяются с открытым исходным кодом. А это означает, что вокруг них «вырастают» дополнительные инструменты, которые формируют целую экосистему.
Angular
Интересные инструменты, которые выросли рядом с Angular:
Angular CLI. Это инструмент «командной строки», который помогает быстро загружать проекты с помощью пары команд.
Ionic 2. Этот фреймворк используют, когда нужно разработать гибридное приложение.
Material Design. Эт о библиотека соответствующих компонентов.
@ngrx/store. Данная библиотека создана, чтобы управлять изменениями состояний разработки.
React
Реакту тоже есть чем похвастаться:
Create-react-app. Данная утилита призвана помогать быстро начинать новые проекты на Реакт.
React Native. Это очередной инструмент от Фейсбук, который помогает создавать нативные мобильные приложения.
Material UI. Эт о библиотека по подобию material design для Ангуляр.
Next.js. Это т фреймворк используют для разработки серверной части приложений, которые созданы на React.
Storybook. Данный инструмент позволяет разрабатывать компоненты Реакт.
Вывод: Angular или React — неважно, у любого этого инструмента есть собственная экосистема расширений, которая расширяет возможности самого инструмента, а иногда и превосходит по значимости сам инструмент.
Заключение
Если отталкиваться от мнения пользователей, то изучать Angular легче, чем React. Если отталкиваться от количества проектов, использующих эти технологии, то у Реакта их больше.
Сравнение 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.
Итак, кто какую технологию использует?
TypeScript и JavaScript (ES6+)
Сравнивать Angular и React, не фокусируясь на основном языке, было бы неправильно.
С точки зрения пользовательской базы, JavaScript имеет гораздо больший потенциал. Но TypeScript постепенно наверстывает упущенное и увеличивает количество своих пользователей, поэтому кто знает, что будет через 10-15 лет.
TypeScript был первоначально разработан в октябре 2012 года компанией Microsoft, чтобы сделать JavaScript проще. TypeScript позволяет компилировать свой код в код JavaScript, а также написать, код ES5 в файле TypeScript.
TypeScript обеспечивает плавный переход для программистов с опытом объектно-ориентированного программирования. Важно отметить, что TypeScript был выпущен во времена ES5, и в течение этого времени не стал языком, основанным на классах.
В последние годы JavaScript претерпел множество значительных изменений, таких как модули, классы, операторы распространения, литералы шаблонов и т. д. Это позволяет разработчикам писать декларативный код, работая в духе истинного ОО языка.
Статическая типизация
Статически типизированный язык означает, что вы можете определить тип переменной (строка, число, массив и т. д.). Нужно всегда помнить о типизации. Если вы работаете с большим приложением, вам придется держать в голове все передаваемые аргументы и типы, в противном случае вы можете сломать код.
Статически типизированное свойство
Статически типизированный аргумент
Многие люди считают, что статически типизированный язык = надежный код, и чаще всего используется в качестве выигрышного аргумента против динамически типизированных языков. Опровергнуть это утверждение довольно сложно, поскольку оно опирается на программиста, его опыт и требования к проекту.
Что выбрать
Вот простое сравнение класса и объекта:
Итого
Вместо точки
Выбранный вами фреймворк / библиотека может повлиять на то, сколько времени вы тратите на программирование и на ваш бюджет. Если у вас есть команда разработчиков C#, Java или C++, то логичнее было бы податься в Angular, поскольку TypeScript имеет много общего с этими языками (в случае чего, с ним будет проще).
В качестве эксперимента можно создать приложение как в Angular, так и в React, затем оценить язык, удобство и производительность, и принимать решение.
Как уже упоминалось ранее, обе технологии имеют свой набор преимуществ и сходств, и это действительно сводится к тому, какой функционал будет предлагать приложение.
Angular 2 против React: И будет кровь
Angular 2 достиг беты и имеет все шансы сорвать лавры топового фреймворка в 2016 году. Время разборок. Давайте посмотрим, что он может противопоставить React, душечке из 2015 года.
Disclaimer: Я работал с первым Angular, но переключился на React в 2015 году. Я опубликовал Полный курс React и Flux. Так что да, я предвзят. Но я буду атаковать обе стороны.
Хорошо, пора начинать. И будет кровь.
Вы сравниваете круглое и мягкое.
*Вздыхая* Да, Angular это фреймворк, а React — библиотека. Кто-то скажет, что разница делает эти вещи несопоставимыми. Как бы не так!
Выбор между Angular и React это как выбор между собранным десктопным ПК и сбором своего из отдельных комплектующих.
Преимущества Angular 2
Давайте рассмотрим преимущества Angular 2 над React.
Быстрый старт
Angular — это фреймворк, он предоставляет гораздо больше возможностей и функциональности из коробки. С React, вам придется тянуть пул библиотек сторонних разработчиков для построения приложения. Наверняка, понадобиться библиотеки для роутинга, для организации однонаправленного потока, обращения к API, тестирования, менеджера зависимостей, и т.д. Количество решений довольно обширно. Поэтому существует много стартовых пакетов для React (я опубликовал два 2 ).
Angular предлагает множество решений из коробки, которые помогают вам сразу стартовать без страха перед принятием большого количества решений. Единые решения, также помогают разработчикам менять проекты без необходимости заново вникать в процесс разработки.
Я в восторге как разработчики Angular осваивают TypeScript, что приводит к следующим преимуществам.
TypeScript = Путь чистоты
Конечно, у TypeScript нет всеобщего обожания, но использование его в Angular 2 это большая победа. Во всем вебе вы натолкнетесь на два варианта использования React — он представлен в ES5 и ES6 приблизительно в равной степени, что в свою очередь приводит к трем различным вариантам декларирования компонентов. Это смущает новичков. (Правда Angular предлагает использовать декораторы вместо расширений, многие считают это преимуществом.)
Когда Angular 2 не требует TypeScript, команда разработчиков продолжает использовать его, по умолчанию, в документации. Это означает что проекты с открытым исходным кодом и соотвествующие примеры делает код более однообразным. Angular уже предоставляет наглядные примеры, показывающие как использовать компилятор TypeScript. (нужно признать, повсеместного распространения TypeScript еще нет, но я подозреваю, что вскоре после запуска он станет стандартом де факто). Такой подход помогает избежать недоразумений, нередких при старте работы с React.
Снижение оттока
2015 был годом Javascript усталости. React был ключевым фактором. То что React так и не достиг версии 1.0, говорит нам о критических изменениях в будущем. Экосистема React развивалась дикими темпами особенно это касалось оттенков Flux и роутинга. Имеется ввиду, все то что вы пишите сегодня скорее всего устареет при выходе React 1.0, а, скорее всего, придется вообще переписать.
В этом смысле Angular 2 это тщательное, методическое переосмысление целостного фреймворка. Поэтому Angular 2 не увидит такого оттока клиентов и головной боли после релиза. И как целостный фреймворк, Angular более подходит для долгосрочных решений представленных одной командой. В React же это ваша ответственность собрать вместе множество, быстро развивающихся, библиотек с открытым кодом в одно стабильное приложение. Это трудоемкий, неприятный и непрерывный процесс.
Повсеместная поддержка
Преимущества React
Хорошо, давайте посмотрим что нам может предложить React.
JSX это HTML подобный синтаксис, компилируемый в JavaScript. Разметка и код находятся в одном файле. Это решение позволяет вставлять ссылки на функции, компоненты и переменные. И наоборот, строчные шаблоны Angular тянут за собой явные минусы: нет подсветки синтаксиса во многих редакторах, нет полной поддержки автокомпиляции и подсветки ошибок в коде. Казалось бы это должно привести к ужасному выводу сообщений об ошибках, но команда Angular написали свой собственный парсер HTML кода. (Браво!)
Если вам не нравятся строчные шаблоны Angular, вы можете вынести шаблоны в отдельный файл, но тогда вы получите то что я называю «старые деньки»: писать код в двух файлах в уме, без поддержки автодополнения или проверки синтаксиса перед компиляцией. Это не кажется большой проблемой пока вы не насладитесь жизнью внутри React. Компоненты в одном файле с проверкой синтаксиса, это одна из важнейших причин превосходства JSX.
Сравните только как Angular 2 и React обрабатывают незакрытый тег
Для лучшего осознания преимуществ JSX посмотрите JSX: The Other Side of the Coin
React ошибки — быстро и четко
Когда вы делаете опечатку в JSX у React, он не захочет компилироваться. Это великолепная вещь. Вы сразу точно знаете в каком ряду ошибка. Понятно что это незакрытый тег или ссылка на объявленную переменную. На самом деле, JSX компилятор укажет номер строки в которой вы допустили ошибку. Это существенно увеличивает скорость разработки.
И наоборот, когда вы ошибаетесь с ссылкой на переменную в Angular 2, ничего не произойдет. Angular 2 тихонько себе упадет во время выполнения, а не компиляции. Такие ошибки медленные. Я запускаю свое приложение и задаюсь вопросом, почему мои данные не отображаются. Веселого мало.
React JavaScript центричен 4
Вот оно. В этом заключается ключевое различие React и Angular. К сожалению, Angular остается HTML ориентированным. Angular 2 не удалось решить наиболее принципиальную проблему архитектуры:
Angular 2 продолжает помещать JS в HTML. React же помещает HTML в JS
Я не достаточно выделил этот раскол. Это принципиально влияет на опыт разработки. В Angular HTML ориентированный дизайн остается его слабым местом. Как я и подчеркнул в JSX: The Other Side of the Coin, JavaScript более мощный чем HTML. Гораздо логичнее усиливать возможности JavaScript для поддержки разметки, чем HTML расширять логикой. HTML и JavaScript все равно должны быть как-то склеены и JavaScript ориентированный подход React является несомненным превосходством над Angular, Ember и Knockout c их HTML ориентированным подходом.
JavaScript ориентированный React = простота
Angular 2 продолжает подход версии 1 в попытке сделать HTML более мощным. Поэтому вы должны использовать особый синтаксис Angular для простых вещей типа циклы или условные операторы. Например, Angular предлагает разный синтаксис для односторонней и двухсторонней привязки данных:
В React, привязка не меняет синтаксис (она обрабатывается в другом месте, подразумевается, что так и должно быть). В любом случае это выглядит так:
Angular поддерживает встроенный шаблонизатор с помощью такого синтаксиса:
Просто почитайте Angular 2 Cheat Sheet. Это не HTML. Это не JavaScript. Это Angular.
Для чтения Angular выучи длинный список спицифичного для Angular синтаксиса
Для чтения React выучи JavaScript
React уникальный в своей простоте и концепции синтаксиса. Рассмотрим итерации в популярных сегодня JavaScript фреймворках/библиотеках:
Все, кроме React, используют специфичный синтаксис для замены стандартного в JS цикла. Вот в чем прелесть React. Он содержит всю мощь JavaScript для обработки разметки, так что ничего дополнительного не требуется.
Синтаксис Angular 2 продолжает удивлять привязкой обработчика клика по элементу:
В то же время React использует простой JavaScript, опять:
И, поскольку, React включает свою надстройку над событийной системой (также как и Angular 2), вам не придется беспокоиться о влиянии на продуктивность таких объявлений обработчиков событий.
Зачем забивать голову дополнительными уникальным синтаксисом фреймворка, если вы можете не делать этого? Почему бы просто не использовать всю мощь JS?
Роскошный опыт разработки
JSX автодополнение, проверка во время компиляции и информативный обработчик ошибок уже создает отличную базу для разработки, что очень экономит время набора. Но если объединить это все с Hot Reloading with Time Travel и вы получите неповторимый опыт как нигде более.
Размер имеет значение
Вот размеры упомянутых библиотек/фреймворков, минифицированные:
Ember: 580k
Angular 2: 565k (759k with RxJS)
React + Redux: 204k
Angular 1: 145k
Чтобы посмотреть реальный размер я создал приложение Tour of Heroes в Angular и React (для React я использовал новый стартовый набор React Slingshot)
Angular 2: 764k minified
React + Redux: 216k minified
Конечно, я признаю что опасения по поводу размеров фреймворка несколько преувеличены.
Большие приложения, как правило, содержат минимум несколько сотен килобайт кода, зачастую больше, вне зависимости пострены они с фреймворком или без. Разработчикам необходимы абстракции для построения сложных приложений, вне зависимости из фреймворка они или рукописные, они отрицательно влияют на производительность приложения.
Даже если вы избавитесь от всех фреймворков, множество приложений по прежнему будут весить килобайты кода
— Tom Dale
Том прав. Такие фреймворки как Angular или Ember большие потому что они содержат множество решений из коробки.
Как бы то ни было, я считаю, что многие приложения не нуждаются в полном списки возможностей фреймворка. В мире где микросервисы и микроприложения занимают все больше жизненного пространства, React дает вам силу выбирать для своего приложения только необходимые компоненты. В мире где существует более 200 000 npm модулей это несомненное преимущество.
React включает Философию UNIX
React это библиотека. Это точно противостоит философии комплексных фреймворков, таких как Angular и Ember. Итак когда вы выбираете React, вы вольны выбирать современные, лучшие в своем классе, библиотеки. Вы сможете решить вашу проблему лучшим путем. JavaScript развивается очень быстро, и вы вольны включать в ваше React приложение лучшие библиотеки вместо ожидания обновления фреймворка.
Unix выдержал проверку временем. Вот почему:
Философия маленьких, составных, одноцелевых инструментов никогда не выйдет из моды
React это сфокусированный, составной, служащий одной цели инструмент используемый многими сайтами в мире. Это говорит о большом будущем. (Стоит заметить что Angular имеет не меньшее распространение)
Подводя итоги
Angular 2 это большой шаг по сравнение с версией 1. Новая компонентная модель проще для понимания чем директивы в первой версии, он поддерживает изоморфный/универсальный рендеринг, и он использует виртуальный дом что дает 3–10 кратный прирост производительности. Эти изменения делают Angular 2 очень конкурентоспособным React. Не будем отрицать, что его полнофункциональная, самоуверенная природа предлагает некоторые явные преимущества за счет сокращения “JavaScript усталости”.
Тем не менее в Angular 2 размер и синтаксис останавливает меня. Приверженность Angular к HTML-ориентированному дизайну делает его сложным по сравнению с проще на JavaScript-ориентированной модели React. В React, вам не придется учить специфичный HTML синтаксис такой как ngWhatever. Вы тратите время на написание чистого JavaScript. Я верю что у этого есть будущее.
Комментировать тут Reddit или тут Hacker News.
Об авторе: Кори Хаус является автором “Building Applications with React and Flux”, “Clean Code: Writing Code for Humans” и многих других курсов на Pluralsight. Он является архитектором программного обеспечения в VinSolutions и тренер разработчиков программного обеспечения на международном уровне в сфере фронтенд разработки и чистого кодинга. Кори Microsoft MVP, Telerik Developer Expert, и основатель outlierdeveloper.com
1 — простите, не понял что такое raw CPU
2 — у меня тоже такой есть
3 — тут я с автором не согласен уже есть поддержка во всех IDE (хотя я в MS не проверял) и уже видел много расширений для линтеров
4 — мне кажется в этом случае центричен подходит более
5 — comparable simplicity
П.С. (от переводчика) Лично я использую React, и данная статья мне показалась интересной. Мне больше нравится расширения, а не декораторы. Мне нравится мой стартовый набор и возможность менять содержимое фреймворка. Я не очень люблю TypeScript и предпочитаю ES6. Но всегда с интересом участвую в ангуларных проектах 🙂
Пишите мне об ошибках, опечатках и неточностях постараюсь быстро внести правки в статью!