Как выбрать лучший интерфейсный фреймворк

Мир JavaScript — это богатая среда с десятками инструментов, библиотек и фреймворков. Но с большим количеством вариантов возникает много путаницы. Это действительно палка о двух концах.

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

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

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

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

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

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

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

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

Хотя я упомянул, что одной документации недостаточно, есть и исключения. EmberJS, например, имеет отличную документацию. Основные функции и варианты использования хорошо описаны с общими примерами здесь и там. К сожалению, помимо документации, у нас осталось мало ресурсов, книг, видеокурсов или других материалов.

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

Vue находится где-то посередине: у него хорошая документация и есть несколько хороших курсов, из которых вы можете выбрать.

У Аурелии, например, почти нулевые ресурсы; единственная надежда для вас - документация и удача.

Я предпочитаю иметь выбор.

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

К сожалению, эта стратегия не сработает, если вы ограничены в своих возможностях, что приводит нас к следующему пункту.

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

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

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

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

Есть и другие личные причины, по которым вы можете выбрать популярный, широко используемый фреймворк. Что произойдет, если вы обнаружите, что столкнулись с какой-то проблемой, а на самом деле нет сообщества, к которому вы могли бы обратиться за помощью? Поскольку вы сами работаете с документацией, скорее всего, вы потратите много времени.

Кроме того, вы хотите думать о будущих, более привлекательных возможностях в вашей карьере. Если вы специализируетесь на чем-то популярном и хорошо в этом разбираетесь, для вас будет много проектов.

Явные лидеры здесь — Angular и React.

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

Иногда выбор фреймворка для вашей компании или клиента зависит не от вас; возможно, это сделал предыдущий сотрудник или кто-то из команды. Скорее всего, это будет Angular или React. Теперь есть и другие варианты, такие как Ember и Vue. Но вы должны сознательно искать компании, использующие их.

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

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

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

Основные особенности

Теперь давайте немного научимся.

В начале вы хотите кратко рассмотреть основные функции фреймворка, чтобы иметь адекватные ожидания, когда вы начнете программировать. Для этого просмотрите документацию. Вы должны получить представление о том, что представляет собой этот фреймворк в целом. Это только слой просмотра, полноценный или что-то среднее?

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

Кратко коснемся популярных вариантов.

Начнем с React и Vue. На самом деле это не фреймворки; они представляют только уровень представления вашего приложения. Это означает, что все остальные части — HTTP-связь, проверка формы и т. д. — зависят от вас.

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

JSX React всегда заставлял меня съеживаться. Я должен был привыкнуть к этому. Однако шаблоны Vue действительно хороши, особенно если вы работаете с Angular.

С другой стороны, в Ember есть почти все. Удивительно, но ядро ​​Ember не обеспечивает расширенную обработку форм. У него просто есть помощники ввода и все. Он очень самоуверен и даже имеет свой собственный слой данных. Все должно быть сделано «как Эмбер».

Если у вас есть опыт работы с другими фреймворками или JavaScript в целом, вы можете разочароваться, потому что Ember использует свою собственную объектную модель. Стандартные классы ES2015 широко не используются, как указано в их документации. Вы можете обнаружить, что присваиваете значение непосредственно свойству, а Ember жалуется на это.

Еще одна вещь, существенно отличающаяся от других фреймворков, — это Ember Data. Это уровень данных для приложений Ember. Вы можете думать об этом как о каком-то ORM для внешнего интерфейса. Вы создаете модели и сопоставляете отношения между ними.

Теперь, если ваш сервер использует JSON API (это спецификация для реализации JSON API), вы в хорошем состоянии с Ember, но, к сожалению, большинство серверов этого не делают. Поэтому вам нужно написать собственные адаптеры и сериализаторы. Однако, если вы делаете что-то в стиле Ember, это может быть действительно продуктивно. У него просто крутая кривая обучения.

Angular 2 — это многофункциональный фреймворк. Он поставляется с множеством модулей, таких как Ember, поэтому в вашем распоряжении масса инструментов из коробки. Однако, поскольку Angular предназначен для больших приложений, он продвигает TypeScript, что может вызвать некоторое сопротивление, прежде чем вы начнете его использовать.

Еще одна примечательная вещь — интенсивное использование наблюдаемых объектов из библиотеки Rx, что действительно приятно. Вы можете представить почти что угодно в виде наблюдаемого и применить высокоуровневые операции, такие как карта, фильтр и т. д. Если вы использовали Lodash или Underscore, Rx — это то же самое, но на стероидах.

Вот краткое изложение основных особенностей четырех фреймворков, которые мы обсуждаем в этой статье:

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

Юзабилити

Если на данный момент у вас все еще есть энтузиазм по поводу выбранного вами фреймворка, следующий шаг — запачкать руки.

Возможно, фреймворк подходит вам из-за вашего опыта. Может быть, это немного отличается и в некотором роде бросает вам вызов. Вы еще не знаете, и никакие чтения или просмотры руководств не помогут, пока вы сами не попробуете.

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

Работая над проектом, не торопитесь и подумайте, продуктивны ли вы. Насколько легко добиться желаемого результата? Вам нужно искать внешние библиотеки? Возможно, вам нужны какие-то плагины от сообщества. Существует ли какая-либо общепринятая структура или руководящие принципы в контексте структуры? Может быть, есть CLI для ускорения процесса разработки. На этом этапе вы получаете базовый опыт, чтобы вы могли подумать, что будет, если вы будете использовать эту структуру для будущих проектов или даже для перехода к существующим.

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

Теперь для React и Vue у них есть какой-то CLI, create-react-app и vue-cli. Но помимо создания исходного проекта с некоторыми опциями, они не предлагают так много по сравнению с Ember или Angular. Это понятно, так как они оба представляют слой представления. Если вам нравятся настраиваемые рабочие процессы, эксперименты или различные структуры в зависимости от проекта, то вы попали по адресу. Для некоторых разработчиков гибкость — это ключ к использованию React или Vue.

Angular 4 поставляется с CLI, как и Ember. Вы можете генерировать компоненты, директивы, службы и т. д. Он также генерирует начальную структуру для приложения, поэтому вам нужно беспокоиться только о продукте. Среда тестирования действительно хороша, поскольку с каждым сгенерированным фрагментом приложения набор тестов живет рядом с ним (буквально). Кроме того, 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, в которых собраны связанные ресурсы, включая библиотеки, но EmberObserver оказался особенно полезным.

Приверженность JavaScript Framework

Выбор правильного фреймворка JavaScript — один из самых важных шагов на пути к успеху вашего веб-проекта. Независимо от того, работаете ли вы над небольшим проектом или над большим, работаете ли вы в одиночку или в команде, каждая из этих деталей играет решающую роль в определении того, какой фреймворк лучше всего подходит для вашего проекта (и меньше того, какой фреймворк вы можете предпочесть). ).

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

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