Сегодня доступно большое количество интерфейсных фреймворков, каждый из которых имеет свои сильные и слабые стороны. Это затрудняет решение, какой из них вы должны потратить свое время на обучение или какой из них наиболее подходит для вашего следующего проекта.
В этой статье я сравню пять самых популярных интерфейсных
Конечно, я не смогу сказать вам, какой фреймворк лучше: это субъективно и зависит от таких факторов, как ваш текущий уровень владения JavaScript и над каким приложением вы работаете. Что я сделаю, так это быстро познакомлю вас с основными игроками и помогу вам принять обоснованное решение о том, какой фреймворк вам следует начать изучать подробнее.
Как я измерял популярность?
Популярность определялась использованием фреймворка согласно State of JavaScript Survey 2020. В опросе приняли участие 23 765 респондентов, и участники распределились следующим образом:
Реагировать: 80%
Угловой: 56%
Vue.js: 49%
Стройность: 15%
Предварительно: 13%
Я также принял во внимание «осведомленность о структуре» из того же опроса:
Реакция: 100%
Угловой: 100%
Vue.js: 99%
Люди: 88%
Стройный: 86%
И я сопоставил эти результаты с использованием фреймворка согласно опросу разработчиков Stack Overflow, 2020. В нем приняли участие 65 000 респондентов, и это в значительной степени подтверждает выводы State of JavaScript — хотя, к сожалению, в нем не проводится различие между интерфейсными и серверными фреймворками.
Конечно, есть много других показателей, на которые можно опираться, таких как доступность вакансий, звезды GitHub, загрузки npm, GitHub «Используется кем» и так далее. Если вам нужен обзор некоторых из них (по крайней мере, для большой тройки), обратитесь к GitHub Gist.
Для интерактивного просмотра того, как фреймворки соотносятся друг с другом, вы можете обратиться к этому графику из npmtrends.
Как мы определяем интерфейсный фреймворк?
Слон в комнате заключается в том, что самый популярный фреймворк в списке (React) определяет себя как «библиотеку».
Я не хочу слишком углубляться в эту кроличью нору, так как есть полные статьи, посвященные объяснению различий между фреймворками и библиотеками. Для целей этой статьи я буду использовать следующее определение, данное Мартином Фаулером:
Библиотека — это, по сути, набор функций, которые вы можете вызывать, в наши дни обычно организованных в классы. Каждый вызов выполняет некоторую работу и возвращает управление клиенту.
Фреймворк воплощает в себе некий абстрактный дизайн с большим количеством встроенного поведения. Чтобы использовать его, вам нужно вставить свое поведение в различные места в фреймворке либо путем создания подклассов, либо путем подключения ваших собственных классов. Код фреймворка затем вызывает ваш код в этих точках.
На мой взгляд, React больше соответствует поведению фреймворка, чем библиотеки. И хотя технически это не так, разработчики обычно используют ряд инструментов и пакетов из своей экосистемы, чтобы она функционировала как таковая.
1. Реагировать
Сайт: https://reactjs.org/
Гитхаб: https://github.com/facebook/реагировать/
Первоначально выпущенный Facebook в 2013 году, React, безусловно, является самым популярным интерфейсным
Основная цель React — создавать интерактивные пользовательские интерфейсы из многократно используемых компонентов. Он использует JSX (расширение синтаксиса для JavaScript) для создания шаблонов и реализует модель одностороннего потока данных для заполнения компонентов данными. Всякий раз, когда данные компонента изменяются, React использует свою виртуальную модель DOM для быстрого и эффективного обновления страницы.
Инструменты разработчика хороши. Команда React создала и поддерживает интерфейс командной строки (Create React App) для быстрого и простого создания нового проекта, а также расширение инструментов разработчика для Chrome и Firefox. Существует очень много сторонних пакетов для выполнения широкого круга задач (таких как маршрутизация, работа с формами и анимация), а также несколько фреймворков на основе React, таких как Next.js и Gatsby.
React придерживается философии «Узнай один раз, пиши где угодно». Он может работать с мобильными приложениями с помощью React Native и может выполнять рендеринг на сервере с помощью Node. Это означает отличную поддержку SEO, которая будет только улучшаться по мере того, как
Одно из основных замечаний в адрес React заключается в том, что он слишком беспристрастен: он касается только уровня представления вашего приложения, а все остальное оставляет на усмотрение разработчика. Некоторым людям нравится свобода, которую это предлагает, но другие — особенно новые разработчики — могут быть ошеломлены неструктурированным подходом к кодированию приложения React, который он поощряет.
React имеет умеренную кривую обучения. Он поощряет использование различных парадигм функционального программирования (таких как неизменяемость и чистые функции), а это означает, что разработчикам было бы неплохо получить базовое представление об этих концепциях, прежде чем пытаться создавать
Если вас устраивает непредвзятый подход React и тот факт, что он оставляет значительную часть процесса разработки разработчику, то это отличный выбор для приложений любого размера, управляемых данными.
2. Угловой
Сайт: https://angular.io/
Гитхаб: https://github.com/angular/angular/
Angular — это предложение Google в области интерфейсных фреймворков. Он начал свою жизнь в 2010 году как AngularJS (или Angular 1) и сразу же стал хитом, прежде всего потому, что это был первый фреймворк, позволивший разработчикам создавать то, что мы сейчас называем одностраничными приложениями.
Чтобы решить проблемы производительности и проблемы создания крупномасштабных приложений JavaScript, Google переписал AngularJS с нуля и в 2016 году выпустил Angular 2 (сейчас просто Angular). Между ними не было простого пути миграции, и, следовательно, AngularJS и Angular стали двумя отдельными фреймворками. Срок службы AngularJS истек, и его нельзя использовать для новых проектов.
Что касается Angular, то это своего рода тяжеловес в мире интерфейсных фреймворков. Он используется в производстве такими компаниями, как Google и Microsoft, поэтому определенно хорошо протестирован в боевых условиях. В Интернете также доступно множество ресурсов (например, отличный учебник Tour of Heroes), а на Stack Overflow есть большое количество вопросов, связанных с Angular.
В отличие от React, который обрабатывает только уровень представления, Angular предлагает комплексное решение для создания одностраничных клиентских приложений. Компоненты Angular могут реализовывать двустороннюю привязку данных, что позволяет им прослушивать события и обновлять значения одновременно между родительским и дочерним компонентами. Шаблоны — это фрагменты HTML, которые позволяют использовать специальный синтаксис для использования многих функций Angular. TypeScript является основным языком разработки на Angular, что делает фреймворк особенно подходящим для приложений корпоративного уровня.
Инструмент хороший. Angular предлагает отточенный интерфейс командной строки для инициализации, разработки, формирования и поддержки приложений Angular. Также доступны расширения Chrome и Firefox Dev Tools для отладки приложений Angular. По умолчанию в Angular есть решение для решения многих распространенных задач, таких как формы и маршрутизация, но
На мой взгляд, у Angular самая крутая кривая обучения из всех перечисленных здесь фреймворков. Разработчики должны быть знакомы с TypeScript, а также с такими понятиями, как декораторы и внедрение зависимостей, чтобы иметь возможность эффективно работать с фреймворком. По этой причине это не лучший выбор для новых разработчиков. Скорее, он больше подходит для создания крупномасштабных приложений в составе команды.
Если вы хотите получить полное изложение различий между React и Angular, см. «React vs Angular: подробное сравнение «.
3. Vue.js
Обратите внимание, что эта статистика предназначена для Vue v2. Доступна версия 3, но ее необходимо установить как vue@next.
Сайт: https://vuejs.org/
Гитхаб: https://github.com/vuejs/vue
Третьим в нашем списке является Vue.js, интерфейсная среда
Vue разрабатывается и поддерживается основной командой из примерно двадцати разработчиков, и хотя он не поддерживается напрямую одним из
Одним из преимуществ Vue является то, что он разработан с нуля, чтобы его можно было постепенно адаптировать. Это означает, что вы можете добавить Vue на обычные
Инструмент вокруг Vue превосходен. Существует официальный интерфейс командной строки для создания и разработки приложений Vue, а также расширение devtools, доступное как для Chrome, так и для Firefox, для помощи в отладке. В отличие от React, Vue предлагает официальные пакеты для маршрутизации и управления состоянием, которые представляют собой приятно стандартизированный способ работы. Существует также широкий спектр сторонних инструментов, а также фреймворков, основанных на Vue, таких как Nuxt.js и Gridsome (ответ Vue на React Next.js и Gatsby).
Входной барьер для работы с Vue низок, отчасти
Vue — отличный выбор для приложений любого размера. Он подходит для менее опытных разработчиков, а также для тех, кто предпочитает немного больше структуры и указаний от их фреймворка.
4. Стройный
Сайт: https://svelte.dev/
Гитхаб: https://github.com/sveltejs/svelte/
Выпущенный Ричем Харрисом в 2016 году, Svelte является относительным новичком на сцене фреймворков и использует другой подход к созданию
Svelte преобразует ваше приложение в идеальный JavaScript во время сборки, а не интерпретирует код вашего приложения во время выполнения. Это означает, что вы не платите за производительность абстракций фреймворка и не подвергаетесь штрафу при первой загрузке приложения.
Другими словами, он избегает концепции виртуального DOM в пользу компиляции вашего кода в небольшие стандартные модули JavaScript во время сборки, которые будут обновлять DOM при каждом изменении состояния вашего приложения. Как вы можете себе представить, это позволяет создавать быстрые приложения с небольшими размерами. Svelte также изначально поддерживает управление состоянием и предлагает возможность быстрого реагирования.
К сожалению, инструменты в настоящее время являются
Хотя кривая обучения Svelte очень низка, сообщество
Svelte — хороший выбор для небольших проектов, в основном
5. Эмбер.js
Сайт: https://emberjs.com/
Гитхаб: https://github.com/emberjs/ember.js/
Я использую Ember в качестве последнего фреймворка в этой статье, потому что он существует с первых дней фреймворков переднего плана. Первоначально он был выпущен в 2011 году, но сохраняет постоянную популярность среди разработчиков:
Ему почти десять лет, и он появился задолго до React, Vue, Svelte и всех остальных. Фреймворк никогда не был в авангарде ажиотажа перед интерфейсом, но незаметно позволял командам стабильно и устойчиво поставлять продукты — среди них Qonto и CLARK, два из 50 лучших
Подобно Angular, Ember использует подход к разработке приложений, включающий батареи, и поставляется со всем, что вам нужно для создания современного внешнего приложения JavaScript. Это варьируется от решения маршрутизации до уровня данных и полнофункциональной современной системы тестирования, встроенной в каждое приложение по умолчанию. Он следует шестинедельному циклу выпуска (когда выпускается новая второстепенная версия) и имеет твердую приверженность стабильности. Это может стать настоящим плюсом для тех разработчиков, которые не могут позволить себе постоянно переписывать свои приложения, чтобы не отставать от быстро развивающихся фреймворков.
Вокруг Ember возник широкий спектр инструментов, от Ember CLI — официального способа создания, сборки, тестирования и обслуживания приложений Ember — до Ember Inspector, официально поддерживаемой надстройки браузера, которая позволяет вам проверять объекты Ember. в вашем приложении. Также доступен ряд сторонних библиотек, и CLI предоставляет общий формат (он же Ember Addons) для их распространения.
Сообщество Ember не такое большое, как у React и других, но его участники очень активны и имеют форумы и сервер Discord, где вы можете попросить помощи в решении проблем с кодированием. Ember является наиболее самоуверенным из перечисленных здесь фреймворков и использует подход «соглашение важнее конфигурации». Это, в сочетании с тем фактом, что разработчикам необходимо быть знакомыми с более продвинутыми концепциями, такими как сериализаторы и адаптеры, делает кривую обучения от умеренной до крутой.
Ember, вероятно, не лучший выбор для начинающих или для небольших проектов. Он имеет много движущихся частей и не предлагает большой гибкости в том, как вы структурируете вещи. Но он действительно хорош, когда используется для создания многофункциональных, сложных интерфейсных приложений в составе команды.
Вывод
Итак, вот оно, мое сравнение пяти самых популярных интерфейсных фреймворков на рынке сегодня. Хотя это не был исчерпывающий обзор возможностей каждого фреймворка, я надеюсь, что он дал вам представление о том, кто из крупных игроков может подойти для вашего следующего проекта или является хорошим кандидатом для дальнейшего изучения.