Разработчики, начинающие новый проект, выбирают фреймворк JavaScript (Vue.js, React или Angular) для своего сайта. Между этими технологиями имеется разница, достаточно весомая. Однако любой из этих вариантов может быть использован. Поэтому главным вопросом становится максимальная эффективность.
Публичной информации о масштабах использования фреймворка не существует. Но проанализировав вакансий на Indeed.com дал интересное положение этих технологий.
1 место - React 78,1%
2 место - Angular 21%
3 место - Vue.js 0,8%
4 место - 0,1% без уточнения технологии
Согласно опросу, StackOverflow показал несколько другие числа. 67% проголосовали за React, а 42% разработчиков дали «голос» за Angular.
React кажется более популярным. Но значит ли это, что он более эффективен? Нет, его популярность полностью зависит от использования среды для крупных проектов, по типу Facebook и Instagram. Также, у Vue.js больше «звезд» на Github, чем у остальных.
Итак, нам следует перестать опираться на чужой опыт и сравнить JavaScript-фреймворки по реальным показателям, которые могут использовать разработчики.
1. Ренденринг и вывод готового результата.
Большинство фреймворков JavaScript работают стабильно, и их стоит сравнить по рендерингу. Текущие архитектуры предлагают два типа отрисовки: клиентскую (использует мощность вашего компьютера для отображения страницы) или представление, отображаемое серверной стороной.
DOM - Document Object Model - модель документа представленная объектами, который позволяет вам читать, изменять содержимое, дизайн и структуру HTML-документа. Каждый фреймворков обрабатывает DOM уникальным образом. Это влияет на отображение итоговой страницы на мониторе пользователя.
Vue и React генерируют клона DOM, затем выполняют операции с ним и сравнивают результат с оригиналом. В итоговом документе (например, на экране пользователя) только различия заменяются на странице.
Это сильно ускоряет рендеринг страницы. Это сокращает объём загружаемых данных, что сильно заметно на мобильных телефонах.
Angular фреймворк 1.x и более поздние радикально меняют подход к DOM манипуляциям. Здесь он разделен на два потока. Браузер (клиент) «отвечает» за вывод DOM. Сервер отвечает за генерацию команд, предоставление кода и загрузку услуг.
Однако это не означает, что отрисовка осуществляется клиентом. Задача визуализации, как и раньше принадлежит серверу. Так что поисковая оптимизация не нарушается с применением этого фреймворка. При индексировании поисковые системы выводят нужные страницы.
2. Компонентная структура
React не чистый фреймворк. Это «измененная» библиотека в режиме модель-представление-контроллер (MVC), где модель отвечает за хранение данных. Отрисовка производится представлением, а контроллер распознает действия пользователя, и говорит модели обрабатывать изменения.
Angular и Vue принадлежат уже к фреймворкам.
Если архитектура проекта основана на React, это предварительное говорит нам о:
- необходимость поиска и использования сторонних библиотек для возникающих задач
- разработка специфических программных функций для специальных библиотек
- сложность привлечения разных разработчиков к разным программам связана с различиями в используемых библиотеках для каждого проекта.
Таким образом, больше времени требуется на реализацию низкоуровневой архитектуры API (интерфейс приложения - набор команд). Требуется слишком много настроек.
При выборе готовых решений (Vue.js и Angular) не возникает проблем с выбором или конфигурацией библиотек для разных целей. API высокого уровня вносит обратную совместимость для всех библиотек.
Это позволяет сторонним разработчикам участвовать в проектах без обширных исследований используемой архитектуры. В этом и заключается популярность многофункциональных фреймворков.
3. Типы зависимостей и направление
React и Vue поддерживают исключительно одностороннюю передачу данных. То есть каждый программный объект, ведя к последнему шагу, и не требует каких-либо действий со стороны пользователя.
Однако React поддерживает хранение состояние и его копирование, чтобы свойства зарегистрированного объекта можно было восстановить на других устройствах. Изображение остается таким же, пока программа открыта и отображается статус компонента. Таким образом, на экранах обоих устройств будет наблюдаться одинаковая «картинка» (результат рендеринга).
Фреймворк Vue.js устроен немного иначе. JS также односторонний. Но компонент работает с шаблоном, и в результате получается чистый html. Поддерживает JSX. Это облегчает переход с подобных библиотек.
Когда вы создаете команды фреймворка, логика процесса автоматически создаётся. Достаточно добавить необходимые команды для получения требуемого функционала. Например, вам нужно создать блочный элемент, который можно перемещать по странице. Для этого, добавьте команду перетаскивания к свойствам объекта, и вы получите требуемый результат.Angular слегка отличается логикой работы. Да, есть свойственные вещи, как и в Vue.js, но взаимодействия с объектами описаны в синтаксисе модуля, в сервисах.
Модульная структура облегчает создание больших приложений.Модуль предназначен для обработки многих задач с аналогичными аспектами. Таким образом, окончательный объем кода меньше, а быстрота выполнения растет.
Поддержка MVVM (модель-представление-модельпросмотра)
Можно редактировать различные функции. Некоторые программные функции, использующие один набор данных, определяют направление двусторонней передачи данных. Процедуры могут запускать новые процессы.
4. Совместимость со старыми стандартами
Этот пункт олицетворяет возможность позволить создателям программного обеспечения обновлять свою структуру кода, добавляя свежие модули и библиотеки.
Angular
Полноправность названия "фреймворк" обуславливает полную зависимость от старых компонентов и версий. Нельзя напрямую переключаться с 4.0 на 5.0, необходимо скачивать все обновления версий. Это периодически излишне увеличивает размер программы, но интересно, что Angular 3.0 не существует. За вторым поколением сразу шло четвертое.
React
Библиотека. Полностью совместима между версиями. Вы можете добавлять различные версии сторонних библиотек, включая устаревшие версии.
Vue.js
Progressive Framework (со слов Эвана Юна, ведущего разработчика Vue.js). Модульная система такая же как и у React, но включает все элементы JS Framework, с полной обратной совместимостью.
5. «Техническая помощь» - документация и сообщество
При выборе той или иной архитектуры нельзя упускать из виду поддержку сообщества разработчиков. В конце концов, даже простые задачи могут быть трудными.
Когда проекты усложняются, разработчики часто используют техническую документацию для выбранной ими среды в поисках совета сообщества. Итак, вы должны сравнить это с «поддержкой» каждого JS-фреймворка.
React:
«Техническая поддержка» среды React довольно сложна. С другой стороны, сообщество состоит из тысяч разработчиков из разных стран. Это полностью снимает языковой барьер и позволяет получать советы, получить помощь можно на разных языках, включая английский, русский и китайский.
Но частое появление библиотек с открытым исходным кодом на основе React оказывается недостатком системы. Документацию, описывающую процесс использования недавно опубликованных библиотек, функций и спецификаций, найти сложно.
Новые модули - обычное дело. Разработчики создают библиотеки для решения некоторых задач в своих проектах. Затем пишут небольшое руководство и размещают его в сети.
Vue.js:
Существует подробная документация по этой структуре, но любители этой среды не ссылаются на то, что у «руководства» нет официальных аналогов на английском или русском языках.
Несмотря на большую популярность Vue.js на Habr или Gitub, сообщество пользователей относительно невелико. Даже jQuery используется большим количеством разработчиков, чем Vue.js, особенно по сравнению с Angular или React.
Ответ на оперативные вопросы обычно занимает несколько дней и не факт что он вообще будет получен.
Однако, стоит отметить, что чат на официальном веб-сайте программы относительно прост в использовании.
Angular:
В отличие от Vue.js и React, тут имеется подробная документация и уроки. Итак, вам не нужна помощь сообщества, чтобы найти ответ.
Этим фреймворком пользуются сотни тысяч разработчиков. Разработчики всегда могут задать вопросы в рамках «Howto», и им не нужно искать официальный сайт этого проекта. Вы можете попросить помощи на других сайтах к примеру Stackoverlow и Ответы@mail.ru.
С большой вероятность найдется более опытный человек, который сможет помочь вам.
Итоги
Конечно, объективно сравнивать факторы сложно. Аналитика помогает новым разработчикам выбрать платформу. Резюме:
Если вы хотите быстро научится, вам нужно выбирать между Vue.js и React.Юзеры Angular и Vue могут с легкостью перейти на Vue.js, поскольку там почти чистый HTML, а методики совпадают с другими фреймворками.
Если вы планируете большой проект, вам следует подумать об использовании Angular как основа для максимальной гибкости.
