Всем привет! На канале уже совсем скоро будет материал по JS-фреймворкам, давайте же кратко пройдёмся по самым популярным из них и поймём, в чём заключаются преимущества и особенности каждого.

Что такое фреймворк

Для тех, кто новичок в мире программирования, фреймворк кажется страшным словом, которое обозначает что-то сложное и непонятное. На деле же фреймворк очень похож по своей сути на библиотеку, он предоставляет какой-то готовый функционал, чтобы разработчики могли быстрее выполнять поставленные перед ними задачи. Разница, однако, есть. Фреймворк заставляет программиста придерживаться какой-то определённой структуры кода, соблюдать некоторые принципы и правила.

Какие JS-фреймворки есть

По сути, существует только один настоящий фреймворк для JS, это Angular. Однако так повелось, что библиотеки Vue и React тоже стали называть фреймворками. Сложно сказать почему так, но мы тоже не будем нарушать традиции :)

React, Vue и Angular и являются самыми современными и популярными технологиями для написания пользовательских интерфейсов. Безусловно, появляются различные конкуренты, например, Ember или Svelte, которые тоже находят своих поклонников, однако сегодня мы разберём только вышеназванные (по ним больше вакансий).

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

React

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

Лично мне кажется, что при написании приложений на React, ты всё также остаёшься в мире JavaScript, в то время как некоторые другие технологии создают некое ощущение того, что вы пишете на совершенно другом языке программирования. Несомненно, абстракции это хорошо, однако – в меру.

Пример кода, написанного c помощью React, из моего пет-проекта:

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

React – мой личный выбор из всех этих трёх технологий. Он мне ближе по многим аспектам, в том числе по его модульности и расширяемости, также мне очень нравится стиль, в котором описывается отображение компонентов (JSX-синтаксис)

Совсем скоро выйдет первая статья, в которой мы рассмотрим понятие компонента в React.

Angular

Фреймворк, который разработан небезызвестной компанией Google, обладает несхожим подходом по сравнения с React-ом, он не даёт столько свободы в написании кода, что во многих случаях является преимуществом, так как каждый проект, написанный на Angular, практически не отличается от другого. В отличии от модульного подхода React-а он включает в себя всё сразу "из коробки". Хочешь сделать анимации? Тебе не нужно дополнительно ничего устанавливать. Хочешь валидировать ввод пользователя в форму? Без паники – всё уже есть.

Однако одним из ключевых моментов для многих будет являться тот факт, что Angular использует не JavaScript, a TypeScript. Для тех, кто знает TypeScript, это несомненно плюс. А вот для тех, кто сталкивается с ним впервые, – сомневаюсь.

Также можете видеть пример кода, написанного с использованием Angular:

Безусловно, если ваше приложение действительно большое, то Angular – отличная опция.

Vue

Vue – относительно новый игрок на рынке JS-фреймворков, однако он очень активно набирает популярность, а с выходом 3-й версии вполне может обогнать React.

Пожалуй, главным плюсом Vue является его простота, его действительно несложно выучить, даже если ваши знания чистого JS хромают, в этом однако заключается и главный его недостаток: он привносит в ваш код слишком много магии, её безусловно можно использовать и без понимания того, как она работает, но при возникновении какой-либо ошибки программу становится трудно отлаживать без полного понимания.

Vue был первым фреймворком на JS, который я использовал, и скажу честно, мне нравилась его магия и возможность объединять JS, HTML и CSS в едином файле с расширением .vue.

Ниже можете посмотреть типичный vue-файл:

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

Вывод

Итак, мы очень кратко ознакомились с React, Angular и Vue.

Безусловно, практически всё, что можно сделать на одном из них, можно без особых усилий повторить на другом. Каждый выберет для себя тот, что ему больше придётся по душе. Ниже я оставлю ссылки на документацию каждого из них.

• React: https://ru.reactjs.org/docs/getting-started.html
• Angular: https://angular.io/docs
• Vue: https://ru.vuejs.org/index.html

Статья подготовлена образовательной организацией JavaScript Academy