Angular 2 против React: на грани

Angular 2 против React: на грани

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

Новичкам становится все сложнее выбрать JavaScript-фреймворк для своего проекта или начать обучение. Слишком много инструментов в мире JS усложняют их изучение и использование. Эта статья призвана дать вам некоторое представление об обеих платформах путем сравнения и описания их характеристик.

Примечание. Стоит отметить, что сравнивать эти две JS-фреймворки очень сложно, поскольку Angular 2 — это многофункциональная платформа, а React — это просто библиотека компонентов пользовательского интерфейса.

Начнем с характеристик каждого фреймворка:

Угловой 2

Angular 2 — это компоненты. Представьте, что вам нужен погодный модуль в углу вашей страницы, который всегда выдавал текущую информацию о погоде. В Angular 2 это будет компонент Weather, состоящий из декораторов и класса контроллера. Части наших компонентов страницы могут общаться друг с другом, создавая сложное веб-приложение с простыми отдельными частями. Angular 2 поставляется со всем необходимым для создания приложения, включая обработку форм, маршрутизатор, HTTP-клиент для синхронизации с внутренними серверами/базами данных, а также инструменты для написания модульных тестов и тестов производительности. Он следует более традиционному шаблону MVC, в котором модели и представления взаимодействуют друг с другом в обоих направлениях. Flux использует свой собственный уникальный подход, позволяющий передавать данные между объектами только в одном направлении. Google использовал Angular 1 для приложения YouTube для PS3. Angular 2 используется на многих веб-сайтах, таких как PayPal и VEVO.

Реагировать

Основная цель React — обновить представления, которые видит пользователь, чтобы отразить текущее состояние данных, хранящихся в приложении. Это делается с помощью виртуального DOM. React можно комбинировать с Flux или Redux, которые представляют собой предлагаемый шаблон архитектуры данных, в котором связь между частями приложения осуществляется только в одном направлении. В этом случае React обрабатывает ваши представления, а Flux управляет бизнес-логикой. Facebook хвастается, что преимущества этого одностороннего подхода заключаются в том, что он поддерживает более простую ментальную модель, которую могут понять другие разработчики, которые смотрят на код, легче отслеживать ошибки и упрощает создание осмысленных модульных тестов. React сам по себе не является фреймворком. Он не поддерживает маршрутизацию или синхронизацию с внутренним сервером. Для этого вы должны комбинировать React с другой библиотекой или фреймворком, например использовать React с Backbone или React с jQuery AJAX. Facebook использует React+Flux на своем веб-сайте в Instagram и в чате Facebook.

Обучение

Можно сказать, что входной барьер зависит от того, что вы выберете в начале своего приключения с обоими языками. В React речь идет о библиотеках, которые вы выбираете, а в Angular 2 — независимо от того, выбираете ли вы TypeScript или нет. Поначалу Angular 2 может показаться более требовательным, чем React, потому что количество новых концепций, которые вам нужно освоить, вероятно, будет выше, но в будущем знание этого универсального инструмента может стать огромным преимуществом. Angular 2 определенно есть. React — это UI-библиотека, созданная только для одной цели, но она делает это очень хорошо. Его можно комбинировать с другими библиотеками, чтобы получить полноценный фреймворк. Angular 2 уже представляет собой законченный фреймворк (решение «все в одном») для создания интерфейсных веб-приложений.

Первое, с чем приходится сталкиваться в React, — это XML/HTML-подобный синтаксис, JSX. Некоторым разработчикам это может показаться не очень знакомым, когда они начинают, но это не добавляет особой сложности — только выражения, которые на самом деле являются JavaScript. Что вам также нужно изучить, так это компоненты и пропсы, но вам не нужно знакомиться с какими-либо новыми логическими структурами, потому что на самом деле это все о JS. Что приятно удивляет, когда дело доходит до React, так это то, что его действительно легко начать использовать. Я думаю, можно даже сказать, что вы можете попробовать выучить его за одну ночь и добиться успеха. Даже программисты с ограниченным опытом фронтенд-разработки могут быстро освоить React. Хуже всего может быть поиск подходящих библиотек для всех необходимых возможностей, но построить структуру приложения и его разработку очень просто.

Когда дело доходит до запуска (привет) с Angular 2, это определенно занимает немного больше времени, но может быть проще получить представление о том, что нам нужно настроить и как взаимодействуют компоненты. Если у вас есть некоторый опыт работы с Java или .NET, вам будет легче построить счастливые отношения с TypeScript. Сама структура богата темами для изучения, начиная с модулей, внедрения зависимостей, декораторов, компонентов, сервисов, каналов, шаблонов, директив и более сложных, таких как обнаружение изменений, зоны, компиляция AoT и Rx.js.

Проверьте это, прежде чем…

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

• Размер проекта

• Время обслуживания

• Целевые платформы (веб, мобильные устройства, настольные компьютеры)

• Размер команды

• Опыт разработчиков

• Совок определения функциональности

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

Если вам нравится технологический выбор и вы можете жить с дополнительными стандартными накладными расходами, выберите Angular 2.

Если вас не устраивает выбор технологий Angular 2, и вы хотите что-то более простое, с большей свободой и меньшим количеством навязанных вещей — выберите React.

Последний совет

Читая разные мнения об этих двух фреймворках, я заметил и узнал, что поначалу многие люди думают, что Angular 2 лучше, потому что с ним будет легче охватывать большие проекты, но они признают, что, начиная с React, где у вас есть простой приложение с самого начала его учебника работает быстрее. Удивительно, но многие люди, которые говорят о различиях между ними, никогда не пробовали их обоих в течение длительного времени. Я заметил, что люди, активно использующие эти два фреймворка в течение некоторого времени, начали больше ценить React, но никогда не думали, что удалят Angular 2 из своего списка. Сказав это, мой последний совет: попробуйте оба! Не используйте слепо один и тот же подход каждый раз. Когда у вас будет некоторый опыт в обоих, вы сможете выбирать, когда необходимо использовать тот или иной.

· Вы можете попробовать React, используя туториалы: https://facebook.github.io/react/

· Вот хорошее видео, объясняющее React+Flux: https://facebook.github.io/flux/...

· Вы можете попробовать Angular 2, следуя руководствам по адресу: http://angular.io или отличному официальному руководству http://www.angular2.com/, которое показывает нам архитектуру, компоненты и передовой опыт — все через создание приложения.