Angular или React? Выбор для хобби-проекта

Перевод статьи Шона Максвелла «Deciding between Angular and React for Hobbyist Web Developers».

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

Члены JavaScript-сообщества, с которыми я познакомился онлайн, очень рьяно рекламируют React. А я решил, что моя статья будет о том, почему разработчикам, для которых разработка это хобби, стоит выбрать Angular.

Создается впечатление, что основная масса статей со сравнительным анализом Angular и React написаны людьми, которые испытали оба фреймворка. Но, честно говоря, я не думаю, что вы можете использовать свой опыт в качестве аргумента, разве что если пользуетесь обоими очень плотно, на профессиональной основе. То, что работает для маленького личного проекта, может работать не столь хорошо в мире корпоративных приложений. Замечу также, что эта статья относится к Angular (v2 и выше), не к AngularJS… AngularJS мертв.

Angular это фреймворк, а не библиотека

Да-да, я знаю, вы слышали это уже миллион раз. Но я думаю, что использование Angular имеет преимущества даже для маленького проекта, особенно, если вы начинающий разработчик или создаете сайт полностью самостоятельно. Также Angular предоставляет все необходимые инструменты в командной строке. Вам не придется иметь дело с транспиляторами TypeScript, с Babel, а также решать, какой фреймворк тестирования использовать. Все, что вам нужно для подготовки вашего кода к выпуску в продакшен, уже для вас подготовлено.

Если вы начинающий разработчик, то принцип convention over configuration («соглашения главнее конфигурации») будет для вас лучшим вариантом. Работая с Angular, вы можете познакомиться с новыми инструментами/идеями вроде сервера фронтенд-разработки и построения/упаковки вашего кода, когда вы готовы его деплоить. Вместо бессчетных часов поиска в гугле информации по следующей штуке, которую, как вам кажется, вам надо установить, или по инструментам, которые вам нужно использовать, вы получаете все готовое, просто введя команду: ng new “project name».

Наконец, не стоит недооценивать важность тестирования. Многие разработчики не привыкли делать модульные тесты для кода фронтенда. Но элемент на странице, поведение которого меняется в зависимости от действий пользователя, нужно обязательно тестировать. Я делал модульные тесты (используя такие инструменты Angular как karma и jasmine) даже для своего личного профессионального сайта. Сознание того, что я детально пробежался по своему коду и сделал все от меня зависящее, чтобы какой-нибудь юзер не смог случайно что-то сломать, позволило мне лучше спать по ночам. Если вы пользуетесь Angular, то ваш фреймворк и драйвера как для модульного, так и для сквозного тестирования уже настроены.

Производительность

Конечно, Angular, являясь полноценным фреймворком, будет занимать больше места, чем React, который является всего лишь библиотекой. Но этой разницей можно пренебречь, это вопрос килобайтов. Что действительно имеет значение, это то, насколько быстрым будет рендеринг элементов на странице, и насколько отзывчивыми они будут. Когда ваш проект на Angular готов к выходу в продакшен, вам нужно только собрать его при помощи команды ng build —prod —aot – и вы будете готовы деплоить. Это значит, что все будет сжато и упаковано для максимальной производительности.

Не могу судить о скорости по собственному опыту, но я посмотрел некоторые тесты. В этой статье тест проводился путем рендеринга календаря (таблица 24×31) на Angular, React и Vue. Angular побил обоих, а React был самым медленным: ему понадобилось почти вдвое больше времени, чем Angular.

Источник: itnext.io | React: 1819ms, Vue: 1191ms, Angular: 931 ms

Следующие замеры, возможно, чуточку устарели, но когда я определялся с выбором фреймворка, они были еще актуальны. Это, пожалуй, был самый детальный тест по сравнению Angular React и Vue, какой я только смог найти. В этой статье вы найдете сравнение результатов стандартного Angular v4 с результатами React/Redux v15 и увидите, что заметной разницы в производительности нет. Однако, Angular все еще обгоняет React во многих операциях по созданию, обновлению и удалению строк в таблицах.

Вам придется использовать TypeScript, а это хорошо

Стандартный JavaScript такой старый, в нем столько проблем… Среди них:

• межбраузерная совместимость (по этому поводу был создан Babel),
• различные версии NodeJS (на сервере может быть иная версия, чем на вашей домашней машине),
• отсутствие типобезопасности (а это настоящая засада для любого проекта, над которым работает больше одного разработчика),
• только частичная объектно-ориентированность с ES6.

TypeScript осуществляет транспиляцию в чистый ES5-код (более старая версия JavaScript), устраняя при этом практически все проблемы совместимости.

В React также есть опция использования TypeScript, но я хотел, чтобы мне пришлось это делать. Работа с TypeScript сделала меня лучшим разработчиком и помогла лучше выполнять свои ежедневные обязанности, работая с Java в бэкенде, поскольку у Java с TypeScript больше общего, чем с обычным JavaScript.

Благодаря TypeScript я гораздо лучше понял такие концепции как интерфейсы, наследование, защищенные и абстрактные методы и переменные. Также стоит иметь в виду, что навыки работы в объектно-ориентированном программировании пользуются спросом на рынке труда, это частое требование в вакансиях. Если раньше вы работали с ООП, то изучение TypeScript будет казаться более естественным, чем попытки работать с чистым JavaScript, особенно, если вас (как и меня) пугает принцип разделения ответственности.

Больше свободы при работе с препроцессорами

Я ненавижу работать с HTML и CSS, но люблю Pug и Stylus. Я знаю, что вы скажете: «А, их можно использовать и с React». Да, это правда, но в React для работы с препроцессорами шаблонов нужны отдельные плагины.

Поскольку код шаблона Angular загружается из отдельного файла вне TypeScript, становится неважным, какой язык препроцессора вы хотите использовать. Вам необязательно устанавливать отдельный плагин и вам не придется беспокоиться о совместимости каких-то новых особенностей препроцессора, которые появятся в будущем. Командная строка Angular также имеет несколько встроенных CSS-препроцессоров, включая самые популярные: Stylus, LESS и Sass. Все они будут конвертироваться при построении вашего кода или при запуске сервера разработки.

Большее количество вакансий… но я не думаю, что это важно

Когда я искал работу и просматривал огромное количество вакансий для фронтенд / full-stack веб-разработчиков, я заметил одну вещь. Хотя там может указываться, что работа будет связана с Angular или React, опыт работы с ними не имеет значения, если у вас есть хороший опыт работы с JavaScript вообще и опыт работы с любым фреймворком, будь то Angular, React, jQuery или какой-нибудь другой. В моем родном городе, Сиэтле, количество вакансий с React значительно превосходит количество вакансий с Angular, но я ни разу не видел в них требования НЕПРЕМЕННО знать React. И в общении с рекрутерами таких требований я тоже не слышал. В мире технологий при прохождении собеседований важно, как вы себя покажете, отвечая на вопросы, а опыт важен только для того, чтоб вас вообще позвали на собеседование.

Короче говоря, не стоит выбирать фреймворк с оглядкой на возможности в плане поиска работы. Выбирайте его исходя из того, что будет для вас более интересно и удобно. Правда, есть одна оговорка: если вы сильно хотите работать на одну из крупных компаний, которые создали Angular/TypeScript (Google и Microsoft) или React (Facebook), то используйте их детище.

Заключение

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

Я увлекаюсь собственно созданием сайтов, а не изучением каждого инструмента веб-разработки или попытками определить наилучшую комбинацию библиотек. Если вы хотите поэкспериментировать с различными инструментами, тогда, конечно, стоит попробовать и React. Если же хотите сесть и настрогать несколько сайтов, полностью протестированных и готовых к выпуску, используйте Angular.

[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]