Лучшие JavaScript фреймворки, библиотеки и инструменты в 2017
Свежая подборка самых популярных и наиболее востребованных JavaScript фреймворков, библиотек и инструментов на 2017 год.
Кажется, что JS-библиотек и фреймворков больше, чем JS-разработчиков. На май 2017 года быстрый поиск по GitHub выдает более чем 1.1 миллион проектов на JavaScript. На npm.js находится 500 тысяч активно используемых пакетов с почти 10 миллиардами скачиваний каждый месяц.
Эта статья призвана объяснить элементарные различия между самыми популярными JS-фреймворками, инструментами и библиотеками. Являются ли они лучшими для вас — уже другой вопрос. Выберите что-нибудь одно и задержитесь на нем какое-то время. Но избавьте себя от заблуждения, что ваш любимый инструмент не заменится чем-нибудь «получше» независимо от вашего первоначального выбора.
Пожалуйста, примите нижеизложенные соглашения перед прочтением данной статьи:
- Мир JavaScript меняется изо дня в день. Эта статья будет устаревшей с момента ее публикации!
- Под «лучшими» имеются в виду «наиболее популярные проекты общего назначения». Все они бесплатны и имеют открытый исходный код, но список может не включать ваши любимые.
- В список не попали проекты, разработка которых приостановлена, даже если они широко распространены и активно используются.
- Упомянуты только клиентские приложения. Некоторые из них могут выполнять функции серверной части, однако список не содержит полностью серверно-ориентированных приложений вроде Express.js или Hapi.
- Информация о каждом проекте краткая и предоставляет свободу для дальнейшего изучения.
- У каждого проекта есть индикатор популярности, но статистика, как известно, может вводить в заблуждение.
- Автор подборки предвзят. Вы предвзяты. Все предвзяты!
Для разных людей слова «фреймворк», «библиотека» и «инструмент» могут означать разные вещи в зависимости от контекста. Дадим общие определения, используемые здесь.
Библиотеки
Библиотека — это структурированный набор полезного функционала. Стандартная библиотека должна содержать функции для работы со строками, датами, DOM-элементами, событиями, cookie, анимацией, запросами, и многим другим. Каждая функция возвращает значения вызывающему ее приложению, которое может в дальнейшем использовать их в зависимости от логики разработчика. Это можно сравнить с подбором запчастей для автомобиля: вы свободны в выборе любого варианта, с которым машина будет работать, но логика целиком на вашей совести.Библиотека обычно сокращает время разработки примерно на 20%, позволяя вам не беспокоиться о мелочах. Отрицательные стороны:
- баг в реализации библиотеки может вызвать сложности в его нахождении и исправлении
- нет гарантии, что команда разработчиков оперативно выпустит патч
- патч может изменить API, что повлечет за собой значительные изменения в вашем коде.
Фреймворки
Фреймворк — это каркас приложения. Он обязывает разработчика выстраивать архитектуру приложения в соответствии с некоторой логикой. Любой фреймворк обычно предоставляет функционал вроде событий, хранилищ и связывания данных. По той же аналогии с машиной, фреймворк предоставляет готовые рамы, корпус и двигатель. Вы можете добавлять, удалять или заменять некоторые детали, при этом предполагая, что автомобиль останется в рабочем состоянии.
Фреймворк находится на более высоком уровне абстракции по сравнению с библиотекой и позволит вам без труда выстроить около 80% вашего приложения. Его минусы:
- последние 20% могут вызвать немалые трудности из-за ограничений, накладываемых фреймворком
- обновление фреймворка может быть сопряжено со сложностями, а порой и вовсе невозможно
- основной код и концепции редко удовлетворяют разработчиков в своем первозданном виде. Они всегда найдут «лучший» способ сделать что-либо.
Инструменты
Инструмент — это вспомогательное средство разработки, но он не является неотъемлемой частью проекта. Инструменты включают в себя системы сборки, компиляторы, транспайлеры, механизмы развертывания и другое.
Инструменты призваны облегчать процесс разработки. Например, многие предпочитают Sass чистому CSS, потому что он предоставляет возможность использовать циклы, функции, локальные переменные и многое другое. Браузеры не понимают Sass/SCSS синтаксис, так что код переводится в CSS.
Грань между фреймворками, библиотеками и инструментами довольно смутная. Фреймворк может содержать в себе библиотеку. Библиотека может реализовывать фреймворко-подобные методы. Инструменты могут быть неотъемлемой частью обоих.
Проекты упорядочены по популярности.
jQuery
Самая популярная js-библиотека всех времен. Она произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и ajax-запросы.
В последнее время jQuery утрачивает былую популярность, но по-прежнему остается жизнеспособным вариантом для проектов, требующих небольшого js-функционала.
Плюсы:
- Малый размер дистрибутива
- низкий порог вхождения, исчерпывающая документация в интернете
- лаконичный синтаксис
- легко расширяемый
Минусы:
- замедляет работу приложения
- может повлечь проблемы совместимости с браузером
- сообщество разработчиков протестует против его повсеместного использования
React
Самая горячо обсуждаемая библиотека прошедшего года. React претендует на роль библиотеки для создания пользовательских интерфейсов. Он фокусируется на «View»-части MVC-разработки и позволяет создавать компоненты интерфейса, сохраняющие свое состояние. Это была одна из первых библиотек, реализующих виртуальное DOM-дерево.
Статистика использования React может показаться довольно низкой из-за того, что он используется в основном в приложениях, а не на сайтах.
Плюсы:
- Компактность, эффективность, производительность и гибкость
- простая модель компонентов
- хорошая документация и обилие онлайн-ресурсов
- возможность рендеринга на стороне сервера
- растущая популярность
Минусы:
- новые концепции и синтаксис, которые придется изучить
- необходимы системы сборки
- может требовать сторонних инструментов и библиотек
- может быть несовместим с кодом и другими библиотеками, модифицирующими DOM-дерево
Lodash и Uinderscore
Эти две библиотеки объединены по причине того, что обе они предоставляют сотни инструментов для расширения функциональности нативных строк, чисел, массивов и методов работы с другими примитивами. Они довольно сильно пересекаются, поэтому их не рекомендуется использовать вместе в одном проекте.
Плюсы:
- компактные и простые
- хорошая документация, низкий порог вхождения
- совместимость с большинством других библиотек и фреймворков
- могут использоваться как ни клиенте, так и на сервере
Минусы:
- некоторые методы доступны в ES2015 И других более поздних версиях JavaScript
AngularJS
Первый фреймворк (или MVC фреймворк) в нашем списке. Наиболее популярной является версия 1.х, расширяющая HTML двусторонней привязкой данных одновременно с разделением манипуляций с DOM и логики приложения.
Angular 1.x до сих пор находится в разработке, несмотря на версию 2 (которая теперь версия 4!). Запутались? Читайте дальше…
Плюсы:
- популярный фреймворк, поддерживаемый несколькими крупными компаниями
- универсальное решение для создания современных веб-приложений
- часть «стандартного» стека MEAN (MongoDB, Express.JS, AngularJS, NodeJS), доступны множество статей и туториалов
Минусы:
- сложнее в освоении в сравнении с некоторыми альтернативами
- обширная база кода
- несовместимость с Angular 2.x
- несмотря на то, что является проектом Google, самим Google не используется
Angular 2
Angular 2.0 был представлен миру в сентябре 2016. Он был полностью переписан и представляет модульную модель компонентов, создаваемую на TypeScript. В марте 2017 состоялся релиз версии 4.0 (третья была пропущена во избежание нестыковок в семантическом версионировании).
Плюсы:
- универсальное решение для создания современных веб-приложений
- все еще часть стека MEAN
- TypeScript предоставляет некоторые преимущества для людей, знакомых с объектно-ориентированными языками вроде C# и Java
Минусы:
- см. минусы Angular 1.x
Vue.js
Легкий современный фреймворк для создания пользовательских интерфейсов. Предлагает React-подобный виртуальный слой ст поддержкой DOM, который может быть интегрирован с другими библиотеками.
Vue.js использует синтаксис шаблона HTML для связки DOM и данных. Модели являются простыми js-объектами, которые перестраивают интерфейс и/или контент при изменении данных.
Плюсы:
- зрительские симпатии и растущая популярность
- прост в освоении с нуля
- мало зависимостей и хорошая производительность
Минусы:
- молодой проект — высокие риски
- меньше ресурсов, чем у альтернатив
Backbone.js
Backbone.js был одним из первых клиентских фреймворков, реализующих модель MVC. Единственная зависимость — Underscore.js, созданный тем же разработчиком.
Скорее его можно отнести к библиотекам, потому что он может быть интегрирован в другие проекты. Хотя большинство разработчиков все же склонно называть Backbone.js фреймворком.
Плюсы:
- компактный, легкий и простой в изучении
- не добавляет дополнительной логики в HTML
- прекрасная документация
- использован в разработке многих приложений включая Trello, WordPress, LinkedIn и Groupon
Минусы:
- низкий уровень абстракции по сравнению с альтернативами (например, AngularJS)
- требует дополнительных компонентов для реализации фич вроде связывания данных
- более современные фреймворки отказались от модели MVC
Ember.js
Один из крупнейших фреймворков, основанных на модели MVVM. Он реализует шаблонизацию, связывание данных и библиотеки.
Плюсы:
- единое решение для клиентских приложений
- позволяет разработчикам быть продуктивными (использует jQuery)
- хорошая обратная совместимость
- одобряется современными стандартами веб-разработки
Минусы:
- большой дистрибутив
- считается монолитным по сравнению с другими фреймворками, основывающимися на модульной модели
- непрост в изучении
Knockout.js
Старейший MVVM фреймворк, использующий обозреватели для отслеживания состояния интерфейса. Поддерживает шаблонизацию и отслеживание зависимостей.
Плюсы:
- легковесный и не имеет зависимостей
- прекрасная поддержка браузеров вплоть до IE6
- хорошая документация
Минусы:
- вносит излишнюю сложность в большие проекты
- разработка замедлилась
- популярность сходит на нет
Примечание
Хотите больше?
- Polymer — библиотека, обеспечивающая кроссбраузерную поддержку компонентов HTML5
- Meteor — full-stack платформа для веб-приложений
- Aurelia — относительно молодой легковесный кроссплатформенный фреймворк
- Svelte — совсем новый проект, переводящий исходный код фреймворка в код JavaScript
- Conditioner.js — новая библиотека, которая автоматически подключает и отключает модули в зависимости от состояния.
Менеджеры задач общего назначения
Бандлеры
Линтеры
Тестирование
Какой JavaScript фреймворк следует учить в 2018 году
Скрытые фичи JavaScript
11 JavaScript-библиотек для визуализации данных, о которых стоит знать в 2018 году
Мы живём во времена взрывного роста объёмов данных, генерируемых и потребляемых человечеством. Практически в каждом из разрабатываемых сегодня приложений данные либо используются где-то внутри них, либо визуализируются. Программисты, используя данные, стремятся сделать работу с их программами максимально комфортной.Иногда может случиться так, что самое ценное и интересное, что может дать приложение пользователю — это некие данные. Однако если представить их в виде чего-то вроде списка или таблицы, работа с такими данными, скорее всего, окажется утомительной. Кроме того, если данных много, видя лишь их самое простое представление, пользователь столкнётся со сложностями, касающимися их анализа и принятия на их основе каких-либо решений.
Данные, которые представляют пользователю приложения, не только должны иметь для него ценность сами по себе. Их следует оформлять так, чтобы с ними было быстро, удобно и приятно работать.
Сегодня мы представляем вашему вниманию перевод материала, в котором рассмотрены опенсорсные JavaScript-библиотеки для визуализации данных.
1. D3
Библиотека D3
Пожалуй, опенсорсную библиотеку D3 (её ещё называют D3.js) можно назвать самой популярной из существующих JS-библиотек для визуализации данных. Этот проект, в частности, собрал почти 80 тысяч звёзд на GitHub. Библиотека создана для визуализации данных с использованием таких технологий, как HTML, SVG и CSS.
Благодаря вниманию создателей библиотеки к веб-стандартам, D3 даёт разработчикам целостную, подходящую для использования в современных браузерах среду для визуализации данных, избавляющую их от необходимости поиска неких платных решений. Библиотека D3 объединяет в себе компоненты для визуализации данных и подход к работе с DOM, в основе которого лежат, опять же, данные. D3 позволяет выводить в DOM произвольные данные, а затем применять к документу подходящие трансформации. Вот отличная галерея примеров использования этой библиотеки.
Кстати, обратите внимание на то, что есть мнение, в соответствии с которым D3 — это вовсе не библиотека для визуализации данных. Полагаем, вы сами сможете решить, чем её считать, и стоит ли пользоваться ей в вашем проекте.
2. Chart.js
Chart.js
Библиотека Chart.js, собравшая примерно 40 тысяч звёзд на GitHub, является весьма популярным решением для создания HTML5-графиков и диаграмм, основанных на элементе <canvas>, предназначенных для разработки отзывчивых веб-приложений. Актуальная на данный момент вторая версия библиотеки поддерживает комбинирование графиков различных типов (существует 8 базовых типов графиков), различные системы координат. Chart.js можно использовать совместно с библиотекой moment.js. Библиотеку, при необходимости, можно загрузить с cdnjs.
3. Three.js
Three.js
Библиотека Three.js представляет собой весьма популярное решение (около 45 тысяч звёзд на GitHub; вклад в проект сделали более 1000 человек) для создания 3D-анимации средствами WebGL. Гибкость и абстрактность проекта означают возможность использования Three.js для визуализации данных в 2-х и 3-х измерениях. Например, вот специализированный модуль для Three.js, предназначенный для создания трёхмерных графиков. Вот онлайн-песочница для экспериментов по визуализации данных. Если вы подумываете о визуализации данных средствами WebGL — уверены, вам будет полезно взглянуть на Three.js.
4. ECharts и Highcharts JS
Пример работы с ECharts (изображение взято отсюда)
ECharts — проект Baidu, собравший около 30 тысяч звёзд на GitHub, представляет собой библиотеку для визуализации данных и построения графиков в браузере. Она написана на чистом JavaScript с использованием библиотеки zrender, предназначенной для работы с элементом <canvas>.
Библиотека поддерживает вывод графиков с использованием <canvas>, SVG (4.0+) и VML. ECharts можно использовать не только при разработке страниц, рассчитанных на настольные или мобильные браузеры, но и для организации эффективного серверного рендеринга. Вот галерея примеров использования этой библиотеки, с которыми можно поэкспериментировать в интерактивной среде.
Highcharts JS
Библиотека Highcharts JS довольно широко используется, она собрала примерно 8 тысяч звёзд на GitHub. Основным применяемым ей механизмом для визуализации данных является технология SVG, с возможностью перехода на VML и на <canvas> для устаревших версий браузеров. Заявлено, что этой библиотекой пользуются 72 из 100 крупнейших мировых компаний, что, если это действительно так, делает эту библиотеку самым популярным решением для построения графиков среди крупных компаний, таких, как Facebook и Twitter.
5. MetricsGraphics.js
MetricsGraphics.js
Библиотека MetricsGraphics.js (примерно 7 тысяч звёзд на GitHub) представляет собой решение, оптимизированное в расчёте на визуализацию временных рядов. Она отличается сравнительно маленьким размером (80 Кб в минифицированном виде) и даёт разработчику небольшой, но продуманный набор узкоспециализированных инструментов, среди которых — средства для построения линейных графиков, диаграмм рассеяния, гистограмм, столбчатых графиков, таблиц с данными. Вот интерактивная галерея примеров работы с этой библиотекой.
6. Recharts
Recharts
Библиотека Recharts, набравшая почти 10000 звёзд на GitHub — это решение для построения графиков, основанное на React и D3, использование которого выглядит как работа с декларативными React-компонентами. Библиотека даёт в распоряжение разработчика поддержку SVG. Её легковесное дерево зависимостей (основанное на подмодулях D3) поддаётся тонкой настройке через свойства компонентов. Здесь можно найти примеры её использования.
7. Raphaël
Raphaël
«Векторная» библиотека Raphaël (около 10 тысяч звёзд на GitHub) предназначена для работы с векторной графикой в веб-среде. Она, в качестве базовых технологий для создания графических объектов, использует SVG и VML. В результате графические объекты являются ещё и DOM-объектами, к которым можно подключать, средствами JavaScript, обработчики событий. В настоящее время библиотека поддерживает такие браузеры, как Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.
7. C3
Пример использования библиотеки C3
Библиотека C3 (примерно 8 тысяч звёзд на GitHub) основана на D3, она предоставляет разработчику возможность пользоваться классами для всех своих элементов, что позволяет определять собственные стили средствами классов и пользоваться возможностями D3. Кроме того, она поддерживает различные API и коллбэки для организации интерактивного взаимодействия с графиками. Используя их, можно обновлять графики даже после их вывода на страницу. Вот примеры использования этой библиотеки.
8. React-Vis, React Virtualized, Victory
Набор компонентов React-Vis
Набор компонентов React-Vis (около 4 тысяч звёзд на GitHub) разработан компанией Uber и предназначен для организации единообразной системы визуализации данных в React-приложениях. Это решение поддерживает представление данных в различных видах, в частности, в виде тепловых карт и диаграмм рассеяния. Для работы с этой библиотекой не требуется предварительное знакомство, скажем, с чем-то вроде D3. Она предоставляет разработчику низкоуровневые модульные строительные блоки вроде осей X/Y.
Набор компонентов React virtualized
Набор компонентов React virtualized (около 12 тысяч звёзд на GitHub) предназначен для организации эффективного рендеринга больших наборов табличных данных. Доступны ES6, CommonJS и UMD-сборки React virtualized, проект поддерживает Webpack 4. Если вы собираетесь воспользоваться этим набором компонентов, обратите внимание на раздел Dependencies в его документации.
Коллекция компонентов Victory
Victory — это коллекция React-компонентов, предназначенных для визуализации данных с поддержкой интерактивных возможностей. Проект создан силами Formidable Labs, он собрал около 6 тысяч звёзд на GitHub. Victory использует одинаковые API и для обычных React-приложений, и для среды React Native, что облегчает разработку кросс-платформенных решений. Victory предлагает разработчику гибкие и красивые способы использования возможностей React-компонентов для визуализации данных.
9. CartoDB
Сервис CartoDB
Платформа Carto (около 2 тысяч звёзд на GitHub), предназначена для визуализации и анализа геоданных. На эту платформу можно загрузить геоданные (например, в форматах Shapefiles или GeoJSON), визуализировать их, наложить на карту, стилизовать средствами CartoCSS, можно осуществлять поиск по ним с использованием SQL. Здесь имеются видеоруководства по работе с этой платформой.
10. RAWGraphs
RAWGraphs
Библиотека RAWGraphs с примерно 5 тысячами звёзд на GitHub, предоставляет собой средство, которое позволяет связывать таблицы, содержащие данные, со средствами визуализации. RAWGraphs основана на D3, она позволяет разработчикам создавать собственные векторные визуализации данных. Она работает с табличными данными в разных форматах, поддерживает и данные, которые можно просто скопировать из других приложений. Результаты работы RAWGraphs представлены в формате SVG, их можно редактировать, используя соответствующие приложения, либо использовать на веб-страницах в неизменном виде. Вот примеры использования этой библиотеки.
11. Metabase
Metabase
Библиотека Metabase, которая собрала более 11 тысяч звёзд на GitHub, предлагает довольно быстрый и простой способ создания панелей управления, содержащих визуализированные данные, не требующий знания SQL. При этом у библиотеки есть специальный SQL-режим, предназначенный для аналитиков и для людей, профессионально занимающихся обработкой данных. Metabase позволяет сегментировать данные, создавая фильтры или наборы фильтров, библиотека поддерживает создание метрик — вычисляемых показателей, к которым приходится достаточно часто обращаться. Среди других возможностей Metabase можно отметить поддержку отправки данных в Slack и обеспечение возможности работы с ними в этой среде с использованием MetaBot. Эту библиотеку, пожалуй, можно считать отличным инструментом для визуализации данных внутри компаний, хотя надо отметить, что для того, чтобы её освоить, понадобятся некоторые усилия.
Бонусная библиотека: Taucharts
Taucharts
Библиотека для визуализации данных Taucharts (около 2 тысяч звёзд на GitHub) основана на библиотеке D3. Она предоставляет разработчику декларативный интерфейс для быстрой организации связи полей данных с визуальными свойствами. Её архитектура позволяет создавать диаграммы, на которых переменные группируются с использованием координат X и Y (facet charts). Taucharts позволяет расширять поведение диаграмм благодаря плагинам, подходящим для повторного использования.
Итоги
Мы рассмотрели JavaScript-библиотеки для визуализации данных, которые можно использовать при разработке веб-приложений. Учитывая то, что мы говорили о роли данных в современном мире, неудивительно то, что существует огромное количество решений для визуализации данных. Поэтому вот ещё несколько подобных библиотек (изучая их, обратите внимание на то, что некоторые из них давно не обновлялись):
Уважаемые читатели! Какие библиотеки вы используете для визуализации данных в своих веб-проектах?
15 свежих Javascript-библиотек | Javascript
jQuery-плагины и Javascript-библиотеки помогают нам сэкономить время, особенно если речь идет о реализации какого-нибудь нестандартного решения для веб-сайтов.
Сегодня мы хотим поделиться с вами подборкой свежих Javascript-библиотек, с помощью которых можно создавать эффективные и полезные веб-приложения. Наслаждайтесь!
Datalib — это библиотека для работы с данными. Она включает в себя средства для загрузки данных, ведения статистики и использования шаблонов строк. Хотя изначально библиотека разрабатывалась для движка Vega и связанных с ним проектов, datalib – это полноценная независимая библиотека.
Ее можно использовать для создания с помощью Javascript приложений для управления данными как на стороне клиента (в браузере), так и сервера (например, в связке с node.js).
Vorlon.js – это open-source инструмент с поддержкой расширений, позволяющий удаленно вести отладку и тестирование javascript-кода.
Библиотека основывается на node.js и socket.io. Чтобы установить Vorlon.JS, нужно будет добавить всего лишь одну строку кода в ваше веб-приложение. Затем запустить сервер и открыть консоль Vorlon.JS. Инструмент позволяет одновременно подключиться к 50 устройствам.
Проверить работу кода на каждом из подключенных устройств можно в одно нажатие. Отладку можно проводить практически на любой платформе при помощи веб-интерфейса. Плагин также позволяет добавлять новые функции и подключать ресурсы.
Layzr.js – маленькая, современная, быстрая и независимая библиотека для создания отложенной инициализации (или как ее принято называть «ленивой загрузки»). Она помогает увеличить скорость загрузки страницы, так как изображения загружаются только после того, как попадут в область просмотра браузера.
Wheelnav.js — библиотека на основе SVG для создания анимированного навигационного меню. Она позволяет создавать округлые, табулированные и многие другие форматы меню навигации. Библиотека включает в себя предопределенные CSS-классы, а также поддерживает data-атрибуты HTML5.
Sprint.js представляет собой миниатюрную DOM-библиотеку для современных браузеров. Sprint эффективен в использовании на устройствах с ограниченной пропускной способностью, будь то смартфон или планшет.
cta.js или Call to Animation (в переводе «нажми для включения анимации») – это миниатюрная библиотека, которая позволяет анимировать любой элемент на странице, развернув его на все окно браузера.
Yako.js представляет собой миниатюрную библиотеку для построения графиков без использования DOM, разработанную для быстрого рендеринга как на клиентской, так и на серверной стороне. Библиотека предназначена для создания простеньких легких SVG-графиков, которые работают гораздо быстрее по сравнению с highcharts / flot / c3 / d3.
Dragula – javascript-библиотека, которая просто делает свою работу, и не зависит при этом от перегруженных фреймворков.
Главная задача библиотеки twgl.js заключается в том, чтобы облегчить процесс использования API WebGL.
Beep.js– набор JavaScript-инструментов для разработки браузерных синтезаторов на основе API WebAudio.
Basket.js – простой загрузчик скриптов, который кэширует их в локальное хранилище. Он позволяет автоматически подгружать локально сохраненные скрипты, а новые автоматически кэшировать для дальнейшего использования.
Bamboo.js — фреймворк для разработки адаптивных веб-приложений, в которых необходимо использовать скользящее меню и фиксированную шапку сайта с возможностью прокрутки контента. Традиционная кнопка раскрывает и скрывает меню навигации. Если окно браузера будет меньше ширины веб-страницы, то меню будет постоянно отображаться с левой стороны.
elevator.js – простая кнопка «Наверх», которая имитирует поведение настоящего лифта, и даже воспроизводит соответствующее звуковое сопровождение.
Iconate.js представляет собой миниатюрную библиотеку для создания иконки, которая изменяется в зависимости от используемого браузера. iconate.js также поддерживает модульные паттерны AMD и commonJS.
AudioDrop – утилита, которая позволяет реализовать загрузку данных из AudioBuffer в формате drag-and-drop. Просто укажите элемент, который будет выполнять функции дроп-зоны, и создайте callback-функции для последующей обработки загруженных данных.
Данная публикация представляет собой перевод статьи «15 FRESH JAVASCRIPT LIBRARIES FOR MAY 2015» , подготовленной дружной командой проекта Интернет-технологии.ру
15 полезных JAVASCRIPT – библиотек для вашего сайта.
Для того чтобы сделать сайт, нужно обладать некоторыми навыками и знаниями. И для того, чтобы использовать JavaScript-библиотеки, которые вы найдете в этой статье, вы также должны обладать некоторыми знаниями и навыками в JavaScript, но при этом экспертность тут ни к чему.
Для получения экспертных знаний необходимо постоянно практиковаться в объединении различных библиотек на сайте. Это не то, чему можно научиться, просто прочитав пару книг. Однако, как только вы овладеете общей концепцией – вашему творческому порыву не будет предела.
В этой статье представлено несколько полезных JavaScript-библиотек, которые предназначены для улучшения возможностей разрабатываемого сайта. Может быть вы не найдете здесь своих любимых инструментов, но это не значит, что представленное здесь нельзя попробовать. На самом деле, любая библиотека, которая даст вам то, что вы ищете, не должна быть проигнорирована.
Начнем с очевидного. Вы наверняка уже используете эту библиотеку, даже если не знаете об этом. По сути jQuery – библиотека позволяет делать динамические вещи для статических страниц. При этом программирование на стороне сервера не нужно. Здесь обновления происходят быстрее, чем серверные. Многие библиотеки зависят от jQuery, поэтому для создания нужного эффекта, ее включение в верстку становится обязательным.
Это, в некотором роде, конкурент jQuery. Она применяется, но не так широко. А их использование вместе может привести к конфликтам, если не принять меры. Именно поэтому очень важно знать особенности работы библиотек вместе.
Эта библиотека позволяет решить проблемы с отрисовкой страниц для старых браузеров, которые не поддерживают HTML5. Хотя такие браузеры встречаются все реже, они по прежнему актуальны и, знание Modernizr, поможет вам справиться с этими проблемами.
Всего за 6 коротких лет, Bootstrap добилась огромного распространения во всем мире веб-разработки. Эта библиотека делает очень удобным разработку макета интерфейса, а также очень помогает в адаптивной верстке. Но для более удобной работы с ней, нужно разобраться с настройками. И это не сложно.
Вы наверняка знаете, что формат PDF имеет ряд определенных уязвимостей. И для того, чтобы обойти эту проблему, была создана PDF.js – библиотека для отображения PDF на «холсте» HTML5. Очевидно, что она работает только в браузере, который поддерживает HTML5 и Canvas.
Отличная библиотека, которая дает в руки простой, но мощный генератор графиков. Так что можно создавать все виды профессиональных графиков без особого напряжения своих умственных способностей. Есть платная и бесплатная версии. Бесплатная – менее эффективна и включает в себя водяной знак, который будет на всех графиках. При покупке пакета – знак отсутствует и появляется больше возможностей.
Это действительно хорошая, совершенно бесплатная альтернатива JS Charts. Эта библиотека проста в использовании и хорошо документирована. Ее использование потребует немного больше знаний JavaScript, чем JS Charts.
Это старший брат двух предыдущих библиотек. С его помощью любые данные могут быть визуализированы и выражены в очень большом числе способов. Просто посмотрите примеры на веб-сайте.
Отличный графический фреймворк. BHive позволяет быстро создавать графику, анимацию SVG и включать интерактивность, которая может использоваться в разработке игр и образовательных ресурсах.
Избыток каруселей на одном сайте – это не очень хорошее решение. Да и найти тот, который будет удовлетворять требованиям не легко. Owl Carousel – один из лучших плагинов, которые были созданы для jQuery. Он отлично работает и на сенсорных экранах.
Иногда, информация о датах должна выражаться в теле сайта по-разному. Date.js дает возможность такого выражения через достаточно не сложный синтаксис.
Еще один формат форматирования и обработки данный. Он немного сложнее, чем Date.js, но позволяет легко выполнять определенные вычисления (isAfter, isBefore, isSameOrAfter, isSameOrBefore, isBetween, isLeapYear, isDate и т.д.).
Вам нужен календарь – используйте datepicker – это очень простое и элегантное решение. Он также совместим с мобильными интерфейсами.
Делает с цифрами тоже, что Date.js делает для дат.
Простая и полезная библиотека. WForms упрощает работу с формами ввода данных пользователем. Она включает в себя контроль ввода, подсказки и другие полезные функции.
Источник: http://inspiredm.com/
Читайте также:
12 интересных вариантов тени для текста с помощью свойства CSS text-shadow.
Как SEO блога помогает увеличить продажи.
Как сделать сайт?
50 лучших JavaScript плагинов и библиотек из 2016 года — Записки преподавателя
Вышедшие в этом году бесплатные плагины и библиотеки JavaScript из этой статье без излишних сложностей реализуют часто используемые функции. Здесь нет раздутых фреймворков. Здесь простые и полезные решения, которые помогают сделать веб-дизайн и процесс разработки гораздо проще и быстрее.
Как и следовало ожидать, есть плагины для создания ползунков, галерей изображений, дружественного меню, модальных окон, а также многих других общих компонентов. Кроме того, здесь Вы найдете плагины, которые предлагают действительно уникальные функциональные возможности, например, скрывающиеся боковые панели, значки превью для анимированных gif-ок и многое, многое другое.
Приступим.
Сhoreographer-js
Сhoreographer-js простая библиотека для сложных анимаций.
Leaflet.js
Leaflet.js — библиотека JavaScript для создания интерактивных карт.
Lory
Lory представляет собой сенсорный минималистичный слайдер на JavaScript.
CurrencyFormatter.js
CurrencyFormatter.js — супер простая «легкая» библиотека для форматирования валют (155 валют и 7KB).
ARc
ARc (Atomic React) шаблон React приложения концепции Atomic Design.
egjs
Egjs представляет собой небольшой набор взаимодействий UI, библиотека компонентов эффектов & утилит для JQuery.
Shave.js
Shave.js — современный плагин JavaScript для усечения текста внутри элемента HTML.
Next.js
Next.js — минималистический фреймворк визуализации серверных приложений React.
Jquery Linechart
JQuery Linechart — новый плагин JQuery для построения простых диаграмм.
Blueprint
Blueprint — набор компонентов пользовательского интерфейса, включающий общие элементы интерфейса, шаблоны и взаимодействие в Интернете.
Tabulator
Tabulator — простой плагин jQuery для создания интерактивных таблиц.
baguetteBox.js
baguetteBox.js — простой и легкий в использовании скрипт для лайтбоксов на изображениях с поддержкой жестов на мобильных устройствах. Написан на чистом JavaScript.
ScrollReveal
ScrollReveal — супер-легкий плагин для анимации прокрутки веб-страниц на настольных и мобильных устройствах.
Marginotes
Marginotes создает примечания на краю текста для ключевых слов, определенных HTML атрибутами. Если jQuery не ваш выбор, то есть версия и без него.
Loud Links
Loud Links представляет собой простую библиотека JavaScript для добавления звуков на ваш сайт. Аудиоэффекты для элементов HTML5 используют MP3 или OGG файлы.
Bricks.js
Bricks.js — генератор макетов с «молниеносным» складыванием плиток фиксированной ширины.
MediumEditor
MediumEditor представляет собой легкий (28KB) набор инструментов для встроенных WYSIWYG редакторов.Кроме того, есть доступные расширения и темы Mediumditor.
Philter
Доступный или как плагин JQuery или ванильным JavaScript, то Philter предоставляет средства для управления CSS фильтрами для HTML-атрибутов.
SuperEmbed.js
SuperEmbed.js набор скриптов JavaScript для встраивания видео на вебстраницах и делает их адаптивными.
NB! Прочитайте внимательно «. . . ежик резиновый с дырочкой в правом боку» или адаптивный дизайн видео
Substance
Substance представляет собой библиотеку JavaScript для веб-редактирования контента. Здесь есть все инструменты для создания пользовательских текстовых редакторов и веб-издательских систем.
List.js
List.js представляет собой легкий и быстрый JavaScript код, который добавляет функции поиска, сортировки, фильтрации и гибкость управления списками, таблицами и все, что угодно в HTML.
jqGifPreview
jqGifPreview — простой JQuery плагин предварительного просмотра анимированных GIF-ок так, как вы видите на Facebook.
Datedropper.js
Datedropper.js — плагин JQuery для простого управления полями ввода дат.
jfMagnify
jfMagnify — плагин JQuery, создающий эффект увеличительной лупы для любого HTML-элемента и не только изображения.
Jquery formBuilder
JQuery formBuilder — новый плагин JQuery для быстрого перетаскивания элементов при создании форм.
Popper.js
Popper.js представляет собой «легкую»(4kb) библиотеку управления попперс, всплывающих подсказок и Popovers. Вы можете быстро и легко позиционировать всплывающие подсказки всего одного линейном кодом.
Image Blur Plugin
Image Blur Plugin представляет собой легкий кросс-браузерный плагин JQuery для размытия изображений.
InlineTweet.js
InlineTweet.js позволяет легко создавать tweet-подобные ссылки из любого текста на вебстранице. Все, что вам нужно сделать это обернуть tweet-подобный текст в контейнере data-inline-tweet.
iMissYou.js
iMissYou.js — удобный небольшой плагин JQuery изменения названия & фавиконки страницы, после ухода пользователя с вашего сайта.
SweetAlert2
SweetAlert2 — красивые и настраиваемые всплывающие окона на JavaScript.
Turntable.js
Turntable.js — ползунок JQuery для пролистывания изображений при движении мыши по контейнеру.
Force.js
Force.js — библиотека JavaScript, которая упрощает анимации HTML элементов и навигацию по вебстраницам.
Push.js
Push.js — кросс-браузерное JavaScript решение для получения и обработки уведомлений.
Bideo.js
Bideo.js — библиотека JavaScript, позволяющая очень легко добавлять полноэкранные фоновые видео на веб-страницы.
Microlight.js
Microlight.js представляет собой библиотеку для подсветки кода на любом языке программирования, что значительно улучшает читаемость.
Algolia Places
Algolia Places является простым способом поиска при автозаполнении на вашем сайте. Библиотека JavaScript.
flatpickr
Написанная в ванили JavaScript, flatpickr легкий DateTimePicker и решение для календаря.
Slidebars
Slidebars является Framework JQuery для добавления офф-холста меню и боковых панелей на ваш сайт или в вебприложение.
anime.js
anime.js представляет собой гибкую и легкую библиотеку анимации на JavaScript. Работает с CSS, SVG, DOM атрибутами и JS Objects.
Cleave.js
Cleave.js форматирует значение в поле ввода .
Skippr
Skippr — супер простое и легкое слайдшоу, плагин JQuery.
iziModal.js
iziModal.js элегантный, отзывчивый, гибкий и легкий модальный JQuery плагин.
Lightgallery.js
Lightgallery.js представляет собой полнофункциональный JavaScript Lightbox галерею без взаимозависимостей.
Вас могут заинтересовать . . .
Источник перевода: Top 50 Lightweight JavaScript Plugins & Libraries from 2016
50 лучших JavaScript плагинов и библиотек из 2016 года, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.
3 нравится это
JavaScript библиотеки 2017
Среди сотен бесплатных JavaScript библиотек очень сложно выбрать ту, на которую стоит потратить время и энергию. Про некоторые забывают, какие-то разделяются на новые проекты, в то время как другие распространяются с невероятной скоростью.
Большинство разработчиков уже знают такие известные названия как jQuery и React, но в этой статье я бы хотел представить 12 альтернативных JavaScript библиотек, которые менее известны, но стремительно растут.
Хранение и обработка больших объемов данных (big data) – быстро развивающаяся индустрия, как и визуализация данных (data visualization), которая становится не менее важной. Существует множество различных библиотек, помогающих разрешить проблему, но ни одна не выделяется так сильно как D3.js. Эта JavaScript библиотека работает с SVG для рендеринга графиков, диаграмм и динамической визуализации.
Она абсолютная бесплатная, и это один из мощнейших инструментов для визуализации, построенный на JavaScript. Если вы ищете современный метод для рендеринга данных в браузере, то я настоятельно рекомендую познакомиться с этой библиотекой и узнать, что она может предложить.
Я знаю, что многие разработчики уже устали все время слышать о Node, но это действительно самая быстрорастущая JavaScript библиотека, которая предлагает больше, чем просто среду для разработки. С помощью NPM вы можете управлять локальными данными всех ваших проектов прямо из командной строки – это делает Node полноценным инструментом для разработки, который отлично сочетается с другими инструментами, например, с Gulp. К тому же, существует много проектов с открытым исходным кодом, построенных на Node.js, так что вы можете работать с модулем тестирования на Mocha.js или создать фронтенд интерфейс с помощью Sails.js фреймворка.
Если вы еще не попробовали Node, то вы многое теряете.
Виртуальный рендеринг DOM и пользовательские дополнения наполняют библиотеку React. Она быстро стала выбором всех профессионалов, которые хотят мощную интерфейс библиотеку для фронтенд разработки.
Но Riot.js успешно борется за право стать альтернативой React. Используя фреймворк Riot у вас все еще будет доступ к виртуальному DOM, но управлять им будет значительно легче благодаря упрощенному синтаксису. К сожалению, эта библиотека не такая большая как React, и не спонсируется Facebook’ом, так что большого сообщества разработчиков тоже нет. Но это неплохая альтернатива и достойный конкурент в фронтенд пространстве.
От веб-анимации до диджитал медиа – с помощью Create.js вы можете работать с чем угодно. Это не одна единственная библиотека, а набор библиотек, созданных для разных целей. Например, Easel.js работает с HTML5 canvas элементами, Tweet.js помогает создавать анимации.
Каждая библиотека в этой сборке служит для определенной цели и предлагает современные возможности для всех основных браузеров. Но большинство этих библиотек обладают специфическими возможностями, так что их лучше всего применять на специализированных сайтах. Если интересно, можете посмотреть на сайте Create.js что они предлагают.
Ранее я упоминал о Node.js и как много библиотек на нем построено. Keystone.js – отличный пример, который предлагает полноценный CMS движок.
С помощью Keystone вы можете создать MEAN приложения, работающие на Node/Express и MongoDB. Keystone.js абсолютно бесплатная, но все еще очень новая. На момент написания статьи существует только версия 0.3, так что пройдет еще много времени, прежде чем она станет востребованной среди профессионалов. Но если вас интересует JavaScript CMS, то обязательно попробуйте.
В мире фронтенд фреймворков существует два наиболее известных варианта: Angular и Ember, но Vue.js – это еще один популярный фреймворк, который набирает все большую популярность с момента выхода версии 2.0.
Vue – это MVVM фронтенд JavaScript фреймворк, так что он уже отличается от типичной MVS архитектуры. Его сложно учить, но синтаксис становится понятным, когда начинаешь понимать, как все работает. Это неплохой вариант в войне фронтенд фреймворков, и он достоин пристального внимания.
Вы можете интегрировать любую платформу в Meteor фреймворк и получить отличный результат. Этот проект с открытым исходным кодом помогает разработчикам создавать JavaScript приложения, будь то онлайн чат, социальное сообщество или виджеты.
Уже даже существует социально-новостной фреймворк, названный Telescope, построенный на Meteor, который позволяет создавать новостные/социальные сайты с нуля, работающие на Meteor и React.
Meteor – отличная библиотека c огромным количеством возможностей, но изучить его не так просто. Однако, это весело, и умелые JavaScript разработчики могут создать практически что угодно на этой платформе.
С помощью Chart.js вы можете создавать гистограммы, линейные графики, пузырьковые диаграммы и другие похожие вещи, используя JavaScript и canvas API. Это одна из наиболее простых JavaScript библиотек для изображения данных в графиках с предустановленными опциями и анимациями.
Это одна из немногих библиотек, которые я рекомендую для отображения данных в графиках, потому что ее легко установить, легко кастомизировать, и к ней прилагается одна из лучших документаций среди проектов с открытым кодом.
Похоже, виртуальная реальность берет мир штурмом со своими новыми стартапами и неустанно работающими над VR проектами разработчиками. Вот почему я не удивился, когда нашел WebVR – JavaScript API, сделанная для VR в вашем браузере.
Она работает с большинством популярных девайсов, таких как Oculus Rift и Vive, но на данный момент находится на стадии разработки. Исходный код API тестируется на современных браузерах, чтобы определить, как он функционирует на VR девайсах.
Если хотите узнать и поучаствовать в проекте, посетите официальный сайт или страницу MozVR.
Сложно представить, насколько сильно развилась 3D анимация с 1980 года по сегодняшний день. Нам всем знакомы 3D анимированные фильмы, но веб анимация все еще новый рубеж. К счастью, у нас есть такие библиотеки как Three.js, прокладывающие путь для 3D анимации в интернете.
На главном сайте вы сможете найти много примеров Three.js в действии. Вы можете создать чувствительные к движению фоны, пользовательскую 3D веб графику, и динамические элементы интерфейса. Если у вас достаточно терпения и желания, вы сможете создать практически людей 3D эффект с помощью этой библиотеки. Это лучший ресурс для 3D анимации в интернете с большим количеством примеров, которые покажут с чего начать.
Функциональное программирование с помощью JavaScript появилось не так давно, но это все еще достаточно новое направление, которое становится еще более популярным благодаря Omniscient.js. Эта бесплатная JavaScript библиотека осуществляет рендеринг для всех фронтенд компонентов сверху вниз. Вы можете писать функциональный JS код с нуля и работать с отличной библиотекой пользовательского интерфейса React.
Я особенно рекомендую эту библиотеку всем опытным разработчикам, которые хотят сделать процесс разработки более гладким. Эта библиотека достаточно сложна для новичков, но Omniscient может кардинально изменить процесс разработки, когда используется совместно с компонентами React.
Если вам нужна JavaScript библиотека, работающая с пользовательским интерфейсом, Ractive.js вам подойдет. Она работает шаблонными элементами и данными так, что вы сможете создавать шаблоны из элементов, которые прикреплены к Ractive функциям в JavaScript.
Это достаточно сложная библиотека, но она предлагает понятные курсы для новичков. Она не такая детализированная как React и использует другой синтаксис в JS и HTML. Посетите основной сайт, чтобы узнать больше, и взгляните на страницу с примерами, чтобы понять, на что способен Ractive.
Заключение
Каждая из библиотек в этой статье может предложить что-то новое для JavaScript сообщества. Если вам нравится кодить на JavaScript, то просмотрите каждую библиотеку, может, они смогут как-то улучшить ваш веб-проект.
Перевод статьи 12 JavaScript libraries to watch in 2017
Автор оригинального текста Jake Rocheleau
Библиотека JavaScript — Википедия
Материал из Википедии — свободной энциклопедии
Библиотека JavaScript — сборник классов и/или функций на языке JavaScript.
Язык JavaScript, изначально разработанный Netscape (а затем развиваемый Mozilla), долгое время использовался в сети на многих сайтах, но широкую популярность получил с приходом Веб 2.0 — периода развития компьютерных систем, в котором JavaScript стал активно использоваться в разработке пользовательских интерфейсов как веб-приложений, так и настольных приложений. JavaScript в связке с CSS используется для создания динамических сайтов, более доступных, чем основанные на Flash альтернативы.
С увеличением популярности JavaScript, простота создания динамических элементов пользовательского интерфейса стала играть ключевую роль в веб-разработке. Этим обусловлен лавинообразный характер появления различных библиотек JavaScript, таких как Ext и Dojo. С другой стороны, одним из последствий войны браузеров стала разница в реализации объектной модели документа[1] и это обусловило необходимость затрачивать дополнительные усилия для реализации корректной работы различных браузеров. Данное обстоятельство обусловило появление библиотек JavaScript, предоставляющих кросс-браузерный интерфейс к методам DOM, таких как Prototype, script.aculo.us или jQuery.
Удобство использования библиотек JavaScript привело к тому, что Microsoft, Yahoo! и другие крупные ИТ-компании разрабатывают свои собственные основанные на JavaScript библиотеки элементов пользовательского интерфейса, встраиваемые в веб-приложения, разрабатываемые этими компаниями.
Практически все библиотеки JavaScript выпускаются под лицензиями копицентр и копилефт, чтобы обеспечить свободную от лицензионных отчислений разработку, использование и модификацию.
Более того, некоторые библиотеки JavaScript позволяют упростить взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить запуск приложений JavaScript с приложениями, написанными на других языках программирования.