По крайней мере, для моих личных веб-проектов.

Когда я только начал свою карьеру в качестве разработчика программного обеспечения, я познакомился с миром SPA через AngularJS и Angular 2+. До этого я работал только с серверными CMS / фреймворками, такими как WordPress, а также с Django и Flask. Черт, я даже не знал, что такое RESTful API!

По этому поводу я не собираюсь много комментировать AngularJS. Это потому, что я в основном работал над проектом Angular 2+ для этого конкретного концерта, поскольку кодовая база AngularJS нашей команды в любом случае была почти зрелой, и добавить было нечего.

Моя первая реакция заключалась в том, что я любил Angular 2+, хотя большую часть времени я понятия не имел, что происходит за кулисами; все просто волшебным образом сработало! Мне, как новичку в области веб-разработки, это облегчило мне жизнь, поскольку Angular предоставляет множество функциональных возможностей прямо из коробки. В Angular есть все необходимое для разработки 99% веб-приложений: маршрутизация, внедрение зависимостей, HTTP-клиент и библиотеки анимации.

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

До сих пор я был непреклонен в превосходстве Angular над другими веб-фреймворками / библиотеками.

Немного горьковатый вкус React

Когда я впервые посмотрел объявление о вакансии в моем текущем проекте, я скептически отнесся к подаче заявки. В конце концов, они планировали использовать совершенно другой технологический стек: Node.js serverless + React.js в отличие от Spring Boot + Angular. Я имею в виду, действительно ли мне понравится стек технологий?

«К черту, я все равно подам».

Перенесемся через 6 месяцев, и вот настал мой первый день в моей нынешней команде. Мы все еще настраивали проект, поэтому я попытался взглянуть на код React, чтобы помочь разработчикам интерфейса. Мое впечатление было… не очень хорошим.

«Как, черт возьми, все это работает? Это кажется очень хакерским. Что вы имеете в виду, что маршрутизация не предусмотрена "из коробки"? Как я собираюсь создать разные страницы, на которые пользователи смогут переходить? Что вы имеете в виду, что мне нужно использовать другие библиотеки только для этого? Как я могу быть уверен, что они сделают то, что я хочу? JAVASCRIPT вместо TYPESCRIPT? »

И, к сожалению (или к счастью), поскольку я был одним из тех, кто имел наибольший опыт разработки RESTful API и бэкендов, мне пришлось выступить и возглавить бэкэнд-разработку нашей команды.

Я с энтузиазмом отказался от React и начал активно изучать разработку на Node.js.

Возвращаемся к React

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

По совпадению, у меня также появилось желание узнать больше о фронтенд-разработке. Я не хотел, чтобы меня вынудили стать исключительно серверным разработчиком; Я хотел быть более гибким и иметь возможность предоставлять сквозные функции.

Итак, я «задумал» задачу фронтенд-разработки для себя и засучил рукава. Независимо от того, насколько мне не нравился React и я думал, что Angular лучше, я углублюсь и узнаю как можно больше об этой библиотеке, которой все бредят.

Результат? Я люблю это.

Почему мне понравился React больше, чем Angular

Обязательная социальная реклама, если вы дошли до этой части: я не собираюсь делать объективное описание обоих, так как их уже полно на Medium и в Интернете. Это еще и потому, что сравнение Angular и React похоже на сравнение яблока с нектарином; Я могу высказывать все, что хочу, но, в конце концов, это всего лишь мое мнение, и все зависит от предпочтений.

TypeScript против JavaScript

Будучи человеческим эквивалентом золотой рыбки, я часто забываю, что делает мой код и / или почему они у меня есть. TypeScript помогает мне в этом аспекте, потому что он вежливо напоминает вам, если вы неправильно использовали свой собственный код и / или написали код, который не имеет смысла, и позволяет вам писать «заметки» (официально называемые «интерфейсами» / типами) о том, что как должен выглядеть ваш объект.

Откровенно говоря, мое личное (и очень личное) мнение состоит в том, что не использовать TypeScript везде, где только можно, это немного - простите за французский - глупо. Он обеспечивает набор текста, документацию по коду, проверку во время компиляции / транспиляции и многое другое.

Лучше всех? TypeScript вообще не заставляет вас использовать большую часть своих функций (хотя иногда он жалуется на некоторые модули, не имеющие определения типа).

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

То есть, пока я не понял, что вы можете использовать TypeScript с React, а настроить приложение React на TypeScript так же просто, как пирог. См .: https://create-react-app.dev/docs/adding-typescript.

Единственный недостаток React (или CRA) состоит в том, что вы не можете заставить своих коллег-разработчиков использовать TypeScript, потому что сопровождающие CRA не хотят забивать TypeScript людям в глотку. Другими словами, TypeScript в настоящее время включен в CRA / React.

В дополнение к этому, если ваши зависимости не имеют определений типов или, что еще хуже, имеют неточные определения типов, вы можете потратить некоторое время на размышления, почему вы не можете вызвать определенную функцию (подсказка: вы не можете вызвать ее, потому что она не определенный!).

Библиотека против фреймворка

Я скажу просто: React, по сути, представляет собой библиотеку, которая позволяет вам создавать свой пользовательский интерфейс (то есть «представление»), тогда как Angular - это фреймворк, который дает вам все необходимое для создания веб-приложения.

Это означает, что когда вы начинаете новый проект React, у вас не обязательно будет все необходимое для создания того, что вы хотите, из коробки:

  • Маршрутизация (какая страница отображается в вашем веб-приложении при переходе к your.website/contact-me?)
  • Глобальное управление состоянием (вы можете сделать это в Angular, потому что он поддерживает контейнер для внедрения зависимостей и вводит «сервисы» по мере необходимости, так что вы можете сохранить свое состояние в своих «сервисах»).
  • Структура кода! Нет ng generate component your-new-component, так что вам решать, как вы хотите структурировать свой проект.

Теперь возникает большой вопрос: это плохо?

Как говорится в любой другой статье, обсуждающей это на планете: «Это зависит от обстоятельств».

Мне больше нравится React просто потому, что я могу делать с ним все, что захочу, и у него минимальный шаблон. Не нужна маршрутизация? Не нужно вводить response-router-dom. Не нужно глобальное управление государством? Не нужно вводить Redux. Хотите сделать простую форму? Сделайте свою простую форму вместо того, чтобы регистрировать компоненты где-нибудь как часть модуля внутри другого модуля, например, Angular.

С другой стороны, Angular, как фреймворк, держит вас за руку, когда вы создаете что-то. Это отлично подходит для больших команд и / или предприятий, где люди бросают приложения между разными командами, как если бы они играли в горячую картошку, потому что заставляет людей делать это «угловым способом», что означает, что структура / дизайн кода должны в значительной степени соответствовать одинаково для всех проектов. Он также отлично подходит для новичков, несмотря на свою знаменитую «крутую кривую обучения», потому что учит их одному из многих подходов к структурированию веб-приложения.

Именно здесь React в какой-то мере терпит неудачу или преуспевает, в зависимости от того, кого вы спрашиваете; он настолько гибкий, что, если вы не будете осторожны, ваш проект легко превратится в непослушный беспорядок. И, насколько мне известно, не существует стандартного, одобренного сопровождающими «способа React» для структурирования проекта.

Взгляните на учебник между двумя фреймворками (React: https://reactjs.org/tutorial/tutorial.html или https://create-react-app.dev/docs/getting-started; Angular : Https://angular.io/tutorial). Учебник React научит вас, как начать работу, но при этом старается быть максимально непредсказуемым. Между тем, документация по Angular определяет передовой опыт, включая разделение логики выборки данных на службы.

Структура кода

React включает JSX, который использует смесь JavaScript и HTML для создания вашего пользовательского интерфейса. Ограничьте это до Angular, который разделяет «компонент» на две части (ну, на три, если вы считаете таблицу стилей): (1) файл HTML (т. Е. Шаблон); и (2) код, который добавляет интерактивности шаблону HTML.

React хорош, когда ваш разработчик отвечает за все, потому что это означает, что вместо просмотра 2–3 файлов, чтобы изменить внешний вид, скажем, кнопки, им нужно посмотреть только один: файл JSX для этого компонента. . Звучит банально, но действительно помогает, когда я могу просто прокручивать вверх и вниз вместо того, чтобы перемещаться между несколькими файлами, чтобы гарантировать, что эти файлы хорошо взаимодействуют друг с другом.

Однако контраргументом этому является то, что вы можете захотеть, чтобы кто-то другой (не являющийся разработчиком) разработал ваш пользовательский интерфейс, потому что разработчики могут быть не так хороши в разработке гибкого взаимодействия с пользователем (кашляет мне кашлять). Делать это в Angular намного удобнее просто потому, что уровень представления (то есть шаблон) обычно отделен от реальной бизнес-логики (то есть фактического кода, поэтому вы можете редактировать HTML / CSS изолированно большую часть времени, не слишком сильно полагаясь на код.

Заключительные мысли - Почему мне больше нравится React

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

Однако я скажу следующее: разработчики - это, в конце концов, люди. Трудно контролировать действия других людей, если только вы не хотите править железным кулаком. Гораздо проще просто сказать: «Это не способ Angular, прочтите руководство», вместо того, чтобы говорить: «Ваш код выглядит ужасно».

Могу ли я сказать, что React лучше, чем Angular? Не совсем так, поскольку это инструменты, разработанные с использованием разных философий. Я всегда считал, что React больше подходит для проектов, где члены его команды могут использовать эту свободу для максимизации своей продуктивности (или, с точки зрения циника, не склонны делать глупые вещи), тогда как Angular отлично подходит для проектов, где ( 1) скорее всего, перекинут через забор другой команде; и / или (2) когда требуется более высокий уровень структуры по сравнению с архитектурой проекта из-за того, что проект имеет большой объем или команда проекта большая.