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

Умар Ханса

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

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

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

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

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

Следующие практические примеры помогут проиллюстрировать различия.

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

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

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

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

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

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

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

В следующем примере показан фрагмент кода, использующий платформу Preact JavaScript:

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.
  • Актуальна ли документация? К ведению документации иногда относят второстепенную мысль. Если библиотека обновляется, а документация — нет, это может привести к напрасной трате времени на разработку.
  • Является ли документация полной и доступной в нескольких форматах? Руководства пользователя, примеры кода, справочная документация, живые демонстрации и учебные пособия — все это ценные форматы документации, которые могут помочь вам добиться успеха в использовании библиотеки или платформы.

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

Заключение

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

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

  • Расширяемость: насколько легко расширить библиотеку с помощью собственной логики и/или поведения?
  • Инструментарий: если применимо, есть ли в библиотеке такие инструменты, как плагины редактора кода, инструменты отладки и плагины системы сборки?
  • Архитектура: чистый код важен, но разумна ли общая архитектура библиотеки?
  • Тесты: есть ли в проекте набор тестов? Используются ли на веб-сайте проекта значки или индикаторы, которые набор тестов передает последнему коммиту?
  • Совместимость: хорошо ли библиотека работает с другими библиотеками и/или платформами, которые вы сейчас используете?
  • Стоимость: какова стоимость каркаса? Это с открытым исходным кодом или доступно для покупки?
  • Метрики тщеславия: они должны быть в самом конце вашего списка критериев или даже полностью игнорироваться, но вы можете принять во внимание «голоса» за проект, учетные записи в социальных сетях, которые представляют проект, и/или количество открытых ошибок/проблем в проекте. страница проекта.