Сравнение Angular, React и Vue для небольших веб-приложений

Абхай ШриваставЗаблокированоUnblockFollowFollowing

8 января

Введение

Если вы фронтенд-разработчик, в какой-то момент своей карьеры вы могли выбрать фреймворк JavaScript для своего проекта. И, скорее всего, вариантов было бы меньше трех.

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

• Кончик : Объедините свою компонентную структуру с такими инструментами, как Кусочек чтобы превратить ваши компоненты в стандартные блоки, которыми вы можете легко делиться, использовать и синхронизировать в своих проектах и ​​приложениях, чтобы строить быстрее. Попробуйте.

Bit — совместное использование и сборка с использованием компонентов кода
_Bit помогает вам обмениваться, находить и использовать компоненты кода между проектами и приложениями для создания новых функций и… _bitsrc.io

Образец заявления (Фильмы 2018 года)

Приложение «Фильмы 2018 года»

Описание Проекта Приложение делает вызов API, чтобы получить фильмы со словом «Любовь» в названии в 2018 году и отображает их в табличном формате. Вы можете сортировать фильмы по году и названию. Ниже приведены ссылки на приложение, размещенное на Github.

Угловой
Ссылка на сайт:

Реагировать
Ссылка на сайт:

Вью
Ссылка на сайт:

Критерии сравнения

Мы сравним эти приложения по приведенным ниже критериям.

• Размер пакета JS: Размер пакета Javacript — единственный ресурс, который различается для приложения в каждой среде. Изображения, CSS и другие ресурсы одинаковы.
• Первая содержательная краска: First Contentful Paint (FCP) измеряет время от навигации до момента, когда браузер отображает первый бит контента из DOM.
  Дополнительная информация о FCP:

Приступим к сравнению.

Размер пакета JS

Размер пакета js в Angular почти вдвое больше, чем в React и Vue.
Размеры пакетов React и Vue очень близки, но с учетом того, что у Vue самый легкий пакет, Vue является победителем.

Первая содержательная краска (используя Маяк)

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

Настройки регулирования процессора и сети : Быстрый 3G, 4-кратное замедление процессора

Угловой

Аудит Angular Lighthouse

Реагировать

Аудит React Lighthouse

Вью

Аудит маяка Vue

Вью а также Реагировать работал намного лучше с 1,0 с как время первой отрисовки содержимого, чем Угловой х 1,5 с

Подробнее о маяке

Производительность времени загрузки (с использованием инструментов разработчика Chrome)

Это время, необходимое для первого рендеринга, без учета времени ожидания API.

Настройки регулирования процессора и сети : Быстрый 3G, 4-кратное замедление процессора

Резюме угловой записи

Резюме записи реакции

Сводка записи Vue

Исключая время простоя из графика, ниже указано время, необходимое для первого рендеринга.

React и Vue очень близки, но Angular потребовал почти вдвое больше времени для первой отрисовки. Здесь React незначительно выигрывает у Vue на 10 мс.

Подробнее об анализе производительности нагрузки с помощью инструментов разработчика Chrome:

Кривая обучения

Добавление еще одного критерия для сравнения. Это исключительно мое мнение как разработчика. Vue легче всего изучить, React требует немного времени для изучения, а Angular имеет самую крутую кривую обучения. Если бы мне пришлось заказывать с точки зрения легкость обучения. Они будут такими, как показано ниже.

Vue > Реагировать > Угловой

Вывод

Принимая во внимание каждую метрику, я выбираю Vue как победителя с самым легким размером пакета, более быстрым «первым временем отрисовки контента» и самым простым в освоении.
Если вы хотите провести собственный анализ, ниже приведены исходники и ссылки на приложение.

Угловой
Код: https://github.com/Abhay07/movieAppAngular
Веб-сайт:

Реагировать
Код: https://github.com/Abhay07/movieAppReact
Веб-сайт:

Вью
Код: https://github.com/Abhay07/movieAppVue
Веб-сайт:

Пожалуйста, не стесняйтесь комментировать ниже и спрашивать меня о чем угодно! Я был бы рад поговорить. Спасибо за чтение