Блог

Как выбрать фреймворк для JavaScript

Ответ на один из самых банальных вопросов.
28 февраля 2018ThumbИлья Бубнов2501014

Мир JavaScript огромен, богат на всевозможные библиотеки, модули, среды разработки и фреймворки. Это огромный плюс языка, но и небольшая дилемма для новичка: что выбрать для работы. Один фреймворк принесёт моральное удовлетворение и прирост к производительности, другой изведёт все нервы. В этой статье мы пройдёмся по 5 параметрам, чтобы вы могли чётко понять, что идеально подходит именно вам. И далеко не факт, что выбор падёт на один из популярных фреймворков.

Доступность учебных ресурсов

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

Итак, проще всего в данном случае найти хорошие курсы или ментора. Если вы точно знаете, что придётся на стадии обучения работать с тем или иным фреймворком – не стоит мудрить. Тем более хорошо продуманный учебный курс, как правило, оградит вас от сторонних забот, вроде самостоятельного изучения фреймворков или IDE. Всё только на практике.

Конечно, одних курсов для знакомства с инструментов всё равно будет мало, потребуется литература, и не только официальная. Хотя есть исключения. К примеру, у EmberJS превосходная документация, с полезными примерами и внятным объяснением. В противовес этому Angular и React, где официальная часть сдержанная, зато имеется целая россыпь сторонних ресурсов, в том числе видеоуроков, где можно найти ответы на все вопросы.

Vue – что-то среднее: хорошая документация, и есть несколько классных сайтов и каналов на YouTube.

А вот для работы с Aurelia, молодым и мощным фреймворком, в большей степени потребуется удача, там всё сравнительно плохо и с документацией, и с ресурсами.

Лично для меня важнее возможность черпать информацию из разных источников. Разный подход позволяет взглянуть на картину полнее. Плюс, это гарантия того, что вы докопаетесь до истины, а не решите «забить» на проблему.

Популярность

Виртуозное использование малоизвестного фреймворка может поднять самооценку и даже стать плюсом к вашему резюме, однако на практике первостепенным выбором должен стать популярный вариант. Вот несколько причин:

  • Удобство для работодателя. Ограничения на используемые инструменты берутся не с потолка – здесь и финансовая сторона вопроса, и человеческая. Если каждый разработчик в команде будет работать со своим фреймворком – это отрицательно скажется на производительности и взаимозаменяемости. А зависимость от конкретного сотрудника – последнее, о чём мечтает любая компания. Поэтому выбор популярного фрейморка – это плюс как для соискателя, так и для работодателя.
  • Высокая масштабируемость. Работать над проектом в одиночку можно с любым фреймворком, но, если над ним работает целая команда – как минимум руководитель или тимлид должен в совершенстве знать все используемые инструменты. Использование редких фреймворков приведёт лишь к проблемам.
  • Количество профильных ресурсов и литературы. Как правило, этот параметр напрямую связан с популярность: чем больше поклонников – тем выше активность на форумах, тем больше появляется профильных сайтов, публикуется книг и т.д. К примеру, так выглядит статистика 4 ведущих фреймворков на GitHub и StackOverflow:

Таким образом, лидерами по популярности в JavaScript являются Angular и React. Они достаточно развиты, также их поддерживают корпорации вроде Google и Facebook. В спину лидерам дышат Ember и Vue, но они пока не стали мейнстримом в больших компаниях. Остальные больше подойдёт как инструмент для души или для частных разработок.

Особенности

От общих рассуждений перейдём к обзору основных функций. Откройте документацию, оцените структуру фреймворка, его возможности. Найдите следующие разделы:

  • Шаблонирование.
  • Маршрутизация.
  • Валидация и обработка форм.
  • Настройка связи с сервером.

Далеко не все фреймворки «из коробки» покрывают полный цикл разработки. Как правило, это незначительная проблема, которая решается с помощью сторонних библиотек, но это означает, что структура будет варьироваться от проекта к проекту.

Начнем с React и Vue. Они как раз покрывают только уровень представления приложения. Это означает, что все остальные функции (валидация форм, взаимодействие с сервером) – ваша забота. Не всегда это плохо, к примеру, у Vue многие надстройки куда приятнее, чем встроенные возможности Angular. Однако это отнимет у вас чуть больше времени, да и в плане обновления библиотек вы всегда будете находиться в подвешенном состоянии.

В противовес им, Ember охватывает почти все области, за исключением расширенной обработки формы. Но здесь есть более важный недостаток – отличная от популярных фреймворков структура. К примеру, здесь собственная объектная модель. Стандарт ES2015 здесь почти не внедрен, но эта проблема решается при помощи транспайлера Babel. Также здесь есть свой уровень данных – Ember Data, что-то вроде ORM для фронт-энда.

Angular – абсолютный лидер по встроенным возможностям. Фреймворк изначально предназначался для развертывания больших приложений, поэтому количество модулей и инструментов здесь покроет любые потребности.

Еще одна примечательная вещь – использование библиотеки Rx, предназначенной для обработки асинхронных событий. Обычно для этого приходится писать сложный малоэффективный код, так что решение по-настоящему полезное. К слову, библиотека Reactive Extensions также доступна для React, но в Angular – это встроенная возможность со всеми вытекающими.

Вкратце, возможности фреймворков выглядят так:

Удобство использования

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

Во время работы не спешите и немного поразмышляйте о продуктивности. Задайте себе несколько вопросов:

  • Насколько легко оказалось достичь желаемого результата?
  • Нужно ли искать внешние библиотеки? Как просто это сделать?
  • Насколько удобны расположены основные кнопки и функции?
  • Как часто вы обращались к документации и форумам?

Ember считается очень продуктивным фреймворком для базовых проектов. Он поставляется с CLI, что ускоряет процесс разработки. Данный инструмент в автоматическом режиме помогает создавать маршруты, контроллеры, компоненты и модели со своими собственными наборами тестов. Выполнение всего этого вручную — утомительная задача. При создании нового проекта Ember создаст базовую структуру папок, установит необходимые пакеты, инструменты сборки, среду тестирования и т. д. Если вы никогда ранее не сталкивались с CLI – будете приятно удивлены. Но, как уже было сказано выше, Ember «особенный» фреймворк, поэтому некоторые потенциально простые решения на поверку таковыми не являются.

Google также добавил CLI в четвертую версию Angular. Вы можете запустить его прямо из командной строки, после чего наслаждаться упрощённой разработкой. Также в помощь TypeScript – синтаксический сахар для JavaScript, упрощающий не только написание, но и проверку кода.

У React и Vue тоже есть свои CLI: называются create-react-app и vue-cli соответственно. Но их возможности сильно ограничены в сравнении с Ember или Angular. Это неудивительно, учитывая ограниченность фреймворков, но взамен вы получаете определённую гибкость.

Заключение

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

Спасибо,
что читаете наш блог!
Posts popup