На какой JavaScript-фреймворк стоит потратить время?

В чем разница между Angular, Vue.js, React и Svelte? Не с точки зрения философии, лежащей в основе этих фреймворков, и не с точки зрения их различий с точки зрения опыта разработчиков, а с точки зрения суровой и холодной истины чисел?

Чтобы выяснить это, мы будем полагаться на опросы Stack Overflow и State of JavaScript, а также на тест производительности JavaScript. Это позволяет нам объективно сравнивать эти структуры по разным критериям.

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

По каждому из этих критериев я назначу в общей сложности 10 баллов, и мы посмотрим, какие уроки мы сможем извлечь в конце.

Уровень использования.

Если мы посмотрим на сервер Stack Overflow:

  • 40% разработчиков использовали React
  • 22% использовали угловой
  • 19% использовали Vue
  • 3% использовали Svelte

Опрос «Состояние JS» показывает аналогичные цифры, хотя и увеличенные за счет того факта, что опрос ориентирован на разработчиков JS: React используют 80% разработчиков JS, Angular — 54%, Vue.js — 51%, а Svelte — 51%. 20%.

Angular и Vue.js имеют примерно одинаковую скорость использования, React значительно опережает, а Svelte значительно отстает. В результате React получает 5 баллов, Vue.js и Angular — по 2,5 балла, а Svelte — 0 баллов.

Удовлетворенность разработчиков (и DX)

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

Опрос Stack Overflow показывает уровень удовлетворенности Svelte, лидера среди всех фреймворков, на уровне 71%.

Затем идет React с очень почетной оценкой 69%. Затем Vue с 64%. И, наконец, немного позади, у нас есть Angular с 55%, так что почти баланс между теми, кто любит, и теми, кто ненавидит.

Опрос State of JavaScript говорит о том же: уровень удовлетворенности 90% для Svelte, 84% для React, 80% для Vue.js и только 45% для Angular.

Таким образом, с точки зрения привлекательности Svelte впереди, тогда как React и Vue.js лишь немного отстают. Поэтому я даю 4 балла Svelte и 3 балла React и Vue.js.

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

Теперь посмотрим на выступление.

Для этого воспользуемся инструментом JavaScript Framework Benchmark. Он несовершенен, он измеряет вещи, которые не обязательно имеют прямое применение в реальном мире, но все же позволяет нам извлечь некоторые интересные уроки.

Для каждого измерения это позволяет нам сравнивать фреймворки с ванильным JavaScript.

Этот тест разделен на 3 предмета: время выполнения, используемая память и время запуска.

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

Здесь я назначу 10 баллов по каждому из этих трех критериев, а затем усредню их, чтобы получить общую относительную оценку эффективности.

Скорость исполнения

Если мы начнем со времени выполнения, то во многих из этих тестов Svelte впереди, Vue.js чуть позади, а React и Angular отстают. Итак, 5 баллов у Svelte, 4 у Vue и 0,5 у React и Angular.

Использование памяти

Что касается используемой памяти, Svelte выделяется из общей массы, а Vue немного опережает React и Angular, которые идут ноздря в ноздрю.

Итак, 6 баллов у Svelte, 3 у Vue и 0,5 у React и Angular.

Время запуска

С точки зрения скорости запуска Svelte работает очень хорошо. Vue.js чуть меньше, а React и Angular отстают.

На этот раз результаты более однородны, чем в предыдущих тестах, поэтому я дам 4 балла Svelte, 3 балла Vue.js и 1 балл Angular и React.

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

С точки зрения производительности итоговые оценки таковы: 5 баллов за Svelte, 3,5 балла за Vue.js и 0,5 балла за React и Angular.

Заработная плата

Сколько (в среднем) зарабатывают разработчики на каждой из этих 4 технологий.

Согласно Stack Overflow, средние зарплаты для каждого фреймворка следующие: Angular — 49 000 долларов США, Vue — 50 000 долларов США, React — 58 000 долларов США и, наконец, Svelte — 62 000 долларов США.

Angular и Vue.js находятся в одном диапазоне, а React и Svelte значительно опережают Svelte. Итак, скажем, по 1,5 балла за Angular и Vue, по 3 балла за React и 4 балла за Svelte.

Окончательный счет

Это дает нам следующие окончательные итоги с 40 очками:

  • Угловой: 4,5
  • Вью: 10,5
  • Реагировать: 12
  • Стройный: 13

Что мы можем из этого заключить?

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

Этот вид сочетает в себе удовлетворенность пользователей (слева направо) с уровнем использования (снизу вверх), и я нахожу этот подход интересным, он даже показывает траектории во времени.

Уровень удовлетворенности Svelte составляет 90% от первых пользователей, которые рады опробовать новые технологии.

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

Если мы посмотрим на 4 квадранта использования и удовлетворенности: Angular используется умеренно, но также очень мало ценится. Vue.js ценится, но не обязательно используется, и скорость его оценки, кажется, снижается по мере использования, как если бы он терял скорость. React очень часто используется и ценится, и это тем более примечательно, что… легко полюбить фреймворк, который вы редко используете, а тем более, когда тратите время на работу над ним.

И Svelte растет, все больше и больше людей открывают для себя и ценят его, но он все еще очень молод. Итак, что я рекомендую изучать?

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

И если вы чувствуете себя авантюрно, я бы порекомендовал вам также посмотреть как работает Svelte.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.