Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Решать задачиМир JavaScript это среда, богатая инструментами, библиотеками и фреймворками. Но большое количество вариантов приводит к замешательству. Это палка о двух концах. Имея большое пространство для творчества и экспериментов, иногда вы теряетесь при выборе библиотеки или фреймворка.
Фреймворк для фронтенда, который вы выберете, в долгосрочной перспективе может стать или преимуществом, или существенным недостатком вашего проекта.
В этой статье мы разберем некоторые из наиболее популярных фреймворков JavaScript и то, как они работают в сравнении с другими. Мы посмотрим на них с пяти разных сторон, что сильно облегчит вам процесс выбора вашего следующего фреймворка JavaScript.
Выберите ли вы один из этих пяти популярных фреймворков JavaScript или из каких-нибудь других, менее известных, вам стоит принять во внимание эти аспекты.
Доступность обучающих ресурсов
Это очевидно, но зачастую не принимается в расчет. Хотя вас может увлечь привлекательный вид домашней странички какого-нибудь фреймворка, вам все равно для начала вам нужны какие-то дополнительные курсы, книги, руководства и статьи помимо скучной и сухой документации.
Создание прекрасного фреймворка это одно дело, а обсуждение ключевых идей, стоящих за ним, – совершенно другое. Фактически есть много профессиональных разработчиков, специализирующихся на обучении. Качественные обучающие ресурсы очень сильно сократят для вас сам процесс обучения.
Поищите ресурсы у проверенных авторов, к которым вы обращались ранее, – это в конечном итоге сбережет ваше время. Если вы стремитесь найти что-то полезное, будьте осмотрительны: фреймворк, который вы хотите изучить, может быть новым или еще не опробованным сообществом.
Хотя, как уже упоминалось, документации самой по себе недостаточно, для этого правила есть исключения. У EmberJS, например, прекрасная документация. Основные функции и случаи для их применения прекрасно описаны с приведением подходящих примеров. К сожалению, помимо этой документации, мы остаемся с очень малым количеством книг, видео курсов и других материалов.
С другой стороны, есть масса ресурсов по Angular и React. Почти на каждом образовательном вебсайте, посвященном фронтенду, окажется одна или две статьи о них, а возможно, даже полный видеокурс или книга.
Vue занимает промежуточную позиции: у него хорошая документация и есть несколько хороших курсов, из которых можно выбирать.
Aurelia, например, практически не имеет ресурсов; вы можете надеяться лишь на документацию и удачу.
Даже если вы прочли хорошую книгу или курс, всегда остается шанс узнать что-нибудь новое обратившись к другим источникам. Если вы знакомы с предметом, часто вы можете быстро по ним пробежаться в поисках недостаточно (пока!) ясных областей.
К сожалению, эта стратегия не сработает если вы ограничены в выборе, что приводит нас к следующему пункту.
Популярность
Вы можете гордиться изучением чего-нибудь экзотического, но если вы посмотрите на это с деловой точки зрения, это не то же самое. Ваша компания или клиент могут предпочесть использование проверенного «в бою» набора инструментов.
Для этого есть несколько причин. Если фреймворк не особо популярен, это означает, что есть не так много разработчиков, специализирующихся на нем. Что случится, если вы бросите проект и найдете себе другую работу? Вашему работодателю придется искать разработчика, знающего фреймворк, который вы использовали.
Этот процесс может стать действительно обременительным для компании. Проблема остается даже если вы никуда не уходите, а проект растет. Работодателю требуется большее число программистов для ускорения разработки.
Есть и другие, личные причины предпочесть популярный, широко распространенный фреймворк. Что, если вы столкнетесь с какой-то проблемой, а сообщества, к которому вы могли бы обратиться за помощью, просто не существует? Оставшись один на один с документацией, вы с большой вероятностью потратите впустую много времени.
Помимо этого, вы хотите подумать о будущих, более привлекательных возможностях в вашей карьере. Если вы специализируетесь на чем-то популярном и действительно хороши в этом, для вас будет куда больше подходящих проектов.
Очевидные лидеры здесь Angular и React.
Большинство позиций, связанных с фронтендом, требуют знания одного из них. За ними стоят Google и Facebook, а потому работодатели чувствуют себя более безопасно в отношении своего выбора.
Иногда выбор фреймворка для вашей компании или клиента не зависит от вас. Возможно, выбор был сделан бывшим сотрудником или кем-то еще из команды. Велики шансы, что это будет Angular или React. Есть и другие варианты, например Ember и Vue. Но вам придется нарочно искать компании, использующие их.
Вы можете определить популярность фреймворка кинув взгляд на то, насколько этот проект популярен на GitHub или других подобных сайтах. Вот некоторая статистика, собранная при написании этой статьи:
Хотя эти библиотеки существуют достаточно долго чтобы иметь право считаться популярным вариантом, если вы хотите попробовать что-то действительно новое, сходная статистика поможет вам сделать выбор.
Знание только лишь Angular или React поможет вам в вашей карьере, откроет много возможностей. Но другие фреймворки тоже существуют не без причины. Постарайтесь изучить их в свободное время и при случае поэкспериментировать. Даже если вам никогда не случиться использовать их в настоящих проектах, вы получите ценную информацию, которая поможет вам в повседневной работе, связанной с разработкой.
Основные особенности
Давайте обратимся теперь к технической составляющей.
Чтобы, начав писать код, иметь адекватные ожидания, стоит заранее бегло ознакомиться с основными особенностями фреймворка. Для этого просмотрите документацию. Вам нужно получить общее понятие о фреймворке. Связан ли он только с интерфейсом пользователя или совершенно полноценный? Или что-то между?
Если у вас богатый предыдущий опыт работы с другими фреймворками, этот процесс будет легким и быстрым. Посмотрите на следующие темы в документации: шаблонизация, управление состоянием, HTTP-связь, обработка и проверка форм, а также маршрутизация. Это ежедневные вещи, которыми вы занимаетесь будучи разработчиком. Не все они могут быть представлены в основной структуре; к отдельным проблемам может быть совершенно другой подход.
Давайте бегло рассмотрим популярные варианты.
Начнем с React и Vue. Они не совсем фреймворки, они только представляют визуальный слой вашего приложения. Это означает, что все остальные части – HTTP-связь, проверка форм и т. д. – на вас.
Как упоминалось ранее, это может быть палкой о двух концах. В конечном итоге вы придете к построению вашего собственного пользовательского фреймворка. У каждого из них есть своя экосистема библиотек, предоставляющих решения наиболее распространенных проблем, но вся структура в целом будет отличаться от проекта к проекту.
Реактовский JSX всегда меня отталкивал. Мне пришлось к нему привыкать. А у Vue шаблонизация действительно хорошая, особенно если вы переходите с Angular.
С другой стороны, в Ember есть практически все. Довольно удивительно, среди особенностей Ember нет расширенной обработки форм. Есть только некоторые помощники ввода и все. Он очень самоуверен и даже имеет собственный слой данных. Все должно делаться по «пути Ember».
Если у вас есть опыт работы с другими фреймворками или в целом с JavaScript, вы можете быть разочарованы, так как Ember использует собственную объектную модель. Классы стандарта ES2015 не так широко используются, таково же и состояние их документации. Вы можете оказаться в ситуации, когда вы сами прописываете значения свойствам, а Ember на это жалуется.
Еще одно значительное отличие от других фреймворков это Ember Data. Это слой данных для приложений Ember. Вы можете считать это чем-то вроде ORM для фронтенда. Вы создаете модели и карту взаимоотношений между ними.
Если ваш сервер использует JSON API (это спецификация для реализации JSON APIs), с Ember вы в хороших руках, но к сожалению, таких серверов мало. Так что вам придется писать пользовательские адаптеры и преобразователи. Тем не менее, если вы делаете все по методам Ember, это может быть действительно продуктивно. Просто кривая обучения у него ступенчатая.
Фреймворк Angular 2 богат особенностями. Он поставляется со многими моделями, подобно Ember, так что в вашем распоряжении окажутся тысячи инструментов из коробки. Но так как Angular предназначен для крупных приложений, он поддерживает TypeScript, что может вызвать некоторое сопротивление прежде чем вы это разрешите.
Другой заметной вещью является интенсивное использование observables из библиотеки Rx, что действительно хорошо. Вы можете представить почти что угодно в качестве observable и применить высокоуровневые операции, такие как карта, фильтр и т. д. Если вы пользовались Lodash или Underscore, Rx – это почти то же самое, только на стероидах.
Вот итоговое сравнение внутренних особенностей четырех фреймворков, обсуждаемых в этой статье:
Все эти особенности, которые мы бегло осмотрели, бесполезны, если вам нужно зажечь свечу с двух концов, чтобы эффективно их использовать. Об этом наша следующая тема.
Простота использования
Если к этому моменту вас все еще переполняет энтузиазм по поводу выбранного вами фреймворка, следующий шаг — запачкать руки.
Возможно, этот фреймворк хорошо вам подходит из-за вашего бэкграунда. Может, он немножко другой и в каком-то смысле бросает вам вызов. Вы этого еще не знаете, и сколько бы вы ни читали/смотрели туториалов, это не поможет, пока вы не опробуете его лично.
Лучший способ почувствовать фреймворк – использовать его в каком-нибудь маленьком проекте. Это даст вам возможность решать упомянутые выше ежедневные проблемы с помощью данного фреймворка.
Работая над проектом, дайте себе возможность подумать, насколько продуктивной получается работа. Легко ли достигается ожидаемый результат? Приходится ли вам обращаться ко внешним библиотекам? Возможно, вам нужны какие-то плагины из сообщества. Существует ли удобная структура руководств, касающихся этого фреймворка? Возможно, есть CLI для ускорения процесса разработки. На этой стадии вы собираете базовый опыт, так что можете себе представить, как это будет, если вы используете этот фреймворк для будущих проектов или даже переведете на него уже существующие.
Ember считается фреймворком с высокой производительностью, по крайней мере для пользователей его ядра. Он поставляется с CLI, что очень помогает. Вы можете генерировать маршруты, контроллеры, компоненты и модели с их собственными тестовыми наборами. Выполнение всей этой работы вручную – утомительное занятие. Также возможна генерация нового проекта. Он создаст базовую структуру папок, установит необходимые пакеты, инструменты, среду тестирования. Если вы никогда не пользовались CLI до такой степени, вы будете приятно удивлены. Но, как уже упоминалось, Ember очень самоуверен; несмотря на все эти добродетели, вы можете разочароваться, пытаясь выполнить обычные задачи.
Что касается React и Vue, у них есть что-то вроде CLI: create-react-app и vue-cli. Но кроме генерации начального проекта с некоторыми опциями они не так много предлагают по сравнению с Ember или Angular. Это и понятно, поскольку оба они представляют визуальный слой. Если вам нравятся настраиваемые рабочие процессы, эксперименты или различные структуры от проекта к проекту, то вы нашли то что нужно. Для некоторых разработчиков гибкость является ключевым моментом, а она приходит вместе с использованием React или Vue.
Angular 4, как и Ember, поставляется с CLI. Вы можете генерировать компоненты, директивы, сервисы. Он также генерирует первоначальную структуру для приложения, так что вам нужно волноваться лишь о продукте. Среда тестирования действительно хороша, так как рядом с каждым созданным фрагментом приложения поселяется тестовый набор. Кроме того, TypeScript может обеспечить реальное повышение производительности. Вот почему.
Как часто вам случалось встречать код со строчками, как в этом случае…
function doSomething(someData) {
// do something
}…и задаваться вопросом, что такое, черт побери, это someData, какие у него должны быть свойства, какие функции оно должно обеспечивать и как оно себя ведет? С TypeScript вы определяете тип и ожидаете подходящие данные. А если вы используете IDE с поддержкой TypeScript, то можете запросто исследовать различные части приложения.
Мы не затрагивали IDE, но для большинства популярных фреймворков существуют плагины, которые действительно очень облегчают разработку. WebStorm, например, поставляется со встроенной поддержкой Angular, React и Vue.
Простота интеграции (с другими библиотеками)
Последний по порядку, а не по значению, этот аспект может рассматриваться как часть простоты использования, но он имеет такое значение, что стоит вынести его в отдельную тему.
Без разницы, насколько богат функционалом выбранный вами фреймворк, все равно есть шансы столкнуться с проблемой, для решения которой понадобятся дополнительные инструменты. Есть множество библиотек, фокусирующихся на решении определенных задач, будь то DOM-манипуляции, обработка данных, форматирования времени, редактирование текстов. Если вы при попытке подключить одну из них будете каждый раз тратить целые часы, то наверное это все же не оптимальный выбор.
Проверить это очень просто. Вы можете быстро придумать некий воображаемый сценарий, в котором вам нужна определенная библиотека. Посмотрите на ваши прошлые проекты. Какие инструменты вы там использовали в каком сценарии? Есть шансы, что вы вновь окажетесь в такой же ситуации, и к этому следует приготовиться или по крайней мере ожидать этого.
Не все библиотеки поддерживают TypeScript. Хотя Angular интенсивно его использует, некоторые из достоинств TypeScript могут исчезнуть при использовании такой библиотеки. Конечно, вы можете найти обходной путь, но это все равно заминка. В силу популярности Angular вы можете найти инструкции по интеграции на странице самой библиотеки.
В случае с Vue и React ответственность буквально за все лежит на вас, и использование сторонних библиотек не исключение. Если вы используете Webpack или похожий инструмент сборки, вы можете напрямую обращаться к библиотекам, установленным с помощью NPM. Есть определенные трудности в использовании плагинов сообщества для Vue, особенно когда они также содержат логику пользовательского интерфейса.
У Ember есть EmberObserver, вебсайт плагинов сообщества. Каждый из них имеет рейтинг по шкале от нуля до десяти. Это и впрямь отличное место чтобы поискать что-то нужное вам. Если вы напечатаете название ваших любимых библиотек, таких как Lodash, Rx или Ramda, вы найдете относящиеся к ним плагины от простых оболочек до полных переписываний. И, конечно, есть еще репозитории Awesome React и Awesome Vue, в которых собраны соответствующие ресурсы, включая библиотеки.
Выбор фреймворка JavaScript
Выбор правильного JavaScript фреймворка — один из важнейших шагов на пути к тому, чтобы сделать ваш веб-проект успешным. В определении, какой фреймворк лучше всего подходит для вашего проекта, большее значение имеют характеристики самого проекта (большой он или маленький, один человек над ним работает или целая команда), чем ваши личные предпочтения.
Что касается основных особенностей и удобства пользования, мы перечислили аспекты, которые сильнее всего будут влиять на производительность разработчиков. Простота использования — особенно скользкий момент, так как сильно зависит от вашего опыта и бэкграунда, а также от компании или организации, где вы работаете.
Со временем рассмотренные нами здесь фреймворки могут развиться, их популярность может измениться (то же касается и проектов, для которых они подходят), но эта статья должна дать вам общее понимание того, где каждый из этих фреймворков будет работать лучше всего.
***
Подписывайтесь на наш канал в Telegram!
