Сегодня существует большое количество интерфейсных фреймворков, каждый из которых обладает своими сильными и слабыми сторонами.
В этой статье я сравню пять самых популярных интерфейсных фреймворков JavaScript.
Скачать исходники для статьи можно ниже
На конец 2020 года популярность Front-end фреймворков JavaScript следующая:
1. React
2. Angular
3. Vue.js
4. Svelte
5. Ember.js
1. React
Сайт фреймворка: “reactjs.org/”
GitHub: “github.com/facebook/react/”
React разработан и поддерживается компанией Facebook и используется в их собственных продуктах, включая Instagram и WhatsApp. Это свидетельствует о том насколько мощным фреймворком является ReactJS – можно создать крупномасштабные приложения с высокой производительностью.
Также React используется в производстве такими компаниями, как Netflix и Airbnb.
ReactJS имеет огромное сообщество пользователей и громадное количество учебников и библиотек (наборов компонентов).
Основная цель React – создание интерактивных пользовательских интерфейсов из повторно используемых компонентов. Он использует JSX (расширение синтаксиса JavaScript) для шаблонизации и реализует одностороннюю модель потока данных для заполнения компонентов данными. Всякий раз, когда данные компонента изменяются, React использует свой виртуальный DOM для быстрого и эффективного обновления страницы.
Инструментарий разработчика хорош. Команда React создала и поддерживает CLI (Create React App) для быстрого и легкого создания нового проекта, а также расширение инструментов разработчика как для Chrome, так и для Firefox. Существует очень много сторонних пакетов, доступных для выполнения широкого спектра задач (таких как маршрутизация, работа с формами и анимация), а также несколько фреймворков на основе React, таких как Next.js и Гэтсби.
React подписывается на философию “Учись один раз, пиши где угодно”. Он может включать мобильные приложения с помощью React Native, и он может отображать на сервере с помощью Node.
React имеет умеренную кривую обучения (средняя сложность обучения). Он поощряет использование различных парадигм функционального программирования (таких как неизменность и чистые функции), а это означает, что разработчикам было бы неплохо иметь базовое представление об этих концепциях, прежде чем пытаться построить что-либо серьезное.
2. Angular
Веб-сайт: “angular.io”
GitHub: “github.com/angular/angular/”
Angular – это предложение Google в области front-end фреймворка. Он начал свою жизнь в 2010 году как AngularJS (или Angular 1) и сразу же стал хитом, прежде всего потому, что это был первый фреймворк, позволивший разработчикам создавать то, что мы сейчас называем одностраничными приложениями
Чтобы решить проблемы производительности и проблемы создания крупномасштабных JavaScript-приложений, Google переписала AngularJS с нуля и в 2016 году выпустила Angular 2 (в настоящее время просто Angular). Между ними не было простого пути миграции, и поэтому AngularJS и Angular стали двумя отдельными фреймворками. AngularJS сейчас находится на исходе срока службы и не должен использоваться для новых проектов.
Что касается Angular, то это что-то вроде тяжеловеса в мире front-end framework. Он используется такими компаниями, как Google и Microsoft в производстве, поэтому, безусловно, хорошо протестирован.
На мой взгляд, Angular имеет самую крутую кривую обучения из всех перечисленных здесь фреймворков (сложный для обучения). Разработчики должны быть знакомы с TypeScript, а также с такими понятиями, как декораторы и внедрение зависимостей, чтобы иметь возможность эффективно работать с фреймворком. По этой причине это не очень хороший выбор для новых разработчиков. Скорее, он больше подходит для создания крупномасштабных приложений как часть команды.
3. Vue.js
Веб-сайт: “vuejs.org/”
GitHub: “github.com/vuejs/vue”
Третье место в нашем списке Vue.js, интерфейсный фреймворк Model–view–viewmodel (MVVM), используемый для создания пользовательских интерфейсов и одностраничных приложений. Он был написан Эваном Вы и увидел свой первый релиз в 2014 году. Vue имеет очень преданных последователей разработчиков (например, у него больше звезд GitHub, чем React), что, возможно, связано с тем, что он так хорошо вписался в пробел, оставленный AngularJS, когда он был переписан, чтобы стать Angular.
Vue разрабатывается и поддерживается основной командой из примерно двадцати разработчиков, и хотя он напрямую не поддерживается одним из интернет-гигантов, он используется в производстве такими компаниями, как Alibaba, Gitlab и Adobe. Vue обладает, пожалуй, лучшей документацией среди всех фреймворков в этом списке, а его форумы-отличный ресурс для получения помощи в решении проблем кодирования. Vue также популярен в мире PHP и поставляется как часть фреймворка Laravel.
Один из пунктов продажи Vue заключается в том, что он разработан с нуля, чтобы быть постепенно адаптируемым. Это означает, что вы можете добавить Vue в обычные веб-страницы, чтобы улучшить их функциональность, или вы можете пойти ва-банк и использовать его для создания полномасштабного одностраничного приложения. Vue.js использует синтаксис шаблона на основе HTML,который позволяет легко привязывать атрибуты к базовой модели данных. Он также предлагает однофайловые компоненты, которые хранят шаблон, код JavaScript и scoped CSS в одном файле.
Инструменты вокруг Vue превосходны. Существует официальный CLI для создания и разработки приложений Vue, а также расширение devtools, доступное как для Chrome, так и для Firefox, чтобы помочь в отладке. В отличие от React, Vue предлагает официальные пакеты для маршрутизации и управления состоянием, что представляет собой приятный стандартизированный способ ведения дел. Существует также широкий спектр сторонних инструментов, а также фреймворки, основанные на Vue, такие как Nuxt.js и Gridsome (ответ Vue на React Next.js и Гэтсби).
Барьер для входа для работы с Vue низкий, отчасти из — за его инкрементального подхода к созданию приложений, а отчасти из-за того, что он основан на HTML, CSS и JavaScript-технологиях, которые должны быть знакомы любому разработчику.
Vue – отличный выбор для приложений любого размера. Он подходит для менее опытных разработчиков, а также для тех, кто предпочитает немного больше структуры и руководства из своего фреймворка.
4. Svelte
Веб-сайт: “svelte.dev/”
GitHub: “github.com/sveltejs/svelte/”
Выпущенный Ричом Харрисом в 2016 году, Svelte является относительным новичком на фреймворковой сцене и использует другой подход к созданию веб-приложений, чем что-либо еще в этом списке.
Svelte избегает концепции виртуального DOM в пользу компиляции кода в небольшие, ванильные модули JavaScript во время сборки, которые будут обновлять DOM всякий раз, когда состояние вашего приложения меняется.
Хотя кривая обучения Svelte очень низка, сообщество все еще невелико, и оно еще не набрало такой же популярности, как три лучших фреймворка, упомянутых здесь. Но он используется в производстве такими компаниями, как IBM и New York Times, и это определенно структура, за которой стоит следить в ближайшие месяцы и годы.
Стройность-хороший выбор для небольших проектов, во многом из-за ее незрелости. Однако ситуация меняется. SvelteKit находится в публичном бета тестировании, и сообщество продолжает расти и процветать. Хотя Стройная в настоящее время является чем-то вроде новичка, вы должны следить за этим пространством …
5. Ember.js
Сайт: “emberjs.com/”
GitHub: “github.com/emberjs/ember.js/”
Я показываю Ember в этой статье как окончательный фреймворк, потому что он существует с первых дней front-end фреймворков. Он был первоначально выпущен в 2011 году, но сохраняет постоянную популярность среди разработчиков.
Как и Angular, Ember использует более комплексный подход к разработке приложений и поставляется со всем необходимым для создания современного интерфейсного приложения JavaScript. Это может быть как решение для маршрутизации, так и уровень данных, а также полнофункциональный современный тестовый жгут, встроенный по умолчанию в каждое приложение. Он следует шестинедельному циклу выпуска (когда выходит новая второстепенная версия) и имеет твердую приверженность стабильности. Это может стать настоящим плюсом для тех разработчиков, которые не могут позволить себе постоянно переписывать свои приложения, чтобы не быть оставленными более быстрыми фреймворками.
Вокруг Ember появился широкий спектр инструментов: от Ember CLI — официального способа создания, сборки, тестирования и обслуживания приложений Ember — до Ember Inspector, официально поддерживаемого дополнения браузера, которое позволяет проверять объекты Ember в вашем приложении. Существует также ряд сторонних библиотек, и CLI предоставляет общий формат (он же Ember Addons) для их распространения.
Сообщество Ember не так велико, как у React и других.
Эмбер, вероятно, не лучший выбор для начинающих или для небольших проектов. Он имеет много движущихся частей и не предлагает большой гибкости в том, как вы структурируете вещи. Но он сияет, когда используется для создания богатых, сложных интерфейсных приложений в составе команды.
PS: Красивых и прибыльных Вам сайтов!