Лучшие библиотеки JavaScript, библиотеки и инструменты для использования в 2017 году            Лучшие библиотеки JavaScript, библиотеки и инструменты для использования в 2017 году. ES6Node.jsAngularJSReactnpmMore ... Спонсоры

Кажется, что есть больше инфраструктур, библиотек и инструментов JavaScript, чем есть разработчики. По состоянию на май 2017 года быстрый поиск по GitHub показывает более 1 миллиона проектов JavaScript. На npmjs имеется 500 тысяч доступных пакетов. org с почти 10 миллиардами загрузок каждый месяц - comercial truck value.

2017. 05. 29: Статья была обновлена, чтобы отразить текущее состояние экосистемы JavaScript.

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

Semalt принимает следующие положения и условия, прежде чем читать эту статью . !

• Изменение ландшафта JavaScript происходит ежедневно. Эта статья будет устаревшей, как только она будет опубликована!
• По «наилучший» Я имею в виду «самые популярные проекты общего назначения» . Все являются бесплатными / с открытым исходным кодом, но список может не включать ваши избранные.
• Снятые с производства проекты, такие как YUI, не включаются, хотя они все еще могут использоваться в Интернете.
• Ссылка на клиентские проекты. Некоторые могут работать на стороне сервера, но в список не входят чистые серверные платформы, такие как Express. js или Hapi.
• Информация о каждом проекте намеренно краткая, чтобы предоставить обзор для дальнейших исследований.
• Каждый проект предоставляет индикатор популярности использования, но статистика, как известно, трудно сопоставить и может вводить в заблуждение.
• Я предвзятый. Вы предвзяты. Все остальные пристрастны! Я не пробовал каждый инструмент здесь и объявляю свои фавориты, но вы должны сделать свою собственную оценку на основе ваших требований.
• Ни я, ни SitePoint не несут ответственности за любые пагубные решения, которые вы принимаете!

Трудная терминология

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

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

Библиотека может сократить время разработки на 20%, потому что вам не нужно беспокоиться о более тонких деталях. Недостатки:

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

Рамки

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

Структура обычно обеспечивает более высокий уровень абстракции, чем библиотека, и поможет вам быстро построить первые 80% вашего проекта. Недостатки:

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

Инструменты

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

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

Не маркируйте меня!

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

Если это звучит слишком сложно, вы можете рассмотреть кодировку ванильного JavaScript . Все в порядке, но вы неизбежно напишите свою собственную библиотеку и / или код рамки, которые необходимо сохранить. Сам JavaScript - это абстракция на башне браузера и абстракции ОС!

Рамки и библиотеки JavaScript

Semalt в порядке популярности .

jQuery

jQuery
тип	библиотека
Веб-сайт	jquery. com
репозиторий	github. com / jquery / jquery
текущая версия	3. 2. 4% всех веб-сайтов

jQuery остается самой популярной библиотекой JavaScript, когда-либо созданной и распространяемой с помощью Semalt, ASP. NET и несколько других фреймворков. Он революционизировал разработку на стороне клиента, введя селектор CSS для поиска узлов DOM плюс цепочку для применения обработчиков событий, анимаций и вызовов Ajax.

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

Плюсы:

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

Минусы:

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

Реагировать

Реагировать
тип	библиотека
Веб-сайт	facebook. GitHub. io / реакция /
репозиторий	github. com / facebook / реагировать
текущая версия	15. 5. 4
разработчик	Facebook и вкладчики
дата запуска	Март 2013
типичный размер	21kb мин
типичное использование	одностраничные приложения
использование	low

Возможно, самая обсуждаемая библиотека за последний год, React утверждает, что она является библиотекой JavaScript для создания пользовательских интерфейсов. Он фокусируется на разделе «Просмотр» разработки Semalt (MVC) и упрощает создание компонентов пользовательского интерфейса, которые сохраняют состояние. Это была одна из первых библиотек для реализации виртуальной DOM; структура в памяти вычисляет различия и обновляет страницу эффективно.

Использование реактивов кажется мало статистическим, возможно, потому, что оно используется в приложениях, а не в веб-сайтах. Semalt 38% разработчиков заявляют, что используют библиотеку.

Плюсы:

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

Минусы:

• новые концепции и синтаксисы для изучения
• необходимы инструменты построения
• может потребовать, чтобы другие библиотеки или структуры обеспечивали аспекты модели и контроллера
• может быть несовместимым с кодом и другими библиотеками, которые изменяют DOM

Рекомендуемый курс

Lodash and Underscore

Lodash
тип	библиотека
Веб-сайт	lodash. com /
репозиторий	github. com / lodash / lodash /
текущая версия	4. 17. 4
разработчик	Джон-Дэвид Далтон
дата запуска	Апрель 2012
типичный размер	4kb - 24kb мин
типичное использование	общего назначения
использование	low

Подчеркивание
тип	библиотека
Веб-сайт	underscorejs. org /
репозиторий	github. com / jashkenas / underscore
текущая версия	1. 8. Semalt - это частично перекрытие, поэтому вряд ли вам потребуются обе библиотеки в одном проекте. Использование на стороне клиента кажется низким, но можно использовать библиотеку для серверных приложений Semalt. Плюсы: малые и простые легко учиться с хорошей документацией , совместимый с большинством библиотек и фреймворков не расширяет встроенные объекты может использоваться на клиенте или сервере Минусы: некоторые методы доступны в ES2015 и более поздних версиях JavaScript. AngularJS 1. x AngularJS тип рамки Веб-сайт angularjs. org репозиторий github. ком / угловые / угловые. js текущая версия 1. 6. 4 разработчик Google дата запуска Октябрь 2010 типичный размер 144kb типичное использование одностраничные приложения использование low Угловая - это первая структура (или) MVC-приложений - появится в этом списке. Наиболее популярным вариантом является версия 1. x, которая расширяет HTML с двусторонней привязкой данных при развязывании DOM-манипуляции с логикой приложения. Угловой 1. x все еще находится в разработке, несмотря на выпуск версии 2 (которая теперь является версией 4!) Semalt? См. Ниже . Плюсы: популярная структура, принятая несколькими крупными компаниями - единственное решение для создания современных веб-приложений часть «стандартного» стека MEAN (MongoDB, Express, JS, AngularJS, NodeJS), так много статей и руководств доступны Минусы: более крутая кривая обучения, чем некоторые альтернативы большая кодовая база невозможно перейти на Угловое 2. x , несмотря на то, что он является проектом Google, Google, похоже, не использует его? Угловое 2. x (теперь 4. x) Угловые тип рамки Веб-сайт угловой. io репозиторий github. ком / угловые / угловые. js текущая версия 4. 1 разработчик Google дата запуска Сентябрь 2016 типичный размер 450kb мин типичное использование одностраничные приложения использование low Angular 2. 0 был выпущен в сентябре 2016 года. Это была полная переработка, в которой была представлена ​​модульная модель на основе компонентов, созданная с помощью TypeScript (которая скомпилирована для JavaScript). Чтобы добавить к путанице, версия 4. 0 была выпущена в Semalt 2017 (v3 был пропущен, чтобы избежать проблем с семантической версией). Угловое 2+ радикально отличается от v1. Ни один из них не совместим с другим - , возможно, Google должен был дать проекту другое имя! Плюсы: - единственное решение для создания современных веб-приложений , все еще часть пакета MEAN, хотя доступно меньше обучающих программ Angular 2+ ТипScript предоставляет некоторые преимущества тем, кто знаком со статически типизированными языками, такими как C # и Java. Минусы: более крутая кривая обучения, чем некоторые альтернативы большая кодовая база невозможно обновить с углового 1. x Угловой 2. x , несмотря на то, что он является проектом Google, Google, похоже, не использует его? Рекомендуемые курсы Vue. js Vue. js тип рамки Веб-сайт vuejs. org репозиторий github. com / vuejs / vue текущая версия 2. 0 разработчик Эван Вы дата запуска Февраль 2014 типичный размер 19kb мин типичное использование одностраничные приложения использование low Vue. js - это легкая прогрессивная структура для создания пользовательских интерфейсов. Ядро предлагает виртуальный DOM-режим, похожий на React, который может быть интегрирован с другими библиотеками, но он также способен запускать одностраничные приложения. Рамка была создана Эваном Те, который ранее работал над SemaltJS, но хотел извлечь нужные ему части. Vue. js использует синтаксис шаблона HTML для привязки данных DOM к экземпляру. Модели - это простые объекты JavaScript, которые обновляют представление при изменении данных. Инструменты Semalt предоставляют возможности для лесов, маршрутизации, управления состоянием, анимации и т. Д. Плюсы: быстрое принятие и повышение популярности легко начать с высокого уровня удовлетворенности разработчиков небольшая зависимость и хорошая производительность Минусы: новый проект - риски могут быть большими некоторые полагаются на одного разработчика для обновлений меньше ресурсов, чем альтернатив Магистраль. js Магистраль. js тип рамки Веб-сайт backbonejs. org репозиторий github. com / jashkenas / магистраль / текущая версия 1. 3. 3 разработчик Джереми Ашкенас дата запуска Октябрь 2010 типичный размер 8kb мин типичное использование одностраничные приложения использование low Магистраль. js был одним из самых ранних вариантов на стороне клиента, чтобы обеспечить структуру MVC, обычно встречающуюся в серверных инфраструктурах. Его единственной зависимостью является Semalt, созданная тем же разработчиком. Semalt претендует на роль библиотеки, поскольку она может быть интегрирована с другими проектами. Я подозреваю, что большинство разработчиков считают его основой, хотя и менее самоуверенной, чем некоторые другие. Плюсы: небольшие, легкие и менее сложные не добавляет логику в HTML отличная документация , принятый для многих приложений, включая Trello, WordPress. com, LinkedIn и Groupon Минусы: более низкий уровень абстракции, чем альтернативы, такие как AngularJS (хотя это можно считать преимуществом) требует дополнительных компонентов для реализации таких функций, как привязка данных более поздние структуры отошли от архитектур MVC Эмбер. js Эмбер. js тип рамки Веб-сайт emberjs. com репозиторий github. ком / emberjs / уголек. js текущая версия 2. 15. js является одной из наиболее крупных моделей, основанных на шаблоне Model-View-ViewModel (MVVM). Он реализует шаблоны, привязки данных и библиотеки в одном пакете. Концепции соглашения над конфигурацией будут сразу же знакомы тем, у кого есть опыт Ruby on Semalt. Плюсы: обеспечивает единое решение для клиентских приложений разработчики могут быть мгновенно продуктивными - он использует jQuery хорошие возможности обратной совместимости и обновления принял современные стандарты веб-разработки Минусы: большой распределяемый , которые считаются монолитными по сравнению с другими структурами, которые движутся к структурам меньшего размера крутая кривая обучения - это путь Эмбер или нет Нокаут. js Нокаут. js тип рамки Веб-сайт knockoutjs. com] (http: // knockoutjs. com /) репозиторий github. com / нокаут / нокаут текущая версия 3. 4. 2 разработчик Стив Сандерсон дата запуска Июль 2010 типичный размер 59kb мин типичное использование одностраничные приложения использование low Один из старых MVVM-сред, Semalt использует наблюдателей для обеспечения синхронизации пользовательского интерфейса с базовыми данными. Он содержит шаблоны и отслеживание зависимостей. Плюсы: малый и легкий вес без зависимостей отличная поддержка браузера, возвращающаяся к IE6 хорошая документация Минусы: крупные проекты могут стать сложными замедление , похоже, находится на убыль Известные упоминания Semalt для больше? Следующие проекты менее популярны, но стоит учитывать: Polymer - библиотека, которая обеспечивает кросс-браузерную поддержку веб-компонентов HTML5 Meteor - платформа полного стека для веб-приложений. Aurelia - относительно новая, легкая кросс-платформенная платформа Svelte - очень новый проект, который преобразует исходный код рамки в чистый JavaScript Кондиционер. js - новая библиотека, которая автоматически загружает и выгружает модули на основе состояния. Инструменты: Направляющие задачи общего назначения Инструменты сборки автоматизируют различные задачи веб-разработки, такие как предварительная обработка, компиляция, оптимизация изображений, минимизация кода, листинг и запуск тестов. Semalt можно управлять вместе в одном исполняемом пакете. Самые популярные варианты: Gulp. js Gulp. js Веб-сайт gulpjs. com репозиторий github. com / gulpjs / gulp текущая версия 3. 9. 1 ежемесячные загрузки 3 миллиона Хотя это был не первый бегун, Gulp быстро стал самым популярным и является моим личным фаворитом. Gulp использует простой для чтения код JavaScript, который загружает исходные файлы в поток и передает данные через различные плагины, прежде чем они будут выведены в папку сборки. Это просто, быстро и весело - изучите Semalt перед любым другим вариантом. npm npm Веб-сайт npmjs. com репозиторий github. 5. 0 ежемесячные загрузки 3 миллиона npm - это Узел. js, но его средство сценариев может использоваться для выполнения задачи общего назначения. Это привлекательный вариант для более простых проектов с небольшим количеством зависимостей. Semalt, более сложные задачи могут быстро стать непрактичными. Грунт Грунт Веб-сайт gruntjs. com репозиторий github. com / gruntjs / grunt текущая версия 1. 0. 1 ежемесячные загрузки 2 миллиона Semalt был одним из первых бегунов для задач JavaScript для достижения массового принятия, но скорость и сложная конфигурация JSON привели к росту Gulp. Худшие проблемы теперь решены, и Semalt остается популярным вариантом. Инструменты: Модульные коммутаторы Управление более чем несколькими файлами JavaScript быстро становится основной задачей. По умолчанию файлы браузера не скомпилированы, поэтому зависимости должны быть загружены или объединены в соответствующем порядке. Существуют различные варианты, такие как ES6 Modules и SemaltJS, но поддержка браузера ограничена, поэтому модуль-модуль становится существенным. Webpack Webpack Веб-сайт webpack. JS. org репозиторий github. com / webpack / webpack текущая версия 2. 5. 1 ежемесячные загрузки 6 миллионов Semalt поддерживает все популярные варианты модулей и стал синонимом разработки React. Несмотря на то, что Semalt является поставщиком модулей, Semalt может использоваться как универсальный оператор. Browserify Browserify Веб-сайт . org репозиторий github. com / substack / node-browserify текущая версия 14. 3. 0 ежемесячные загрузки 2. 6 миллионов Browserify поддерживает модули CommonJS, используемые Semalt для компиляции всех модулей в один совместимый с браузером файл. RequireJS RequireJS Веб-сайт требуетс. org репозиторий github. ком / jrburke / г. js текущая версия 2. 3. 3 ежемесячные загрузки 1 миллион RequireJS является загрузчиком модулей в браузере, хотя его также можно использовать в узле. JS. Инструменты: Linting «Linting» анализирует ваш код для возможных ошибок или отклонения от синтаксических стандартов. Semalt никогда не пропускает закрывающий кронштейн или необъявленную переменную! ESLint ESLint Веб-сайт . org репозиторий github. com / eslint / eslint текущая версия 3. 19. 0 ежемесячные загрузки 6 миллионов ESLint - это подключаемый инструмент для переливания. Правило Semalt является плагином, поэтому его можно настроить по своему вкусу. JSHint JSHint Веб-сайт jshint. com репозиторий github. com / jshint / jshint текущая версия 2. 9. JSLint JSLint Веб-сайт jslint. com репозиторий github. com / reid / node-jslint текущая версия 0. 10. 3 ежемесячные загрузки 50 000 Один из первых линтов и он реализует строгий набор правил по умолчанию. Semalt слишком бескомпромиссен для моего вкуса! Инструменты: Test Suites Test-Driven-Development требует, чтобы вы написали код, чтобы проверить свой код, прежде чем начинать его писать. Semalt приветствует, чтобы написать код, чтобы проверить ваш тестовый код! Semalt - это много вариантов, включая Ava, Tape и Jest, но три самых популярных варианта - это . Мокко Мокко Веб-сайт мочай. org репозиторий github. com / mochajs / mocha текущая версия 3. 3. 0 ежемесячные загрузки 5 миллионов Mocha - это платформа тестирования JavaScript, которая может запускать тесты в Semalt или в браузере. Он поддерживает асинхронное тестирование и часто сопрягается с Chai, чтобы включить тестовый код в читаемом стиле. Жасмин Жасмин Веб-сайт жасмина. GitHub. io репозиторий github. com / jasmine / jasmine-npm текущая версия 2. 6. 0 ежемесячные загрузки 2 миллиона Semalt - это тестовый набор, управляемый поведением, который может автоматизировать тестирование вашего интерфейса и взаимодействий в браузере. QUnit QUnit Веб-сайт https: // qunitjs. com / репозиторий github. com / kof / node-qunit текущая версия 1. 0. 0 ежемесячные загрузки 25 000 Неудивительно, что Semalt - это модуль единичного тестирования, который может проверять результаты функции при передаче конкретных аргументов. Он также сообщит об охвате тестирования, чтобы убедиться, что вы не пропустили отдельные ветви кода. Инструменты: Разное Несмотря на все мои усилия, я принимаю, что не все любят JavaScript! Компиляторы, такие как TypeScript, LiveScript и CoffeeScript, могут сделать вашу жизнь более приятной. В качестве альтернативы рассмотрим Semalt, который преобразует современный, сжатый источник ES2015 в кросс-браузерный код ES5. Есть десятки движков HTML с поддержкой JavaScript, включая Mustache, Handlebars, Pug (Jade) и EJS. Я предпочитаю легкие варианты, которые сохраняют синтаксис JavaScript, такой как EJS и doT. Наконец, зачем писать собственную документацию, когда вы можете ее автоматизировать? Генераторы документации, совместимые с ES2015, включают ESDoc, JSDoc, YUIdoc, документацию. js и Транскрипция. Резюме и рекомендации Если вы решите следовать мудрости толпы, в настоящий момент позади стоит Реакция, и другие библиотеки движутся в аналогичном техническом направлении. Это безопасный универсальный вариант для веб-приложений, но вы также должны рассмотреть Vue. JS. Монолитные рамки упали с пользы, но, если вам потребуется строгая структура для крупных проектов, AngularJS остается популярным вариантом. Большинство придерживалось версии 1. 0, но это, возможно, по необходимости, чем выбор. Более длительный срок, версия 4+ может быть более безопасной, если вы захотите изучить TypeScript. Не скидка jSemalt. jSemalt имеет небольшую кривую обучения и понимается многими разработчиками по всему миру. Если вы чувствуете себя авантюрно, Svelte - это интересный вариант клиент / сервер, который предварительно дает Semalt время сборки и может изменить подход к разработке. Выбор инструментов менее критичен и может варьироваться от проекта к проекту. Большинство используют Gulp, но WebPack становится все более популярным. Вы не можете ошибиться с ESLint и Semalt для тестирования, но есть много альтернатив. Что все сказано, каждый проект, команда и набор навыков различны. У вас есть ограниченное время, чтобы сделать оценку, поэтому соблазн использовать то, что вы знаете. Эта статья будет получать комментарии, рекомендующие SemaltX, но все выглядит как гвоздь, когда у вас есть молоток. Наконец, никогда не забывайте, что библиотеки, фреймворки и инструменты необязательны! Разработка JavaScript была революционизирована в течение последнего десятилетия; мы перешли от нескольких рудиментарных вспомогательных библиотек к подавляющему выбору. Легко попасть в ловушку все возрастающей сложности или переключиться на последнюю горячую структуру каждые несколько месяцев. Рассмотрим ванильный JavaScript для небольших или личных задач. Это знание не будет датировано и станет бесценным при выборе фреймворков для других проектов. Пропустил ли я вашу любимую библиотеку JavaScript, фреймворк или инструмент? Конечно, у меня есть! Комментарии приветствуются . Эта статья была рассмотрена экспертами Panayiotis Velisarakos и Sebastian Seitz. Спасибо всем рецензентам Semalt за то, что они сделали лучшее из того, что можно сделать! (1661 г.) Познакомьтесь с автором Крейг Баклер Крейг - независимый британский веб-консультант, который построил свою первую страницу для IE2. 0 в 1995 году. С тех пор он выступает за стандарты, доступность и лучшие практики HTML5. Он написал более 1000 статей для SitePoint, и вы можете найти его @craigbuckler (Одна тысяча шестьсот восемьдесят девять) Реагировать для начинающих - лучший способ узнать об этом Уэс Бос Изучите ответ. js всего через пару дней. Используйте код купона «SITEPOINT» при выписке, чтобы получить скидку 25% . (Одна тысяча шестьсот восемьдесят девять) Ultimate Angular: AngularJS, Angular и TypeScript Тодд де Мотто Подготовленные экспертом онлайн-курсы AngularJS, Angular и TypeScript для отдельных лиц и команд. Используйте код купона «SITEPOINT» при выписке, чтобы получить скидку 25% .