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

Выберите библиотеку или фреймворк JavaScript

Umar Hansa

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

Что такое библиотеки и фреймворки JavaScript

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

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

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

Ниже приведены примеры, которые помогут вам понять разницу.

Пример вызова библиотеки JavaScript

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

В примере ниже код приложения импортирует метод из библиотеки lodash. После выполнения функции управление возвращается вашему приложению.

import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello

При выполнении метода lodash.capitalize вызывается заранее написанный код JavaScript, который делает первый символ строки заглавным.

Пример использования фреймворка JavaScript

Фреймворк JavaScript – это готовый шаблон кода, на основе которого вы создаете поведение своего приложения. То есть, когда вы используете фреймворк, он управляет потоком приложения. Чтобы использовать фреймворк, вы пишете собственный код приложения, а затем фреймворк вызывает код вашего приложения.

Ниже приведен пример фрагмента кода, в котором используется фреймворк JavaScript Preact.

import { createElement } from 'preact';

export default function App() {
  return (
    <p class="big">Hello World!</p>
  )
}

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

Зачем использовать библиотеку?

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

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

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

В конечном счёте, использование библиотеки JavaScript экономит ваше время.

Почему важно следить за использованием библиотек?

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

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

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

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

Эффективность

Не следует игнорировать влияние библиотеки JavaScript на производительность клиентского веб-приложения. Большая библиотека JavaScript может замедлить загрузку страницы. Помните, что миллисекунды приносят миллионы.

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

Чем больше библиотека JavaScript, тем сильнее она влияет на производительность.

При оценке или использовании библиотеки или фреймворка JavaScript учитывайте следующие рекомендации по повышению производительности:

Если библиотека JavaScript слишком велика, попробуйте использовать альтернативный вариант меньшего размера. Например, date-fns предлагает множество функций при более разумном размере, чем некоторые другие варианты.
Продолжая предыдущий пример с date-fns, импортируйте только нужные функции, например import { format } from 'date-fns'. Обязательно сочетайте этот подход с удалением неиспользуемого кода, чтобы пользователям отправлялся минимальный объем JavaScript.
Используйте инструменты тестирования производительности, такие как Lighthouse, чтобы оценить влияние определенной библиотеки JavaScript на производительность. Если библиотека добавляет одну секунду к времени загрузки страницы (не забудьте ограничить сеть и ЦП во время тестирования), возможно, вам нужно пересмотреть свой выбор библиотеки. Помимо загрузки страницы, обязательно проверьте поведение веб-страницы, вызывающее код из рассматриваемой библиотеки. Скорость загрузки страницы не дает полной картины.
Если автор библиотеки приветствует комментарии, отправьте свои наблюдения за производительностью, предложения и даже вклад в проект. Вот где сообщество открытого исходного кода проявляет себя во всей красе! Если вы решите сделать взнос, возможно, вам сначала нужно будет проконсультироваться со своим работодателем.
Используйте автоматизированный инструмент отслеживания пакетов, например bundlesize, чтобы следить за неожиданно большими обновлениями библиотеки. Библиотеки JavaScript со временем увеличиваются. Добавление функций, исправление ошибок, пограничные случаи и т. д. – все это может увеличить размер файла библиотеки. Если вы или ваша команда согласились использовать библиотеку, ее обновление может быть менее проблематичным и не вызывать никаких вопросов. В этом случае на помощь приходит автоматизация.
Посмотрите на свои требования к библиотеке и оцените, предлагает ли веб-платформа ту же функциональность изначально. Например, на веб-платформе уже есть палитра, поэтому вам не нужно использовать стороннюю библиотеку JavaScript, чтобы реализовать ту же функцию.

Безопасность

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

Рассмотрим библиотеку, опубликованную в экосистеме NPM. Такой пакет может быть легальным. Однако со временем пакет может быть взломан.

Вот несколько советов по безопасности, которые следует учитывать при использовании или оценке стороннего кода:

Если вы используете GitHub, обратите внимание на функции безопасности, например Dependabot. Вы также можете воспользоваться альтернативными сервисами, которые сканируют код на наличие уязвимостей, например snyk.io.
Вы можете воспользоваться услугами специалистов, которые вручную проверят сторонний код.
Определите, нужно ли зафиксировать зависимости для определенной версии или зафиксировать сторонний код в системе управления версиями. Это поможет зафиксировать зависимость от одной конкретной версии, которая предположительно считается безопасной. Это может привести к обратному эффекту, поскольку вы можете пропустить важные обновления библиотеки.
Просканируйте главную страницу проекта или страницу GitHub, если она есть. Проверьте, есть ли нерешенные проблемы с безопасностью и были ли предыдущие проблемы устранены в разумные сроки.
Сторонний код, который использует другой сторонний код, может быть более опасным, чем библиотека с нулевыми зависимостями. Помните об этом риске.

Специальные возможности

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

Клиентская библиотека на основе JavaScript (или фреймворк) может повысить или снизить доступность вашего сайта. Рассмотрим стороннюю библиотеку JavaScript, которая добавляет на страницу слайдер изображений. Если слайдер изображений не учитывает специальные возможности, вы как веб-разработчик можете упустить из виду такую важную функцию и выпустить продукт, в котором отсутствуют критически важные функции, например навигация по слайдеру с помощью клавиатуры!

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

Разумно ожидать, что от вас, веб-разработчика, потребуется определенный уровень участия, чтобы соответствовать таким требованиям доступности. Пример:

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

Конвенты

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

Если библиотека не соответствует общепринятым соглашениям о кодировании (например, общему руководству по стилю), вы мало что можете сделать для немедленного исправления. Однако у вас есть несколько вариантов:

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

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

Обновления

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

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

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

лицензии;

Лицензирование ПО – важный аспект использования сторонних библиотек. Автор библиотеки может назначить ей лицензию. Если вы планируете использовать библиотеку, то выбор лицензии может повлиять на вас.

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

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

Сообщество

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

Плюсы

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

Минусы

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

Документация

Независимо от того, насколько проста или сложна библиотека или фреймворк JavaScript, документация по программному обеспечению всегда может помочь. Даже очень опытные разработчики используют документацию, а не разбираются в коде самостоятельно. В документации объясняется, какой API следует использовать и как это делать.

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

Есть ли у библиотеки документация? Если нет, вам нужно будет научиться разбираться во всем самостоятельно.
Документация понятна и не содержит двусмысленностей? Многие разработчики тратят много времени на документацию. Это может показаться мелочью, но ясность в текстовой документации может оказать большое влияние на вашу продуктивность.
Документация создается полностью автоматически? Такую документацию сложнее воспринимать, и в ней не всегда есть четкие инструкции по использованию API.
Актуальна ли документация? Обслуживание документации иногда рассматривается как второстепенная задача. Если библиотека обновлена, а документация – нет, это может привести к потере времени на разработку.
Является ли документация исчерпывающей и доступна ли она в нескольких форматах? Руководства пользователя, примеры кода, справочная документация, живые демонстрации и учебные пособия – все это ценные форматы документации, которые могут помочь вам успешно использовать библиотеку или фреймворк.

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

Заключение

Это нормально, если вы чувствуете себя перегруженным, когда впервые выбираете библиотеку или фреймворк. Как и во всем остальном, чем больше вы учитесь и практикуетесь, тем лучше у вас получается. Возможно, эта статья пригодится вам, когда вы будете выбирать библиотеку или фреймворк. Заголовки в этой записи можно использовать в качестве контрольного списка. Например, эффективна ли эта библиотека? Соответствует ли эта библиотека стандартам доступности веб-контента, принятым в моей компании?

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

Расширяемость. Насколько легко расширить библиотеку с помощью собственной логики и/или поведения?
Инструменты. Есть ли у библиотеки плагины для редактора кода, инструменты отладки и плагины для системы сборки?
Архитектура. Чистый код важен, но разумна ли общая архитектура библиотеки?
Тесты. Есть ли в проекте набор тестов? Используются ли на сайте проекта значки или индикаторы, показывающие, что набор тестов проходит проверку на последнем коммите?
Совместимость. Хорошо ли библиотека работает с другими библиотеками и/или фреймворками, которые вы сейчас используете?
Стоимость. Сколько стоит фреймворк? Это ПО с открытым исходным кодом или его нужно покупать?
Поверхностные показатели. Они должны быть в самом конце списка критериев или вообще отсутствовать. Однако вы можете учитывать количество голосов за проект, аккаунты в социальных сетях, представляющие проект, и/или количество открытых ошибок/проблем на странице проекта.