Aurelia JS

Этот JavaScript фреймворк — детище Роба Эйзенберга, автора известных в прошлом Caliburn.Micro и Durandal. Роб был членом команды, работающей над Angular, но в процессе работы над этим проектом между ним и остальными членами команды возникли разногласия. Из-за этого он вышел из ее состава и стал работать над собственным фреймворком, так начиналась история Aurelia JS.

Его называют JavaScript фреймворком следующего поколения, идеально подходящим для веб и мобильных приложений. Aurelia JS отличается компактностью и ненавязчивостью кода. То есть специфические конструкции самого JavaScript фреймворка минимально засоряют ваш код. Это удобно и облегчает освоение Aurelia JS.

👉 @sWebDev

String.js

Библиотека string.js, или просто S, это маленькая (менее 5 Кб в минифицированном и сжатом виде) JavaScript-библиотека, которую можно использовать в браузере и в среде Node.js. Она даёт в распоряжение программиста большой набор методов для работы со строками. Это — методы объекта string.js, в состав которых, для удобства, включены и стандартные методы строк. Объект string.js — это нечто вроде обёртки для обычных строк.

Примечательные методы

Метод between
Он извлекает из строки подстроку, содержащуюся между строками left и right. Например, этот метод можно использовать для извлечения элементов, находящихся между двумя HTML-тегами:

 S = require('string');
S('<a>This is a link</a>').between('<a>', '</a>').s 
// 'This is a link'

Метод camelize
Он удаляет из обрабатываемой строки пробелы, символы подчёркивания, тире, и приводит эту строку к «верблюжьему» стилю.
var S = require('string');
S('---Foo---bAr---').camelize

👉 @sWebDev

Algolia Places

Algolia Places – библиотека JavaScript для автоматического заполнения форм. Она специализируется на адресах, может добавить карту в поиск и отобразить местоположение. Удивительно точная и сверхбыстрая библиотека повысит удобство работы пользователей с сайтом.

👉 @sWebDev

Next.js

Фреймворк был запущен командой React.js в качестве инструмента для рендеринга на стороне сервера. Разработчики, работающие с комбинацией Next и React.js, могут значительно упростить процесс разработки интерфейса.
Next.js поставляется с набором замечательных функций, таких как маршрутизация на стороне клиента и автоматическое разделение кода. Прежде всего, Next.js поставляется с полной поддержкой CSS, известной как styled-jsx, чтобы упростить разработку дизайна пользовательского интерфейса

👉 @sWebDev

Mithril.js

Mithril.js весит около 12kb в формате gzipped благодаря своему малому API. Он предоставляет механизм шаблонов с виртуальной реализацией DOM diff для рендеринга, утилиты для высокоуровневого моделирования с использованием функционального состава, а также поддержку маршрутизации и компонентности. Mithril.js имеет ряд похожих функций, как в React.js.

Mithril предлагает иерархические элементы MVC и различные безопасные шаблоны, которые поставляются с интеллектуальными различиями DOM, они используются для проверки высокопроизводительного рендеринга. Данный JavaScript Framework также поставляется с двумя очень впечатляющими функциями для Frontend Development - маршрутизацией URL-адресов и настраиваемой привязкой данных.

Преимущества

1. Чистый JavaScript.
2. Отлично работает с ES6, может выдерживать любую нагрузку.
3. Наличие интеллектуальной системы автоматической перерисовки.
4. Быстрее чем React.
5. Виртуальный DOM позволяет объединять HTML, XHTML или XML документы по определенным критериям.

Meteor.js

Полноценная инфраструктура Meteor.js обеспечивает быструю Frontend разработку для сквозных веб-приложений и мобильных приложений в JavaScript. Из-за своей модульной структуры библиотеки очень удобно использовать пакеты. Сегодня данная структура используется для разработки приложений в таких компаниях, как Mazda, Honeywell и IKEA

👉 @sWebDev

History

Этот плагин управляет состоянием страницы. Отправляет ссылку на уже подгруженную историю браузера. Состояние страницы при этом сохраняется в виде нормального URL и всё работает так, как будто вы на самом деле переходите с одной страницы на другую.

👉 @sWebDev

Owl carousel

Это плагин для создания слайдеров. Имеет интуитивные настройки точек остановки слайдера. Адаптивен. Отлично работает как на мобильной, так и на десктопной версии. Owl карусель поддерживает модульную структуру плагина. Таким образом, можно отсоединить плагины, которые не используются в проекте, или создать новые, которые необходимы. Поддерживает старые версии браузеров.

👉 @sWebDev

vue-clickaway

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

👉 @sWebDev

Anchorme.js

Это компактная и быстрая JavaScript-библиотека, предназначенная для поиска URL и адресов электронной почты в тексте и для преобразования их в рабочие гиперссылки. Вот её основные характеристики:

1. Высокая чувствительность, низкий процент ложноположительных срабатываний.
2. Валидация ссылок и адресов электронной почты по полному списку IANA.
3. Валидация номеров портов (при их наличии).
4. Валидация IP-адресов (при их наличии).
5. Поддержка URL, записанных символами, отличными от символов латиницы.

👉 @sWebDev

vue-good-table.

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

Эта библиотека способна решить большинство задач по работе таблицами, встающими перед разработчиком. И её название, «good-table» («хорошая таблица»), это — не просто слова. Это — действительно хорошая библиотека, которая предоставляет нам гораздо больше возможностей, чем можно ожидать.

👉 @sWebDev

AOS – Animate On Scroll

Работаете над одностраничным сайтом с эффектом parallax? Animate on Scroll добавит приятную анимацию при прокручивании страницы. Эта библиотека поможет вам создать привлекательный дизайн: в ней есть все, от эффектов затухания, до размещения статических привязок.

👉 @sWebDev

vue-datepicker

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

👉 @sWebDev

Anime.js

Анимация и микровзаимодействия сейчас в тренде. Anime.js добавит на сайт немного движения. Библиотека работает с CSS, SVG, атрибутами DOM и объектами JavaScript, что делает ее идеальной практически для любого проекта.

👉 @sWebDev

Bideo.js

Полноэкранные видео служат отличным фоном для сайта. Bideo.js – библиотека JavaScript для добавления видеофона, который хорошо смотрится на экране любого размера и плавно масштабируется.

👉 @sWebDev

Granim.js

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

👉 @sWebDev

Choreographer-js

Choreographer-js – простая библиотека JavaScript для анимации CSS. Ее легко использовать, и она действительно поможет вам создать для сайта сложную CSS-анимацию.

👉 @sWebDev

Multiple.js

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

👉 @sWebDev

Popper.js

Эта библиотека JavaScript поможет вам создать на сайте красивые попперы. Если вам интересно, что такое поппер, вспомните коммиксы. Когда герой о чем-то думает, из его головы вырывается маленький пузырь мыслей. Popper.js предлагает несколько способов упорядочить эти мысли, привязать к элементам и обеспечить их работу на экране любого размера.

👉 @sWebDev

Cleave.js

Вы когда-нибудь использовали поле формы, которое бы форматировало контент во время набора текста? Например, чтобы превратить 1234567890 в номер телефона с международным кодом: (123) 456-7890. Cleave.js – библиотека JavaScript, позволяющая добавить на сайт подобные функции.

👉 @sWebDev

Premonish

Premonish – библиотека JavaScript, которая анализирует движение курсора и предсказывает, с каким элементом пользователь будет взаимодействовать дальше. Это позволяет применить на сайте интересные триггеры анимации и помогает выделить некоторые призывы к действию.

👉 @sWebDev