В 2021 году самыми популярными фреймворками на рынке фронтенд-технологий являлись Angular и React. Оба фреймворка разработаны на базе языка JavaScript и решают примерно одинаковый спектр задач. Однако процесс работы имеет определенные отличия, плюс, хоть оба фреймворка и способы решать одинаковый спектр задач, один из них лучше адаптирован для проектов одного типа, другой для второго.
Эти фреймворки однозначно будут популярны в 2022 году, так как альтернативы, которая могла бы быстро вытеснить их с рынка, пока что нет. Начинающему разработчику желательно определиться с изучением и работой над каким-то одним фреймворком, так как распыляться сразу на два направления смысла нет. В случае необходимости вы всегда сможете освоить альтернативную технологию, так как у них одинаковая основа и похожие принципы работы.
Ожидаемые фронтенд-тренды на 2022 год
Понимание трендов, которые будут в веб-разработке в текущем году, а возможно и в следующих, позволит лучше определиться с выбором фреймворка для первоначального изучения. Вот какие из них будут с высокой долей вероятность преобладать на рынке разработки:
- SPA (single page application) или одностраничные приложения и сайты. Не стоит путать их с классическими одностраничниками, которые часто используются для продажи какого-то конкретного товара или оформления подписки. Здесь может быть несколько страниц, но переход между ними не требует перезагрузки, что ускоряет работу и делает взаимодействие с сайтом более удобным для пользователя.
- PWA - прогрессивные веб-приложения. Это уже именно приложения, которые могут работать без подключения к интернету, пускай и с несколько ограниченным функционалом. Такая возможность достигается за счет кеширования данных. Благодаря этому они занимают сравнительно мало места на устройстве пользователя, но дают ему возможность корректной работы в условиях нестабильного или отсутствующего интернет-соединения.
- Использование технологии SSR на серверной части. Она не только ускоряет работу приложения на стороне пользователя, но и позволяет ускорить и улучшить качество индексации контента на сайте поисковыми роботами, что улучшает ранжирование в поисковой выдаче.
- Типизация TypeScript. Она доступна во всех фреймворках, основанных на языке JavaScript. На этапе разработки позволяет ускорить сам процесс работы, выявить возможные ошибки, улучшить общую читабельность кода, что положительно скажется на поддержки проекта другими разработчиками.
Представленные тренды отлично реализуются с помощью распространенным фреймворков, в том числе Angular и React. Если исходить из данных трендов, то можно сделать вывод, что оба фреймворка будут распространены в веб-разработке в 2022 году. Начинающему веб-разработчику нужно изучить как минимум один из них, чтобы успешно войти в профессию. Проектов, работающих без фреймворков будет все меньше и меньше.
Технические характеристики
Пускай в основе обоих фреймворков лежит JavaScript, технически они имеют отличия, влияющих как на работу всего проекта, так и на рабочий процесс.
Angular
Фреймворк от компании Google. Он применяется для разработки как небольших сайтов, так и крупных порталов. Ключевой особенностью является возможность “бесшовно” перемещаться по страницам веб-сайта или приложения. Проекты, сделанные на основе Angular состоят из независимых элементов, называемых компонентами. Они строятся так, чтобы отражать определенный элемент или группу элементов и при этом выполнять определенный набор функций и задач.
Группа компонентов называется модулем. Главный модуль отвечает за контроль работы всего приложения или отдельной страницы. Дополнительные модули же подчиняются основному. Отвечают за организацию второстепенных задач, например, воспроизводство анимации. Такой подход позволяет разгрузить работу приложений.
Структура веб-приложения на Angular
Angular имеет целостную и логичную структуру, плюс, поддержку всего необходимого для начала работы “из коробки”. Это упрощает работу, но делает обучение более сложным. Плюс, если нужно отключить что-то из “идущего в комплекте”, то на это придется потратить немало времени. В противном случае приложение может получится слишком тяжелым или вовсе начать работать некорректно.
React
Этот фреймворк активно развивается - постоянно выходят мелкие обновления, которые постепенно привносят новые техники и функционал. При этом все версия являются взаимоподдерживаемыми, то есть у вас не возникнет проблем в работе после очередного обновления. По своим функциональным возможностям и технике исполнения напоминает больше библиотеку, нежели серьезный фреймворк, как Angular. Отчасти это делает более низкий порог вхождения и возможность быстро адаптировать свои проекты.
Однако за такую гибкость приходится платить в случае с более сложными проектами. Например, часто приходится помимо самого React устанавливать много сопутствующих библиотек, делать “костыли”, чтобы все работало как нужно. Естественно, чтобы сделать все “как надо”, разработчик должен разбираться не только в React, но и дополнительных инструментах, которые могут потребоваться в работе над конкретным проектом.
Angular или React: что лучше для фронтенд-проектов
Новичку в первую очередь нужно опираться на то, для каких задач лучше всего подходит тот или иной фреймворк и с какими задачами хочет работать сам специалист. Также нужно учитывать особенности изучения выбранного инструмента - некоторые момент легче для освоения в одном фреймворке, другие во втором. Сравним основные категории работы с Angular и React, чтобы вам, как начинающему разработчику, было более понятно, на какой фреймворк обратить внимание.
Важное примечание. К изучению любого из представленных инструментов нужно приступать только после изучения основ фронтенда: HTML, CSS, JavaScript. Вы должны быть в состоянии сверстать сайт, пускай и не очень сложный, и реализовать на нем интерактивный функционал с помощью JavaScript. Если пока ваши навыки не позволяют этого сделать, то лучше изучить необходимую базу, а потом уже браться за освоение дополнительных инструментов, в том числе и фреймворков.
Распространенность фреймворков
В первую очередь перед изучением того или иного фреймворка важно обратить его внимание распространенность на рынке, а также доверие крупных компаний. Первая версия Angular была представлена Google еще в 2010 году и была достаточно сырой. В 2016 году фреймворк был полностью переработан на TypeScript, благодаря чему он смог избавиться от многих проблем, присущей первой версии и быстро “завоевал” свою долю рынка.
Благодаря переработки Angular стал не только более быстрым и удобным в использовании, но и более простым в изучении. Так как это “детище” Google, то почти все сервисы этой компании используют Angular в своей работе. Помимо Google среди крупных игроков IT-рынка в качестве основного рабочего инструмента Angular был выбран компаниями Upwork, PayPal, Forbes и многими другими игроками поменьше.
Немногим позже Angular появился его “конкурент” React - в 2011 году его впервые стали использовать в Facebook, где он и был разработан. В 2013 году исходный код был открыт для сторонних разработчиков. В отличии от Angular React не проходил полную переработку, но все равно изменялся. Не без помощи других разработчиков, конечно.
С того момента, как исходный код фреймворка открыли для мира, инструмент обзавелся большим комьюнити разработчиков и понятной документацией, в том числе и неофициальной. Также React может похвастаться расширенной поддержкой сторонних инструментов, благодаря чему имеющийся функционал можно расширять под нужды проекта. Помимо Meta (бывший Facebook) фреймворк активно используют в своих проектах другие крупные компании: Netflix, BBC, Яндекс, Сбербанк.
У React, если верить статистике загрузки, популярность гораздо выше, чем у Angular. Также проекты, написанные на нем и размещенные на GitHub, получают больше звезд.
Статистика загрузок фреймворков (React отмечен синим, Angular зеленым)
Ситуация на рынке труда
А вот спрос на специалистов у обоих фреймворков примерно одинаков. В середине 2021 года с небольшим отрывом лидировал React. Однако на начало 2022 года часть вакансия была закрыта, благодаря чему позиции сравнялись. По прогнозам паритет на рынке труда будет сохраняться весь следующий год, хотя возможен и некоторый перевес в сторону React. По зарплатам ситуация тоже примерно одинакова, хотя у Angular есть небольшой отрыв, так как специалистов на рынке немного меньше, следовательно, ниже конкуренция и у разработчика есть возможность договориться для себя на чуть более выгодные условия.
По данным Google в среднем за 21 год React-вакансий было немного больше
Области применения
Angular, пускай и уступает React по распространенности, смог занять уверенные позиции в корпоративном сегменте. Это обусловлено тем, что ряд важных архитектурных решений, критически важных для корректного функционирования сложных структур, идут прямо “из коробки”, в том числе и поддержка TypeScript. Однако для некоторых проектов базирование на TypeScript может быть ограничением, например, когда требуется максимально быстро развернуть приложение, используя “шаблонные” наработки.
React имеет немного более простую архитектуру и является в большей степени просто библиотекой, нежели полноценным фреймворком. Он более универсален и подходит для широкого спектра задач, поэтому так и популярен на IT-рынке. Однако он применяется по большей части в небольших и средних проектах. Конечно, React используется для проектирования и поддержки сложных проектов, но может требовать дополнительных настроек для более корректного взаимодействия.
Гибкость React по сравнению с Angular достигается за счет отсутствия решений, навязанных “из коробки”. Однако это означает, что для реализации чего-то сложного потребуется специалист более высокого уровня, умеющий работать со стеком дополнительных технологий. В противном случае в проекте может появится множество “костылей”, негативно влияющих на его работоспособность.
Периодичность выхода крупных обновлений
Оба фреймворка получают обновления с определенной периодичностью и степенью интеграции. У Angular периодичность выхода крупных обновлений, с которыми требуется ознакамливаться в обязательном порядке, примерно раз в полгода. Более мелкие обновления могут выходить и чаще, но они не привносят сколько-нибудь существенных изменений. У Angular также существует зависимость от предыдущих версий и компонентов, поэтому для миграции между версиями требуется подробно ознакомиться со всеми изменениями и нововведениями.
Для удобства работы можно использовать сторонний инструмент-компилятор Ivy. Он указывает на ошибки в коде до их выполнения интерпретатором, плюс, дает расширенное описание каждой ошибки. Также благодаря тому, что Angular имеет в своей основе библиотеку RxJs, проекты, написанные на нем, легче поддаются unit-тестам.
React не выпускает серьезные обновления с какой-то определенной периодичностью, но зато имеет отличную совместимость между версиями, чем не может похвастаться Angular. К приложению также можно подключаться через библиотеки с разными версиями. Однако из-за того, что разработчики React не имеют четких сроков вывода крупных обновлений, иногда бывает сложно подстроиться под изменения.
Простота освоения
Angular освоить сложнее, чем React. Для этого требуется знать JavaScript и jQuery на высоком уровне. Помимо этого требуется хорошо знать особенности самого фреймворка, так как он является более узкоспециализированным. Однако, освоив его на приемлемом уровне, вы сможете выполнять проекты любой сложности, которые поддерживает функционал данного инструмента.
React достаточно просто освоить на базовом уровне, особенно, если вы смогли нормально овладеть JavaScript. Так вы сможете делать небольшие и средние проекты, используя данный фреймворк в качестве основного рабочего инструмента. Однако, если потребуется реализовать что-то более-менее сложное, то базовых знаний React будет недостаточно. Потребуется изучать другие технологии и решения, которые могут корректно работать с React-проектами, а возможно, и вовсе научиться корректно реализовывать “костыли” в продукте.
Заключение
React является более популярным фреймворком, с более низким порогом вхождения и возможностями быстрого масштабирования. Идеально подходит для начинающего веб-разработчика, который работает над небольшими и средними проектами. Однако, если вам предстоит работать со сложными проектами, то лучше обратить внимание на Angular. Он менее популярен, сложнее для изучения на начальных этапах, у него чуть меньше открытых вакансий. Зато средняя оплата чуть выше, а помимо изучения Angular вам не потребуется “распыляться” на другие сторонние библиотеки, чтобы все работало корректно, как это иногда бывает в случае с React.
