Автор оригинала: FreeCodeCamp Community Member.
Угловая 2 достигла бета И кажется, что готовится стать горячими новыми рамками 2016 года. Пришло время для выбора. Давайте посмотрим, как он складывается против дорогих 2015 года: Реагировать Отказ
Отказ от ответственности: Мне нравилось работать в угловом углу 1, но переключился на реагирование в 2015 году. Я опубликовал курсы Pluralsight на Реагировать и поток и Реагировать и redux в ES6 ( Бесплатная пробная версия ). Итак, Да, я предвзятый. Но я атакую обе стороны.
Хорошо, давайте сделаем это. Будет кровь.
Вы сравниваете яблоки и орангутаны!
Вздох. Да, угловая рамочная структура, Rect – это библиотека. Некоторые говорят, что эта разница делает их нелогично. Нисколько!
Этот пост считает достоинства этих двух подходов. Сравниваю синтаксис и компонент React Syntax и компонент для моделей синтаксиса углов и компонента. Это похоже на сравнение CPU компьютерного компьютера в RAW CPU. Яблоки к яблокам.
Угловые 2 Преимущества
Начнем с учетом преимуществ угловых 2 чрезмерных реакций.
Усталость низкого решения
Поскольку угловой – это каркас, он обеспечивает значительно больше мнений и функциональных возможностей из коробки. С реагированием вы обычно вытащите ряд других библиотек с полки, чтобы построить настоящее приложение. Скорее всего, вы будете захотете библиотеки для маршрутизации, применения однонаправленных потоков, вызовов веб-API, тестирование, управление зависимостями и так далее. Количество решений довольно подавляющее. Вот почему реакцию имеет так много стартовых наборов (я опубликовал Два ).
Угловой предлагает больше мнения из коробки, что помогает вам более быстро начать, не чувствуя запугивания решений. Эта принудительная консистенция также помогает новым наращиванию чувствовать себя как дома быстрее и произведет коммутационные разработчики между командами более практичными.
Я восхищаюсь тем, как команда угловой ядра приняла TypectScript, что приводит к следующему преимуществу …
Типписный путь
Конечно, TypeScript не любит все, но угловые 2-х годов самые популярные, на которые вкус JavaScript используется, – это большая победа. Реадгические примеры через Интернет расстраиваются непоследовательны – он представлен в ES5 и ES6 в примерно равных числах, и в настоящее время он предлагает Три разных способа объявить компоненты Отказ Это создает путаницу для новичков. (Угловые также охватывают декораторы вместо простираний – многие могли бы рассмотреть этот плюс).
В то время как угловые 2 не требуют TypectScript, команда угловой ядра, безусловно, охватывает ее и по умолчанию для использования Teamscript в документации. Это означает, что связанные примеры и проекты с открытым исходным кодом чаще чувствуют знакомые и последовательные. Угловой уже предоставляет Четкие примеры, которые показывают, как использовать Typeycript Compiler Отказ (Хотя по общему признанию, не все охватывают типографы еще, но я подозреваю вскоре после запуска, он станет стандартом де-факто). Эта последовательность должна помочь избежать путаницы и перегрузки решений, которая приходит с началом работы с реагированными.
Уменьшенный взлом
2015 год был год JavaScript усталость Отказ Хотя само реагирование, как ожидается, будет довольно стабильным с Версия 15 Скоро Экосистема Rection aCoSystem выбросила на быстрый темп, особенно вокруг Долгий список вкусов потоков и Маршрутизация Отказ Итак, что-нибудь, что вы пишете в реакции сегодня, могут чувствовать себя устаревшими или требуют изменения изменений в будущем, если вы опираетесь на одну из многих связанных библиотек.
Напротив, угловые 2 представляет собой осторожное, методическое распределение зрелых, всеобъемлющих структур. Таким образом, угловые менее склонны отталкиваться от болезненных путей после выпуска. И в качестве полной структуры, когда вы выбираете угловой, вы можете доверять одной команде, чтобы осторожны о будущем. В реакции это ваша ответственность за стадо кучу различий, быстро движущихся, открытых библиотек исходных источников в комплексное целое, которое хорошо играет вместе. Это трудоемкое, расстраивание и бесконечная работа.
Широкая поддержка инструментов
Как вы увидите ниже, я считаю, что React’s JSX большая победа. Тем не менее, вам нужно выбрать инструменты, поддерживающий JSX. Реагирование стало настолько популярно, что поддержка инструментов редко редко проблема, но новая оснастка, такая как IDES и Linter, вряд ли поддерживает JSX в первый день. Угловые 2-х гоблона для хранения Маркеп в строке или в отдельных HTML-файлах, поэтому его не требует специальной поддержки для инструментов (хотя появляется инструмент для интеллектуального аналитика шаблонов струны угловых углов).
Веб-компонент, удобный
Конструкция Angular 2 охватывает стандарт веб-компонента. Sheesh, я смущен я забыл упомянуть это изначально – я недавно опубликовал Курс на веб-компонентах ! Короче говоря, компоненты, которые вы строите в угловых 2, должны быть намного проще преобразовать в простые, родные веб-компоненты, чем компоненты реагирования. Конечно, Поддержка браузера все еще слабая Но это может быть большая победа в долгосрочной перспективе.
Подход Angular поставляется с собственным набором Gotchas, который является хорошим сейфом для обсуждения преимуществ реагирования …
Преимущества реагирования
Хорошо, давайте рассмотрим, какие наборы реагируют на части.
Jsx.
JSX – это синтаксис типа HTML, который компилирует до JavaScript. Разметка и код созданы в одном файле. Это означает завершение кода, дает вам руку, когда вы вводите ссылки на функции и переменные вашего компонента. В отличие от этого, шаблоны на основе угловых на основе угловых путей поставляются с обычными нисходящимисями: без окрашивания кода во многих редакторах, поддерживающую ограниченный код завершения кода и сбои выполнения. Вы обычно ожидаете бедных сообщений об ошибке, но угловую команду создал свой собственный Parser HTML, чтобы исправить это Отказ (Браво!)
Если вам не нравятся шаблоны на основе угловых струн, вы можете перемещать шаблоны в отдельный файл, но вы вернетесь к тому, что я называю «старыми днями:» проводка двух файлов вместе в голове, без кода без кода Поддержка завершения или проверка времени компиляции для помощи. Это не похоже на большой сделку, пока вы не наслаждаетесь жизнью в реакции. Сочинение компонентов в одном Проверяется время компиляции Файл является одной из основных причин JSX настолько особенного.
Подробнее о том, почему JSX такая большая победа, см. JSX: другая сторона монеты Отказ
React не удается быстро и явно
Когда вы делаете опечатки в React’s JSX, он не скомпилируется. Это прекрасная вещь. Это означает, что вы знаете, сразу же, точно, какая строка имеет ошибку. Он рассказывает вам сразу, когда вы забываете закрыть тег или ссылку на свойство, которое не существует. На самом деле, Компилятор JSX Определяет номер строки, где произошла опечатка Отказ Это поведение радикально ускоряет развитие.
Напротив, когда вы не называете переменную ссылку в угловой 2, ничего не происходит вообще. Angular 2 не работает во время выполнения времени вместо того, чтобы компиляционное время Отказ Это терпеет неудачу медленно Отказ Я загружаю приложение и удивляюсь, почему мои данные не отображаются. Не весело.
Реагируйте в JavaScript Centric
Вот. Это фундаментальное различие между реагированием и угловым углом. К сожалению, угловые 2 остается HTML-ориентированным, а не javaScript Centric Отказ Angular 2 не смог решить свою наиболее фундаментальную проблему дизайна:
Я не могу подчеркнуть влияние этого раскола достаточно. Это принципиально влияет на опыт развития. Г.А., ориентированный HTML-ориентированный дизайн остается наибольшей слабостью. Как я прикрываю в « JSX: другая сторона монеты », JavaScript гораздо более мощный, чем HTML. Таким образом, Более логично улучшить JavaScript для поддержки Markup, чем для улучшения HTML для поддержки логики Отказ HTML и JavaScript должны быть как-то склеены, а javaScript javaScript ориентировочный подход принципиально превосходит угловой, Ember и Chankout’s HTML-подход.
Вот почему …
JavaScript React
Angular 2 продолжает угловую точку 1, пытаясь сделать HTML более мощным. Таким образом, вы должны использовать уникальный синтаксис угловых 2 для простых задач, таких как петли и условные условные. Например, угловые 2 предлагают как один, так и два пути связывания через два синтаксиса, которые, к сожалению, совсем разные:
{{myVar}} //One-way binding
ngModel="myVar" //Two-way bindingВ реакции, привязка разметки не изменяется на основе этого решения (оно обрабатывается в другом месте, как я бы поспорил, что он должен быть). В любом случае, это выглядит так:
{myVar}Угловые 2 поддерживает встроенные мастер-шаблоны с использованием этого синтаксиса:
- {{hero.name}}
Вышеуказанные фрагменты петли над массивом героев. У меня много проблем:
- Объявление «мастер-шаблон» через предшествующую звездочку является загадочным.
- Знак фунта перед героем объявил локальный шаблон переменной. Эта ключевая концепция выглядит как ненужный шум (если предпочтительно, вы можете использовать `var`).
- NGFOR добавляет петли семантику в HTML через угловой атрибут.
Контрастный синтаксис угловых 2 выше с чистым js js *: (по общему признанию, ключевое свойство ниже – это специфичный в реакции)
-
{ heroes.map(hero =>
- {hero.name} )}
Поскольку JS поддерживает цикл jsx, jsx Rection может просто использовать всю мощность JS для таких вещей и делать гораздо больше с картой, фильтром и т. Д.
Просто прочитайте Угловой 2 чит-лист Отказ Это не HTML. Это не JavaScript. Это Угловой Отказ
Реагистрация уникальна в его синтаксической и концептуальной простоте. Считайте, что итерация в современных популярных каркасах/библиотек JS:
Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind="foreach"
React: JUST USE JS. :)Все, кроме реагирования Используйте структуру специфические замены для чего-то, что является родным и тривиальным в JavaScript: петля Отказ Это красота реагирования. Он охватывает силу JavaScript для обработки разметки, поэтому не требуется ни один странный новый синтаксис.
Синтексические странности угловых 2-х годов продолжаются с помощью переплета клики:
(click)="onSelect(hero)"
Напротив, отреагируйте снова используют простое ol javascript:
onClick={this.onSelect.bind(this, hero)}А поскольку реакция включает в себя систему синтетической события (как и угловые 2), вам не нужно беспокоиться о последствиях производительности объявления обработчиков событий, встроенного в этом.
Зачем наполнить голову уникальным синтаксисом Framework, если вам не нужно? Почему бы не просто принять силу js?
Роскошный опыт развития
Поддержка завершения кода JSX, проверки времени компиляции и обменные сообщения об ошибке, уже создают отличный опыт разработки, который сохраняет как печатать, так и время. Но комбинируйте все это с горячей перезагрузкой со временем путешествия, и у вас есть опыт быстрого развития, как никто другой.
Размер проблемы
Вот размеры некоторых популярных рамок и библиотек, министерны ( Source ):
Угловой 2: 566K (766к с RXJS) Эмбер: 435k Угловой 1 : 143k React + Redux: 139к.
Редактировать : Извините, у меня были неправильные номера ранее, которые были для простых приложений TOMEVC вместо сырья. Кроме того, ожидается, что угловое число 2 должно упасть на окончательный выпуск. Перечисленные размеры предназначены для Framework, Minified, в браузере (нет GZIP здесь).
Чтобы сделать реальное сравнение, я построил экскурсию Angular 2 в приложении Heroes в угловых 2 и реагировать (я использовал новую React Ringshot Starter Kit). Результат?
Угловой 2 : 764K заминировано React + Redux : 151 тыс
Итак, Angular 2 в настоящее время в четыре раза больше в четыре раза превышает aDe read + redux приложение сопоставимой простоты Отказ (Опять же, угловые 2, как ожидается, потеряют вес до окончательного выпуска).
Теперь, когда сказал, я признаю, что проблемы по поводу размера рамки могут быть переплетены:
Том прав. Как и угловые и Ember, отличаются, потому что они предлагают еще много функций из коробки.
Тем не менее, моя забота в том, что многие приложения не нуждаются в том, что эти большие рамки, поставленные в коробку. В мире, который все чаще обнимает микросервисы, микроапты и Пакеты с одной ответственностью , Реагирование дает вам возможность «правильный размер» ваше приложение, тщательно выбирая только то, что нужно Отказ В мире с Более 200 000 модулей NPM это мощное место.
Реагировать охватывает философию Unix.
React – это библиотека. Именно противоположная философия больших, всеобъемлющих рамм, таких как угловой и эмубер. Поэтому, когда вы выбираете REACT, вы можете выбрать современные лучшие библиотеки породы, которые решают вашу проблему лучше всего. JavaScript движется быстро, и React позволяет вам поменять небольшие кусочки вашего приложения для лучших библиотек, а не ждать и надеясь, что ваши рамки будут инновации.
Unix выдержал испытание временем. Вот почему:
React – это сфокусированный, композитный, одноцелевый инструмент, используемый Многие из крупнейших сайтов в мире Отказ Это хорошо для своего будущего (то, что сказано, угловой это используется многими большим именами тоже).
Showdown Summary
Angular 2 – это огромное улучшение по версии 1. Новая модель компонентов проще похвалы, чем директивы V1, она поддерживает изоморф/универсальный рендеринг, и он использует виртуальный DOM, предлагающий улучшения 3-10x в производительности. Эти изменения делают угловые 2 очень конкурентоспособными с реагированными. Там нет отрицания того, что его полнофункциональная, самоуверенная природа предлагает некоторые четкие выгоды за счет уменьшения «усталости JavaScript».
Однако размер угловых 2 и синтаксис дают мне паузу. Приверженность угловании к HTML-ориентированной конструкции делает его сложным по сравнению с более простой JavaScript MavaScript Model. В реакции вы не изучаете специальные рамки HTML-прокладки, такие как Ngwhatever. Вы проводите свое время пишу простых ol javaScript. Это будущее, в которое я верю.
Комментарии? Chime In на Reddit или Хакеров Новости Отказ
Дом Кори Является ли автор « построение приложений с реагированием и потоком », «,« Чистый код: написание кода для людей »и множественные другие курсы по плютам. Он является архитектором программного обеспечения в Vinsolutions и Поезда разработчиков программного обеспечения на международном уровне О программных методах, таких как интерфейс разработки и чистого кодирования. CORY – Microsoft MVP, эксперт для разработчика Teleerik, а основатель OutlierDeveloper.com Отказ